The Portfolio Site Checklist for Designers and Agencies

The site has one job, and it isn’t showing your work

Showing work is the mechanism. The job is getting a qualified stranger to start a conversation on terms you can live with.

That reframing changes concrete decisions. The “About” page matters more than the Dribbble-style grid, because people hire people. Naming your clients, your sectors and your price floor is an advantage, not a risk. The five projects you’re embarrassed by should come off the site, even though removing work feels like going backwards.

We’ve had a client cut their work page from 19 projects to 6 and get more enquiries the following quarter. Not because six is a magic number. Because the six remaining were all in one sector, so a visitor in that sector immediately thought “these people do exactly my thing.”

If you can’t write one sentence that finishes “we build X for Y”, your site will be vague no matter how good the grid looks.

The portfolio website checklist, before pixels

Run this before you open Figma. Every item is something we’ve seen sink a launch.

• Positioning sentence. One line, on the homepage, above the fold, in plain language. Not “crafting digital experiences.”
• Proof of money. Named clients, logos you have permission to use, or anonymised (“a Series B fintech in Berlin”) if you’re under NDA.
• Price signal. A starting figure, a typical project range, or at minimum a budget band selector on the form. This single item removes more wasted calls than anything else.
• Six to ten case studies with real text. If you only have three, ship three.
• A human page. Faces, names, where you’re based, how many of you there are. Prospects are checking you’re not one freelancer pretending to be eight.
• A contact path that works on mobile and sends to somewhere a human checks daily.
• Legal and trust basics: company registration details if applicable, privacy policy, cookie behaviour that matches what you actually load.
• Accessible colour and focus states. Dark grey on mid grey at 3.2:1 fails WCAG AA for body text, and it’s the single most common issue in design-led portfolios.
• Analytics and a goal. One defined conversion event, instrumented on day one.

Nine items. If you can tick all nine, the visual design is the easy part.

Case studies that survive a 40 second skim

Readers don’t read. They scan for a shape, decide whether to invest, then either read properly or close the tab. Give them the shape.

The spine that works:

1. Who and what. One sentence. “Rebuilt the booking flow for a 40-location physio chain.”
2. The constraint. The interesting part. Legacy CMS, six week deadline, a brand guideline nobody could override, 40% of traffic on iOS Safari 15.
3. What you actually did. Decisions, not deliverables. “We dropped the carousel because 2% of users ever reached slide two” beats “wireframes, prototypes, handoff.”
4. Outcome. A number if you have one. If you don’t, say what changed qualitatively and don’t fake a percentage.

Two honest caveats. If you’re a junior designer with no outcome data, process is your product, so show the exploration and the rejected directions. And if your work is under NDA, write the constraint and the approach, skip the screenshots, and say explicitly that details are available on a call. A locked case study with a real narrative outperforms a pretty screenshot with no words.

Keep each one between 400 and 800 words, with images that illustrate a point rather than filling vertical space. Four considered images beat fourteen.

Performance when every page is image-heavy

Portfolio sites are the worst offenders for weight because the content genuinely is imagery. That’s not an excuse for a 9MB work page.

Set a budget and enforce it: under 1.2MB transferred on the work page at a 1440px viewport, LCP under 2.5s on a throttled mid-range Android over 4G (test in Lighthouse with the Moto G Power preset, not on your M3 over office wifi), CLS under 0.05.

Three things get you most of the way. Serve modern formats with a fallback, size your sources properly, and reserve layout space.

<picture>
  <source
    type="image/avif"
    srcset="/work/physio-480.avif 480w, /work/physio-960.avif 960w, /work/physio-1600.avif 1600w"
    sizes="(min-width: 1200px) 33vw, (min-width: 768px) 50vw, 100vw">
  <source
    type="image/webp"
    srcset="/work/physio-480.webp 480w, /work/physio-960.webp 960w, /work/physio-1600.webp 1600w"
    sizes="(min-width: 1200px) 33vw, (min-width: 768px) 50vw, 100vw">
  <!-- width/height must match the real file ratio or the aspect-ratio box lies -->
  <img src="/work/physio-960.jpg" width="1600" height="1000"
       alt="Booking flow redesign for a physiotherapy chain"
       loading="lazy" decoding="async">
</picture>

.work-grid img {
  aspect-ratio: 16 / 10;   / grid height is known before images load /
  object-fit: cover;
  width: 100%;
  height: auto;
  background: var(--color-surface-2); / placeholder tone, not white /
}

Do not lazy-load the hero or the first row of the grid. We’ve watched LCP go from 1.9s to 4.1s on a client site because someone added loading="lazy" globally via a find and replace. If you want the full reasoning on breakpoint selection and format trade-offs, our responsive images guide covers where sizes goes wrong.

One more unpopular position: full-screen autoplay video heroes on agency sites are usually the wrong choice. They cost 2 to 5MB, push your real message below the fold, and on cellular they often show a black box for the first second. Use a poster image and let the visitor press play.

The contact path is where agency sites leak

You spend six weeks on the grid and then dump everything into a three-field form that emails an inbox nobody owns.

Keep the form to five or six fields and make two of them qualifying: budget band and timeline. Yes, some people abandon at the budget question. Those are usually the ones who were going to abandon on the call.

<form action="https://webforms.to/submit/YOUR_ID" method="POST">
  <label for="name">Your name</label>
  <input id="name" name="name" type="text" autocomplete="name" required>

  <label for="email">Work email</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="budget">Budget range</label>
  <select id="budget" name="budget" required>
    <option value="">Select a range</option>
    <option>Under 5k</option>
    <option>5k to 15k</option>
    <option>15k to 50k</option>
    <option>50k plus</option>
  </select>

  <label for="brief">What are you trying to build?</label>
  <textarea id="brief" name="brief" rows="5" required></textarea>

  <!-- honeypot: bots fill it, humans never see it -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden>

  <button type="submit">Send enquiry</button>
</form>

That’s a static HTML form with no backend. WebForms takes the POST and pushes it to email, Slack or a webhook, which is the right level of infrastructure for a portfolio site. Nobody should be running a Node server to receive four enquiries a week.

Two things to add after launch, not before: field-level drop-off tracking so you know which question kills the form (our write-up on form analytics explains the event setup), and layered spam handling once the honeypot stops being enough. Also put a real email address on the page. A meaningful share of serious enquiries arrive as plain email from someone who refuses to use forms.

Choosing the stack by who will update it

The stack question is a people question. Ask who will add the next case study, and what they’ll be doing at the time.

If the answer is “a developer, from a Git branch,” static works beautifully. Hand-built HTML or a template base, images optimised at build time, deployed on push. If the answer is “our office manager, on a Tuesday, between calls,” you need a CMS with a visual editor. We’ve handed over elegant static setups that went stale in four months because the publishing workflow required a terminal.

For WordPress builds, model the content properly from the start: a project custom post type with taxonomies for sector and service, not categories bolted onto posts. Our content modelling guide walks through the registration and the archive implications. Get this wrong and you’ll be writing migration scripts at project 40.

If you want a shortcut on the front end, Canvas ships portfolio and agency layouts on Bootstrap 5 with dark mode and RTL already handled, which saves the two weeks you’d otherwise spend rebuilding a filterable grid. Starting from a template is only a problem if you leave the demo copy in, and we’ve seen that ship. Twice.

Launch week and the 90 days after

Launch day checks, in order: real 404 page, redirects from every old URL (crawl the old site with Screaming Frog first, then map them), canonical tags, Open Graph image that renders at 1200×630, sitemap submitted, forms tested from an actual phone on cellular, and one test enquiry that confirms the notification lands and someone replies.

Then the part nearly everyone skips. Put a recurring reminder at 90 days with three jobs: add the newest project, remove the oldest weak one, and read the contact page out loud. A portfolio decays quietly. The site that won you work in March looks dated in November, and the difference is usually content freshness, not design.