Stage 1 · Lesson 4 of 6
Sketches, wireframes, mockups and prototypes
means how finished a design looks and behaves. Paper sketches take minutes, so they are for exploring many ideas quickly. show the layout and what content goes where, using grey boxes with no colour or real images.
That keeps feedback on the structure. add the real visual design: fonts, colour, images and components. add behaviour, from screens linked by taps to realistic interactions, so people can try a whole flow.
Choose the lowest fidelity that answers your current question, because cheap work is easy to throw away. The next stages teach the skills for each level: visual design for mockups, and for all of them.
Common trappolishing mockups early, which invites comments on colours while the structure is still wrong.
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- GuideFreeInteraction Design Foundation (IxDF) Free Articles
Interaction Design Foundation · Beginner
Free articles on every step of the design process, written for beginners
- CoursePaidGoogle UX Design Professional Certificate
Google (Coursera) · Beginner · $49/month on Coursera (US and Canada)
A paid, structured course if you want deadlines and three portfolio projects; the free articles cover the same ideas
Keep handy
Also worth your time
A clear overview of the stages of a human-centred process, with the common misunderstandings
- Nielsen Norman Group ArticlesGo deeper
The largest free archive of research-backed UX articles; search it whenever a topic here raises a question