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."

Book Notes

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.

Useful Constraints

• 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

• 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.

Designing Text

• 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:

Creating Depth

• 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.

Finishing Touches

• 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.