You don’t need to be a designer to build a beautiful site. You just need a trained eye for four things: spacing, type, color and contrast. Master these and your site will instantly look more professional.
Spacing: let it breathe
White space (empty space) is not wasted space. It groups related things and separates unrelated ones.
- Use consistent spacing: pick a few sizes from your theme’s spacing scale and reuse them.
- Put more space between sections than between items inside a section.
- Keep text columns comfortably narrow so lines aren’t too long to read.
Typography: two fonts is plenty
- Use one font for headings and one for body text, or even a single versatile family.
- Make body text comfortably large and give it generous line height.
- Create clear hierarchy: headings should be obviously bigger or bolder than body text, and follow a logical H2, H3 order.
- Keep font files lean. Every extra weight you load can slow the page.
Color: a small, purposeful palette
Pick a simple palette: a background, a text color, one main brand color and one accent. Use your accent sparingly, mainly for buttons and links, so it draws the eye to actions you want visitors to take. Set these once in global styles.
Contrast: readable for everyone
Contrast is the difference between text and its background. Low-contrast text (light gray on white, for example) is hard to read, especially on phones in sunlight and for people with low vision.
The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA. Free contrast checkers let you paste two colors and see if they pass.
Professor’s tip: Squint at your page. Whatever still stands out is what visitors notice first. If it’s not your headline or main button, adjust size, spacing or contrast until it is.
Want more? Our design secrets section goes deeper on layouts, palettes and font pairings.
Your assignment
- Choose your palette (four or five colors) and check your text and button colors with a contrast checker.
- Pick your heading and body fonts and apply them in global styles.
- Do the squint test on your homepage and fix the first thing that looks off.
