Decide what a screen shows first, second and last

A visual hierarchy is the order in which a design guides the eye. Every screen has one. The only question is whether you chose it or it happened.

Set it before anyone sees the screen. A person shown a flat design reads the flatness as your judgement, not a draft.

1. Rank before you draw

1. Say the order in words, at two levels. For one named person in their real moment ("an owner at her desk on Monday, with a question waiting"), write: "first they see X, then Y, then Z." Do it for the screen's sections, then again inside each section. If you can't rank them in words, the layout won't either.
2. Rank by the point of this screen, for this person. Run the why-this-piece skill first and answer its questions for the screen: what is it for, why would its person care, what is the goal. Those answers decide what ranks first. Work the order out fresh for each screen and each person; an order that was right for another product doesn't carry over.
3. Draw every list at its realistic maximum. Not the five rows that fit. Ask "what about 9? what about 15? what about 30 years?" A set that grows with time (months, orders, messages, years) is content, not navigation: give it its own page, and keep the navigation for the fixed sections.

2. Make the ranks visible

4. One large thing, at most three sizes. One element is the biggest on the screen. Sizes are small, medium and large, each tied to a role (heading, body, label) that looks the same everywhere. Sizes that are close but not equal look like a mistake.
5. Spend the loudest treatment once. One element is the darkest, most saturated or the only filled button, and it is the main action or the main fact. If everything is emphasised, nothing is.
6. Group by space and enclosure before rules and labels. Related things sit closer to each other than to the next group. Use a panel only where a group must read as one thing.
7. Put information where the eye lands. People look at pictures and figures that carry information (a real price, the real receipt, a real before-and-after) and skip decoration. A face doesn't pull attention to a corner nobody was looking at.
8. The main goal and the main action go in the first screen, with a cut edge at the fold so it's clear there's more below.

3. Check it

9. Squint test, at desktop and phone widths. Blur a screenshot until words go. Write down what you can still see, in order, and compare it with step 1. When they disagree, the screenshot is right and your words are wrong.
10. Do it per section too. A page with one strong hero over a column of flat sections has set the first level and skipped the second.
11. Don't call it done on your own eyes. You know what everything means; the viewer gives it two or three seconds. Show it to someone outside the work, or a fresh model with no context, and ask what they saw first, second and third.

Mistakes this prevents

1. Everything emphasised, so nothing is.
2. A decorative picture where an informative one could go.
3. Judging on your own big screen with all the context in your head.
4. Designing the template and not the content that will fill it: four-letter names, five months, one account.
5. A hierarchy for the page but not inside each section.
6. Navigation that grows with the user's history.