By the end of this lesson you can
- Sketch interface ideas quickly on paper.
- Use a small visual vocabulary for common interface elements.
- Use sketches to explore and communicate rather than to impress.
The idea
Sketching is the fastest way to explore interface ideas. A sketch takes a minute, costs nothing and is easy to throw away, which is exactly why it is useful.
You do not need to draw well
Interface sketches use a handful of shapes: rectangles for containers and images (with a cross through them), lines for text, rounded rectangles for buttons, circles for avatars and icons. Anyone can draw these. What matters is the idea, not the line quality.
Sketch to think
Sketching is a thinking tool. Drawing a screen forces decisions: what comes first, what is on the screen at all, what happens when someone taps. Sketch several variations of the same screen to compare approaches, and sketch sequences of screens to explore a flow.
Annotate
Add short notes and arrows: what a button does, where content comes from, what happens on error. Annotations turn a drawing into a design.
Tools
A thick pen (so you cannot add too much detail), plain paper or printed device frames, and a phone to photograph results. Digital sketching on a tablet works too, as long as it stays rough.
Why it matters in real projects
Sketches let you explore more ideas in an hour than you could in a day in a design tool. Because they look unfinished, people give honest feedback and do not get attached. They are also an excellent way to communicate with developers and stakeholders early, before anyone invests in detail.
A realistic example
A designer needs a home screen for a pharmacy app. Instead of opening Figma, they spend 20 minutes sketching six versions: one focused on repeat prescriptions, one on finding a pharmacy, one with a search bar first, and others in between.
Showing the sketches to the pharmacist and a developer takes ten minutes. The pharmacist points out that most customers come back for repeat prescriptions; the developer notes that live stock information is not available. Together they choose a direction built around "Order your repeat prescription", which goes forward to wireframes.
Step by step
Gather tools
A thick marker, paper and printed device outlines if you have them.
Warm up
Draw the basic shapes a few times: boxes, lines, buttons, image placeholders.
Sketch variations
Draw at least three different versions of the same screen.
Sketch the flow
Draw the screen before and after to show how people move.
Annotate
Add notes explaining behaviour and content.
Share and discuss
Show the sketches early and capture feedback on the paper.
Common mistakes
Mistake Spending too long on one sketch.
Instead Time-box sketches to a few minutes each.
Mistake Apologising for drawing ability.
Instead Focus on ideas; rough is the point.
Mistake Sketching only one idea.
Instead Always sketch several alternatives to compare.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 30 min
Six-up sketches
Sketch six versions of a home screen for a local cinema app.
Steps
- Divide a page into six phone frames.
- Sketch six different approaches.
- Annotate each with its main idea.
- Pick the strongest and sketch the next screen in its flow.
Deliverable
Photos of six sketches and one flow continuation.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Sketching is the fastest way to explore ideas.
- A few simple shapes are enough.
- Sketch variations and flows, and annotate.
- Rough sketches invite honest feedback.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Paper prototyping: getting user data before you code (opens in a new tab)Nielsen Norman Group
Your notes
Marking complete updates your course and roadmap progress.