Mobile App UI Design

# CHAPTER 12

Mobile App UI Design #

1. Introduction #

Designing a responsive website viewed on a mobile browser is fundamentally different from designing a "Native" Mobile App downloaded from the Apple App Store or Google Play Store. When a user opens a native app, they expect it to behave exactly like the operating system running their phone. An iPhone user expects an app to feel like Apple software; an Android user expects an app to feel like Google software. If you ignore these deeply ingrained psychological patterns, your app will feel broken and alien. In this chapter, we will master Native Mobile App UI Design. We will explore the critical architectural differences between Apple's Human Interface Guidelines (HIG) and Google's Material Design, establish the ergonomics of Bottom Navigation, and design touch-friendly interfaces specifically engineered for human thumbs.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Differentiate between a Responsive Mobile Website and a Native Mobile App.

• Contrast Apple's Human Interface Guidelines (HIG) with Google's Material Design.

• Understand the ergonomic "Thumb Zone" and its impact on UI layout.

• Design a standard Bottom Navigation Tab Bar for mobile routing.

• Utilize pre-built iOS and Android UI Kits within Figma.

3. Apple iOS vs. Google Android (The Two Religions) #

To design a professional mobile app, you must follow the official rulebooks written by Apple and Google.

1. Apple iOS (Human Interface Guidelines - HIG):

• *Aesthetic:* Flat, highly blurred translucent backgrounds (Glassmorphism), large bold typography (SF Pro font), and borderless text buttons.

• *Navigation:* Almost exclusively relies on a Bottom Tab Bar and a "Back" button in the top-left corner.

• *Shape:* Heavy use of soft, continuous curves (Squircle corner radiuses).

2. Google Android (Material Design):

• *Aesthetic:* Inspired by physical paper. Heavy use of Drop Shadows to show elevation, ripple effects when tapped, and the Roboto font.

• *Navigation:* Often utilizes the "Hamburger" menu (top-left) to open a side drawer, and a massive Floating Action Button (FAB) hovering in the bottom-right corner.

4. The "Thumb Zone" Ergonomics #

A desktop user navigates with a mouse. A mobile user navigates with a single thumb while holding a 6-inch pane of glass. If you map the physical reach of a human thumb on a modern, massive smartphone:

• The Bottom 30% (Green Zone): Perfectly comfortable to tap. This is where you put the Navigation Bar and the Primary "Submit" button!

• The Middle 40% (Yellow Zone): Requires stretching. Good for scrolling content.

• The Top 30% (Red Zone): Physically impossible to reach without using two hands or shifting grip. *Never put critical actions here!*

5. Standard Mobile Components #

Because screen space is heavily restricted, mobile apps rely on specific, highly optimized components:

• Bottom Navigation Bar: 4 or 5 icons across the bottom of the screen. This is the primary way users switch between the main pages of the app.

• Cards: Mobile layouts almost exclusively use vertical lists of UI Cards. Because there is no horizontal space for columns, everything stacks vertically.

• Floating Action Button (FAB): A circular button permanently hovering over the bottom-right corner of the screen, used for the primary action (e.g., "Compose New Tweet" or "Add New Reminder").

6. Using UI Kits in Figma #

You do not need to manually draw the iPhone battery icon, the Wi-Fi signal, or the standard Apple keyboard. Figma has a massive Community library.

1. 1. Click the "Explore Community" button in Figma.

1. 2. Search for "Apple Design Resources" or "Material 3 Design Kit."

1. 3. You can duplicate these massive, official files directly into your workspace!

1. 4. You simply copy and paste the official iPhone Status Bar directly onto your Frame. This instantly makes your mockup look exactly like a real, coded application.

7. Diagrams/Visual Suggestions #

*Visual Concept: The Thumb Zone Map* Provide an outline of a modern, large smartphone screen.

• Color the bottom third green (Easy Reach). Place a Bottom Navigation bar and a massive primary button here.

• Color the middle third yellow (Stretch Reach). Place a scrollable list of images here.

• Color the top third red (Hard Reach). Place a passive, non-interactive Page Title here.

This visual drastically changes how a beginner approaches mobile architecture.

8. Best Practices #

• Never Hide Primary Navigation: A massive trend in the 2010s was hiding the entire app menu behind a "Hamburger" icon (three horizontal lines) in the top-left corner. Data proves this destroys user engagement because it requires two taps to navigate anywhere (Open Menu -> Click Link). *Best Practice:* Use a Bottom Tab Bar. Keep the 4 most important destinations permanently visible at the bottom of the screen.

9. Common Mistakes #

• Tiny Touch Targets: As mentioned in Chapter 8, the biggest mobile mistake is drawing a tiny 24px "X" icon to close a screen. The human thumb is blunt. If touch targets are too small or placed too close together, the user will accidentally tap the wrong button, causing massive frustration. *Rule:* Every clickable element MUST be at least 44x44px in physical size.

10. Mini Project: Design a Mobile Onboarding Screen #

Let's build a classic "Welcome" screen for a native app.

1. 1. Press F. Select iPhone 15 Pro.

1. 2. Go to the Figma Community, find the Apple UI Kit, and paste the "Status Bar" (Battery/Time) at the absolute top of your frame.

1. 3. Draw a massive rectangle taking up the top 60% of the screen. Fill it with an illustration or photo.

1. 4. Below the photo, type a massive, bold Title (e.g., "Track Your Fitness"). Font: SF Pro or Inter, 32px, Bold, Center-aligned.

1. 5. Below the title, type a short subtitle describing the app. Font: 16px, Regular, Gray.

1. 6. The Thumb Zone: At the absolute bottom of the screen (leaving 32px of margin from the bottom edge), draw a massive Primary Button spanning the entire width of the screen. Height: 56px. Fill: Blue. Text: "Get Started".

1. 7. You have designed an ergonomically perfect, highly-converting onboarding screen!

11. Practice Exercises #

1. 1. Explain the ergonomic reasoning behind the transition from top-left "Hamburger" menus to Bottom Navigation Tab Bars in modern mobile applications.

1. 2. Search the Figma Community for the official "Material 3 Design Kit" (Android). Locate a Floating Action Button (FAB) component and paste it into a new mobile frame. Notice how heavily Material Design relies on Drop Shadows compared to Apple iOS.

12. MCQs with Answers #

13. Interview Questions #

• Q: Contrast Apple's Human Interface Guidelines (HIG) with Google's Material Design. If a client asks you to design a single app that looks identical on both an iPhone and an Android device, why might you advise against this?

• Q: Explain the physical concept of the "Thumb Zone" in mobile UX design. How has the massive increase in physical smartphone sizes (like the iPhone Pro Max) altered how UI designers position critical navigation elements?

• Q: Why do professional mobile app designers rely heavily on pre-built UI Kits (like the iOS design library in Figma Community) rather than drawing their own battery icons, status bars, and system keyboards from scratch?

14. FAQs #

Q: Can I use the Apple font (SF Pro) on a website or an Android app? A: Technically, no. Apple strictly licenses the "San Francisco" (SF Pro) font *only* for designing mockups that will be deployed on Apple operating systems. If you use it on a public website, you are violating their license! For websites and Android, use an open-source equivalent like *Inter* or *Roboto*.

15. Summary #

In Chapter 12, we specialized our architecture for the physical constraints of the smartphone. We abandoned the sprawling, horizontal landscapes of the desktop web, embracing the vertical, scroll-heavy reality of native mobile apps. We recognized the two dominant religions of mobile design—Apple's Human Interface Guidelines and Google's Material Design—and accepted that native apps must mirror their host operating systems. Finally, we surrendered to the physical limitations of the human hand, utilizing the ergonomic Thumb Zone to anchor our navigation and primary actions to the bottom of the screen, guaranteeing a comfortable, intuitive user experience.

16. Next Chapter Recommendation #

We know how to make buttons look good and place them ergonomically. But how do we know if the user actually *wants* to click the button? We need to study the user. Proceed to Chapter 13: UX Design Fundamentals.