Beginner · Planning an app · topic 8 of 34 · 25 min
Planning screens and user flows
Explanation
Screens and user flows
A screen is one page the user sees, such as the login page. A user flow is the path a user takes through screens to finish a job. The main flow of our Notes app is: Login, then Notes list, then Edit note, then back to the list.
[Sign up] --> [Login] --> [Notes list] --> [Edit note]
| ^ |
| +-- Save ----+
+--> [New note] --+Wireframes
A wireframe is a rough sketch of a screen: boxes for content, lines for text, no colours or pictures. It shows where things go, not how pretty they look. Draw it on paper first; it takes minutes. Free tools like Excalidraw or Figma help when you want to share it.
Mobile first
Mobile-first means you design for a small phone screen first, then add space for bigger screens. Most of our learners' users are on phones. On a phone the notes list is one column and the "New note" button is easy to reach with a thumb.
Break screens into components
A component is a small reusable piece of a screen. Naming components early makes the frontend code tidy, because each one becomes one function later.
| Component | What it shows | Used on |
|---|---|---|
| SearchBar | A search input with a label | Notes list |
| NoteCard | Title, first line of body, pin icon | Notes list |
| NoteForm | Title, body, pinned checkbox, Save button | New note, Edit note |
| EmptyState | A friendly message and a "Create your first note" button | Notes list |
| ErrorBanner | The error message and a "Try again" button | Every screen |
Four states every screen needs
- Loading: data is on its way. Show a spinner or grey placeholder boxes.
- Empty: the request worked but there is nothing yet. Say so and offer the next step.
- Error: something failed. Say what happened in plain words and offer "Try again".
- Success: show the data.
Accessibility basics
Accessibility means people with different abilities can use the app, including people using screen readers (software that reads the screen aloud) or only a keyboard. Plan for it now: every input gets a visible label, text has enough contrast against the background, and every action works with the Tab and Enter keys.
Watch the lesson
Planning screens and user flows · 1/6
Now we plan what the user sees. We start with screens and the flow between them.
Prefer a video by a teacher? Find free videos on “wireframing for beginners user flow mobile first” on YouTube ↗
In real life: A food delivery app on a slow network
Open a food delivery app on a weak 4G signal. First you see grey boxes where restaurants will appear: the loading state. If you search for a dish nobody serves nearby, you see "No results, try another dish": the empty state. If the network drops, you see "Could not load, tap to retry": the error state. Then the list appears: success. Someone planned each of these on paper before any code was written.
Practice (0/3 done)
Write pickUiState({ loading, error, notes }) that returns which state the notes list should show: "loading" if loading is true; otherwise "error" if error has a value; otherwise "empty" if notes is missing or has no items; otherwise "success".
Draw wireframes on paper (or in Excalidraw) for three Notes app screens: Login, Notes list and Edit note, at phone size. Take a photo or screenshot and check it against the list.
For the Notes list screen, write the component list and describe exactly what the user sees in each of the four states (loading, empty, error, success). Add two accessibility checks you will follow.
Quick quiz
Read more (free)
Pass the quiz (60% or more) or mark this topic as done when you are ready.
Your progress is saved on this device only.