BitWithBite
UI/UX Worksheet
📱 Mobile Design Guidelines
SCORE___ / 20
NameClassDate
After this worksheet you can
Compare Apple HIG & Material DesignExplain safe areasExplain touch targetsDesign platform-aware UI📚 Quick Recap
🎯 What you'll practice: Platform conventions, safe areas, and touch targets.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Apple's design guidelines are called:
2Google's design system is called:
3Safe areas exist to avoid:
4Minimum recommended touch target size is roughly:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Material Design uses , bold color, and motion for hierarchy.
6Content placed under a notch risks getting .
7Contrast Apple HIG's visual style with Material Design's.
8Why might a back button be a swipe gesture on iOS but a visible icon on Android?
9Why do small touch targets cause usability problems?
🚀 Section C · Challenge ● CHALLENGE 5
10Design the same "back" navigation for both an iOS and Android version of an app, respecting each platform's conventions.
💭 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 = elevation 6 = clipped/untappable 7 = Apple HIG favors depth, blur, and content-first minimalism; Material Design uses elevation, bold color, and motion to show hierarchy 8 = Because each platform's users already expect that specific convention from every other app on their device 9 = Small targets are easy to miss or mis-tap, especially for users with larger fingers or motor impairments, leading to frustration and errors | 10 = iOS: rely on an edge-swipe gesture plus a small back chevron in the top-left; Android: a visible back arrow icon in the top app bar plus support for the system back button/gesture.