Path for students
Learn UI/UX from zero
Every lesson in order, with the game after each level to lock it in.
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.
- LessonConsistency & standardsThe same thing should look and behave the same way everywhere.
- LessonWhitespaceEmpty space groups content, sets focus and makes pages feel calm and premium.
- GamePlay Level 1: Visual FoundationsEarn at least one star to unlock the next level.
- LessonWCAG 2.2 AA contrastNormal text needs at least 4.5:1 contrast with its background. Large text and UI parts need 3:1.
- LessonVon Restorff effectWhen similar items are shown together, the one that differs gets noticed and remembered.
- Lesson60-30-10 ruleA balanced palette is roughly 60% neutral, 30% secondary and 10% accent.
- LessonDon't rely on color aloneColor should never be the only way to show meaning.
- GamePlay Level 2: Color & ContrastEarn at least one star to unlock the next level.
- 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.
- LessonSerial position effectPeople remember the first and last items in a series best.
- GamePlay Level 3: Laws of UXEarn at least one star to unlock the next level.
- LessonUser control & freedomGive people a clear way to undo, cancel or go back when they make a mistake.
- LessonVisibility of system statusAlways show people what is happening, ideally within a second.
- LessonHelp users recover from errorsError messages should be plain, specific and tell people how to fix the problem.
- LessonMatch the real worldUse words, concepts and order that your users already know.
- LessonRecognition over recallShow options instead of making people remember them.
- GamePlay Level 4: Nielsen's HeuristicsEarn at least one star to unlock the next level.
- LessonHelpful error messagesA good error explains the problem and the fix, right next to the field.
- LessonCTA copyButton labels should describe what the user gets, not what the system does.
- LessonVisible labelsKeep form labels visible above fields. Placeholders are not labels.
- LessonAsk only what you needEvery extra field lowers completion, so ask only what this step needs.
- LessonEmpty statesAn empty screen should explain what goes there and how to fill it.
- GamePlay Level 5: Forms & MicrocopyEarn at least one star to unlock the next level.
- LessonWCAG 2.2 target sizeClickable targets should be at least 24 by 24 CSS px (AA), and ideally 44 by 44.
- LessonVisible focusKeyboard users need a clear indicator of where they are on the page.
- LessonAlt textDescribe meaningful images in alt text, and give decorative images an empty alt.
- LessonPeak-end rulePeople judge an experience mostly by its best moment and its ending.
- LessonTrust signalsLower perceived risk with proof and reassurance at the moment of decision.
- GamePlay Level 6: Accessibility & TrustEarn at least one star to unlock the next level.
- LessonLine lengthKeep lines around 45 to 75 characters for comfortable reading.
- Lesson8-point spacing gridSpace things in multiples of 8 (and 4 for fine tuning) to keep layouts consistent.
- LessonType scaleUse a small, consistent set of font sizes and weights.
- LessonMobile body text sizeUse at least 16px for body text and form inputs on mobile.
- LessonLine heightBody text reads best with line height around 1.4 to 1.7.
- GamePlay Level 7: Typography & SpacingEarn at least one star to unlock the next level.
Want experts to fix it for you?
Bad Design designs and builds B2B websites that turn visitors into leads.