skip to content

[EXAMPLES] /examples?view=think

What I look at

Real sites, the design systems behind the best of them, breakdowns from the people who made them, and the way I read all of it.

Showing How to think

How I look at a site

When I open a site I like, I don’t try to take it all in. I look at it in the same order every time, and I leave with one thing. Here is that order.

  1. [01]

    Hierarchy first

    Before anything else, I squint. I blur my eyes until I can’t read the words, and I ask what I see first, second and third. That order is the hierarchy: what the page wants me to look at, and in what order.

    If the first thing I see isn’t the most important thing, nothing else on the site will save it. Size, weight, contrast and space do this work. Colour and motion come later.

    → sites with clear hierarchy

  2. [02]

    Then type

    Next I count the type sizes. Good sites use fewer than I expect, often four or five. I look at the line length of the body text, the gap between lines, and how big the jump is from body to heading.

    I note one pairing: which family does the shouting and which does the reading. That pairing is often the whole personality of the site.

    → my rules for scales and type

  3. [03]

    Then colour

    I count the colours too. Most sites I love have a ground, an ink, a few greys and one accent. The accent tells me where to click. If everything is loud, nothing is.

    I check what happens to text on colour. Is it still easy to read? The best sites pick black or white by contrast, never a tint that almost works.

    → make colour look expensive

  4. [04]

    Then motion

    Last, I scroll slowly and click everything. I watch how long things take and how they slow down at the end. That slowing down is the ease: the curve that sets how a movement speeds up and settles.

    I ask whether the motion explains something (where a panel came from, what just changed) or just performs. I keep the first kind.

    → pick an ease

Take one thing from each site

I write down a single idea per site. The way one footer lists its links. The size jump between two headings. A hover that lifts a card by one shade of grey. One idea is small enough to reuse and too small to copy a whole look.

Ten sites later I have ten ideas, and they mix into something that is mine.

Steal a palette, not a layout.

A palette, a type pairing or an ease is an idea. You can carry it into your own work and it still fits. A layout is someone else’s answer to someone else’s content. Copy it and your page ends up saying their thing.

Want to practise? Open the sites, pick one, and go through the four steps. Write down one thing. Then close the tab.