Introduction
Spacing is the negative area between elements and components. Layouts use spacing to establish harmony, balance, and hierarchy. This hierarchy makes content digestible by guiding users through important information and actions.
Spacing is important because it...
- Helps make content easier for users to consume and visually signals that this is going to be an easy experience
- Establishes a hierarchy of information that relays important actions and information to the user
- Creates consistency throughout SOROS
Making connections with your grid
To create a stronger design point of view, and make consistency with spacing easier, we've opted to use an 8-pixel UI grid, paired with a 4-pixel baseline grid. The spacing options between elements should be multiples of 8 (8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 160).
Why using the 8-pixel grid matters
Fewer—but better—decisions
The advantage of working in an 8-pixel grid is there are fewer numbers to work with than a 4-pixel grid, making it easier to be consistent. By focusing on fewer, but more purposeful, spacing options, it makes it faster for us to get to better decisions.
Reducing cognitive load
Giving more spacing between elements can help reduce cognitive load for customers. By providing more breathing room for the content, it allows them to understand the most important actions and information that are required of them, and digest the information being presented. It also provides our users with visual cues that say, “Hey, we’re here to guide on what you can do next.”
Max widths
We suggest a max width of 1440px for the content area (not including margins).
Text widths
Your text width should not be as long as your max width (1340px). In fact, a good rule of thumb for your text widths is no more than 65 characters per line. For SOROS default body text, we aim for about 712 pixels for text width.
It's sometimes helpful to also break up content by pairing it with a hero image. By doing this, you're visually signaling that this is an effortless conversation.
When in doubt, do the 3-minute UI zhush
By simply improving the spacing in your design, you will create a far more organized, clean, and cohesive layout.
- What information is related? Use 4 to 16 px spacing for related content.
- What critical actions does the user need to take? Use 16 to 32 px spacing between the actions and their related content
- Are most of my horizontal margins and paddings in increments of 8
- The final question you can ask yourself: Are these elements friends?!