Design & Tools

Hierarchy tells the eye where to look first. Make the most important thing the biggest, boldest or most colourful, and keep everything else quieter.

• One main message per screen: a clear headline and one main button
• Group related things close together and leave space between groups
• Align elements to a grid so edges line up
• Squint at your page: whatever you still see is your hierarchy

Start small: one main colour, one accent, and neutrals (white, greys, near-black). Use the main colour for buttons and links so users learn what is clickable.

:root {
  --brand: #e63946;      /* main buttons and links */
  --accent: #f4a300;     /* highlights, badges */
  --ink: #1d1d1f;        /* body text */
  --muted: #6b6b73;      /* secondary text */
  --surface: #ffffff;    /* cards */
  --bg: #faf6ef;         /* page background */
}

.button {
  background: var(--brand);
  color: white;
}

Palette helpers: Coolors (generate palettes), Adobe Color (colour wheel rules) and Realtime Colors (preview a palette on a real page).

Most of a website is text, so type choices matter more than anything else. Stick to two fonts at most: one for headings, one for body text.

body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;        /* 16px: never go smaller for body text */
  line-height: 1.6;       /* room between lines */
}

h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);  /* scales with screen size */
  line-height: 1.1;
}

p { max-width: 65ch; }    /* about 65 characters per line reads best */

• Use a type scale: for example 1rem, 1.25rem, 1.5rem, 2rem, 3rem
• Keep lines to roughly 50 to 75 characters wide
• Bold and size create hierarchy; avoid ALL CAPS for long text
• Free fonts: Google Fonts and Fontsource

Pick a spacing scale and reuse it everywhere. A common one is multiples of 8px: 8, 16, 24, 32, 48, 64. Consistent spacing is the cheapest way to look professional.

:root {
  --space-1: 0.5rem;  /* 8px  */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2rem;    /* 32px */
  --space-6: 4rem;    /* 64px */
}

.card {
  padding: var(--space-3);
  border-radius: 16px;
}
.card + .card { margin-top: var(--space-3); }

Choosing the right format keeps pages sharp and fast.

<img
  src="hero.webp"
  alt="A rhino coding on a laptop"
  width="800" height="600"
  loading="lazy"
/>

• Always write meaningful alt text
• Set width and height so the page does not jump while loading
• Compress images before uploading (Squoosh, TinyPNG)
• Free icons: Lucide, Heroicons. Free photos: Unsplash, Pexels

You do not need all of these. Start with one design tool, one image editor and one compressor. Free options are enough to build a full portfolio.

A simple workflow when you build a page from a design:

1. Sketch the page on paper or in a free whiteboard
2. Build a quick layout in Figma or Penpot (mobile first)
3. Pick colours, fonts and spacing, then save them as tokens
4. Export icons and logos as SVG, photos as WebP
5. Build the HTML structure, then style it with your tokens
6. Compare your page to the design on a phone and a laptop

• Redesign the home page of a site you use daily, in Figma or Penpot
• Make a logo in Inkscape and export it as an SVG favicon
• Build a style guide page: your colours, fonts, buttons and spacing
• Design three social posts in Canva that share one palette and font pair
• Turn your design into a real HTML and CSS page