Module 5: Mobile UI/UX Design
Design intuitive and beautiful mobile interfaces following platform guidelines and best practices.
Mobile Design Principles
Mobile design is different from web design. Small screens, touch interactions, and on-the-go usage require special considerations. Think of mobile design as creating a conversation - every tap should feel natural and every screen should have a clear purpose.
📱 Core Mobile Design Principles:
- Thumb-Friendly: Important actions within thumb reach
- Clear Hierarchy: One primary action per screen
- Instant Feedback: Visual response to every interaction
- Minimize Input: Reduce typing, use smart defaults
- Progressive Disclosure: Show only what's needed
- Forgiveness: Easy undo, clear error messages
Platform Design Systems
Material Design 3 (Android)
Google's design system for Android apps.
- • Dynamic Color: Adapts to wallpaper
- • Material You: Personalized theming
- • Components: FAB, Bottom Nav, Cards
- • Motion: Smooth transitions
- • Typography: Roboto font family
- • Elevation: Shadow depth system
Key Colors:
Primary: Brand color
Secondary: Accents
Tertiary: Highlights
Surface: Backgrounds
Human Interface Guidelines (iOS)
Apple's design principles for iOS apps.
- • Clarity: Clean, minimal design
- • Deference: Content is king
- • Depth: Layered interface
- • Components: Tab Bar, Navigation Bar
- • Typography: SF Pro font
- • Blur Effects: Translucent layers
Key Elements:
System Colors: Adaptive
SF Symbols: 5000+ icons
Haptics: Tactile feedback
Gestures: Swipe, pinch
Cross-Platform Consistency:
When building for both platforms, balance consistency with platform conventions.
- • Keep core functionality identical
- • Adapt navigation patterns (tabs vs bottom nav)
- • Use platform-native components when possible
- • Respect platform-specific gestures
Responsive Layouts
Mobile apps must work on various screen sizes - from small phones to large tablets.
Screen Size Categories:
Small Phones
320-375px width
iPhone SE, small Android
Standard Phones
375-428px width
iPhone 14, most Android
Tablets
768px+ width
iPad, Android tablets
Responsive Techniques:
- • Flexible Grids: Use percentages, not fixed pixels
- • Breakpoints: Adjust layout at key sizes
- • Scalable Typography: Relative font sizes
- • Adaptive Images: Different resolutions (1x, 2x, 3x)
- • Safe Areas: Respect notches and rounded corners
Touch Targets & Gestures
Minimum Touch Target Sizes:
iOS (Apple HIG):
44x44 points minimum
About 7-10mm physical size
Android (Material):
48x48 dp minimum
About 9mm physical size
Common Gestures:
Thumb Zone:
Most users hold phones with one hand. Design for the "thumb zone":
- 🟢 Easy: Bottom center (primary actions)
- 🟡 Stretch: Bottom corners, middle (secondary)
- 🔴 Hard: Top of screen (avoid important actions)
Animations & Transitions
Animations make apps feel alive and guide users through interactions.
Animation Principles:
- • Duration: 200-400ms for most animations
- • Easing: Natural motion (ease-in-out)
- • Purpose: Every animation should have meaning
- • Performance: 60 FPS minimum
- • Reduce Motion: Respect accessibility settings
Common Animation Types:
Fade:
Smooth appearance/disappearance
Slide:
Screen transitions, drawers
Scale:
Button press feedback
Shared Element:
Smooth transition between screens
Loading:
Spinners, skeleton screens
Mobile Accessibility (a11y)
Accessible apps work for everyone, including users with disabilities.
Screen Readers:
- • VoiceOver (iOS): Reads screen content aloud
- • TalkBack (Android): Audio feedback for actions
- • Labels: Descriptive text for all interactive elements
- • Hints: Explain what will happen on tap
- • Order: Logical reading sequence
Visual Accessibility:
- • Color Contrast: 4.5:1 minimum for text
- • Text Size: Support dynamic type (user can increase)
- • Color Blindness: Don't rely on color alone
- • Focus Indicators: Clear visual focus states
Motor Accessibility:
- • Large Touch Targets: 44pt minimum
- • Spacing: Adequate space between tappable items
- • Voice Control: Support voice commands
- • Switch Control: Navigate with external switches
Dark Mode Support
Dark mode reduces eye strain and saves battery on OLED screens.
Light Mode Colors:
Dark Mode Colors:
Dark Mode Best Practices:
- • Use true black (#000000) sparingly - dark gray is easier on eyes
- • Reduce elevation shadows (use borders instead)
- • Desaturate bright colors slightly
- • Test contrast ratios in both modes
- • Respect system preference by default
Mobile Typography
Recommended Font Sizes:
Headings: 24-32pt (large), 20-24pt (medium)
Body Text: 16-18pt (comfortable reading)
Captions: 12-14pt (secondary info)
Buttons: 16-18pt (easy to read)
Typography Tips:
- • Use system fonts (SF Pro for iOS, Roboto for Android)
- • Limit to 2-3 font weights
- • Line height: 1.4-1.6 for body text
- • Line length: 50-75 characters max
- • Support dynamic type (user font size preferences)
Navigation Patterns
Tab Bar (iOS) / Bottom Navigation (Android)
Primary navigation for 3-5 top-level sections.
- • Always visible at bottom
- • Icons + labels (or icons only)
- • Highlight active tab
- • Max 5 items
Navigation Drawer (Hamburger Menu)
Side menu for secondary navigation or many sections.
- • Slides from left edge
- • More than 5 navigation items
- • Less frequently accessed sections
- • Can include user profile
Stack Navigation
Hierarchical navigation with back button.
- • Push new screens on top
- • Back button to pop
- • Breadcrumb trail
- • Common for detail views
Mobile Design Checklist
Layout & Spacing:
- ☐ Responsive on all screen sizes
- ☐ Safe area insets respected
- ☐ Consistent spacing (8pt grid)
- ☐ Thumb-friendly button placement
Touch & Interaction:
- ☐ 44pt minimum touch targets
- ☐ Visual feedback on tap
- ☐ Gestures feel natural
- ☐ Loading states shown
Accessibility:
- ☐ Screen reader labels
- ☐ 4.5:1 color contrast
- ☐ Dynamic type support
- ☐ Reduce motion option
Visual Design:
- ☐ Dark mode support
- ☐ Platform guidelines followed
- ☐ Consistent typography
- ☐ Smooth animations (60 FPS)
📚 Module Summary
You've mastered mobile UI/UX design:
- ✓ Material Design 3 and iOS Human Interface Guidelines
- ✓ Responsive layouts for different screen sizes
- ✓ Touch targets and gesture patterns
- ✓ Animations and transitions
- ✓ Accessibility best practices
- ✓ Dark mode implementation
- ✓ Navigation patterns
Next: Learn how to deploy your app to the stores!