See the effect. Find its name.
Find names for layouts, motion and interactions. Turn ideas into clear requirements.
Start with familiar effects
32 termsWorkspaceOverview · Projects · Team
Total visits12,480↗ 12.8%
Active users1,286↗ 8.2%
Complete tasks86↗ 16%
Recent projects Status
Website redesignIn progress
Order managementCompleted
Data visualizationIn progress
Website redesignCompleted
Order managementIn progress
Data visualizationCompleted
Website redesignIn progress
Order managementCompleted
Data visualizationIn progress
Website redesignCompleted
Order managementIn progress
Data visualizationCompleted
Use collapsible side navigation to organize admin tools and leave room for the main content.
Layout
Project overview Projects
◒AnalyticsUpdated today
◫Design systemUpdated today
✳WorkspaceUpdated today
◇ProjectsUpdated today
◐MarketingUpdated today
▦Content hubUpdated today
Arrange equally sized cards in rows and columns.
Layout
MOTION PREVIEW
Everything is ready
240ms · ease-outMake every change feel natural.
View projectReveal or hide an element by changing its opacity.
Motion
DRAWER
Project 1View
Project 2View
Project 3View
Order detailsKeep the current context
Reveal details from an edge while preserving the current page context.
Interaction
Project overview Projects
◒AnalyticsUpdated today
◫Design systemUpdated today
✳WorkspaceUpdated today
◇ProjectsUpdated today
◐MarketingUpdated today
▦Content hubUpdated today
Pack cards of different heights into columns.
Layout
MOTION PREVIEW240ms · ease-out
New project
Invite team
Publish
Introduce related elements one after another with small delays.
Motion
WorkspaceOverview · Projects · Team
Total visits12,480↗ 12.8%
Active users1,286↗ 8.2%
Complete tasks86↗ 16%
Recent projects Status
Website redesignIn progress
Order managementCompleted
Data visualizationIn progress
Place primary navigation across the top of the page.
Layout
WorkspaceOverview · Projects · Team
Total visits12,480↗ 12.8%
Active users1,286↗ 8.2%
Complete tasks86↗ 16%
Recent projects Status
Website redesignIn progress
Order managementCompleted
Data visualizationIn progress
© Workspace · Help center
Place the main content between two side columns, below a header and above a footer.
Layout
Files
Total visits12,480↗ 12.8%
Active users1,286↗ 8.2%
Complete tasks86↗ 16%
Recent projects Status
Website redesignIn progress
Order managementCompleted
Data visualizationIn progress
Divide a workspace into adjacent areas that can be resized.
Layout
WorkspaceOverview · Projects · Team
Total visits12,480↗ 12.8%
Active users1,286↗ 8.2%
Complete tasks86↗ 16%
Recent projects Status
Website redesignIn progress
Order managementCompleted
Data visualizationIn progress
Website redesignCompleted
Order managementIn progress
Data visualizationCompleted
Website redesignIn progress
Order managementCompleted
Data visualizationIn progress
Website redesignCompleted
Order managementIn progress
Data visualizationCompleted
Keep table headings visible as rows scroll underneath.
Layout
Orders
Total visits12,480↗ 12.8%
Active users1,286↗ 8.2%
Complete tasks86↗ 16%
Recent projects Status
Website redesignIn progress
Order managementCompleted
Data visualizationIn progress
Keep a collection visible while showing details of the selected record.
Layout
MOTION PREVIEW
Everything is ready
240ms · ease-outMake every change feel natural.
View projectMove an element into view from an edge.
Motion
MOTION PREVIEW
Everything is ready
240ms · ease-outMake every change feel natural.
View projectBring an element into view by increasing its scale.
Motion
MOTION PREVIEW240ms · ease-out
Member permissions and notifications
Expand or collapse the space occupied by optional content.
Motion
HOVER TO EXPLORE
Everything is ready
240ms · ease-outMake every change feel natural.
View projectRaise a surface slightly when it is hovered or focused.
Motion
MOTION PREVIEW
240ms · ease-out
Move a subtle highlight across placeholder shapes while content loads.
Motion
Good design
makes content clearer.
Focus on content, hierarchy and thoughtful details.
Explore design
Use translucent surfaces and background blur to suggest frosted glass.
Visual style
Good design
makes content clearer.
Focus on content, hierarchy and thoughtful details.
Explore design
Use paired light and dark shadows to suggest surfaces raised from a similar background.
Visual style
Good design
makes content clearer.
Focus on content, hierarchy and thoughtful details.
Explore design
Use simple shapes and colors with little simulated depth.
Visual style
Good design
makes content clearer.
Focus on content, hierarchy and thoughtful details.
Explore design
Reduce decorative elements and prioritize essential content.
Visual style
Good design
makes content clearer.
Focus on content, hierarchy and thoughtful details.
Explore design
Blend two or more colors across a surface.
Visual style
Good design
makes content clearer.
Focus on content, hierarchy and thoughtful details.
Explore design
Define surfaces and controls primarily with visible outlines.
Visual style
Good design
makes content clearer.
Focus on content, hierarchy and thoughtful details.
Explore design
Use a diffuse shadow to separate a surface from its surroundings.
Visual style
Good design
makes content clearer.
Focus on content, hierarchy and thoughtful details.
Explore design
Clearly separate text, controls and surfaces with strong contrast.
Visual style
MODAL
Project 1View
Project 2View
Project 3View
Order detailsKeep the current context
Focus attention on a short task in a dialog above the page.
Interaction
COMMAND
Search commands…
Open project
Switch workspace
Search available commands from a compact keyboard-friendly panel.
Interaction
POPOVER
Project settings · Public
Open popover
Display a small contextual panel beside its trigger.
Interaction
DISCLOSURE
How do I get started?
Start by choosing a term.
Where is my data saved?
Reveal optional information only when it is needed.
Interaction
TABS
OverviewMembersSettings
12,480Total visits
Switch between related views within a single section.
Interaction