Here is the first draft of Steady’s Today screen, the kind almost everyone makes on day one. The title “Today” is 18 px, the habit names are 17 px, the progress text is 16 px, and the streak counts are 16 px in the same grey. Everything is technically there. Nothing tells you where to look.
\nThat is the problem visual hierarchy solves: deciding what people see first, second and third, and making the screen say so without a single word of instruction.
\nBefore you touch a font size, write the ranking down. For the Today screen it is:
\nYou might expect the title to rank first. It doesn’t: people know they opened Steady. The title orients; the habits are the work. Now you have a reason for every size decision that follows.
\nYou have five tools for expressing rank, and they stack:
\nUse two or three of these together, not all five on every element. If the title is bigger, bolder, colored and boxed, it starts shouting over the habits that actually matter.
\n\nEvery distinct left edge on a screen is something the eye has to register. Draft one of Steady had five: the title at 20 px, progress text centered, habit icons at 16 px, names at 56 px and a button centered at the bottom. It looked busy without being busy.
\nThe fix is to choose a small number of shared edges and commit to them. On Steady, everything left-aligns to a 20 px margin, text inside rows starts on one line after the icon, and right-side controls (check buttons, chevrons) share a right edge 20 px from the screen side. Two edges plus one text column. The screen goes quiet.
\nCentered text has a place: short, single-line moments like an empty state (“No habits yet”) or a modal title. It works badly for lists and paragraphs, because each line starts somewhere new and the eye has to search for it.
\nPeople read things that are close together as related. This is the Gestalt principle of proximity, and it is the most powerful grouping tool you have, more powerful than boxes and divider lines.
\nThe rule that follows from it is simple to state and easy to break: space inside a group must be smaller than the space between groups.
\nApplied to Steady: inside a habit row, the name and streak sit 4 px apart; each row is its own card, and cards sit 8 px apart; between the progress summary and the list there are 24 px; between the header and everything else, 32 px. Each step out gets more space, so the structure is visible before you read a word.
\n\nWith a ranking, two edges and stepped spacing, the Today screen changes shape. The title becomes a clear 34 px bold, set apart by space rather than color. The progress line sits in its own block with 24 px around it. Habit names are 17 px semibold in near-black, streaks are 13 px in a muted grey directly beneath, and the check buttons on the right are 32 px circles with a 44 px tap area, the only accent color on the screen. Squint and you see a list with a column of targets on the right. That is the job.
\nIn the exercise below you critique a draft like the first one. Then the next lesson gives you the type scale and color rules that make these sizes and greys consistent instead of guessed.
\n","toc":[{"id":"sec-1","text":"Hierarchy: rank before you style","level":2},{"id":"sec-2","text":"Alignment: fewer edges, calmer screens","level":2},{"id":"sec-3","text":"Spacing: proximity is grouping","level":2},{"id":"sec-4","text":"Draft two","level":2}],"takeaways":["Hierarchy comes from contrast in size, weight, color and position; if everything is emphasised, nothing is.","Give each screen one primary element and decide its rank before you style anything.","Align elements to a few shared edges; every extra edge is something the eye has to process.","Space inside a group must be smaller than the space between groups, or people read the wrong things as related.","The squint test, blurring the screen until only shapes remain, shows whether your hierarchy survives without reading."],"further":[{"title":"Visual Hierarchy in UX (Nielsen Norman Group)","url":"https://www.nngroup.com/articles/visual-hierarchy-ux-definition/"},{"title":"Proximity Principle in Visual Design (Nielsen Norman Group)","url":"https://www.nngroup.com/articles/gestalt-proximity/"}],"quiz":[{"q":"In a habit row, the name “Read 20 pages” and its streak “12-day streak” sit 16 px apart, while the rows themselves are 8 px apart. What will people perceive?
","options":[{"text":"Each streak looks like it belongs to the habit in the row below.","why":"Correct. Proximity beats intent. The streak is closer to the next row than to its own name, so the eye pairs it with the wrong habit."},{"text":"Nothing, because the rows have separate backgrounds.","why":"Backgrounds help, but the question has no card backgrounds. Even with them, inverted spacing still weakens the grouping."},{"text":"The rows read as more spacious and easier to scan.","why":"Tight gaps between rows with loose gaps inside them do the opposite. It blurs where one row ends."},{"text":"The streak looks more important than the name.","why":"Spacing changes grouping, not rank. Importance comes from size, weight and color."}],"answer":0},{"q":"Which change creates the clearest hierarchy between a screen title and the habit names below it?
","options":[{"text":"Make the title 1 px larger than the habit names.","why":"A 1 px difference is too small to read as intentional. Hierarchy needs a step people notice at a glance."},{"text":"Make the title larger and bolder, and add more space below it than between the rows.","why":"Correct. Size, weight and space working together make the rank unmistakable."},{"text":"Put the title in all caps at the same size.","why":"Caps alone add texture, not much rank, and long all-caps text is slower to read."},{"text":"Give every habit name a different color so the title stands out.","why":"Many colors add noise and compete with the title instead of supporting it."}],"answer":1},{"q":"A screen mixes centered headings with left-aligned lists and right-aligned buttons. What is the most useful first fix?
","options":[{"text":"Center everything so the screen looks symmetrical.","why":"Centered lists are hard to scan because each line starts at a different place."},{"text":"Add divider lines between each block to separate the alignments.","why":"Dividers hide the symptom. The ragged edges are still there."},{"text":"Increase the font size so alignment matters less.","why":"Larger text makes misalignment more visible, not less."},{"text":"Align most content to one shared left edge and keep exceptions deliberate.","why":"Correct. One strong edge lets the eye travel down the screen without hunting for where each line starts."}],"answer":3},{"q":"What does the squint test tell you?
","options":[{"text":"Whether your text meets the WCAG contrast ratio.","why":"Squinting is a rough check of emphasis, not a measurement. Use a contrast checker for ratios."},{"text":"Whether every element is aligned to the layout guide.","why":"Blurred shapes hide exact edges. Use guides and the inspector for alignment."},{"text":"Whether the most important element still stands out when details disappear.","why":"Correct. If the primary action vanishes into the blur, the hierarchy is too flat."}],"answer":2}],"exercise":{"kind":"choice","multiple":true,"options":["title-rank","regroup-streaks","one-edge","boxes-dividers","center-names","accent-streaks"],"correct":["title-rank","regroup-streaks","one-edge"],"title":"Critique the first Today screen","prompt":"Sofia drops this draft into the team critique and asks: “Which changes fix the real problems, and what is the because for each?” Look at size, grouping and alignment.
\n:::figure Draft one of Steady’s Today screen\n
\nSelect every change that fixes a real problem without creating a new one.
\n","hints":["Squint at the mock-up. What stands out, and which streak belongs to which habit?","Compare the gap between a name and its streak with the gap between that streak and the next habit.","Count the left edges and centered lines. Then ask whether adding boxes or color removes a problem or hides it."],"explanation":"Three things are wrong. The title is the same size and weight as the habit names, so nothing ranks. Each streak is 40 px below its own habit but only 14 px above the next one, so proximity pairs it with the wrong row; put it 4 px under its name and give rows a larger gap. The centered progress line adds a second alignment axis for no reason; align it to the shared left edge. Boxes and dividers would decorate the inverted spacing instead of fixing it, centered names make the list harder to scan, and accent-colored streaks would compete with the check buttons, the one thing that should carry the accent.
\n","checkLabels":{},"optionText":{"title-rank":{"text":"Make the title clearly larger and bolder than the habit names.","why":"Correct. Right now title and habits are the same size, so the screen has no entry point. A clear size and weight step gives it one."},"regroup-streaks":{"text":"Place each streak a few pixels under its own habit name and increase the gap between rows.","why":"Correct. The streaks currently sit closer to the next habit than to their own. Small inside, larger between, fixes the grouping."},"one-edge":{"text":"Left-align the progress line to the same edge as the list.","why":"Correct. The centered line creates a second axis. One shared left edge makes the screen calmer and quicker to scan."},"boxes-dividers":{"text":"Wrap every row in a box and add a divider under each box.","why":"Boxes hide the spacing problem rather than solve it, and the screen gets heavier. Fix the gaps first; you may not need boxes at all."},"center-names":{"text":"Center the habit names so the list feels balanced.","why":"Centered list items start at different x positions, so the eye has to hunt for each one. Lists read best left-aligned."},"accent-streaks":{"text":"Color the streak counts with the accent color so they stand out.","why":"Streaks rank below the habits and their check buttons. Giving them the accent makes them compete with the primary action."}}},"words":810,"readMinutes":4}