UI/UX Design

Explore & Discover

Every app you use was designed by someone who thought hard about how *you* would feel using it. UI (User Interface) is what things look like — buttons, colors, layouts. UX (User Experience) is how it feels to use them. Start by becoming a detective of bad design: find three apps or websites that frustrate you and write down exactly what's confusing. Then find three that feel smooth and figure out why. Watch "Don Norman: 3 ways good design makes you happy" on YouTube (free, 16 minutes). Browse Dribbble.com to see what professional UI designers create. You're ready for the next step when you can describe one bad UX decision and one good UX decision you've actually experienced.

Learn the Basics

Learn the five core UX principles: usability, accessibility, desirability, findability, and credibility. Then learn the basic UI building blocks: buttons, forms, cards, navigation bars, and modals. Study Google's Material Design guidelines (material.io — free) and Apple's Human Interface Guidelines (developer.apple.com — free) to see how the world's biggest design teams think. Create a free Figma account (figma.com) and do their built-in "Figma Basics" tutorial. You'll use Figma for the rest of this quest. You're ready for the next step when you can name the five UX principles and point to an example of each in an app you use every day.

Build Your First Project

Design a mobile app screen for something you actually need — a homework tracker, a local hiking trail finder for Utah's Wasatch Mountains, or a meal planner. Start with a paper sketch (no tech yet) called a wireframe. Draw boxes and lines to show where things will go without worrying about colors or fonts. Then recreate it in Figma using basic shapes. Apply a consistent 8-point grid (everything sized and spaced in multiples of 8px). Add one real font from Google Fonts and two colors. You're ready for the next step when your Figma screen has a clear purpose, a navigation element, and at least one interactive button — and someone else can understand what the app does just by looking at it.

Experiment & Iterate

Test your design on real humans — start with a family member or friend. Show them your screen and ask: "What would you tap first?" and "What do you think this button does?" — don't explain anything, just watch. This is called usability testing. Write down every moment of confusion. Then iterate: change at least three things based on what you observed. Learn about "A/B testing" by reading the free article on NNGroup.com (Nielsen Norman Group — the gold standard for UX research). Redesign one screen twice with different approaches and compare them. You're ready for the next step when you can point to three specific changes you made based on user feedback.

Advanced Techniques

Learn Figma's prototyping features to make your designs actually clickable. Connect your screens so tapping a button takes you to the next screen — now you have an interactive prototype. Study "micro-interactions" — the tiny animations that make apps feel alive, like a heart icon bouncing when you like a post. Read "Microinteractions" articles on UX Collective (uxdesign.cc — free). Add at least two micro-interactions to your prototype using Figma's Smart Animate feature. Also study accessibility: check your color contrast using the free WebAIM Contrast Checker to make sure your design works for colorblind users. You're ready for the next step when your prototype is clickable and passes a basic accessibility contrast check.

Final Project Showcase

Design a complete, multi-screen app concept — at least five connected screens — for a real problem you see in your school, neighborhood, or community in Utah. Include a home screen, a detail screen, a form or input screen, a success/confirmation screen, and a profile or settings screen. Write a one-paragraph "design rationale" explaining the problem you solved and three specific decisions you made. Share your clickable Figma prototype by making it public and posting the link. Present it to at least one adult and two peers. You're ready for the next step when your prototype tells a complete story from a user opening the app to accomplishing their goal.