What should I study in a designer portfolio example?

Start with the first screen: what do you understand about the designer, what proof appears next, and what are you invited to open? Then inspect one project page. Look for the problem, the designer’s role, the decisions they made, the evidence behind those decisions, and what happened next.

Should I copy the layout of a portfolio I like?

Copy the decision, not the surface. You might borrow the idea of putting project context directly on the homepage, but the type, grid, color, and interaction should fit your own work. A visual copy usually makes the portfolio feel less personal, not more polished.

How many projects should a design portfolio include?

Use the smallest set that proves the kind of work you want next. Three strong, meaningfully different projects are often more useful than a crowded archive. Add another only when it shows a skill, constraint, or kind of decision the others do not.

Do I need to code my portfolio from scratch?

Only when the implementation itself is part of what you want to prove. Most product and UX designers are better served by a reliable platform and more time spent on project selection, case-study evidence, and editing.

What if most of my work is confidential?

Give public visitors enough context to understand the project, your role, and the kind of problem you handled. Then explain what a reviewer can request or what appears behind a password. A wall of locked thumbnails gives someone no reason to ask for access.

Are these screenshots current?

The live sites and the observations on this page were checked Aug 19, 2026. Portfolio sites change, so use the external link as the current source. The screenshots are visual references and may not show every recent update.

Portfolio Development

5 Designer Portfolio Websites And What to Study in Each One

Five real portfolio sites, checked against the live pages. Each example teaches one useful presentation decision without pretending the same layout works for everyone.

Nikki Kipple5 Verified examplesAug 2026

The short version

Five verified portfolios: Live pages checked Aug 19, 2026
Study decisions: Look at positioning, proof, navigation, and restraint
Do not clone the style: Translate the useful decision to your own work

Portfolio layout study showing hero, project grid, case study, proof, and contact patterns

Do not start with the prettiest one

A portfolio example is only useful when you know what decision you are studying. One site may need to prove interaction craft. Another may need to make a large body of writing feel navigable. Yours may simply need to help someone understand what kind of designer you are and choose the right project.

Open each example with three questions. What do I understand in the first screen? What proof appears next? What would become less clear if I copied this approach for my own work?

Read the first screen

Name the role, point of view, and next action you can understand without scrolling.

Find the proof

Look for projects, writing, shipped work, or interaction quality that supports the introduction.

Notice the trade-off

Every strong choice gives something up. A dense archive can show range but slow down project selection.

Five portfolio examples worth studying

These are public portfolio sites used for educational analysis. The descriptions below stick to what is visible on each live page. Role language is taken from the designer’s own site and was checked Aug 19, 2026.

Role + personality

Product designer based in Sydney

Gloria Lo

What is actually on the page

The homepage says who Gloria is, adds a short personal line, and moves directly into a compact work index.

The decision worth studying

A portfolio can feel personal without making the visitor work through a long biography before seeing the projects.

Look for

Role and location appear before the first scroll
One short line creates personality without replacing the work
Project cards use a title and a plain-language description

Do not copy: The outlined type treatment belongs to this visual system. Borrow the information order, not the styling.

Open glorialo.design

Brian Lovin portfolio homepage screenshot

Writing as proof

Software designer making AI products at Notion

Brian Lovin

What is actually on the page

The homepage is mostly writing and projects. The proof lives in the body of work, not in a large visual reel or a long introduction.

The decision worth studying

If your thinking is part of what you sell, a well-edited index of writing and side projects can do more than another row of mockups.

Look for

A single sentence handles role, location, and current focus
Writing and projects share the same hierarchy
Short descriptions make a large archive scannable

Do not copy: A sparse homepage only works when the links behind it carry real proof. Minimal is not the same as unfinished.

Open brianlovin.com

Rauno Freiberg portfolio homepage screenshot

Interaction as evidence

Interaction designer working with Vercel and Devouring Details

Rauno Freiberg

What is actually on the page

The homepage turns the portfolio itself into an interaction specimen. Large panels lead to craft studies, projects, and field notes.

The decision worth studying

An expressive portfolio earns its complexity when the experience demonstrates the exact craft the designer wants to be hired for.

Look for

The opening line states the discipline before the visual experiment begins
Navigation labels separate craft studies from shipped projects
Motion and interaction support the positioning instead of decorating it

Do not copy: This level of interaction would distract from many portfolios. Use it only when interaction quality is part of the evidence.

Open rauno.me

Moritz Oesterlau portfolio homepage screenshot

Case studies at the surface

Product and UX designer; CareerFoundry tutor

Moritz Oesterlau

What is actually on the page

Each project card names the discipline, the project, and the problem it addresses before asking the visitor to open the case study.

The decision worth studying

A project grid is more useful when the labels help someone choose what to read, not just admire a collection of cover images.

Look for

Project type appears before the title
Every card explains the problem in one sentence
The visual, title, and description work as one clear entry point

Do not copy: Do not turn every project summary into the same template sentence. The label should reveal what is genuinely different.

Open moritzoesterlau.de

Personal operating system

Designer with projects, writing, updates, and collections in one site

SJ Zhang

What is actually on the page

The homepage groups updates, projects, writing, investments, and collections inside one navigable system with keyboard shortcuts.

The decision worth studying

A broad body of work can still feel coherent when the navigation gives every content type a clear home and priority.

Look for

The side navigation exposes the full range without mixing it together
Recent updates establish activity and context
Keyboard shortcuts reinforce the operating-system idea

Do not copy: A dense navigation system needs enough real material to justify it. Empty categories would make the same structure feel inflated.

Open sj.land

Compare the decision, not the decoration

These sites look different because they have different jobs. This is the useful comparison:

Portfolio	Primary job of the homepage	Useful when you need to prove
Gloria Lo	Introduce a person, then make work easy to choose	Clear product-design range with personality
Brian Lovin	Turn a growing body of writing and projects into an index	Taste, curiosity, and sustained thinking
Rauno Freiberg	Demonstrate interaction craft before a project opens	High-fidelity interaction and implementation judgment
Moritz Oesterlau	Help visitors choose a case study by problem and discipline	Range across research, product, facilitation, and web work
SJ Zhang	Organize a broad creative and professional practice	A body of work that extends beyond case studies

Apply one decision to your portfolio

Do not redesign the whole site because one example made you jealous. Pick the unclear part and make one testable change.

1
Name the job of the page
Write one sentence: “This page needs to help a hiring manager understand ___ and choose ___.” If you cannot fill that in, the layout is not the first problem.
2
Choose the proof that belongs next
If you claim systems thinking, show a system decision. If you claim interaction craft, show the interaction. If you claim product impact, show the evidence and your role.
3
Test the first thirty seconds
Ask someone what they think you do, what they would click, and what feels unsupported. Their answer is more useful than asking whether the site looks good.

Structure one case study Compare portfolio platforms See what The Crit checks

Examples are useful until you are too close to your own portfolio.

Send the homepage or one case study for a free First Read. You will get a readiness verdict and the first priority to address. When available, it will also call out one strength and a ready-enough standard.

Get a second set of eyes

What not to copy from any portfolio example

A career claim you cannot prove

A title such as “strategic product designer” needs decisions and evidence behind it. The phrase alone does not create positioning.

An interaction your work does not need

Motion, keyboard shortcuts, and unusual navigation are evidence only when they support the role and remain understandable.

A case-study template with no judgment

Problem, process, and outcome are useful labels. They are not a story until you show what changed because of something you learned or decided.

Someone else’s level of restraint

A one-line homepage can feel confident when a strong archive sits behind it. The same amount of copy can feel empty on a new portfolio.

QuestionsAnswers

Questions, answered.

A few practical details before you keep going

Share this resource

Written by

Nikki Kipple

Designer, design instructor, and creator of The Crit

Designer, educator, founder of The Crit. I've spent years teaching interaction design and reviewing hundreds of student portfolios. Good feedback shouldn't require being enrolled in my class — so I built a tool that gives it to everyone. Connect on LinkedIn →

Examples are useful until you are too close to your own portfolio.

Get a second set of eyes →

Continue Reading

All resources →

Portfolio

12 Portfolio Mistakes That Cost Designers Interviews

The most common portfolio mistakes from hiring managers who've screened thousands of portfolios. Each includes exactly how to fix it.

Career

UX Career Transition Framework: 12-Month Roadmap

Complete 12-month roadmap to break into UX design from any background — with portfolio templates, networking scripts, and job search strategy

Portfolio

Portfolio Layout Examples

Study 15+ portfolio layout examples across web, PDF, and print formats. Learn navigation patterns, visual hierarchy, and mobile-first design strategies.

5 Designer Portfolio Websites And What to Study in Each One

The short version

Do not start with the prettiest one

Read the first screen

Find the proof

Notice the trade-off

Five portfolio examples worth studying

Gloria Lo

What is actually on the page

The decision worth studying

Look for

Brian Lovin

What is actually on the page

The decision worth studying

Look for

Rauno Freiberg

What is actually on the page

The decision worth studying

Look for

Moritz Oesterlau

What is actually on the page

The decision worth studying

Look for

SJ Zhang

What is actually on the page

The decision worth studying

Look for

Compare the decision, not the decoration

Apply one decision to your portfolio

Name the job of the page

Choose the proof that belongs next

Test the first thirty seconds

Examples are useful until you are too close to your own portfolio.

What not to copy from any portfolio example

A career claim you cannot prove

An interaction your work does not need

A case-study template with no judgment

Someone else’s level of restraint

Questions, answered.

What should I study in a designer portfolio example?

Should I copy the layout of a portfolio I like?

How many projects should a design portfolio include?

Do I need to code my portfolio from scratch?

What if most of my work is confidential?

Are these screenshots current?

Share this resource

Examples are useful until you are too close to your own portfolio.

Continue Reading

12 Portfolio Mistakes That Cost Designers Interviews

UX Career Transition Framework: 12-Month Roadmap

Portfolio Layout Examples