Short answer: a good portfolio makes three things clear fast: what you do, what you have done and how to contact you. The first four examples below are live sites by working designers and developers. The last two are our own templates, so you can open the demo and reuse the layout.
We link to the outside sites instead of showing screenshots, because the work belongs to their authors.
1. Brittany Chiang: one clear page
Brittany Chiang's site opens with a name, a job title and one sentence about the work. About, experience and projects follow on the same page.
What to take from it: if you are looking for a job, make your role and history easy to scan.
2. Adham Dannaway: two skills, one headline
Adham Dannaway's home page sets the designer and the coder side by side, then goes straight to recent work.
What to take from it: if you do two jobs, show both in the first screen so nobody has to guess.
3. Robb Owen: personality and a clear offer
Robb Owen's site introduces a person, says where he works and keeps a "Hire me" link close at hand.
What to take from it: a freelance site can have character, as long as the next step stays obvious.
4. Lynn Fisher: the site is the portfolio
Lynn Fisher's site keeps its navigation short and shows its version number, because the site itself is an ongoing piece of work.
What to take from it: a designer can let the site prove the skill. This works best when the idea is yours.
5. Personal portfolio: Ethan Walker
Ethan Walker is built for designers and freelancers. Projects live in a CMS and services have their own place on the site.
What to take from it: make the person and the work the focus, and let large type carry the design.
6. Studio portfolio: Softic Studio
Softic Studio is a dark agency site with CMS projects and a team section.
What to take from it: when several people do the work, show the team next to the projects.
Which example fits you
| You are | Look at | Put first |
|---|---|---|
| Looking for a job | Brittany Chiang | Role, experience, selected projects |
| Doing two kinds of work | Adham Dannaway | Both skills, then recent work |
| A freelancer | Robb Owen, Ethan Walker | Who you are, your offer, a contact button |
| A studio | Softic Studio | Projects, services, the team |
What good portfolios have in common
- A headline that says what you do, not only your name.
- A small set of selected projects.
- Project pages that explain the work, not just show images.
- Contact details that are easy to find.
- A layout that works on a phone.
Common mistakes
- Showing every project, so the best work gets lost.
- Using images with no context.
- Leaving placeholder text or broken links.
- Making visitors search for a way to contact you.
Checklist for your own portfolio
- A stranger can say what you do after ten seconds.
- Your best project comes first.
- Each project says what your role was.
- You are allowed to show every client project.
- Contact is one click away on every page.
- Every page works on a phone.