By the end of this lesson you can
- Present final UI clearly and attractively.
- Use annotations and context to explain designs.
- Avoid presentation tricks that hide the real design.
The idea
The final design should be shown in a way that is clear, honest and easy to understand.
Show in context
Use simple device frames or browser frames sparingly. Show screens at a readable size. Group screens into flows so readers understand the journey.
Annotate
Add short notes pointing to key decisions: "Delivery date shown first because it was the top question in research." Annotations turn pretty screens into evidence of thinking.
Show details and states
Include close-ups of important interactions, error states, empty states and responsive versions. Short videos or GIFs can show interactions, but keep them short and add captions.
Be honest
Do not present unshipped concepts as live products. Label concepts clearly. Avoid heavy mock-up effects (tilted 3D phones, dramatic shadows) that make screens hard to read.
Accessibility
Your portfolio should be accessible too: readable text, alt text for images and captions for videos.
Why it matters in real projects
Clear presentation helps reviewers understand your design quality quickly. Annotations show reasoning and make your work memorable. Honest, accessible presentation builds trust and shows you practise what you preach.
A realistic example
A portfolio shows a banking app as tilted phones floating over a gradient. The text is unreadable and the reviewer cannot tell what the design does.
The revised version shows three key screens flat, at readable size, with numbered annotations explaining decisions, plus a close-up of the error state and a 10-second captioned video of the payment confirmation interaction.
Step by step
Choose key screens
Pick screens that show the main flow and decisions.
Arrange as flows
Show screens in sequence.
Annotate
Add short notes on key decisions.
Add details
Include states, close-ups and responsive views.
Add motion if useful
Use short, captioned videos.
Check accessibility
Add alt text and check readability.
Common mistakes
Mistake Unreadable mock-up effects.
Instead Show screens flat and large enough to read.
Mistake No annotations.
Instead Explain key decisions on the screens.
Mistake Presenting concepts as shipped.
Instead Label work honestly.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Present a flow
Present a final design flow for your portfolio.
Steps
- Choose three to five key screens.
- Arrange them as a flow.
- Add three to five annotations.
- Add one state close-up and alt text.
Deliverable
A presentation-ready flow image or page section.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Show final UI clearly in context.
- Annotate key decisions.
- Include states and details.
- Be honest and accessible.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- UX portfolios (opens in a new tab)Interaction Design Foundation
- Images tutorial (alt text) (opens in a new tab)W3C WAI
Your notes
Marking complete updates your course and roadmap progress.