Visual design, typography, and information hierarchy / personal lessonsLesson 1 of 11
Visual design · Lesson 1

Start with the reader's task

A visual decision needs a communication goal. Decoration alone does not establish that a design works.

By the end: turn a vague design request into a reader task, a content priority, and a testable question.

No design software or prior typography knowledge is required. Basic arithmetic suffices; the few formulas have explained symbols and units. Examples use left-to-right Latin text and original constructed notices, not a universal aesthetic standard. The aim is to understand and justify design decisions, not certify professional skill or whole-site accessibility. Displayed numerical values are rounded; calculations use unrounded values.

Separate the message from its treatment

Visual design arranges visible information so someone can find, interpret, and use it. Typography concerns the form and arrangement of written language. Information hierarchy gives different content different levels of prominence. A polished poster can fail if the visitor cannot find its location; an attractive dashboard can fail if its units are missing.

Begin with the intended reader and situation. A visitor searching for tonight's entrance needs different emphasis from someone comparing next month's workshops. Write a concrete task before choosing a font: find the start time, distinguish two plans, or identify the next action. The task gives a reason to favor one arrangement over another.

Translate a task into information needs

Suppose someone has received an invitation and is standing outside a building. Their question is where to enter, not whether the event sounds interesting. Answering it requires an entrance description that distinguishes the correct door from other doors. An event title identifies the notice, but repeating that title more prominently supplies no additional direction. This gives a first way to reason about emphasis. Name the decision, identify the facts needed for that decision, and then inspect whether those facts are distinguishable in the arrangement.

Compare the two arrival notices below. Both say that the open studio is on Saturday at 14:00, uses the west entrance, and requires booking. In the first, the title has the strongest treatment. In the second, the entrance has it. Nothing about the event has changed. For an arrival task, the second treatment puts emphasis on a directly useful fact. For someone scanning a list of different events, a distinctive title could instead deserve that emphasis. The task changes the justification, even when the facts stay fixed.

One notice, two immediate priorities

Identify the event

Open studio
Saturday · 14:00
West entrance
Booking required

Find the entrance

Open studio
Saturday · 14:00
West entrance
Booking required
Both notices retain four identical facts in the same sequence. Only the emphasized role changes here. The entrance treatment is a candidate for an arrival task, not an observed winner.

An information need can include a relationship rather than one missing word. Knowing that a door is west of another door requires a reference point. Knowing that booking is required does not establish whether places remain available. Before revising appearance, separate what the notice actually states from what a reader would have to infer. Do not quietly fill gaps with guesses about the building or booking policy. A complete visual arrangement of incomplete content still leaves the practical question unanswered for a first-time visitor.

Use the two specimens as a small reasoning exercise. First find the entrance in each, then imagine that your question changes to whether you may arrive without a reservation. Locate the booking statement without changing the notice. The entrance emphasis does not automatically make the booking decision easier. Explain the tradeoff by naming which fact gained prominence and which stayed at the supporting level. You are comparing available information and its treatment, not timing yourself and treating that single attempt as a reading experiment.

Another pair keeps treatment but changes information. One notice says only to enter through the main door; the other names the west entrance. Here the changed words are the mechanism under discussion. Making the first sentence larger would not tell an unfamiliar visitor which door counts as main. The more specific sentence helps only if it accurately describes the site. If the building has two west-facing doors, even this wording may be insufficient. Content precision depends on the real situation, not on a pleasing arrangement.

Appearance cannot supply a missing distinction

Ambiguous entrance wording

Open studio
Saturday · 14:00
Use the main door
Booking required

More specific entrance wording

Open studio
Saturday · 14:00
Use the west entrance
Booking required
The arrangement, size, and weight stay fixed. This comparison explicitly changes the entrance wording. Whether the more specific wording is sufficient depends on the actual building.

This distinction prevents two common misdiagnoses. A reader might fail because the needed fact is absent, or because a present fact is difficult to locate or associate with its label. The first problem calls for verified information. The second may call for changed prominence or grouping. They can occur together, but they require different evidence. Keep the initial question concrete enough to distinguish them. Asking where the notice says to enter exposes more than asking whether the whole notice looks clear or modern.

Inventory before emphasizing

For an open-studio notice, the content might include event name, day, time, location, and booking requirement. First establish whether those facts are correct and sufficient. Then choose their relative prominence. A larger heading cannot repair a missing address, and an invented date would not be a design improvement.

The comparison keeps the words unchanged while changing their sizes, weight, spacing, and alignment. Ask which information is easier to locate for a first-time visitor. This is a design hypothesis, not a measurement of everyone's attention. Familiarity, reading direction, vision, and the surrounding page affect what a person notices.

Keep facts stable while changing emphasis

A fair comparison starts by deciding what is allowed to change. If one notice has a larger entrance label and also replaces a vague address with a precise one, any improvement could depend on either change. To study treatment, keep the event facts and wording identical. To study wording, hold the treatment steady. A finished notice may need both revisions. The restriction is useful while diagnosing a problem, because it prevents an explanation about size from accidentally relying on clearer language or a newly supplied fact.

Consider an inventory of four facts. There is one event name, one day and time, one entrance, and one booking condition. Their count remains four whether they occupy four equal lines or several visually separated groups. Counting facts therefore checks preservation, not hierarchy. Now inspect the notice with the larger title. Its extra ink does not represent extra factual content. The difference is how much visible space and contrast among roles the same words receive. That distinction will matter when later lessons introduce numerical type scales.

In the comparison already on this page, the revised notice changes size, weight, and spacing together. Size changes the nominal text scale. Weight changes the thickness and distribution of strokes. Spacing changes which lines appear adjacent and how groups separate. These mechanisms can reinforce one another. You can describe the right notice as a combined treatment, but you cannot use a preference for it to establish that larger type alone caused the preference. There is no size-only switch hidden in this lesson's notice comparison.

The spacing-only specimens below offer a narrower comparison. Both use the same words, size, and weight. One has an equal gap after every line; the other keeps the date and entrance near one another and separates booking information. Look for a proposed relationship, not a universal winner. Someone arranging an arrival detail group has made one decision about meaning. If booking must be checked before anyone travels, keeping that condition in a separate group may require additional prominence rather than leaving it visually secondary.

A spacing-only notice comparison

Equal gaps

Open studio
Saturday · 14:00
West entrance
Booking required

Time and entrance grouped

Open studio
Saturday · 14:00
West entrance
Booking required
All text is 18 px regular. Equal 12 px layout gaps become 28 px before the date, 8 px before the entrance, and 28 px before booking. The short date-to-entrance gap proposes an arrival group.

Try reconstructing the inventory without looking at the notice for a moment. Then return and check whether you omitted a fact because it was absent or because your attention favored another line. This can suggest a question to investigate, but it is not a controlled memory test. You already know the notice and have read the explanation. For a useful comparison with other readers, preserve the task wording and event facts, and avoid explaining the intended grouping before they attempt the task themselves.

The comparison with an omitted booking rule makes a different failure visible. A shorter notice can seem simpler while withholding a condition that changes someone's decision to attend. Removing that condition is a content change, not merely a cleaner treatment of the same message. In an actual revision, first verify that every consequential fact survives. Then decide whether facts should be grouped or emphasized differently. A design proposal should make explicit when it changes the message, because visual simplicity alone cannot justify losing a necessary condition.

Less content is a different message

Booking condition omitted

Open studio
Saturday · 14:00
West entrance

Booking condition retained

Open studio
Saturday · 14:00
West entrance
Booking required
The left notice omits the booking requirement. Its shorter height is not evidence of a better treatment of the same facts. The right restores the consequential fourth fact at the same text size.

Inspect the relationship

Same facts, different treatment

Equal-size reference

Open studio
Saturday · 14:00
West entrance
Booking required

Role-based treatment

Open studio
Saturday · 14:00
West entrance
Booking required
Neither notice is a tested winner. Compare the arrangements against the visitor’s task. The right-hand treatment changes size, weight, and spacing together, so a preference cannot isolate any one cause.

Distinguish a visible difference from a causal result

The notice comparison lets you inspect what a treatment does to the same text. It does not generate observations from readers. A larger heading is visibly larger, and a larger gap is visibly more empty space. Saying that everyone will notice the heading first adds a claim about people. Their purpose, previous knowledge, reading direction, and visual access can affect the result. Geometry supplies a design hypothesis that someone could test, not a probability that a particular scan path will occur.

Work through a possible test before collecting any observations. Suppose the question is whether a first-time visitor can identify the entrance. A correct response must identify the west entrance rather than merely repeat the event title. A response of 'I cannot tell' differs from a confident selection of the wrong door. Both matter, but they suggest different obstacles. Define these outcomes before choosing the more attractive notice. Otherwise it is easy to change the success definition after hearing responses that favor your preferred treatment.

The paired specimens below keep appearance fixed while changing the question asked about them. One question requests the entrance; the other requests the booking condition. They show why evidence belongs to a task. Even if readers answer one question correctly, that would not establish that they can answer the other. It also would not establish keyboard access, enlarged-text behavior, or comprehension of missing conditions. A narrow result is still useful when the narrow question matches the actual decision that the notice needs to support.

Identical notice, different task questions

Which entrance should you use?

Open studio
Saturday · 14:00
West entrance
Booking required

May you attend without booking?

Open studio
Saturday · 14:00
West entrance
Booking required
Nothing changes in the two notice specimens. The questions ask for different facts, so answering one would not demonstrate success on the other. No reader responses are shown.

Timing introduces arithmetic without removing the need to inspect errors. For a hypothetical practice calculation, imagine comparing a four-second correct answer with a two-second incorrect answer. Two is half of four, but the shorter time does not mean the second response achieved the task twice as well. The answer was wrong. These are invented values for reasoning, not observations from this course. If speed matters, report it alongside correctness and define what starts and stops the clock. Do not replace a consequential error with a favorable average time.

A reader who sees version A and then version B may remember where the entrance was written. A faster second answer could reflect that memory rather than B's arrangement. Reversing the order for some readers can help reveal this problem, though a small informal comparison still has limits. Different tasks can also have different difficulty. Asking for the entrance in one version and the date in another does not isolate a treatment effect, even when each answer is a single short phrase on the notice.

For guided practice, write a prediction about the existing notice pair before looking back. Specify which fact you expect to become easier to locate and name the changed visual cues. Then inspect whether those cues actually changed as predicted. This checks the internal logic of your explanation. It cannot confirm the prediction about unfamiliar readers. If the explanation says that only size changed, correct it to include weight and spacing. Distinguishing the proposed mechanism from observed evidence is part of a defensible design argument.

Define evidence before judging taste

A useful critique names the task, the observed obstacle, and a change that addresses it. "The location is harder to distinguish from the title" is more actionable than "make it pop." A style preference can still matter, but it answers a different question from successful communication.

Test with representative readers and realistic content. Ask them to locate or interpret something without coaching them through the layout. Record errors and hesitations as well as completion time. A small test can reveal a specific problem; it does not prove universal superiority. This course supplies constructed comparisons, not user-study results.

Write a revision that another person can evaluate

A useful revision proposal names a particular obstacle and a change small enough to inspect. For example, 'The entrance looks like another line of event description; separate it from the title and keep it near the time' gives a reason for a grouping decision. 'Improve the layout' does not identify which relationship needs repair. The proposal need not predict a numerical benefit. It needs to connect something visible to a task, while leaving room for evidence that the proposed arrangement still fails in context.

Inspect the before and after arrival details below. The first gives the entrance and booking statement equal separation from every other line. The second groups time with entrance and states the same booking requirement below. Read the four facts aloud in their displayed order. They remain the same facts in the same sequence. The visible grouping changed, so a reader may interpret time and entrance as one practical unit. This is a precise explanation of the proposal without claiming that all readers will respond identically.

Describe the change without claiming an outcome

Before: three equal gaps

Open studio
Saturday · 14:00
West entrance
Booking required

After: an arrival group

Open studio
Saturday · 14:00
West entrance
Booking required
The revision keeps wording, sequence, and 18 px reading size. It makes the date-to-entrance gap smaller than the surrounding gaps, proposing a practical arrival unit without removing booking information.

Now consider a counterexample. Someone deciding whether to travel without a booking needs the condition before committing to the journey. An arrival-oriented hierarchy may still leave that condition too easy to overlook. The new task does not make the arrival grouping wrong in every context. It identifies another consequential question the same notice must support. A sensible revision can keep the arrival group and make the booking condition explicit at a comparable reading size. A single most-prominent line cannot carry every relationship by itself.

Use the alternative task treatments below to make a choice. Imagine first that the notice hangs beside several doors. Then imagine that it appears in an invitation before a person leaves home. Choose the stronger candidate for each location and explain the choice using the reader's immediate question. Both versions preserve the event facts. Neither choice has to be final, because the physical location, surrounding signs, and actual booking process might supply information missing from the specimens. State which assumption your choice depends on.

A door sign and a pre-travel decision

Candidate beside the doors

Open studio
Saturday · 14:00
West entrance
Booking required

Candidate before travelling

Open studio
Saturday · 14:00
West entrance
Booking required
The left emphasizes the entrance; the right emphasizes the booking condition. Both preserve every fact. Choose a treatment against the immediate task and context rather than assuming one strongest line suits every use.

When evaluating a proposed revision, separate its descriptive claims from its unverified predictions. You can confirm that the entrance is bold, that all four facts remain, and that their source order is unchanged by inspecting the specimen. You cannot confirm from a screenshot that an unfamiliar visitor finds the correct real door or understands how to book. Those questions require the real context and suitable evaluation. Similarly, visible text does not by itself establish that an interface exposes the same relationships to assistive technology.

Finish the practice by writing two sentences about one pair. The first should describe a specific change while naming what stayed constant. The second should state one task question that could reveal whether that change helped. For the arrival pair, a suitable description names the new grouping of time and entrance with unchanged facts. A suitable question asks which entrance the visitor should use. A preference question would answer something else. This keeps your critique accountable to the message rather than to an unexplained taste judgment.

Exercises

Repair the brief

A request says "make this event notice more modern." What two questions would let you make a reasoned first revision?

Hint

Ask who will use it and what they need to find.

Worked answer
Unclear briefActionable replacement
Make it modernHelp a first-time visitor find the entrance
Add impactDistinguish start time from supporting details
The revision follows a stated task, not a universal aesthetic ranking.

Ask who is reading, in what situation, and what decision they must make. For example, a new visitor on the way to the event needs the location and start time. Confirm those facts before revising their prominence. Modern appearance is not a substitute for specifying the communication problem.

Separate two kinds of evidence

Six colleagues prefer version B, but two cannot identify whether booking is required. Can you call B successful?

Hint

Preference and interpretation are different outcomes.

Worked answer
ObservationWhat it supports
Six prefer BPreference in that sample
Two miss booking ruleA concrete interpretation problem
No representative testNo broad effectiveness claim
A design can be liked while failing its task.

You have preference evidence from a small convenience sample and evidence of a specific comprehension failure. Preserve useful qualities of B while making booking status explicit, then retest with intended readers. Do not average away a consequential error or infer a population preference from six colleagues.

Sources and further reading

These optional references support the stated mechanisms and technical criteria. Selected relevant passages were reviewed. The notices, diagrams, and numerical examples are original teaching comparisons, not empirical usability results. Design hypotheses need tests with intended readers; technical checks do not establish aesthetic quality or whole-site conformance.