Compare portfolio website layouts across live websites

Contents

• [Start with the same review path](#start-with-the-same-review-path)
• [Compare four portfolio structures](#compare-four-portfolio-structures)
• [Match the layout to the visitor](#match-the-layout-to-the-visitor)
• [Turn the comparison into a page plan](#turn-the-comparison-into-a-page-plan)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

The best portfolio layout depends on how visitors choose work: by discipline, project type, industry, or visual impression. Compare each reference by discovery, proof, pacing, and contact effort before choosing a structure for your own portfolio.

Start with the same review path

Use the same journey on every reference:

1. Open the home page and record what appears first.
2. Find the work index or project section.
3. Open one representative project.
4. Look for evidence of the work, including process, role, constraints, or results.
5. Return to the index and find the contact path.

Record how many actions each step takes, but do not treat speed as the only measure. An editorial portfolio may use a slower rhythm and still work well if visitors understand where they are, what they can open, and why a project matters.

The references below give you three different starting points: COLLINS, Fix Studio, and Daniel Sun. Compare their opening impression, project order, navigation, and level of detail. Borrow the structure that helps your audience decide, not the appearance that happens to be most memorable.

Compare four portfolio structures

A project grid puts many pieces within reach. It suits visitors who need to scan a broad body of work or compare categories. Use specific project labels, consistent image treatment, and enough distinction between items to avoid a wall of unexplained thumbnails. Its main risk is giving every project equal weight.

A featured-project layout gives one or two projects most of the opening space and places the wider archive below. Use it when a particular case study best represents the work you want next. Give visitors an obvious path to every project so the range of your work does not disappear.

An editorial portfolio treats the home page as a sequence of statements, images, or selected moments. It can communicate a strong point of view and make the visit memorable. It also needs clear navigation because visitors may not know which elements are interactive. Keep project names, categories, or other orientation cues visible.

A personal archive makes the creator and their continuing body of work central. It can suit independent designers, photographers, artists, and makers whose voice affects the decision. Pair the personality with a direct work index, clear services, and a contact route that is easy to find.

Match the layout to the visitor

Ask what a potential client, collaborator, or employer needs to decide:

• If they need to scan capabilities, use a labeled grid or category index.
• If they hire for a specific project type, lead with relevant featured work.
• If they choose based on taste and point of view, use an editorial sequence with strong transitions.
• If they evaluate the person as much as the work, combine a personal introduction with a structured archive.

Rank projects by relevance, not only by completion date. The first three projects should answer the visitor's most likely question about fit. A project title should explain enough to invite the click, while the opening screen of the case study should establish context quickly.

Turn the comparison into a page plan

A dependable outline is:

1. A short statement of what you make and for whom.
2. A featured project or clearly labeled work index.
3. Project cards with title, category, and one-line context.
4. Case studies showing the work, your role, and key decisions.
5. A compact about or services section.
6. A direct contact action that remains easy to find.

Review every project with the same questions: Is the thumbnail legible? Is the title specific? Does the opening view explain the project quickly? Can visitors tell what you contributed? Is there a return path or next project? If the explanation is long before the work becomes interesting, move stronger evidence earlier.

Separate structure from styling. You can borrow an index pattern from one reference and a case-study rhythm from another without copying either site's identity. Compare page sections, type choices, colors, spacing, and component treatment only after the visitor journey is clear. Fudge lets you help inspect saved website captures when you need those details in one comparison.

Use this in your AI agent

> Compare the portfolio references I provide by home-page impression, project discovery, project order, case-study proof, navigation, and contact effort. Recommend a layout for my audience and explain what to borrow, what to simplify, and what to test. Give me a page outline and a project-card checklist, separating observed details from recommendations.

To let your agent work from saved website references, install Fudge for your AI agent.

Use a grid when visitors need to compare a broad range of work quickly. Give every card a specific title and category so the grid supports scanning. Add filters only when the number of projects makes them genuinely useful.

Use a featured project when one case study best represents the work you want next. Put its strongest evidence near the top, then provide an obvious route to the full archive. This structure is easier to direct toward a particular client type, but it still needs a visible way to discover everything else.

Use an editorial layout when your point of view is part of the reason someone will hire you. Keep the pacing deliberate, but preserve orientation with project names, labels, and predictable navigation. A useful compromise is a featured opening followed by a structured index. It gives the page a clear first impression without sacrificing range.

Choose two or three case studies from each reference and score them against the same checklist. Can you understand the project from the opening view? Can you tell who made what? Does the page show decisions or only final images? Is the amount of detail appropriate? Can you move to another project without losing your place?

Then map the content order. A useful case study often moves from context to contribution, selected work, reasoning, and result, but the emphasis depends on the audience. A visual client may need the work immediately. A hiring team may need role, constraints, and collaboration earlier.

Do not compare only the polished screen. Check the project index, navigation labels, mobile composition if available, and return path. Finish with a short draft for one of your own projects and test it with someone who does not already know the work.

Related questions

• Compare Portfolio Website Layouts Inside Claude Code
• Compare Onboarding Page Structures in Claude Code
• Compare Pricing Page Layouts Across Live Websites
• Compare Onboarding Page Structures Across Live Websites