Compare Portfolio Website Layouts Inside Claude Code

Compare portfolio layouts by structure, focus, and browsing flow, then choose a direction you can explain and build inside Claude Code.

compare portfolio website layouts inside claude code

Contents

  • [Start with the decision, not the screenshot](#start-with-the-decision-not-the-screenshot)
  • [Three layout directions to compare](#three-layout-directions-to-compare)
  • [A practical comparison method](#a-practical-comparison-method)
  • [Choose and turn it into a build brief](#choose-and-turn-it-into-a-build-brief)
  • [Use this in your AI agent](#use-this-in-your-ai-agent)

To compare portfolio website layouts inside Claude Code, judge each option against the same visitor task: understand who you are, see your strongest work, and know what to do next. The best layout is the one that makes those three steps easiest for the audience you want to attract.

Start with the decision, not the screenshot

Before comparing references, write down the portfolio's primary job in one sentence. For example: "Help a creative director understand my work and contact me," or "Help a potential client see my process and request a project." That sentence changes the right layout.

Use this quick scorecard for every reference:

  1. Recognition: Can someone understand the discipline, name, or point of view quickly?
  2. Work discovery: Can a visitor reach representative projects without hunting?
  3. Project context: Does each work sample have enough explanation to feel credible?
  4. Navigation: Can a visitor move between projects and return to the index easily?
  5. Action: Is the next step obvious without competing with the work?
  6. Distinctiveness: Does the layout express a memorable approach rather than looking interchangeable?

Score each from 1 to 5, then give the first three categories double weight. A portfolio that looks unusual but hides the work usually loses to a simpler structure with a clearer path.

Open the examples below and compare the first screen before borrowing a pattern. COLLINS, Fix Studio, and Daniel Sun are useful references for discussing different portfolio directions, but the captured examples should be treated as inspiration, not as a complete description of their current sites.

Captured pages

Three layout directions to compare

1. Curated project index

A strong opening statement leads into a selective list or grid of projects. This works well when the work itself should carry the page. It gives visitors a fast overview and makes the portfolio feel edited. The risk is that project thumbnails become a wall of similar rectangles. Reduce that risk with clear project labels, varied image treatment, and a visible indication of what opens next.

2. Editorial case-study layout

This approach treats the portfolio like a series of articles. The index may be quieter, while each project receives a longer page with the brief, decisions, images, and outcome. Choose it when clients need to understand reasoning, not only visual polish. The tradeoff is time: visitors must open more pages before forming an opinion, so the index needs enough information to help them choose.

3. Personal statement with selected work

The homepage leads with a strong point of view, biography, or visual system, then presents a smaller number of projects. This can suit an independent designer or artist whose identity is part of the offer. It becomes weak when the statement takes up the space that should prove the work. Keep the introduction short and make the selected projects easy to reach.

A practical comparison method

Build a small test with the same content in each direction: one headline, six projects, one sentence per project, a short about section, and one contact action. Check the layouts at a narrow width as well as a wide one. Ask someone unfamiliar with the project to answer three questions after ten seconds: What does this person do? Which project would you open first? How would you contact them?

Watch where they hesitate. If they cannot identify the work, improve the opening. If they cannot choose a project, improve labels and grouping. If they open a project but cannot explain why it matters, add context rather than more decoration. If they reach the end without acting, make the contact path more direct.

Also compare the cost of maintaining each layout. A system that needs elaborate custom behavior for every new project may look impressive but slow down future updates. A repeatable project template often gives a stronger portfolio over time.

Choose and turn it into a build brief

Pick the layout with the highest weighted score, then write a short brief before coding:

  • Audience and desired action
  • Homepage headline and supporting line
  • Project count and ordering rule
  • Information shown before opening a project
  • Case-study sections used on every project
  • Mobile navigation behavior
  • Contact action and its position
  • Two visual details that make the system yours

Use the examples below to compare composition, scale, and emphasis. Then ask Claude Code to implement the chosen structure from your brief, not to copy a reference page. If you need more concrete evidence, inspect a saved reference's page structure, typography, spacing, and colors before finalizing the brief.

Use this in your AI agent

> Compare the portfolio references available to me using this scorecard: recognition, work discovery, project context, navigation, next action, and distinctiveness. Recommend one layout direction for my audience, explain the tradeoffs, and produce a build brief with the homepage structure, project-card content, case-study sections, mobile behavior, and contact path. Use the references for observed design details only, and do not copy their branding or content.

Install Fudge for your AI agent to compare saved website references while you make the decision.

Which portfolio layout should I choose for freelance design work?

For freelance design work, start with a curated project index plus concise case-study pages. It gives prospective clients a fast way to see your range while leaving room to explain the decisions behind the projects they care about.

Use the homepage to answer three questions quickly: what kind of design you do, who you help, and which projects prove it. Show four to six strong projects rather than every finished piece. Each card should include the client or project name, your role, the type of work, and one outcome or useful constraint when you can verify it.

On each case-study page, use a repeatable order: brief, role, approach, selected work, and result or learning. Keep the first screen visual, but do not make visitors infer the project from images alone. Add a short text summary near the top.

Use a visible contact action in the header and again after the final project. Avoid turning every section into a sales message. The work should do most of the persuading, while the contact path removes friction when someone is ready.

How can I test two portfolio layouts before building the full site?

Create two low-detail versions with identical content. Keep the same headline, six projects, images, project labels, about text, and contact action so the comparison measures layout rather than copy quality.

Test one version as a project index with short case studies and the other as an editorial homepage with fewer, larger project entries. Ask five people who do not know the project to complete three tasks: identify your work, open the project they find most relevant, and locate the contact action. Record time, hesitation, and what they remember afterward.

Choose the version that produces clearer answers, not the one that receives the most general praise. Then check the narrow layout separately. Look for clipped labels, oversized images that push the work too far down, and navigation that disappears after opening a project.

Once a direction wins, preserve the test notes as part of the build brief. They help Claude Code implement the reasons behind the layout instead of only reproducing its surface appearance.

Related questions