BitWithBite
UI/UX Worksheet
🎓 Project 1: Mobile App UI
SCORE___ / 20
NameClassDate
After this worksheet you can
Plan required screensApply Auto LayoutBuild variant-based componentsApply a shared style system📚 Quick Recap
🎯 What you'll practice: Planning a complete mobile app UI combining Lessons 7–12.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1The nav bar in this project should use:
2A button with default/hover/disabled states requires:
3All screens should use spacing that is:
4Text and color choices should come from:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The onboarding flow should have –3 screens.
6Required screens are: onboarding, home/dashboard, profile, and .
7List the 4 required screens for this project.
8Name 2 reusable components you'd need with variants, and their states.
9Why should the home screen's card list use Auto Layout instead of manual placement?
🚀 Section C · Challenge ● CHALLENGE 5
10Describe how you'd link onboarding screen 1 → 2 → 3 → home using prototyping, including the trigger and transition you'd choose.
💭 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 = 2 6 = settings 7 = Onboarding, Home/dashboard, Profile, Settings 8 = e.g. a Button component (default/hover/disabled) and a Card component (default/selected) 9 = Because Auto Layout automatically resizes and repositions cards as content changes, avoiding manual rework for every new card | 10 = Trigger: On Click on each "Next" button; transition: Smart Animate or Slide, connecting screen 1 to 2, 2 to 3, and the final onboarding screen's "Get Started" button to the home screen.