By the end of this lesson you can
- Choose a platform and structure for a portfolio site.
- Design a home page that quickly communicates who you are.
- Make the site fast, accessible and easy to update.
The idea
Your portfolio site is itself a design project. Reviewers will judge its usability as well as its content.
Platform
Options include website builders (quick and easy), portfolio platforms, no-code tools and hand-coded sites. Choose what lets you update content easily. A simple, well-structured site beats an ambitious one that is never finished.
Structure
- Home: who you are, what you do and links to two to four case studies.
- Case studies: one page each.
- About: background, skills, a photo if you like, and how you work.
- Contact: email and professional profiles; a CV download.
Home page
In one sentence, say what kind of designer you are: "Product designer focused on public services and accessibility." Show project cards with a clear title, one-line outcome and image.
Quality
Check speed, mobile layout, colour contrast, keyboard access and alt text. Use your own name in the domain if possible. Remove broken links and placeholder text.
Why it matters in real projects
For many employers, your site is the first impression of your design skills. A clear, fast and accessible site shows you apply good UX to your own work. A confusing or broken site can undermine even excellent case studies.
A realistic example
A designer's site opens with a full-screen animation, then a grid of 12 unlabelled thumbnails. Reviewers cannot tell what each project is.
The redesigned site opens with: "I'm Priya, a product designer who makes complex services simple." Below are three cards, each with a title, a one-line outcome ("Cut form errors by 40% for 2 million users") and a clear image. It loads quickly on a phone and passes basic accessibility checks.
Step by step
Choose a platform
Pick one you can update easily.
Plan pages
Home, case studies, about and contact.
Write a positioning line
Say what kind of designer you are in one sentence.
Design project cards
Add a title, outcome and image.
Check quality
Test speed, mobile, contrast, keyboard and alt text.
Get feedback
Ask someone to find a case study and your contact details.
Common mistakes
Mistake Style over usability.
Instead Make it fast and easy to navigate.
Mistake Unlabelled thumbnails.
Instead Add titles and one-line outcomes.
Mistake An inaccessible portfolio.
Instead Check contrast, keyboard and alt text.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Plan your site
Plan or audit your portfolio site.
Steps
- Write a one-sentence positioning line.
- Sketch the home page with project cards.
- Run speed, mobile and accessibility checks.
- Ask someone to complete two tasks on it.
Deliverable
A site plan or audit with fixes.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Your site is a design project.
- Keep the structure simple.
- Lead with positioning and strong project cards.
- Make it fast and accessible.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.