Spacing
8px spacing benefits:
- Allows consistent scalability.
- Improves data intake through better legibility.
- Provides users a more consistent user experience.
- Eliminates guesswork during the designing and developing process.
- Defines a visual hierarchy by giving meaning to all elements.
Guidelines
Component spacing
When building individual components the spacing scale should always be used. All USANA and Pando Design System components are built using this scale.
There should be an 8 to 48 pixel spacing between components. Under certain circumstances, use 4px if you require a smaller number.
.jpg)
Layout spacing
Layouts should use values between 8 and 96 pixels. In addition to visualizing the relationship between different components, it can also provide an overview of the hierarchy and structure between them.
Layouts should be 8-96px wide.
.jpg)
Visual Hierarchy
A design’s arrangement to guide the eye to consume each design element in the order of its intended importance is known as the visual hierarchy
Build visual hierarchy by using:
- Alignment — Misaligned elements stand out over aligned ones.
- Color — Bright colors typically attract more attention than muted ones.
- Contrast — Dramatically contrasted colors are more eye-catching.
- Proximity — Closely placed elements seem related.
- Repetition — Repeating styles may suggest content is related.
- Size — Users notice larger elements more easily.
- Texture & Style — Richer textures stand out over flat ones.
- Whitespace — More space around elements draws the eye to them.
Best Practices
Maximize comprehension and reduce cognitive load when you call attention to a particular action, command, or section.
Best practices help to:
- Combine meaningful text to support the user’s access to product and its associated information.
- Assist users with reading and attention difficulties.
- Modify where label text doesn’t fit.