Path for designers
Level up your craft
The visual and behavioural foundations behind interfaces that feel effortless.
Your progress
- LessonVisual hierarchyArrange size, weight, color and position so people see the most important thing first.
- LessonLaw of ProximityItems placed close together are seen as related.
- LessonAlignmentElements that share edges create order and are easier to scan.
- LessonWhitespaceEmpty space groups content, sets focus and makes pages feel calm and premium.
- Lesson8-point spacing gridSpace things in multiples of 8 (and 4 for fine tuning) to keep layouts consistent.
- ToolSpacing and radius tokensGenerate a 4pt or 8pt spacing scale and a radius set, with a live component preview.
- LessonType scaleUse a small, consistent set of font sizes and weights.
- LessonLine lengthKeep lines around 45 to 75 characters for comfortable reading.
- LessonLine heightBody text reads best with line height around 1.4 to 1.7.
- ToolType scale generatorBuild a modular type scale with line heights and optional fluid sizes. Export CSS, Tailwind or tokens.
- Lesson60-30-10 ruleA balanced palette is roughly 60% neutral, 30% secondary and 10% accent.
- LessonWCAG 2.2 AA contrastNormal text needs at least 4.5:1 contrast with its background. Large text and UI parts need 3:1.
- ToolAccessible palette generatorTurn one brand color into full 50 to 950 scales with contrast labels. Export CSS, Tailwind or tokens.
- LessonFitts's LawThe time to hit a target depends on its size and its distance from the pointer or thumb.
- LessonHick's LawThe more options people see, the longer they take to decide.
- LessonMiller's LawWorking memory holds only a few items, so chunk information into groups.
- LessonJakob's LawUsers spend most of their time on other sites and expect yours to work the same way.
- LessonVisibility of system statusAlways show people what is happening, ideally within a second.
- LessonUser control & freedomGive people a clear way to undo, cancel or go back when they make a mistake.
- GamePlay all 7 levelsAim for 3 stars everywhere.
Want experts to fix it for you?
Bad Design designs and builds B2B websites that turn visitors into leads.