Seeing Like a Designer

Seeing Like a Designer: Hierarchy, Alignment and Whitespace, Type That Reads Well: Scale, Line Length and Pairing, Color That Works: Palettes and Contrast.

Updated

  1. Hierarchy, Alignment and Whitespace (Apprentice): A page looks designed when the most important thing is seen first, everything lines up on a few shared edges, and space groups the things that belong together, and CSS sets all three with size, weight, color, text-align, padding and margin.
  2. Type That Reads Well: Scale, Line Length and Pairing (Journeyman): Text reads well when its sizes come from a type scale in rem, its lines hold about 45 to 75 characters, its line height suits body text and headings, and the page uses two fonts at most.
  3. Color That Works: Palettes and Contrast (Journeyman): A small palette (a brand color, neutrals, an accent, and success and error colors) makes a site look like one brand, and text that meets a contrast ratio of 4.5 to 1, with meaning never shown by color alone, makes it readable for everyone.