BitWithBite
UI/UX Worksheet
🎨 Design Principles
SCORE___ / 20
NameClassDate
After this worksheet you can
Name the 4 CRAP principlesExplain contrast & hierarchyExplain alignment & proximitySpot amateur vs professional design📚 Quick Recap
🎯 What you'll practice: Contrast, Hierarchy, Alignment, Proximity — the 4 core principles.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A bold headline next to light body text demonstrates:
2Grouping related items closer together is:
3Consistent edges creating invisible order describes:
4Size/weight/color showing what matters most is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5CRAP stands for Contrast, Hierarchy, , and Proximity.
6A design with everything centered and same-size text has no .
7Describe an amateur design mistake related to proximity.
8How does alignment create "invisible order" on a page?
9Give an example of using contrast to draw attention to a button.
🚀 Section C · Challenge ● CHALLENGE 5
10Look at any app on your phone. Identify one place where all 4 CRAP principles are used together, and describe how.
💭 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-C 3-A 4-C | 5 = Alignment 6 = hierarchy 7 = e.g. unrelated buttons placed right next to each other, implying a false relationship 8 = Consistent edges let the eye track content without conscious effort, creating a sense of order without any visible lines 9 = e.g. a bright orange "Buy Now" button against a muted gray background | 10 = Answers vary — e.g. a settings screen: bold section headers (contrast/hierarchy), grouped related toggles (proximity), consistent left edge for all labels (alignment).