Visual hierarchy: controlling what people see first

0:00 Visual hierarchy

Take out your phone and scroll your feed for five seconds. How many posts did you actually read? Probably none. But you noticed a few. A face. A big number. A bright color. That split second is where design wins or loses. And the thing that controls it is visual hierarchy. In this lecture, you'll learn what hierarchy is, the seven levers that create it, a test that shows you what people see first, and a critique checklist you can run on any design in five minutes. By the end, you'll be able to look at a cluttered post and fix it in three moves, so the right thing gets seen first.

0:49 Why hierarchy matters

Why does hierarchy matter so much? Because people don't read designs. They scan them. On a phone, in a feed full of competition, you get a moment of attention, and the viewer's eye goes wherever the design pulls it. If everything shouts, nothing is heard. Think of a newspaper front page. There's one giant headline, a big photo, and then smaller stories. You know instantly what the lead story is. Now imagine every headline the same size. You'd give up. Hierarchy is simply deciding what matters most, and then making it obvious. It's the difference between a design that communicates and a design that decorates.

1:35 Seven levers

Here are the seven levers of hierarchy. Size: bigger things are seen first. Weight: bold beats light. Color: bright or saturated beats muted. Contrast: the strongest light-dark difference pulls the eye. Position: top and left are usually seen early in left-to-right languages, and top and right in right-to-left scripts like Arabic and Urdu. Space: an element surrounded by empty space feels important. And imagery: faces and eyes attract attention almost automatically. Here's the key idea. Use at least two levers on your most important element, and dial down the levers on everything competing with it. Hierarchy is as much about making things quieter as making one thing louder.

2:22 The squint test

Now the test that shows you the truth. It's called the squint test. Step back from your design, or zoom out, and squint until you can't read anything. What's left? A few shapes and blobs of contrast. The biggest, darkest or brightest blob is what people see first. If that blob isn't your key message, your hierarchy is wrong. In digital tools, you can do this more precisely. Duplicate the design, add a heavy blur, and look at it. The squint test works because it removes reading and shows you the raw visual weight, which is exactly what a scrolling thumb responds to.

3:07 Worked example 1: a webinar post

Worked example one, simple. A webinar announcement. The original has the company logo huge at the top, a decorative illustration, and then the title, date, speaker and registration link, all in the same medium size. Squint test: the logo wins. But nobody scrolls to see a logo. The job is to get people to register. So, first, the title becomes the dominant element, large and bold. Second, the speaker's face gets a tight crop, because faces pull attention and build trust. Third, the date and register now are grouped into one high-contrast button shape. The logo shrinks to a corner. Same content, completely different result.

3:53 Worked example 2: a course sale post

Worked example two, a business scenario, with illustrative details. Bilal runs an online course business in Karachi and posts a sale graphic. It has confetti, a large logo, six lines of text in the same size, and a tiny date and link in the corner. His ads get plenty of impressions but few clicks. Let's apply the checklist. The job? Get people to see the offer and tap. So the discount headline becomes the heaviest, highest-contrast element. One course image, cropped tight, comes second. The date and enroll now join a single button shape. He cuts the confetti, halves the logo, and reduces six lines of text to two. And one more thing. The discount must be genuine, with clear terms, because misleading price claims break consumer rules.

4:49 Watch me do it: five-minute critique

Watch me do it. I'm going to run the five-minute critique on a real-world style event poster. Question one, the job: get people to buy tickets for a Saturday food festival. Question two, what do I see first, second, third? I blur it. First, a big abstract pattern. Second, the sponsor logos. Third, the festival name. Question three, does that match the job? No. Question four, the levers: the name is small and thin, so I make it bigger and bolder, and I place it on a calm area. Question five, competition: I mute the pattern and move sponsor logos into one strip at the bottom. Question six, phone size: I shrink it to a third of the screen and check the name reads in under two seconds. It does. Question seven: one call to action, get tickets. Done.

5:49 Direction and culture

A quick note on reading direction and culture, because hierarchy isn't universal. In left-to-right languages, eyes often start top left. In right-to-left scripts like Arabic and Urdu, they often start top right. So if you design a bilingual post for audiences in the UAE, Saudi Arabia or Pakistan, think about which script leads and where the eye enters. Also, cultural meaning of color changes emphasis. A red that means sale in one market may signal danger or celebration in another. None of this changes the principle. It just changes which lever you pull, and where.

6:30 Common mistakes

Common mistakes. Making the logo the hero, when the audience came for the offer or the idea. Using the same size for everything, so nothing leads. Adding a second or third call to action, which splits attention. Using decoration that's stronger than the message, like busy patterns and confetti. Relying on color alone for emphasis, which fails for color-blind viewers and in grayscale. And designing at desktop size, then publishing to phones, where your beautiful small text disappears. Always check at the size people will actually see it.

7:08 Train your eye

Let's put a critique habit in place, because hierarchy is a skill you train. Once a week, collect five ads or posts from your feed. For each one, write down what you saw first, second and third. Then guess what the advertiser wanted you to see. When they don't match, write one fix. You'll start to see patterns quickly. Strong designs have one clear lead element, use two or three levers on it, and stay quiet everywhere else. And you'll start to see the same mistakes you make in your own work. That's how your eye gets faster.

7:51 Recap and try this now

Let's recap. People scan, they don't read, so hierarchy decides what gets seen. Use the seven levers: size, weight, color, contrast, position, space and imagery, with at least two on your key element, and quiet everything else. Use the squint or blur test to see the real order, and run the five-minute critique before you publish. Try this now. Take one of your recent posts. Write down its primary, secondary and tertiary content. Redesign it so the blur test shows that order, then put the before and after side by side at phone size. You'll feel the difference immediately.