Addaly is in open beta. Things will change, and AI answers can be wrong — check anything that matters.

Design, Before Any Software

Hierarchy, type, colour and spacing — the part of design you can do with a pencil, before any software.

Design, Before Any Software

Hierarchy, type, colour and spacing — the part of design you can do with a pencil, before any software.

Level
Nothing assumed
Lessons
74
Reading time
632 min
Price
Free, no sign-up to read

Design fails on ranking, not on taste. This course covers what the eye lands on first and how to control it, grouping by distance, alignment and grids, type measured in characters rather than adjectives, colour contrast you can check against a number, composition and cropping, designing for a 390-pixel phone in daylight, a nine-step way to diagnose a layout that looks wrong, and how to translate "make it pop" into a specific change.

Start the first lesson

Download the textbook (PDF) · free to print and teach from, with the exam paper and every answer at the back.

Module 1

11 lessons · 95 min

How seeing actually works

Design is the management of a very small patch of sharp vision and a very large patch of blur. This block covers what the eye can resolve where, how big a difference has to be before it registers as deliberate, what makes a shape read as an object rather than as background, and what the eye-tracking research does and does not support. Everything later in the course is an application of this block.

By the end you can

Predict where a stranger's eye will land on a layout in the first two seconds and in what order, change that order by adjusting one named channel to a stated magnitude, and say why a difference below that magnitude reads as a mistake rather than as a rank

  1. 1Your poster is not ugly, it is unranked9 minA design has a hierarchy only if things differ enough to be ranked at a glance, and promoting one element means demoting another.
  2. 2What your peripheral vision is actually for9 minOutside the central patch, vision keeps luminance blobs, motion and gross shape and throws away detail and anything with close neighbours, so a landmark has to be a large isolated blob rather than a small precise mark.
  3. 3The squint test, done properly8 minConvert a design to luminance greyscale and blur it slightly: if three masses do not appear in a clear order, the fault is structural and no amount of colour work will repair it.
  4. 4How big a difference has to be9 minEvery difference you introduce must clear a perceptual threshold — roughly 1.2x for size, two weight steps, 15 to 20 points of lightness, double the gap — because a difference below it carries no information and reads as a production error.
  5. 5Emphasis is zero-sum8 minEmphasis is a fixed budget on any single view, so making one element more prominent always means demoting another, and the answer to make this bigger is the question what comes down.
  6. 6What makes a shape read as an object9 minThe eye decides what is object and what is background before it ranks anything, and space is a stronger device for making that decision than fills, borders or shadows — in that order.
  7. 7What the eye-tracking research actually says9 minThe F-pattern describes how people skim a page with no hierarchy rather than prescribing where to put things, so the correct response to it is to give the eye structured landing points instead of reinforcing the shape.
  8. 8Weight is not area, and centre is not the middle8 minVisual weight is area times darkness times detail, not size, and both balance and centring should be judged on where the mass sits rather than where the bounding box is.
  9. 9Shape is a channel you are probably not using8 minGross shape survives peripheral vision, greyscale, glare and colour blindness, so one deviant silhouette in a field of rectangles is a cheap and robust emphasis — provided it stays rare enough to mean something.
  10. 10Content that attracts attention whatever you do to it8 minFaces, numerals, a reader's own identifying words and any motion attract fixations regardless of styling, so inventory what is already pre-emphasised on a surface before you allocate size, value and isolation around it.
  11. 11Nine checks that find what is wrong with a layout10 minDiagnose in order — hierarchy, value, spacing, alignment, inventory — because a fault in structure cannot be fixed with colour, and colour work done first gets thrown away.
Case studyThe vaccination poster with five first thingsA district health office in Nashik, preparing a poster for a two-day measles and rubella camp at eleven anganwadi centres.Read it

The camp had a budget for 4,000 posters and one week to get them pasted. A junior officer with a laptop and a free browser editor made the first version in an afternoon, and it contained everything anyone had asked for.

Across the top: the department's logo, the state emblem, and a photograph of the district health officer. Below that, in a decorative script, "Measles and Rubella Free Nashik". Then the dates, the words "free of cost", a list of the eleven centres in two columns, a helpline number, a QR code, and a line of small text naming the scheme the funding came from. Every element was large. Several were in red, because red had been described in the meeting as urgent.

What the review meeting was about

The poster was circulated, and the comments arrived in the usual shape. The programme officer wanted the helpline bigger. The communications cell wanted the logo bigger. Somebody wanted "free of cost" in a bigger red. Nobody said the poster was hard to read, because nobody looks at a poster they have already read four times.

An intern on placement from a polytechnic did two things that cost nothing. She took a screenshot, desaturated it, and blurred it. Everything came back as one even grey field with a darker rectangle where the photograph was. Then she printed three copies, showed them to three people in the corridor for three seconds each, took them away, and asked what they had seen.

One said "a government thing". One said "something about vaccination". One named the district health officer, who she recognised. Nobody said a date. Nobody said a place.

The decision

The fix was arithmetic, and it was also political. A poster read from four metres, by a parent walking past with a child on one hip, can carry one thing first and two things second. The intern's proposal was:

  • First: the dates, at roughly four times the size of everything else.
  • Second: the words "free vaccination" and the name of the local centre, with a blank space left for each centre's name to be overprinted.
  • Everything else at the floor: logo small in a corner, helpline small, QR code small, scheme credit small, and the photograph removed.

Removing the photograph was the part that stopped the room. It was not decoration in the ordinary sense. The photograph was there because it had been there on the last four campaign posters, and because taking it off was a statement somebody would have to make to the officer whose photograph it was.

The cost on the other side was concrete and countable. The blurred image had already shown that the photograph was the darkest, largest mass on the poster, and a face attracts fixations whatever is done to it. Leaving it in meant the strongest element on a poster about a date was a person's face. Eleven centres, two days, a target of 9,000 children, and one chance for a parent to catch the information from across a road.

The programme officer put the trade-off in a single sentence in the meeting: if the photograph stays, the date does not get read; if the date does not get read, the camp is under-attended, and the photograph is on a poster about a camp that failed.

There was a second, smaller decision hiding inside the first. The eleven centres could not all be named at readable size on one poster. Naming them all meant a list at 14 points that nobody would read at four metres. Printing eleven versions, each naming one centre, cost more in plate setup and made the print run harder to manage with a week to go.

What actually happened

The photograph came off, and the district health officer was told why before the file went to the press rather than after. The dates went to roughly 120mm tall on an A3 sheet, with "free vaccination" second and a blank band left in the lower third. Eleven short runs were printed with the centre name and its timing overprinted in that band, which cost about eleven per cent more than one run of 4,000 and removed the unreadable list entirely.

The three-second test was repeated in the corridor with the new version. All three people named the dates. Two named the words "free vaccination". None of them mentioned the logo, which was the intended result rather than a failure.

Attendance against target was reported at the end of the camp as higher than the previous year's, which the office attributed partly to the poster and partly to better ASHA follow-up. Nobody could separate the two, and the honest conclusion drawn in the debrief was narrower: the poster now said one thing at four metres, and the previous one had said nothing at all.

Worth arguing about

  1. The reviewers all asked for something to be made bigger. Why did granting each of those requests make the poster worse?

    One answer

    Emphasis is a relationship between an element and everything around it, not a property of the element, so there is a fixed amount of it on one surface. Every promotion demoted the rest, and after four rounds every item was loud, which is perceptually identical to every item being quiet. The productive response to 'make this bigger' is the question 'what comes down'.

  2. The intern's blur test and the three-second test answered different questions. What were they?

    One answer

    The blur test asks what can be found: it shows which elements survive as distinct masses and where they sit, which is what a reader's peripheral vision is working with before they look at anything. The three-second test asks what actually arrives first in a real person's head, including content effects such as a recognisable face that no formal analysis of size and contrast would predict.

  3. Somebody argues that removing the photograph was a design preference, not a finding. What evidence in the case answers that?

    One answer

    Faces attract fixations early and reliably regardless of styling, and the blurred image showed the photograph was also the largest dark mass on the sheet. Both the formal channel and the content channel put it at rank one on a poster whose message was a date. The three-second test then confirmed it behaviourally: a viewer named the officer and nobody named a date.

Test yourself6 questions on this modulePractice. Nothing is recorded and no score is kept.
  1. 1

    A poster sets its heading at 17 pixels above body text at 16 pixels. Why does this fail to create a hierarchy?

  2. 2

    A product page has the price at 24px bold black, a solid-colour Add to Basket button, a red promotional badge and a 20px bold delivery promise. The client wants the button seen first. Which change is most likely to achieve it?

  3. 3

    The squint test specifies a luminance conversion to greyscale rather than an average of the red, green and blue channels. Why does the difference matter?

  4. 4

    Isolation is described as a stronger emphasis channel than its cost suggests. What is the mechanism?

  5. 5

    A card has a 1px border and a hard 2px drop shadow, sits 8 pixels from its neighbour, and still does not read as a separate object. What is the strongest repair?

  6. 6

    What does the F-shaped heatmap from eye-tracking studies of web pages actually describe?

Module 2

11 lessons · 94 min

Space, grouping and the grid

Space is the cheapest material in design and the one beginners spend least. This block turns spacing from a feeling into a system: which grouping cue wins when two of them disagree, a scale that makes every gap a deliberate decision, the arithmetic of columns and gutters, where optical alignment departs from mathematical alignment, and how big a thing has to be before a thumb can hit it.

By the end you can

Set every gap in a layout from a single stated spacing scale, name the relationship each gap encodes and the grouping cue carrying it, lay out a column grid from its arithmetic rather than by eye, and say where an optical adjustment must override the alignment tool

  1. 12The gap is doing the talking9 minThe eye assigns things to groups by distance before it reads a word, so the space inside a group must be obviously smaller than the space around it.
  2. 13When two grouping cues disagree9 minGrouping cues have different strengths — a bounding region beats distance, distance beats colour — so a proximity error cannot be repaired with similarity, and a group that distance cannot express needs a boundary rather than a shared hue.
  3. 14Every gap comes from a list8 minEvery gap in a design should be a member of one multiplicative scale with a meaning attached to each step, so that spacing becomes a statement about relationships rather than a series of independent guesses.
  4. 15Space is content you have not been billed for8 minSpace is a working mechanism — isolation, decrowding and grouping — rather than an unfilled area, but it is paid for in scrolling on small screens, so spend it on the boundaries that carry meaning and compress the ones that do not.
  5. 16You can feel a misalignment you cannot see9 minEvery element should share an edge with something else, and where the alignment tool and your eye disagree, trust your eye.
  6. 17Where the alignment tool is wrong9 minLayout tools align bounding boxes while readers align visible mass, so icons beside text, letters against rules, punctuation at a margin and text in a button all need small documented corrections that the tool will otherwise undo.
  7. 18A grid is arithmetic, not taste9 minA column grid is defined by the exact relationship between margin, column and gutter, and its value is that repeated positioning decisions get made once — it removes small errors and arguments rather than producing quality.
  8. 19Vertical rhythm, and why the strict version fails on screen8 minA strict baseline grid is achievable in print and brittle on screen because of half-leading, arbitrary content heights, platform form controls and reflow, so keep the part readers perceive — a small consistent set of vertical values tied to the line height — and drop the rest.
  9. 20Padding belongs to the thing, margin belongs to the relationship8 minPadding is part of an object's identity and travels with it, while margin describes a relationship that belongs to the layout, so components should carry internal padding and let their container set the gaps between them.
  10. 21How big a thing has to be to hit9 minVisual size and target size are separate decisions — aim for 44 to 48 pixels of target with at least 8 pixels between neighbours — and because distance and width both sit inside a logarithm, widening a target buys as much as halving the distance to it.
  11. 22Balance is a comparison of weights8 minBalance compares visual weights multiplied by their distance from an axis rather than matching sizes, and a composition that is slightly off balance reads as an error, so either resolve it properly or push the imbalance far enough to be obviously deliberate.
Case studyThe admission form that cost two hundred hours to correctA polytechnic in Coimbatore admitting about 1,400 students a year, with a printed application form and an identical web version.Read it

The office had a recurring complaint that everybody treated as a fact of life: a large share of application forms arrived filled in wrongly. Phone numbers in the email row. The guardian's name in the applicant's name field. The community certificate number in the box for the transfer certificate number. Two clerks spent roughly the six weeks of the admission season telephoning applicants to correct entries, and the office had come to describe this as "the students are careless".

A lecturer who taught a first-year design elective asked for a blank form and measured it.

What the measurements said

The form had been laid out in a word processor, and every gap in it was a gap somebody had made by pressing Return. Measured, the vertical distances were 14, 16, 15, 18, 16, 22 and 14 points, in no pattern. The most important measurement was the one that repeated: a label sat about 14 points above its own box, and the next label sat about 16 points below that box.

To a reader, those two distances are the same. The label therefore belonged to both fields, or to neither, and which one a person chose depended on where their eye happened to land. The words on the form were correct. The spacing said something different, and the spacing is read first.

There were two further faults. Four groups of fields — personal, academic, community, contact — were separated by exactly the same space that separated the fields within them, so the form read as one undifferentiated list of twenty-three boxes. And the outer margin of the sheet was 8mm while the largest internal gap was 22 points, so the content looked as though it was sliding off the page.

The decision

The repair was not difficult to describe. Label 4 points above its own box, 24 points to the next field, 40 points between groups, a 16mm outer margin, and every one of those values drawn from a single scale of 4, 8, 16, 24, 40.

The problem was that the form had to remain one sheet of A4, printed both sides. It already was, at the current spacing, with the back side used for the declaration and the checklist of enclosures. Adding the space the grouping needed pushed the form to three sides, which means two sheets.

The numbers were available. The polytechnic printed about 6,000 forms a season for walk-in applicants and district outreach camps. A second sheet added roughly nine rupees per applicant in paper, printing and the heavier envelope, which came to somewhere near fifty-four thousand rupees a year, in a budget where that was a line somebody would have to defend.

Against that sat an estimate the office had never made. The two clerks reckoned they corrected about four hundred forms a season, at fifteen to twenty minutes each once the telephoning, the re-checking and the re-entry were counted. That is between one hundred and one hundred and thirty hours, twice over, in the busiest six weeks of the year, and it did not include the applicants whose forms were rejected outright and who did not call back.

The registrar's objection was not that the arithmetic was wrong. It was that the printing cost was a visible line item he would be asked about, and the clerks' hours were already paid for and therefore invisible. Two real costs, one of them countable in a budget and the other countable only if somebody chose to count it.

What actually happened

The head of department authorised a single season as a trial rather than a permanent change, which made the decision reversible and got it approved. The form went to two sheets with the spacing scale applied, the four groups separated by 40 points, and the guardian's details moved under a bounded heading of their own rather than sitting adjacent to the applicant's.

The clerks were asked to keep a tally rather than an impression. Corrections fell from a counted 411 the previous season to 96. The three commonest errors — phone in the email row, guardian's name in the applicant's row, and the two certificate numbers swapped — accounted for most of the drop.

The web version took an afternoon and cost nothing, because there was no paper constraint at all; the same scale was applied with a container setting the gaps between fields. The office kept the two-sheet printed form the following year without discussion, and the registrar's later summary of it was that the paper had been the cheaper thing all along and nobody had ever put the two numbers next to each other.

Worth arguing about

  1. Why could this form not have been repaired by making the labels bold, or by colouring the required fields?

    One answer

    The fault was a proximity error, and proximity is a stronger grouping cue than similarity. Bolding or colouring a label adds a similarity cue while leaving the distances that attach it to the wrong field unchanged, so the two cues then disagree and the reader gets two competing structures instead of one wrong one. Distance errors have to be fixed with distance.

  2. The registrar's objection was about which cost was visible. How would you frame the argument without relying on his goodwill?

    One answer

    Convert the invisible cost into the same unit as the visible one and present both. The clerks' correction work was countable once somebody counted it: about four hundred forms at fifteen to twenty minutes, twice over, in the season's busiest weeks. Proposing a single reversible season, with a tally kept, also removes the need to win the argument in advance, because it turns a claim into a measurement.

  3. The outer margin was 8mm while the largest internal gap was 22 points. Why does that combination matter on its own?

    One answer

    The strongest boundary on a page should be the one between the content and the edge of the sheet. When an internal gap is larger than the outer margin, the strongest boundary sits inside the layout, so the content reads as sliding off the page and the internal gap reads as a divider splitting the form. Fixing the margin costs nothing and repairs a fault most readers feel without being able to name.

Test yourself6 questions on this modulePractice. Nothing is recorded and no score is kept.
  1. 1

    A form's labels sit closer to the field below them than to their own field. A reviewer suggests colouring each label to match its field instead of moving anything. Why will that not work?

  2. 2

    Why is a spacing ramp of 4, 8, 12, 16, 24, 32, 48, 64 better than one of 4, 8, 12, 16, 20, 24, 28, 32?

  3. 3

    A card component ships with a bottom margin of 32 pixels so that a stack of cards looks right. What is the underlying mistake?

  4. 4

    Fitts's law puts both the distance to a target and the target's width inside a logarithm. What follows for design?

  5. 5

    Why does a strict baseline grid survive in print and break down on the web?

  6. 6

    A layout has a 12-pixel outer margin and a 32-pixel gap between two internal groups. What does a reader experience?

Module 3

12 lessons · 104 min

Type, mechanically

Typography is the part of design with the most measurable answers and the most folklore attached. This block replaces the folklore: how to compare two typefaces at the same apparent size, how to build a size scale, when to justify and why rivers form, what tracking is for, which figures to use in a table, and what breaks when the text is in Devanagari or Urdu rather than English.

By the end you can

Set a page of text a stranger can read comfortably — measure, leading, size scale, alignment, figures and emphasis each chosen from stated numbers — say why each number is where it is, and name what changes when the same page is set in a non-Latin script

  1. 23Your font is fine, your line is too long10 minSet the line length to 45-75 characters before you touch the typeface, because most "hard to read" is a measure problem wearing a font costume.
  2. 24The four measurements that decide how a typeface behaves9 minA typeface's behaviour is governed by measurable properties — x-height ratio, aperture, stroke contrast, descender length and character differentiation — and matching point size between two faces does not match their apparent size or their legibility.
  3. 25Four sizes, chosen once8 minBuild four or five text sizes from a base and a ratio so that every pair clears the perceptual threshold, compress the ratio on small screens, and carry the rest of the hierarchy with weight, colour and space rather than with more sizes.
  4. 26Choosing a typeface, and what the licence actually says9 minChoose a typeface by the job it must do — available weights, real italics, script coverage, figure behaviour — before aesthetics, and check the licence, because a desktop licence usually does not cover web embedding and design protection itself varies by country.
  5. 27Two typefaces, and why you probably want one8 minOne family with many weights is the default and a second typeface needs a stated reason; when you do pair, cross a class boundary, match x-height and apparent weight, and write down which face does which job.
  6. 28Rivers, rags and where the line breaks9 minJustification absorbs its adjustment in word spaces, so a narrow measure with few spaces per line produces rivers; justify only at 60 characters and up with hyphenation properly enabled, and remember that hyphenation silently fails without a declared language.
  7. 29Letter spacing, and the sizes type was drawn for8 minDefault letter spacing is drawn for one size, so display type wants negative tracking and all-caps labels want 6 to 10 per cent positive — and a font with an optical size axis adjusts the letterforms themselves rather than only the gaps.
  8. 30Capitals, italics and the cost of emphasis8 minCapitals flatten the word shapes that reading depends on, so reserve them for short labels set with CSS rather than typed, and emphasise with the weakest device that works — italic before bold before colour — because stacking them cancels the emphasis.
  9. 31Figures, dashes and the details nobody teaches8 minUse tabular figures for anything that changes in place or sits in a column, oldstyle figures inside prose, the correct dash for the job, and a locale-aware formatter for digit grouping — because Indian grouping differs from Western and hard-coding one is a decision to be wrong somewhere.
  10. 32The grey of a paragraph8 minThe even grey texture of a text block comes from weight, size, spacing and leading acting together, so check it by blurring or inverting the page and fix the specific cause of each patch rather than adjusting the settings at random.
  11. 33What breaks when the text is not in English10 minLine height, letter spacing, measure and the italic convention are all Latin defaults that degrade silently in other scripts — Devanagari and Indic scripts need more vertical room and no tracking, Urdu Nastaliq needs far more still, and the only reliable check is a native reader looking at real text in the real layout.
  12. 34Make it pop is a symptom report9 minTreat client feedback as a description of a symptom and do the diagnosis yourself, and use mirroring and a five-second test to see your own work as a stranger would.
Case studyThe scholarship leaflet whose Hindi was clippedA small education trust in Patna, printing 20,000 bilingual leaflets about a state scholarship with a fifteen-day application window.Read it

The trust had one designer, working on a laptop with free software, and a printer who needed the file by Thursday evening to deliver on Monday. The leaflet was A5, folded, English on one side and Hindi on the other, with the eligibility rules, the documents needed, the deadline and the trust's helpline.

The English side was set in a well-drawn geometric sans the designer had used before, at 16 points with a line height of 1.4. It looked clean. The Hindi side was set in the same typeface, at the same size, with the same line height, because that was the obvious way to make the two sides look like one leaflet.

What went wrong, and why nobody saw it

The typeface contained no Devanagari at all. When the Hindi text was pasted in, the software silently fell back to whatever the system had, which was a default Devanagari face with different proportions. Nothing warned anybody. The text rendered, the layout held, and the proof looked acceptable at the size it was viewed on screen.

A volunteer who reads Hindi looked at a printed proof and found two faults in about ninety seconds.

First, the line height. Devanagari stacks vowel signs above the headline and below the baseline, and conjunct consonants stack vertically as well, so a line occupies far more vertical space than a Latin line at the same size. At 1.4 the matras of one line were touching the headline of the line below, and in three places on the folded panel a vowel sign had been clipped by the edge of a tinted box behind the text.

Second, the letter spacing. A site-wide rule the designer used for all body text added a small positive tracking, which is correct for Latin captions and wrong here: Devanagari letters sit under a connecting headline, and adding space between them breaks the line into fragments. The volunteer's description was that the words looked as though they had been pulled apart.

Neither fault was visible to the designer, who does not read Devanagari. Both were immediately visible to somebody who does.

The decision

It was Thursday afternoon. The fixes were not large: set the Hindi in an openly licensed Devanagari family, raise the line height to about 1.7, set letter spacing explicitly to normal for that block, and re-flow the panel, which would change where the text broke and therefore the fold.

The estimate was a full working day, because re-flowing the Hindi changed the panel depth, which changed the English side's alignment, which meant re-proofing both. That pushed the file to Friday evening and delivery to Wednesday.

The cost of the delay was specific. The application window was fifteen days and had already started. Two days of the distribution plan — the district outreach van and the Saturday camp at two schools — would be lost, and the trust estimated those two days at somewhere between two and three thousand leaflets reaching families directly rather than sitting in a bundle.

The cost of shipping on Thursday was also specific, and harder to put a number on. About seventy per cent of the intended readers would read the Hindi side and not the English one. What they would receive was a leaflet with clipped vowel signs and broken words — legible with effort, and carrying the unmistakable signal that the organisation asking for their documents had not checked its own Hindi.

The trustee who had to decide put it plainly: two thousand families who do not get a leaflet, against fourteen thousand who get one that tells them the trust does not read their language.

What actually happened

The trust delayed. The Hindi was re-set in Mukta at 17 points with a line height of 1.7 and letter spacing at normal, and the English side moved to a matching weight of the same family's Latin so the two sides no longer had to be reconciled by eye. The printer accepted the Friday file and delivered on Wednesday.

The outreach van lost two days. The Saturday camp was rescheduled to the following weekend and reached fewer people than planned. The trust's own count put the shortfall at about 1,800 leaflets distributed directly, some of which were absorbed by a longer counter-distribution at the two schools later.

The change the trust kept was procedural rather than typographic. Every bilingual piece since then has had one rule attached to it: a person who reads the script looks at real text, in the real layout, at the real size, before the file goes to a printer. The volunteer who found both faults in ninety seconds is now listed on the production checklist, which is the cheapest line on it.

Worth arguing about

  1. Both faults passed every check the designer ran. What property of the failure made it invisible to them?

    One answer

    The defaults being applied were Latin defaults, and they degrade silently in other scripts. A font stack falls through per character, so the missing Devanagari coverage produced a substitution rather than an error; a line height tuned for Latin ascenders and descenders produced collisions rather than a warning; and tracking that is correct for a Latin caption breaks the shirorekha that joins a Devanagari word. Nothing renders as broken, so a reviewer who does not read the script sees nothing wrong.

  2. Why was raising the line height not enough on its own?

    One answer

    The line height fixed the collisions and the clipping, but the letter spacing was a separate fault with a different mechanism. Devanagari letters are joined by a headline, so positive tracking fragments the word itself rather than merely loosening it. The two faults were independent, and a global rule written for Latin body text was the cause of the second one, which is why the repair had to set letter spacing explicitly to normal for that block.

  3. The trustee framed the decision as two thousand families against fourteen thousand. What does that framing get right, and what does it leave out?

    One answer

    It gets right that both options had a real, countable cost, which is what made it a decision rather than a correction. What it leaves out is that the two costs are not the same kind: the missing leaflets were a one-off loss in one campaign, while a leaflet that signals the trust does not check its own Hindi affects how the next leaflet is received. The procedural change the trust adopted afterwards is the part that addresses the second cost.

Test yourself6 questions on this modulePractice. Nothing is recorded and no score is kept.
  1. 1

    A page of text feels tiring and its lines run about 120 characters. Why does raising the font size from 16 to 18 pixels not help?

  2. 2

    You swap a typeface with an x-height ratio of 0.52 for one at 0.40, keeping the declared size at 16 pixels. What happens?

  3. 3

    Why does justified text produce rivers at a 35-character measure but not at 70?

  4. 4

    A stylesheet sets hyphens: auto and no hyphenation appears anywhere. What is the most likely cause?

  5. 5

    Why is a paragraph set in capitals measurably slower to read than the same paragraph in mixed case?

  6. 6

    A multilingual site has one rule for emphasis: set it in italic. What breaks?

Module 4

11 lessons · 96 min

Colour, measured

Colour is where design has the most measurable answers and the most unreferenced folklore. This block gives you the arithmetic — the luminance formula behind every contrast checker, why the lightness slider in HSL is not lightness, what colour vision deficiency actually removes — and it is equally clear about where the standards are contested, where cultural meaning has no universal answer, and where a screen cannot tell you what will come off a press.

By the end you can

Build a palette from perceptual lightness ramps rather than from hue, state the contrast ratio of every text pair and the criterion it is being judged against, name the specific conditions under which that ratio overstates legibility, and give any colour-carried meaning a second non-colour encoding

  1. 35A palette will not save an unreadable page10 minBuild palettes by moving lightness rather than hue, check every text pair against a contrast number, and never let colour be the only thing carrying a meaning.
  2. 36The lightness slider is not lightness9 minHSL lightness is a position in the RGB cube rather than a measurement of brightness, so yellow and blue at the same L differ more than tenfold in luminance — build ramps in a perceptually uniform space such as OKLCH, or measure every swatch.
  3. 37What a contrast checker is actually computing9 minA contrast ratio is the linearised, sensitivity-weighted luminance of two colours compared with a flare constant added to both, capped at 21:1 — and the 4.5:1 threshold is a conformance floor rather than a guarantee that text is comfortable to read.
  4. 38Where the contrast standard is wrong, and what is unsettled9 minThe WCAG 2 contrast formula ignores size, weight and polarity and mis-scores very dark and very light pairs, so meet it as the enforceable floor while adding headroom for small or light text and checking dark mode separately — APCA addresses these gaps but is a draft, not a requirement.
  5. 39What colour blindness actually removes9 minCommon colour vision deficiency collapses red-green distinctions while leaving lightness discrimination intact, so a palette built on lightness steps is already largely robust — and a simulator showing a distinction disappearing is conclusive while one showing it surviving is not.
  6. 40Colour is never the only signal8 minColour must always be the second encoding of something already carried by lightness, shape, text or position, because colour fails under deficiency, greyscale, sunlight and bad screens — and the check is simply to use the product in greyscale.
  7. 41Greys are a design decision8 minNeutrals cover most of an interface, so build them as a perceptually even ramp tinted slightly towards one hue, keep every grey at the same temperature, and spread the dark end further than the arithmetic suggests because small differences compress near black.
  8. 42Red means danger, except where it does not8 minThere is no reliable universal mapping from hue to meaning — red is danger in one market and auspicious in another, and stock-market colour conventions are inverted across East Asia — so rely on conventions you establish consistently inside your own product and always back them with a non-colour signal.
  9. 43Dark mode, built rather than inverted9 minA dark theme is a second design with its own colour values — a near-black surface rather than black, elevation expressed by lightness rather than shadow, lightened and desaturated brand colours, and a slightly lighter font weight to offset halation.
  10. 44Why your blue printed purple9 minScreens add light and presses subtract it, so saturated blues, greens and oranges simply do not exist in CMYK; soft-proof in Scribus or GIMP against the printer's profile, use rich black for solids and pure K for small text, and approve colour from a printed sample rather than a screen.
  11. 45How many colours a design needs8 minOne neutral ramp, one brand ramp and three or four semantic colours covers most design work, because each additional colour reduces the information carried by every existing one — data visualisation is the genuine exception, and there the palette should be a tested colour-blind-safe set.
Case studyThe grey that passed in the office and failed in the sunA health survey app used by about 240 ASHA workers across three blocks of rural Maharashtra, filling in household forms outdoors.Read it

The app was built by a four-person team in Pune for a state-funded programme. The interface followed a brand palette produced by an agency two years earlier: a strong blue for actions, near-black for primary text, and a light grey for secondary text, hints and field labels.

The grey was documented in the brand sheet as the "supporting text" colour. Checked against white, it measured 4.62 to 1. That passes the AA requirement for body text, which is 4.5 to 1, and every audit the team ran came back green.

The complaint nobody could reproduce

Field reports had a recurring line that the programme manager could not make sense of: workers said they "could not see the small writing". Nobody could reproduce it. On the team's monitors the grey was perfectly legible, and on a phone at full brightness indoors it was fine.

A developer took a phone out to a supervisor's meeting in Ahmednagar in March, at about eleven in the morning, and opened the app in the open courtyard where most of the workers were sitting. The primary text was readable. The grey was gone. Not faint — gone, indistinguishable from the white field it sat on, at the brightness the phone had settled on after a morning outside.

Three things had stacked. Phone screens in daylight lose most of the difference between a pale grey and white. The handsets in use were inexpensive Android devices with narrower gamut and poorer contrast than the team's own phones. And the audience included a substantial number of workers over fifty, whose eyes receive materially less light than a young team's.

The grey had a headroom of 0.12 above the requirement, and every one of those three conditions ate more than that.

The decision

The repair was one line in a stylesheet. The secondary text colour moved from the brand grey to a considerably darker one at about 7.4 to 1, and the field hints, which were the worst case, moved to the primary text colour with a smaller size carrying the distinction instead.

The obstacle was governance. The brand palette had been signed off by the department's communications committee, and the grey was in a document with an approval reference on it. Changing an approved colour meant a fresh note, a committee that met monthly, and — the team was told informally — a likely request to see the whole palette again, which would reopen questions about the blue that nobody wanted reopened.

The estimate was three weeks at best and a quarter at worst.

Against that sat the field cost. The hints under the fields were where the form explained what went in them: which date, whose name, what unit. A worker who cannot read the hint fills the field from memory of the training, and the commonest errors in the incoming data matched exactly the fields whose hints carried the most information. The programme was in its baseline survey, and the baseline is the number every later comparison is made against.

The team's lead put the two costs next to each other in the note she wrote: wait for the committee and collect a quarter of a baseline survey with a known data-quality fault, or change an approved colour without approval and answer for it afterwards.

What actually happened

The team wrote the note, and while it was in the queue they shipped the change as an accessibility defect rather than a design change, on the argument that a marginal pass under laboratory conditions is not a pass under field conditions and that the app had a legal obligation to be usable. The release notes said exactly that, in one sentence, which meant nobody could later claim it had been done quietly.

The committee's response, when it came six weeks later, was to accept the change and to ask that the brand sheet be amended to carry two greys: the original for marketing surfaces and a darker one specified for interfaces. That was a better outcome than the team had asked for and had not occurred to anybody before the incident.

The habit that came out of it was smaller and more useful than the colour change. The team bought one inexpensive second-hand Android handset, kept it on the desk, and made a rule that anything before release is looked at on that phone, outdoors, once. The first month it found two more contrast failures, a tap target under a system gesture bar, and a loading spinner that was invisible against the sky.

Worth arguing about

  1. The grey passed 4.62 to 1 and was still unreadable in the field. Does that mean the contrast standard is wrong?

    One answer

    No. It means the threshold is a conformance floor rather than a statement that the text is comfortable. The formula takes two colours and knows nothing about ambient light, screen quality, the size and weight of the text, or the reader's age. A pass with 0.12 of headroom leaves nothing for conditions the check does not model, which is why a marginal pass should be treated as a fail and small or light text given headroom well above the minimum.

  2. Why were the field hints the worst case rather than merely one more instance?

    One answer

    The hints were the only place that explained what each field wanted, so the colour was the sole carrier of information that had no second encoding anywhere. Unreadable secondary text elsewhere costs polish; an unreadable hint costs the datum. The repair reflected that by moving hints to the primary text colour and carrying the visual distinction with size instead, rather than simply darkening the grey a little.

  3. What did the cheap handset on the desk buy that an audit tool did not?

    One answer

    Automated checks evaluate declared colours against declared backgrounds under ideal assumptions, and they found nothing here because the pair technically passed. A real device outdoors tests the conditions the formula excludes: screen quality, brightness under sunlight, glare, and the physical size of targets under a thumb. In the first month it found three classes of fault, none of which any checker reports.

Test yourself6 questions on this modulePractice. Nothing is recorded and no score is kept.
  1. 1

    Pure yellow and pure blue are both written as hsl(h, 100%, 50%). Why can one carry white text and the other cannot?

  2. 2

    The contrast formula adds 0.05 to both luminances before dividing. What is that constant for?

  3. 3

    A heading is set at 18 pixels bold and the designer claims the 3 to 1 large-text threshold. Is that right?

  4. 4

    A chart distinguishes six series by colour and maps them in a legend. What is the most robust repair?

  5. 5

    In a dark theme, why is a raised surface made lighter rather than given a shadow?

  6. 6

    A saturated screen blue came back from the press as a flat purple. What happened?

Module 5

10 lessons · 83 min

Composition and the image

Most design work includes a picture, and most pictures arrive as somebody else's rectangle. This block is about what you do with them: where the crop should fall and what it removes, why a tangent is uncomfortable, how to build depth on a flat surface, how to keep text legible over an image you do not control, and how to make one asset survive being re-cropped by four different platforms.

By the end you can

Crop and place an image so that the subject, the four frame edges, the empty space and any text over it all support one reading, justify the crop by what it removes, and produce a single asset that survives re-cropping to square, portrait and vertical without losing its subject

  1. 46The rule of thirds is a nudge, not a law9 minDecide first whether the picture wants balance or tension, then check the four edges — the thirds grid is only useful for stopping you centring a horizon.
  2. 47Why a near-touch is worse than an overlap8 minA tangent removes the occlusion information the visual system uses to order depth, so two contours that nearly touch fuse into one ambiguous shape — either overlap them clearly or separate them clearly, and never crop a figure at a joint.
  3. 48A crop is a decision about what leaves8 minA crop is a decision about what to remove rather than what to keep, it cannot change perspective because that was fixed at capture, and it spends resolution permanently — so crop last, for a named output, and never over the original.
  4. 49Building a path through the image8 minThe eye follows the smoothest available path, and gaze direction, rows of objects and value edges create lines the picture never drew — so give a facing subject space to look into, specify the intended path before checking it, and never leave a strong line ending at nothing.
  5. 50Six ways to make a flat surface have depth8 minOcclusion is by far the strongest depth cue and costs nothing, aerial perspective — less contrast, less saturation, closer to the background lightness — is the one you can apply deliberately anywhere, and shadows work only when every shadow in a design agrees about one light direction.
  6. 51The space between things has a shape8 minThe leftover space in a layout is itself a shape that readers see, so evaluate it directly by filling every element with flat black and looking only at the white — and place the largest area of empty space beside the most important element rather than distributing it evenly.
  7. 52One image, four crops9 minDesign in the tallest ratio you need and keep everything load-bearing inside the intersection of all the crops you will be asked for, because platform crops, overlay positions and compression all change without notice and margin is the only durable defence.
  8. 53Two focal points is none8 minTwo elements of similar prominence leave the eye oscillating, so demote one, merge them into a single group, or commit to an exact symmetry — and the diagnostic is not that viewers disagree with you but that they disagree with each other about what they saw first.
  9. 54Text over a picture you do not control9 minAn image has no single contrast ratio, so the worst pixel under the text governs legibility — and because the image is usually unknown in advance, a solid panel or a multi-stop gradient scrim is the robust choice and a text shadow alone is not.
  10. 55Repetition, and the one that breaks it8 minRepetition builds a prediction and a single deviation violates it cheaply, which makes consistency the thing that gives emphasis its force — so break a pattern once, at the place you want attention, and never twice in the same way.
Case studyTwo teachers, one hoarding, and the crop nobody wanted to makeA coaching centre in Kota with two founding teachers, commissioning one photograph to serve a roadside hoarding, a square feed post and a vertical story.Read it

The centre had grown from one room to four batches, and the two founders taught physics and chemistry between them. For the new session they paid for a photographer, a day's shoot, and a designer to produce the campaign.

The brief was to use one photograph across everything, because the budget would not stretch to three shoots and because the two founders wanted the same image on the hoarding, the feed and the printed handbill outside the railway station.

The photograph delivered was competent and had a specific problem. Both teachers stood at similar distance from the camera, at similar size, both facing the lens, one slightly left of centre and one slightly right, with the centre's board behind them. Everybody who saw it said it felt flat, and nobody could say why.

The diagnosis

The designer ran two checks. She blurred the image heavily and found two masses of almost identical weight, plus a third from a bright window behind the right-hand figure. Then she showed the composition to five people for three seconds each and asked what they had seen first.

The answers split: two said the left teacher, two said the right, one said the window. That split was the finding. Viewers disagreeing with the designer is an opinion; viewers disagreeing with each other about what they saw first is a measurement, and it says there is no primary at all.

There was a second problem underneath the first. The image had to crop to 16:9 for the hoarding, 1:1 for the feed and 9:16 for the story. With the two figures placed near the left and right thirds, the vertical crop could not contain both without cutting one at the shoulder, and the square crop put a figure hard against each edge.

The options, and what each cost

The designer put four on the table with the cost of each stated.

Crop so one teacher is cut by the frame edge. Cheapest, strongest, and available immediately from the file they already had. It makes one founder secondary and one primary, permanently, on a hoarding their students' parents drive past.

Reshoot with one teacher turned to look at the other. Produces the best image, because it converts two competitors into a relationship with a direction, and it also solves the crop, because the pair can then be composed closer together. It costs a second shoot day and pushes the campaign past the date the hoarding contract started, which was already paid for.

Blur or darken behind one figure. Subtle, survives scrutiny, available after the fact. It still leaves two figures at similar size, so the oscillation is reduced rather than removed, and it does nothing at all for the vertical crop.

Commit to an exact symmetry. Place both at identical size, identical treatment, equal distance from a central axis, looking straight out. A deliberate tie reads as a statement rather than an unresolved argument. It is the only option that treats the two founders equally, and it makes the hoarding static and the 9:16 crop nearly impossible, because an exact pair needs horizontal room the vertical frame does not have.

The decision was never really a visual one. Two people who had built the centre together had to agree which of them the campaign would be about, or agree to spend money and time so that neither had to be.

What actually happened

They reshot, and the extra day was cheaper than either founder had expected once the photographer was already engaged. The new frame placed the chemistry teacher three-quarters towards the left, looking across at the physics teacher, who faced the camera. Occlusion did the rest: a slight overlap of one shoulder in front of the other ordered the two figures in depth and bound them into a single group, so the eye stopped oscillating and read the pair as one subject with a direction.

The composition was built in 9:16 with everything load-bearing inside the central square, so the 1:1 and 16:9 crops came out of the same file without loss. The hoarding ran four days late against the contract and the vendor did not charge for it.

The unexpected result was in the handbills. The designer had assumed the crop discipline was a production convenience. What it actually removed was the three rounds of argument that had happened in every previous campaign about whose face was larger, because the question had been settled once in the frame rather than repeatedly in the crops.

Worth arguing about

  1. The five-person test produced a split answer. Why is that more useful than the designer's own judgement that the image felt flat?

    One answer

    A split tells you the failure mode rather than that there is one. If viewers disagree with the designer, that is a difference of opinion about what should be first. If viewers disagree with each other about what they saw first, no element is winning the first fixation, which is the definition of two focal points and therefore none. It converts an unnamed feeling into a specific diagnosis with known repairs.

  2. Why did the reshoot solve the aspect-ratio problem as well as the focal-point problem?

    One answer

    Both problems came from the same arrangement: two figures at similar prominence, spread towards the left and right thirds. Turning one to look at the other and overlapping the shoulders let them be composed close together as one group, which meant everything load-bearing could sit inside the central square that all three crops share. A composition does not survive reframing unless it was designed inside the intersection of the crops it has to serve.

  3. The exact-symmetry option treated the two founders equally. Why was it still rejected?

    One answer

    A deliberate tie is a legitimate resolution and reads as a statement rather than an argument, but it has to be exact to work, and an exact horizontal pair needs width the 9:16 frame does not have. It would have solved the emphasis problem while making the vertical crop impossible, which was one of the three outputs the single photograph had to serve.

Test yourself6 questions on this modulePractice. Nothing is recorded and no score is kept.
  1. 1

    Why does a near-touch between two contours read worse than a clear overlap?

  2. 2

    A portrait taken from twenty centimetres away has a distorted nose. Can cropping repair it?

  3. 3

    A card shows white text over photographs uploaded by users. Which treatment is the robust choice?

  4. 4

    Where should the largest area of empty space in a poster go?

  5. 5

    A grid of twelve identical cards is given four double-width cards to create emphasis. What happens?

  6. 6

    One 1080 by 1920 composition must also crop to 1:1 and 4:5 from the centre. Where does the headline have to sit?

Module 6

10 lessons · 86 min

Real screens, real thumbs, real paper

A design lives somewhere: a 360-pixel phone held one-handed on a bus, a 200% browser zoom, a sheet of 130gsm paper coming off a press with 3mm trimmed off every edge. This block covers the numbers those surfaces actually have — device widths and pixel ratios, thumb reach, zoom and reflow requirements, page weight, bleed and paper — and what each one forces you to decide differently.

By the end you can

Produce a layout that works at 360 CSS pixels one-handed in daylight, at 400% zoom, and on paper with correct bleed and resolution, naming for each constraint the specific number it imposes and which design decisions change because of it

  1. 56Design it at 390 pixels or find out the hard way9 minDesign at 360-390 pixels wide and test on a cheap phone in daylight, because shrinking a desktop layout hides the faults that expanding a phone layout exposes.
  2. 57What a pixel is, and how wide phones actually are9 minA CSS pixel is an angular reference rather than a physical size, device pixel ratio means raster assets need 2x or 3x export while vectors need none, and 360 CSS pixels is the width to design at because a layout that fits at 393 can still break there.
  3. 58Breakpoints come from the content, not from devices8 minPut breakpoints where your content measurably breaks rather than where devices sit, prefer intrinsic rules and container queries over enumerated cases, and design the small screen first because a narrow column forces the hierarchy decisions a wide one lets you avoid.
  4. 59Where a thumb can actually go8 minThe top-left corner is the hardest point on a large phone for most people, so frequent actions belong in the easily reached bottom while destructive ones need separation — and because people switch grips constantly, nothing essential may sit where a single grip cannot reach it.
  5. 60Why 10pt is fine in print and terrible on screen8 minPrint builds a 10pt letter from hundreds of dots while a screen builds it from about ten pixels, so screen minimums are larger — 16px body, and exactly 16px on form inputs because iOS auto-zooms below that — and font smoothing declarations change stroke weight rather than sharpness.
  6. 61The five screens nobody designs9 minEvery screen ships in at least six states — empty, one, too many, loading, error and offline — and the undesigned ones default to a blank rectangle and the words something went wrong, so produce all six before calling a screen finished.
  7. 62Motion, and the people it makes ill8 minMotion overrides every other attention channel, so keep it to continuity, feedback and direction at 100 to 400 milliseconds with ease-out — and honour reduced-motion by replacing movement with a fade, because large-scale motion causes real symptoms rather than mild annoyance.
  8. 63The accessibility requirements that are design decisions9 minFocus visibility, 400% reflow, agreement between visual and source order, persistent labels and functional alt text are design decisions rather than implementation details — and automated checkers find roughly a third of accessibility issues, so the rest needs a person with a keyboard and a free screen reader.
  9. 64The designer decides how heavy the page is9 minPage weight is set by design choices — how many images, how many font weights, how large the hero — and a 3MB image exceeds the ten-second attention limit on a connection many readers have, so choose the weight deliberately rather than letting export defaults choose it.
  10. 65Bleed, trim and the things paper does9 minTrimming lands within about a millimetre of the mark, so artwork needs 3mm of bleed beyond the trim and nothing important within 3 to 5mm inside it — and paper finish, binding method and viewing distance each change the design before the file is exported.
Case studyThe bus booking site that worked everywhere except the bus standA private bus operator in Madurai running twelve routes, with a booking site built by a two-person web shop.Read it

The site was well liked in the office. It opened with a full-width photograph of a new coach on a coastal road, taken by the owner's nephew, with the search form below it. On the shop's machines it loaded instantly and looked expensive.

Bookings through the site were about a fifth of what the operator had expected, and the counter staff had an explanation nobody had tested: people in Madurai prefer to book at the counter.

The morning at the stand

One of the developers spent a Tuesday morning at the bus stand with a second-hand phone he had bought for two thousand rupees, on a prepaid connection, standing in the open. He tried to book a ticket the way a passenger would.

The hero photograph was 3.4 megabytes. On the connection available at the stand, at around 1.6 megabits per second with a crowd of people on the same cell, the page showed a white rectangle for about fifteen seconds before anything appeared. Ten seconds is the limit of held attention. He tried it eleven times over the morning and it never once completed inside that.

When it did load, the photograph occupied the whole of the first screen, so the search form was below the fold and the page opened on a picture of a bus rather than on the thing the page was for.

The date field used a font size of 14 pixels, so tapping into it made the browser zoom the whole page and the layout jumped. The "Search buses" button sat at the top right of the form, which is the hardest point on a large phone to reach with one thumb — and at a bus stand, one hand is holding a bag.

The seat map was a table of six columns. At 360 pixels it scrolled sideways, which nobody discovered, so passengers thought only the first two seats were available.

Finally, the price and the departure time were set in a light grey that had looked refined in the office. In the sun, on that phone, neither was visible.

The decision

The list of repairs was short and none of them was difficult. The argument was about the photograph.

The developer proposed replacing the hero with a flat colour band carrying the operator's name and the search form, and moving the coach photograph further down the page, resized to 280 kilobytes and served at the size it was displayed. That takes the first screen from 3.4 megabytes to something under 200 kilobytes and puts the form at the top.

The owner objected, and the objection was not vanity. The competing operator's site had a large photograph. The coach was new, it was the main thing distinguishing the service from three cheaper operators on the same routes, and the owner's view was that a site that opened with a coloured band and a form would look like a government page and cost him the customers who were choosing on comfort.

Both costs were real. A page that loads in fifteen seconds loses the passengers who are standing at the stand with a bag and a departure in forty minutes. A page that shows nothing of the coach loses the passengers who are choosing between operators the night before, on a fast connection at home, where the photograph is the whole argument.

What actually happened

The compromise was to serve the form first and the photograph second, in that order in the page, rather than to choose between them. The first screen became a solid colour band with the operator's name, the search form, and a single line about the new fleet. The coach photograph moved immediately below, at 280 kilobytes, with width and height attributes so the layout no longer shifted when it arrived.

The rest went in the same release: form inputs at 16 pixels, the search button moved to the bottom of the form and made full width, the seat map turned into a labelled card per row, greys darkened, and the date field given a tap target of 48 pixels.

Measured at the stand on the same cheap phone two weeks later, the first screen was usable in about two seconds. Bookings through the site roughly doubled over the following two months, which the operator's counter staff attributed to a poster at the stand that went up at the same time. Nobody could separate the two effects, and the developers did not claim to.

The owner's own summary was the useful one. He said the photograph was still the reason people chose his buses, and it had simply been standing in the doorway.

Worth arguing about

  1. The counter staff explained low bookings as a local preference for the counter. What made that explanation hard to dislodge?

    One answer

    It was consistent with the evidence available in the office, where the site always worked. The faults were all conditional on circumstances nobody in the office experienced: a slow shared connection, a cheap handset, sunlight, and one free hand. Browser device emulation reproduces the layout and none of those conditions, so a plausible story about customer behaviour survived until somebody stood at the bus stand and tried to book a ticket.

  2. Which of the faults found that morning were design decisions rather than implementation defects?

    One answer

    Nearly all of them. The weight of the first screen was set by the decision to open with a full-bleed photograph; the input size that triggers the iOS zoom is a type decision; the position of the search button is a layout decision made against the thumb reach map; the six-column seat table is a decision to carry a desktop presentation onto a phone; and the light greys were a palette decision. A developer can compress an image, but cannot decide the page does not need one.

  3. Why was serving the form first and the photograph second a better answer than either side's original position?

    One answer

    Because the two costs applied to different readers in different conditions. The passenger at the stand needs the form inside a few seconds on a poor connection; the passenger choosing at home the night before needs to see the coach. Ordering the page so the form arrives first and the photograph follows serves both, and resizing the photograph to 280 kilobytes means the second reader pays a fraction of the original weight for the same argument.

Test yourself6 questions on this modulePractice. Nothing is recorded and no score is kept.
  1. 1

    A full-height section's button is cut off on a real phone but not in device emulation. Which unit fixes it?

  2. 2

    Why must a form input on the web be set at 16 pixels or larger rather than 14?

  3. 3

    Your breakpoints land at 540, 720 and 1180 pixels rather than at named device widths. What does that indicate?

  4. 4

    A product honours prefers-reduced-motion by setting every animation duration to almost zero. What is lost?

  5. 5

    A stylesheet contains outline: none on :focus because the default ring looked untidy. What is the correct repair?

  6. 6

    An A5 flyer at 148 by 210mm has a photograph running to the edge. What does the artwork need?

Module 7

9 lessons · 74 min

Making the decision once

The scales in the previous blocks were each a way of deciding something once instead of repeatedly. This block joins them up: named tokens, components and the variants worth having, the states every component ships in whether or not you drew them, icons as a set rather than a collection, and an honest account of what a design system costs and when a project is too small to want one.

By the end you can

Convert a set of one-off screens into named tokens and a small component set, decide for any new element whether it is a variant of something existing or a new thing, specify every state a component can be in, and say at what point a project is large enough for the system to be worth its maintenance cost

  1. 66A token is a decision with a name8 minA token is a named design decision, and the structure that matters is two layers — primitive values and semantic roles pointing at them — because retheming means remapping the semantic layer rather than editing every component.
  2. 67Names that survive the next change8 minName tokens and components by the role they play rather than by how they currently look, number ramps rather than labelling them small and large, and order words from general to specific so autocomplete groups them — then test the names on somebody who did not write them.
  3. 68Variant, or a new thing9 minMake a variant when the structure and purpose are the same and only the appearance differs, and a new component when the content model differs — then define axes and rules rather than drawing permutations, and use slots to keep the property count from doubling.
  4. 69Every state you did not draw still ships9 minA component ships in every state whether or not it was designed, hover and focus serve different audiences and never substitute for each other, and a disabled control that cannot be read or explained should usually be an enabled control that explains what is missing on activation.
  5. 70Icons are a set, not a collection8 minUse one icon set, because mismatched grids, stroke weights and detail levels are visible even when nobody can name them — and label icons wherever there is room, since comprehension without a label is poor for everything outside a small well-learned set.
  6. 71The afternoon version8 minA working design system for a small project is about thirty tokens and six components, all derived from decisions already made in the earlier blocks — and the step that proves it is rebuilding one real screen using nothing else.
  7. 72Specifications that survive contact8 minHand over token names rather than pixel measurements, specify the rules for long content and narrow containers rather than only providing pictures, and keep documentation beside the code or generated from it, because stale documentation is worse than none.
  8. 73Consistency is not uniformity8 minConsistency means the same things look the same while uniformity means everything does, so break the system only for moments that must not feel routine, genuinely new content, a different context or a timed experiment — and require every exception to be resolved rather than merely recorded.
  9. 74When not to build one8 minBuild the three scales always, and everything beyond them only once the same decision has been made three times or a second person has joined — because a system is a product with ongoing maintenance cost, and most published advice is written for organisations a hundred times larger than the project in front of you.
Case studyThe milk round app, and the system built three weeks too earlyA two-person product team in Pune building a delivery app for a dairy co-operative with about 400 daily rounds.Read it

The first version of the app had four screens: the round list, a customer, a delivery entry, and a day summary. It was built in five weeks by one designer and one developer, and it worked.

The designer had read a good deal about design systems, and before the second phase began she proposed three weeks to build one: a full token set, a component library of eighteen components, a documented naming convention, and a rendered gallery. The developer was in favour. The founder asked what it would delay, and the answer was the route-planning screens, which were the reason the co-operative had commissioned the work.

The argument, stated fairly

The case for building it then was that the product was about to grow from four screens to perhaps thirty, and that every screen built without a system would have to be revisited. The designer had already seen the early signs: two card treatments that were nearly the same, three different greys for secondary text, and a button whose padding differed by two pixels between two screens because it had been drawn twice.

The case against was that nobody yet knew what the route-planning screens needed. A route screen has a map, a reorderable list, a time window per stop, and an offline state, and none of those had an equivalent in the four screens that existed. Eighteen components designed before that work would contain several that were guesses, and unpicking a guessed component after it has been used in ten places is more expensive than not having had it.

The founder's own cost was the plainest. Three weeks was a third of the remaining budget for the phase, spent on something the co-operative would never see and could not evaluate.

The compromise, and the trigger that settled it

What they agreed was narrower than either position. They spent half a day, not three weeks, on the three things that were already decided and already being got wrong: a spacing scale, a type scale and a colour ramp with a small semantic layer on top. Those three came out of decisions the design had already made, so nothing in them was a guess.

Everything else waited on a rule they wrote down: a component gets built when the same decision has been made three times, or when a second person starts making it.

A third thing was agreed at the same time and took twenty minutes: one page listing the six rules the team kept, such as one primary action per view, and space between groups at least three times the space inside them. None of those were new decisions either. They were decisions the four existing screens had already made, written down so that they did not have to be re-argued when the screens multiplied.

Both triggers fired within two months, and they fired for different things. The button reached three variants across the route screens and became a real component with a state table. The card did not — the three card-like things turned out to have different content models and stayed separate, which the designer said later she would have merged into one over-configured component if she had systematised in week one. Then a contract designer joined for the offline states, and within a week the naming convention stopped being optional, because two people were inventing names for the same roles.

What actually happened

The route-planning screens shipped on time, and the half-day scales did most of what the three-week system would have done for consistency. Of the eighteen components originally proposed, eleven were eventually built. Three of the remaining seven were never needed, and four turned out to be different from the way they had been sketched, which was the concrete version of the argument about guessing.

The token file stayed one CSS file of custom properties with no build step for the whole of the first year. It was replaced by a generated set only when an Android app appeared and the same colours had to reach two platforms.

The cost that surprised them was maintenance rather than construction. Once eleven components existed, keeping them cost the equivalent of a day or two a month, which nobody had budgeted and which came out of the designer's time. The founder's later view was that the half-day decision had been right and the number the team had been missing all along was not the cost of building a system but the cost of owning one.

Worth arguing about

  1. The designer's evidence for building early — two card treatments, three greys, a button drawn twice — was real. Why did it not justify the three weeks?

    One answer

    Those faults are exactly what the three scales fix, and the three scales cost half a day. The expensive part of the proposal was the eighteen components and the documentation around them, and nothing in the evidence spoke to those. The correct amount of system before the triggers fire is a spacing scale, a type scale and a colour ramp, because those encode decisions already made rather than decisions not yet made.

  2. Why did the card turn out differently from the button?

    One answer

    The button variants had the same structure and the same purpose and differed only in appearance and emphasis, which is the definition of a variant axis, so one component with rules served all three. The three card-like things had different content models — different parts, in different arrangements — which makes them separate components however similar their outlines are. Building a card component in week one would have merged three content models into one over-configured thing with a property for every field.

  3. What does the team's later finding about maintenance add to the decision they made?

    One answer

    It shows the relevant cost was never only the construction cost. A system is a product with users, and once eleven components existed somebody had to own them, answer questions, deprecate things and migrate usages, at roughly a day or two a month indefinitely. Budgeting zero for that is the commonest way systems are abandoned, and it is an argument for building the smallest system that removes the repeated decisions rather than the largest one the team can imagine.

Test yourself6 questions on this modulePractice. Nothing is recorded and no score is kept.
  1. 1

    Why should a button refer to a token called colour-action rather than to one called blue-500?

  2. 2

    A token file grows a new semantic entry for each screen: colour-settings-page-heading, space-profile-card-top. What has gone wrong?

  3. 3

    A card of image, title and three metadata rows sits beside a card of a paragraph and a link. One component or two?

  4. 4

    A Submit button is greyed out until the form is valid. Why is that usually the weaker pattern?

  5. 5

    During handoff a developer asks which token corresponds to 18 pixels. What does the question tell you?

  6. 6

    A solo designer is making a one-off flyer that will be printed once. How much system is worth building?

No ads. No data sale. No public scores on people. Ever.

© 2026 Addaly