Top 3 Quotes
- "Visual hierarchy is the most effective tool you have for making something feel 'designed'"
- "If something is longer than two or three lines, it will almost always look better left-aligned."
- "It’s not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI."
Start small and iterate
- Start with a feature, not a layout: Say you’re building a flight booking service, you could start with a feature like “searching for a flight”.
- Add details later: In the earliest stages don’t get hung up about things like typefaces, shadows, icons, etc.
- Design in grayscale: this forces you to use spacing, contrast, and size to do all of the heavy lifting.
- Don’t design too much up front: you don’t need to design every single feature in an app before you move on to implementation; in fact, it’s better if you don’t.
- Work in cycles: iterate on the working design until there are no more problems left to solve, then jump back into design mode and start working on the next feature.
Choosing a Design Personality
- Font choice: Typography plays a huge part in determining how a design feels.
- Color: You really just need to pay attention to how different colors feel to you.
- Border radius: How much you round the corners in your design can have a big impact on the overall feel. Make sure to stay consistent.
- When you design without constraints, decision-making is torture.
- Don’t reach for the color picker every time you need to pick a new shade of blue — choose from a set of 8-10 shades picked out ahead of time.
- Define a restrictive type scale in advance and use that to make any future font size decisions.
- When you build systems like this, you only have to do the hard work of picking the initial values once instead of every time you’re designing a new piece of UI.
- Hierarchy is the most effective tool you have for making something feel “designed”.
- Don't rely on font size to control your hierarchy — try using font weight or color to do the same job.
- Stay away from font weights under 400 for UI work — they're too hard to read at smaller sizes
- Labels are a last resort: e.g. for a real estate app, something like “Bedrooms: 3” could simply become “3 bedrooms”.
- De-emphasize labels by making them smaller, reducing contrast, or using a lighter font weight.
- Separate visual hierarchy from document hierarchy.
Layout and Spacing
- Start with too much white space – give every element a little more breathing room, then remove it until it you’re happy with the result.
- Establish a spacing and sizing system. 16px is a great number to start with.
- Just because you have 1200-1400px of space to fill, doesn’t mean you need to use it.
- Grids are overrated. There are a lot of situations where it makes much more sense for an element to have a fixed width instead of a relative width.
- Let go of the idea that everything needs to scale proportionately.
- Always make sure there’s more space around a group than within it.
- Most interfaces use way too many font sizes.
- Stick to px or rem units — it’s the only way to guarantee you’re actually sticking to the system.
- Typefaces that come in a lot of different weights tend to be crafted with more care and attention to detail.
- Fonts meant for headlines usually have tighter letter spacing and shorter lowercase letters (a shorter x-height), while fonts meant for smaller sizes have wider letter-spacing and taller lowercase letters.
- If a font is popular, it’s probably a good font.
- Keep your line length in check. Make your paragraphs wide enough to fit between 45 and 75 characters per line (a width of 20-35em should work).
- Narrow content can use a shorter line-height like 1.5, but wide content might need a line-height as tall as 2.
- Use a taller line-height for small text and a shorter line-height for large text.
- Not every link needs a color.
- Don’t center long form text. If something is longer than two or three lines, it will almost always look better left-aligned.
- Tighten headlines when using fonts designed to be legible at small sizes (e.g. Open Sans).
- Increase the letter-spacing of all caps text.
Working with Color
- Greys: True black tends to look pretty unnatural, so start with a really dark grey and work your way up to white.
- Primary color(s): Just like with greys, you need a variety (5-10) of lighter and darker shades.
- Accent colors: On top of primary colors, every site needs a few accent colors for communicating different things to the user.
- Expect to have as many as ten different colors with 5-10 shades each for a complex UI.
- Ditch hex for HSL - it represents colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.
- Define your shades up front. Choose the base color first, then find the edges, then fill in the gaps.
- Call your darkest shade 900, our base shade 500, and our lightest shade 100.
- Greys don’t have to be grey. in practice, a lot of the colors that we think of as grey are actually saturated quite heavily:
- Use shadows to convey elevation.
- You don’t need a ton of different shadows — five is usually plenty.
- Don’t think about the shadow itself, think about where you want the element to sit on the z-axis and assign a shadow accordingly.
- Use solid shadows for flat designs.
- Use overlapping elements to create layers.
Working with Images
- Bad photos will ruin a design, even if everything else about it looks great.
- Hire a professional photographer or use high quality stock photography.
- Text needs consistent contrast. Add an overlay or lower the image contrast, colorize the image, or add a text shadow.
- Don’t scale up icons. If small icons are all you’ve got, try enclosing them inside another shape.
- Don’t scale down screenshots. If you want to include a detailed screenshot in your design, take the screenshot at a smaller screen size or take just a partial screenshot.
- If you really need to fit a whole-app screenshot in a tight space, try drawing a simplified version of the UI with details removed and small text replaced with simple lines.
- Beware user-uploaded content - control the shape and size of images, or try using a subtle inner box shadow to prevent background bleed.
- Supercharge the defaults. e.g. for a bulleted list, try replacing the bullets with icons.
- For testimonials, try “promoting” the quotes into visual elements.
- For links, try changing the color and font weight, or using a thick and colorful custom underline that overlaps the text.
- If you’re working on a form, using custom checkboxes and radio buttons.
- Add color with accent borders - it can go a long way towards making something feel more “designed.
- Decorate your backgrounds by changing the background color, use a slight gradient (hues no more than about 30° apart).
- Add a simple shape or illustration instead of decorating an entire background, or use small chunks of a repeatable pattern.
- Don’t overlook empty states - try incorporating an image or illustration to grab the user’s attention, and emphasizing the call-to-action.
- Use fewer borders - too many of them can make your design feel busy and cluttered. Use two different background colors instead of borders.
- Add extra spacing to create separation between elements.
- Break a dropdown into sections, use multiple columns, add supporting text or colorful icons.
- For tables, if a column doesn’t need to be sortable, try combining it with a related column and for some interesting hierarchy. Add images if it makes sense, or use some color.
- Instead of radio buttons, try selectable cards instead.