Visual design, typography, and information hierarchy

Explain how grouping, typography, layout, color, and visual encodings affect a reader’s task. Compare treatments and separate technical checks from evidence of usability.

Prerequisite: Basic arithmetic. No design software or previous typography knowledge required. Eleven lessons and 22 illustrated exercises develop task-based critique, grouping, hierarchy, type, reading blocks, grids, color, accessibility, charts, and adaptation. Eight interactive comparisons keep references visible. The course distinguishes visual hypotheses, calculated geometry, and specific WCAG criteria from user evidence and whole-site conformance.

Lessons

1. 1

   Start with the reader's task

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

2. 2

   Make relationships visible with space

   Proximity, similarity, and enclosure suggest which items belong together. Those cues can agree or conflict.

3. 3

   Assign prominence to roles

   Size, weight, position, and spacing can distinguish levels. More emphasis everywhere does not create a clearer order.

4. 4

   Inspect letterforms before choosing a font

   Nominal size does not fix visible letter size. Shape, spacing, weight, and character distinction affect the result.

5. 5

   Balance line length and line spacing

   A text block is a coupled system. Width, type size, line height, and content all affect wrapping and return to the next line.

6. 6

   Use alignment and grids to organize a page

   A grid allocates space and supplies shared alignment lines. It does not decide content priority for you.

7. 7

   Separate color roles from contrast

   Hue can categorize, while luminance contrast helps distinguish foreground from background. Neither makes the other unnecessary.

8. 8

   Make meaning survive beyond appearance

   Color, visual position, and visible labels must agree with programmatic structure and available interaction.

9. 9

   Match visual encodings to the comparison

   Length, position, area, and color imply different relationships. A chart can contain correct numbers while suggesting the wrong comparison.

10. 10

    Adapt layouts without losing the message

    A smaller available width should trigger a reasoned change in arrangement, not automatic shrinking of everything.

11. 11

    Audit a design against its intended task

    Combine content, grouping, typography, accessibility, and evidence into a revision you can explain and test.