BitWithBite
UI/UX Worksheet
🎨 Design Fundamentals Review
SCORE___ / 20
NameClassDate
After this worksheet you can
Recall the 4 CRAP principlesRecall color/typography rulesRecall the 8px systemApply fundamentals together📚 Quick Recap
🎯 What you'll practice: A full review of Lessons 1–5 before moving into Figma.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Which principle explains grouping related items?
2Complementary colors sit:
3WCAG AA normal text contrast minimum:
4A valid 8px-system spacing value:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Size/weight/color used to guide the eye is called visual .
6A limited set of consistent font sizes is a type .
7Name the 4 CRAP principles in order.
8Explain why 8px multiples are preferred over arbitrary spacing values.
9Give an example combining color psychology with contrast in one design decision.
🚀 Section C · Challenge ● CHALLENGE 5
10Critique a screen from any app using all 4 CRAP principles plus one typography and one spacing observation.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = hierarchy 6 = scale 7 = Contrast, Hierarchy, Alignment, Proximity 8 = They divide cleanly by 2/4 and match common screen densities, keeping spacing consistent across a whole design 9 = e.g. a bright red "Delete" button (contrast) using red's urgency association (psychology) to signal danger | 10 = Answers vary based on the app chosen.