Visual hierarchy with AI: what comes first

I asked AI for the same thing three times: “Design the home screen of a mobile banking app. Make it look modern and clean.” Each time in a new conversation. The three answers were so alike that two used the same user name, Ana Martínez, and all three made up the same card ending in 4821.

It isn’t that AI designs badly. It designs the average: the balance in large type on a coloured card, four quick actions and the latest transactions. It’s a reasonable pattern, the same one many real apps use. The problem shows up when the person opening the app needs something else, like paying a credit card that is due tomorrow.

In short:

• Visual hierarchy: the order in which a screen is read: what you see first, what comes next and what can wait.

• Size: a few clearly different levels make the important thing read first.

• Contrast: a single accent colour, kept for the main action.

• Similarity: things that look alike read as a group; what’s urgent has to look different.

• Squint test: blur the screen and see what still stands out.

This article goes with the second episode of Back to Basics, a series about UX/UI fundamentals for working with AI. The case is fictional: Laura is a made-up user who opens her banking app because her card is due tomorrow. The AI answers are real and unedited. The second version of the design was made with AI from a fuller brief and then refined in a design review.

1. The experiment: three requests, almost the same screen

On 8 November 2026 I ran the same brief through Claude Opus 5.5 in three new conversations, with no prior context. This is what they had in common:

• Top: a greeting with a name and the available balance on a card with a purple gradient.

• Middle: four round buttons of the same size: send, receive, pay and more.

• Bottom: the month’s spending or budget and the latest transactions.

It’s one tool and one brief, so it doesn’t prove that every AI does the same. But it shows something useful: when you don’t say what matters, AI picks what’s most common. And what’s most common doesn’t know your user.

2. What visual hierarchy is

Nielsen Norman Group describes it as arranging elements so they are read in order of importance (Visual Hierarchy in UX). Kelley Gordon names three main tools: scale, colour and contrast, and grouping by proximity or common regions.

Before using any of them, you have to answer a question no tool can: what does this person need to see first, right now? For Laura, the answer is the payment that’s due. For someone else, on an ordinary day, it might be the balance.

3. Size: a few levels, clearly different

I measured the font sizes you can see on the AI’s screen. After the balance, at 36 px, all the text sits between 11 and 20 px, and several sizes go up one pixel at a time: 13, 14, 15 and 16 px. At that distance the eye doesn’t see levels. It sees an even band where everything weighs about the same.

The same Nielsen Norman Group guide recommends using few sizes, three at most, and no more than two large elements per screen. In the second iteration we used three levels: 32 px for the amount due, 16 px for the balance and body text, and 12 px for supporting details. Each level is half the previous one or less, which is why you can tell them apart.

• Large: what the person came to sort out.

• Medium: what they need to decide.

• Small: context they can read later.

4. Contrast: if everything stands out, nothing does

In the AI’s answer, the same purple shows up on the balance card, the action icons, the links and the active tab. When one colour marks four different things, it stops saying “act here”.

Laws of UX explains this with the Von Restorff effect: we remember what differs from the rest, but if you highlight too many things, they compete. The practical rule is to keep the accent colour for the main action and leave everything else in neutral tones. Colour also shouldn’t be the only signal: size, weight and position have to point to the same place.

5. Similarity: things that look alike read as a group

The similarity principle says that elements sharing shape, size or colour are seen as related. The AI’s four buttons are identical, so they read as equivalent options. That’s fine as long as they are.

The problem comes when one of them matters more. If the payment is due tomorrow, “Pay” can’t look the same as “More”. In the second iteration it leaves the group: it’s the only filled button, it spans the full width and it sits next to the amount to be paid. The other shortcuts stay together at the bottom, where they can wait.

6. How to ask AI for it

These decisions don’t happen on their own: you have to write them into the brief. This is the one we used for the second iteration:

Design the home screen of a mobile banking app.

Who it’s for: Laura opens the app because her card is due tomorrow.

What comes first: 1. The payment: amount, due date, full or minimum, and “Pay”. 2. The balance and how much is left. 3. Everything else can wait. If there’s no payment due, the balance comes first.

Design system: 3 font sizes (large, medium and small), even spacing and a single strong colour: the one on “Pay”.

The last sentence of “What comes first” matters most: hierarchy changes with the person’s moment, and you’re the one who defines when. If you work with a design system, ask the AI to use its styles instead of describing them one by one (more on that in Design systems beyond Figma).

A caveat, so as not to overstate it: with an intermediate brief that only added three lines about order, all three AI answers already put the payment first and used three font sizes. They could still be improved a lot. That’s why the version in the carousel also went through a design review.

7. How to review it: squint

You don’t need tools to check hierarchy: squint, hold the phone further away or blur a screenshot. Nielsen Norman Group calls it the squint test and uses it to see which elements grab attention first.

In the first answer, once blurred, only the balance card stands out. In the second, the amount due and the button do. It’s a quick check: it measures visual weight, not how people actually read, and it doesn’t replace watching them use the screen.

If you generate the interface in code, you can also automate part of the review (more ideas in Coded prototypes: what to validate before handing over an interface):

• Sizes: a lint rule that rejects any font size outside your scale, for example 12, 16 and 32 px.

• Main action: a test that fails if a screen has more than one primary button.

• Squint: a blurred screenshot of the screen attached to every pull request.

Checklist before you sign off the hierarchy of an AI-made screen

• Do you know what the person needs to see first right now?

• Are there three size levels at most, clearly different from each other?

• Is the accent colour only on the main action?

• Does the most important action look different from the rest?

• When you blur the screen, is the first thing you notice what the person came to do?

• Did you check what happens when the moment changes, for example with no payments due?

AI gives you the average in seconds, and that’s already a lot. Deciding what comes first is still design work. If you want to revisit the previous episode, UX, UI and usability: differences when designing with AI covers what AI assumes when the brief is vague.

Open your banking app right now: is the first thing you see what you came to do? Tell me on LinkedIn.

Sources

1. Gordon, K. (2021). Visual Hierarchy in UX: Definition. Nielsen Norman Group.

2. Wang, H.-H. (2023). Squint Test. Nielsen Norman Group video.

3. Harley, A. (2020). Similarity Principle in Visual Design. Nielsen Norman Group.

4. Yablonski, J. Von Restorff Effect. Laws of UX.

5. W3C (2023). Understanding Success Criterion 1.4.1: Use of Color. WCAG 2.2.