Lesson 0001
Based on Robin Williams’ The Non-Designer’s Design Book. Get the book ↗
Every clear design, whether a dashboard, a diagram, or a slide, stands on four legs. Remove any one, and the thing wobbles. Get all four right, and the eye knows exactly where to go without the brain ever having to work.
This lesson gives you those four legs. Commit them to memory. They are the vocabulary you will use to both make and judge every visual you create from here on.
An unfortunate acronym. A powerful mental model. Once you see these four principles, you cannot unsee them. Every poster, every app, every slide deck reveals its structure.
If two things are different, make them very different. Not slightly different, that reads as a mistake. Bold vs regular. Dark vs light. Large vs small. Contrast creates the entry points into a page. It tells the eye: start here.
The most common beginner mistake is timid contrast, a headline that is only slightly bigger than body text, or two shades of gray that are barely distinguishable. Crank the difference.
Data Modeling Overview ---------------------- A semantic layer sits between your database and your reports. It defines relationships between tables so business users can query without writing SQL.
Timid contrast. Title barely different from body. No entry point.
DATA MODELING OVERVIEW
──────────────────────────────────
A semantic layer sits between your
database and your reports. It defines
relationships between tables so
business users can query without
writing SQL.Strong contrast. Title is bold, all-caps, followed by a rule. Eye lands on title first.
Repeat visual elements throughout a piece. Same font for all headings. Same color for all callouts. Same bullet style. Repetition creates a sense of unity and signals to the reader: these things are related, they belong to the same system.
Repetition is what separates a collection of unrelated boxes from a cohesive document. It builds rhythm.
● Revenue grew 12%
■ Costs grew 8%
▲ Margin improved to 34%
Different bullet shapes, different colors, no pattern. List feels chaotic.
● Revenue grew 12%
● Costs grew 8%
● Margin improved to 34%
Uniform bullet, uniform color. Reader trusts this is one list.
Nothing should be placed on the page arbitrarily. Every element should have a visual connection with something else on the page. When items are aligned, they create an invisible line that the eye follows. That line makes the design feel clean, intentional, and calm.
Center-alignment is the default trap. It feels safe. It reads as amateur. Pick a strong edge, usually left, and commit to it.
ETL Pipeline
Extract → Transform → Load
Runs every 6 hours
Centered text. Weak left edge. Eye wanders looking for structure.
ETL Pipeline
Extract → Transform → Load
Runs every 6 hours
Strong left alignment + blue left-border. Clean invisible line. Intentional.
Group related items together. Items that are close appear to belong to each other. Items that are far apart appear unrelated. Proximity is the simplest, most powerful way to organize information. It replaces the need for borders, boxes, and labels.
When in doubt, move related things closer and push unrelated things further apart. Let white space do the grouping for you.
Dataset: orders Source: PostgreSQL Last synced: 2h ago Dataset: users Source: MongoDB Last synced: 5h ago
No grouping. Hard to tell where one dataset ends and the next begins.
Dataset: orders Source: PostgreSQL Last synced: 2h ago Dataset: users Source: MongoDB Last synced: 5h ago
Blank line between groups. Sub-items indented. Proximity does the grouping, no boxes needed.
These four are not independent. They reinforce each other:
Contrast draws the eye to what matters. Alignment gives the eye a rail to ride. Proximity clusters related information so the brain chunks it. Repetition makes the whole thing feel like one object, not many.
Answer from memory. Struggle builds storage strength.
You have a dashboard with three unrelated metric cards. They’re all the same size and color, spread evenly across the top. Which principle is violated?
Contrast. If they are unrelated and none is more important, that’s fine, but there must be a visual entry point. The most important metric should be larger or darker. No contrast = no hierarchy = user doesn’t know where to look.
A slide has a title, a subtitle, and three bullet points. The subtitle is closer to the bullets than it is to the title. Which principle is violated?
Proximity. The subtitle belongs to the title, not the bullets. Moving the subtitle closer to the title groups them as one unit. The bullets form a separate group below.
You see a report where the first section uses a blue heading, the second uses a red heading, and the third uses a black heading, all in different font sizes. Which principle is violated?
Repetition. All section headings should share the same font, size, and color. Repetition tells the reader: “these are all the same kind of thing.”
A diagram has five boxes connected by arrows. Two boxes are left-aligned, one is centered, and two seem randomly placed. Which principle is violated?
Alignment. Every box should connect visually to something else. Pick one alignment anchor (left edge, center spine) and commit to it throughout the diagram.
Read Robin Williams’ The Non-Designer’s Design Book. The first four chapters expand each principle with dozens of real-world examples. It is the single highest-leverage book you can read at this stage.
The Design Glossary (coming in the next lesson) will catalog these terms and more as we go.