L27 — Mobile App Interface pt.1

🎯Learning Objectives

Explain what UI (user interface) and UX (user experience) mean
List the main rules of good mobile interface design
Identify the most common UI components (navbar, cards, tabs, FAB)
Create a wireframe mockup of a mobile screen in Figma — free, in the browser

📖Theory

1. What Is a UI and Why Does It Matter?

UI (User Interface) is everything the user sees and touches in an app: buttons, text, colours, icons, layouts.

UX (User Experience) is how the user feels when using the app — whether it's easy, fast, and pleasant.

Analogy: think of a car. The UI is the steering wheel, pedals, and dashboard. The UX is how comfortable and easy it is to drive. A car with a beautiful dashboard but confusing controls has great UI but terrible UX.

A bad UI costs companies millions. If users can't figure out your app in the first 10 seconds, they uninstall it.

2. Rules of Good Mobile UI

Rule 1 — Keep it simple. Show only what the user needs right now. Every extra button is one more thing to confuse them.

Rule 2 — Big tap targets. Fingers are not mouse cursors. Buttons should be at least 48 × 48 dp (device-independent pixels). If two buttons are too close, users tap the wrong one.

Rule 3 — One primary action per screen. Every screen should have one main thing the user is supposed to do. Everything else is secondary.

Rule 4 — Familiar patterns. Users already know what a hamburger menu (☰) means, what a back arrow does, where the search bar goes. Surprise them with content, not with structure.

Rule 5 — Readable text. Minimum font size for body text: 16 sp. Use contrast — dark text on light background or vice versa. Never grey text on grey background.

Rule 6 — Feedback for every action. When a button is tapped, something must visually change immediately — a loading spinner, a colour change, a new screen. If nothing changes, the user taps again and again.

3. Common UI Components

Every mobile app is built from the same small set of components:

Component	What it looks like	Used for
Navigation bar	Row of icons at the very bottom	Switching between main sections (Home, Search, Profile)
Top app bar	Coloured bar at the top with a title	Page title + back button + overflow menu
Card	White box with shadow, rounded corners	Showing one item (product, news article, contact)
FAB (Floating Action Button)	Big round button, bottom-right corner	The single most important action (Add, Compose, Camera)
Tab bar	Row of text tabs at the top of content	Switching between sub-sections (Today / Week / Month)
List item	Icon + text + optional right arrow	One row in a scrollable list
Input field	Outlined box with a label above	Entering text (name, password, search)
Snackbar	Short text popup at the bottom	Showing a quick message ("Saved", "Error")

4. The Two Design Styles

Most mobile apps follow one of two design systems:

Material Design (Google / Android)

Bold colours, white backgrounds
FAB in the corner, bottom navigation bar
Cards and elevation (shadow)
Used in: Gmail, Google Maps, YouTube

Human Interface Guidelines (Apple / iOS)

Thinner fonts, more white space
Tabs at the bottom (iOS style)
Gestures instead of buttons
Used in: iMessage, Apple Music, Camera

Both look different but share the same rules above. For our school project we'll follow Material Design since most students have Android phones.

5. What Is a Wireframe / Mockup?

Before any developer writes code, a designer creates wireframes and mockups:

Wireframe — a rough sketch. Black and white. Shows where things will go, not how they'll look.
Mockup — a realistic visual. Has colours, fonts, real text. Still not interactive.
Prototype — a clickable mockup that simulates navigation. Feels like a real app.

In this lesson we'll make a mockup — a realistic screen image — using Figma.

6. Figma — Free Design Tool in the Browser

Figma is a professional design tool used by designers at Google, Airbnb, and thousands of other companies. The free plan is more than enough for school work.

To use it:

Go to figma.com and sign up with an email (or Google account)
Click "New design file"
You get an infinite canvas with a toolbar on the left

Key shortcuts in Figma:

Shortcut	Action
`F`	Create a new Frame (the "phone screen")
`R`	Draw a rectangle
`T`	Add text
`Space + drag`	Pan the canvas
`Ctrl + D`	Duplicate the selected object
`Ctrl + G`	Group selected objects

Alternative: if Figma is blocked or slow, use penpot.app — same idea, fully free and open-source.

7. Setting Up a Phone Frame in Figma

When you press F, a dropdown of device presets appears on the right. Choose "Phone → Android Small" (360 × 800 px). This gives you a rectangle the size of a phone screen to design inside.

Add a background colour (click the frame → Fill → pick a colour). Now you have a blank phone canvas.

💻Code Examples

Example A — Anatomy of a good home screen

A typical home screen for a "Plant Care" app might have:

Code

┌─────────────────────────────┐
│  🌿 My Plants        🔔  ☰  │  ← Top app bar
│─────────────────────────────│
│  Good morning, Alex!        │  ← Greeting
│                             │
│  ┌──────────┐ ┌──────────┐  │
│  │ 🌵 Cactus │ │ 🌺 Rose  │  │  ← Cards (plant items)
│  │ Water in │ │ Water in │  │
│  │  2 days  │ │ today!   │  │
│  └──────────┘ └──────────┘  │
│                             │
│  ┌──────────────────────┐   │
│  │ 🪴 Monstera          │   │
│  │ Last watered: Mon    │   │
│  └──────────────────────┘   │
│                             │
│                      [  +  ]│  ← FAB (add new plant)
│─────────────────────────────│
│  🏠 Home   🔍 Search  👤 Me │  ← Bottom navigation bar
└─────────────────────────────┘

This screen has: one top bar, a greeting label, plant cards, a FAB, and a bottom nav. Everything follows the rules: simple, clear, one primary action (the FAB).

Example B — What makes a bad UI

Code

┌─────────────────────────────┐
│ welcome to our awesome application for plants!!! │ ← tiny unreadable text
│                             │
│ [WATER NOW] [ADD] [DELETE] [SETTINGS] [HELP] [CANCEL] [OK] │
│ ← seven buttons = user paralysis                │
│                             │
│ (grey text on light grey background)            │
│ Your plants are listed below if you have any... │
│ ← terrible contrast, too much text              │
└─────────────────────────────┘

Broken rules: too many buttons, unreadable text, no hierarchy, no clear action.

✏️Practice Tasks

Task 1Critique an app

EASY — IN CLASS

Open any app on your phone (or use Google Maps / Instagram if you don't have a preference). Take a screenshot.

Answer these questions in your notebook:

What is the primary action on this screen? (one thing the designer wants you to do)
Find a card component — describe what's inside it
Is the text readable? Is the contrast good?
Is there a FAB or a bottom navigation bar?
Rate the UI 1–10 and give one reason

💡 Hint

If you can't decide on an app, use Instagram's home feed. The primary action is scrolling and liking posts. The cards are the individual posts. There's no FAB — the main action is the camera icon in the top bar. The bottom nav has 5 icons.

Task 2Design a home screen in Figma

MEDIUM — IN CLASS

Go to figma.com and create a new design file
Press F → choose Android Small (360 × 800)
Design the home screen of your dream app. Choose one idea:
- A homework tracker
- A recipe book
- A weather app
- A personal budget tracker
- Your own idea (approved by the teacher)

Your screen must have:

A top app bar with the app name
At least 2 cards or list items with content
A FAB button (circle, bottom-right)
A bottom navigation bar with 3 icons

Use rectangles, text blocks, and emojis as icons — no need for real icons yet.

💡 Hint

Build from top to bottom: (1) draw a rectangle across the full width for the top bar, (2) add a text label inside it, (3) draw two card rectangles side by side with text inside, (4) add a circle for the FAB in the bottom-right, (5) draw a rectangle across the bottom for the nav bar and add 3 emoji icons. Group each section with Ctrl+G.

Task 3Improve a bad UI

HARD — HOMEWORK

Look at this description of a bad screen:

A screen with a white background has 8 buttons labelled: "Home", "Back", "Next", "Save", "Cancel", "Help", "Delete", "Share". All buttons are the same size (tiny) and the same grey colour. There is no title. There is a text input but no label explaining what to type.

Redesign it as a clean screen in Figma. Decide:

What is the one main action? (make that button big and colourful)
Which actions can be hidden in a menu (☰)?
Add a label to the input
Add a title in the top bar

Export your design as PNG (Figma → Export → PNG) and submit.

💡 Hint

A good answer might keep only "Save" as the big primary button, move "Delete" to a danger-coloured secondary button, and hide "Share", "Help", "Cancel" in an overflow menu (three dots ⋮ in the top bar). "Home" and "Back" become part of the top bar navigation — not separate buttons.

⚠️Common Mistakes

Making buttons too small

A button drawn as a 20 × 20 px rectangle looks fine on a big monitor but is impossible to tap on a phone. In Figma, keep button height at least 44–56 px in your 360-wide frame.

Using too many colours

Pick a primary colour (e.g. teal) and use it consistently for interactive elements. Use grey for secondary text, white for backgrounds. Using five different colours for five buttons looks like a traffic accident.

Designing for a desktop, not a phone

Mobile screens are tall and narrow. Content scrolls vertically, not horizontally. Don't put things side-by-side if there isn't room — stack them vertically.

Forgetting the keyboard

When a TextBox (input field) is focused on a phone, the keyboard pops up and covers the bottom half of the screen. Always check: is the Submit button still visible with the keyboard open? If not, redesign the layout.

🎓Instructor Notes

⚡ How to run this lesson (~80 min)

[5 min] Open with a bad UI example. Show a real badly-designed app (search "bad app UI" for examples). Ask: "What's wrong here?" Students will find lots of issues. Introduce the word "UI".
[10 min] UI rules + common components. Use real app screenshots. For each component (FAB, card, nav bar), point at an example from Instagram, YouTube, Google Maps.
[10 min] Figma demo. Create a new file, draw a frame, add a rectangle and a text block. Show Ctrl+D to duplicate. Keep the demo to 5 minutes of actual drawing — students get restless.
[30 min] Task 2 in class. The design task. The first 5 minutes students are paralysed by the blank screen — prompt them with "pick one idea from the list and draw the top bar first". After that they usually find their own momentum.
[10 min] Gallery walk. Students show their screens on the projector or share a link. Vote on the best layout (not the prettiest — the clearest).
[5 min] Assign homework + preview L28. In L28 we'll add a second screen and link them — turning the mockup into a prototype.

💬 Discussion questions

"What's the difference between UI and UX? Can one be good while the other is bad?"
"Why do Instagram and TikTok look different even though they're both social apps?"
"If you were on the team designing an app, what role would you want — designer or programmer?"

🧰 Resources

Figma: figma.com — free, Google sign-in works
Penpot (alternative): penpot.app
Material Design components: m3.material.io/components
Icon pack (free): fonts.google.com/icons