Refactoring UI
Adam Wathan & Steve Schoger
-
Start with a feature, not a layout.
-
Detail comes later. Start low-fi. By designing in grayscale you’re forced to use spacing, contrast and size to make things distinct.
-
Don’t obsess over edge cases and particularities (e.g. heavy users, error messages, multiple events).
-
Go low-fi to hi-fi on a feature single feature and then move on. Don’t do lots of low-fi, then all the hi-fi.
-
Leave out functionality you aren’t ready to build. Design the smallest useful version you can ship. Expect all features to be hard to build.
-
Serif is elegant/classic. Rounded sans serif is playful. Large border radii are playful. Small radii are neutral. No radius is formal.
-
Define systems in advance to prevent you from being paralysed by choice.
-
When adding some secondary text to a coloured background, pick a supporting hue rather than a grey or white with low opacity.
-
Emphasize by de-emphasizing. If you can’t make an element stand out how you want, de-emphasize the other elements.
-
If you have to use labels, these should generally be secondary. The exception is on information-dense pages like specification sheets where users are scanning for ‘width’, ‘height’ etc.
-
Section titles are more often labels than headings - they are supportive content. As such, they should be de-emphasised relative to the content.
-
Primary actions should be obvious (solid, high contrast bg colours); secondary actions should be clear but not prominent (outline styles or lower contrast bg colours); tertiaries should be discoverable but unobtrusive (link style).
-
Start with too much white space and then gradually remove it until happy with the result. So add padding and then take away.
-
Make scaling decisions based on a scaling system to decide on sizes. No values in the scale should be closer than 25%. So if debating a 400px thing, you should consider 500, or 300, not increments of any less.
-
When comparing sizes between things, establish three values with your base as the middle and then compare against the values either side.
-
See examples for a spacing/sizing system here
-
Don’t make things full-width unnecessarily. If you’re designing something that works best at a narrower width but feels unbalanced in wide ui, break it into columns.
-
Elements that are large on large screens need to shrink faster than elements that are already fairly small. i.e. the difference between small elements and large elements should be less extreme at small screen sizes.
-
Avoid ambiguous spacing between elements. Make sure there’s more space around the group than within it.
-
For a range of font-sizes, use the tailwind defaults. Stick to REM to make sure you’re keeping to the system. EM will do funny things.
-
Pick fonts by sorting by ‘popularity’ on Google fonts. Trust the wisdom of crowds.
-
Lines of text should be 45-75 chars. 20-35 em.
-
Always align differnt font sizes that are next to each other using baseline.
-
Line height will be influenced by paragraph width and font size. The wider the paragraph, the higher the line height. The smaller the font, the higher the line height.
-
If text is longer than 2-3 lines, it should be left-aligned.
-
Numbers should be right-aligned.
-
If using all-caps text, increase the letter spacing.
-
True black is unnatural, so start with dark grey.
-
Improve accessibility by using dark text on a lighter background.
-
Small shadows for buttons, medium for dropdowns, big for modals.