Design Basics for Developers

Learn to see a page the way a designer does: show what matters first, line things up, give them room, choose type that reads well and colors with enough contrast, then add finishing touches with restraint.

Updated

Seeing Like a Designer

  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.

Finishing Touches

  1. Finishing Touches: Rounded Corners, Shadows and Gradients (Apprentice): border-radius rounds corners, a soft layered box-shadow lifts a card off the page, linear-gradient() and radial-gradient() blend colors in a background, and opacity fades a whole element, and each looks best used sparingly.

Exercise: Redesign the Farmers Market Page

  1. Exercise: Redesign the Farmers Market Page (Journeyman): Redesign the Saturday Farmers Market's cluttered event page with a type scale in rem, readable line lengths and line heights, a palette that passes 4.5 to 1 contrast, rem spacing and soft vendor cards, and let ten checks measure each part.