3. Layout & spacing (p. 56)
Visual hierarchy is the most effective tool for making feel designed. De-emphasize secondary and tertiary information, highlight the elements that are most important.
Start with too much white space
White space should be removed, not added
Give something way too much space, then remove it until you're happy.
Dense UIs have thier place
Dashboard with lot's of information that need to be visible at once will feel busy.
Establish a spacing and sizing system
Limit yourself to a constrained set of values, defined in advance.
A linear scale won't work
Make two values in your scale no closer than 25%.
Defining the system
Example of a practical scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 384, 512, 640, 768px
Using the system
A spacing and sizing system will help you create better designs with less effort and in less time. Design advice doesn't get much more valuable than that.
You don't have to fill the whole screen
If you only need 600px, use 600px. Extra space around the edges never hurt anyone. Individual sections of an interface too, give each element just the space it needs.
Shrink the canvas
It's easier to design something small when the constraints are real. Start with a 400px canvas and design the mobile layout first. Then bring it to a larger size screen and adjust anything that felt like a compromise on smaller screens.
Thinking in columns
If you're designing a form that works best at a narrower width but feels unbalanced in a wide UI, see if you can split it into columns. Break the supporting text out into a separate column.
Don't force it
If you need a lot of space, go for it! Just don't feel obligated to fill it if you don't have to.
Grids are overrated
Outsourcing all of your layout decisions to a 12-column grid can do more harm than good. Don't be a slave to the grid, give your components the space they need and don't make any compromises until it's actually necessary.
Not all elements should be fluid
There are a lot of situations where it makes more sens for an element to have a fixed width instead of a relative width.
Consider a traditional sidebar layout: give the sidebar a fixed width that's optimized for its contents. The main content area can then flex to fill the remaining space.
With components too: don't use percentages to size something, unless you actually want it to scale.
Don't shrink an element until you need to
Give elements a max-width and force them to shrink when the screen gets smaller than the max-width.
Relative sizing doesn't scale
There isn't any real relationship to define size relative to the body copy size. Elements that are large on large screens need to shrink faster than element that are already fairly small.
Relationships within elements
Buttons, for example, do scale up or down. But padding gets more generous at larger sizes and disproportionately tighter at smaller sizes. The large button feels like a larger button and the small button feels like smaller buttons, not like we simply adjusted the zoom.
Avoid ambiguous spacing
- in a form, increase the space between each form group so it's clear which label belongs to which input
- in an article design, increase the space above section headings
- in a bulleted lists, the space between bullets should be bigger than line-height inside a bullet
- horizontal components need more space around the group