Choosing a template for a portfolio site: start with your projects, not the demo

Start with what you are putting in it

Before you open a single demo, write down two numbers: how many projects you want to show, and how much you have to say about each one. A photographer with forty strong images and a product designer with four projects, each of which needs a page of explanation, are shopping for different things, even if both would type the same words into a search box.

Those two numbers decide more than any design choice. They tell you whether you need a gallery, an index that leads to case studies, or a single page that makes an argument. Most template regret comes from buying one of these shapes and needing another — and a demo, filled with a fictional studio’s neatest six projects, makes every shape look like it would fit.

Three shapes a portfolio takes

Looking across our own catalogue, the templates that could carry someone’s work fall into three shapes. Each suits a different kind of practice.

The index. One screen that presents a short, curated set of work, one piece at a time. Aperture is this shape: a fictional studio’s six selected cases, each shown as a client name, a one-line brief and a result, while an object on screen comes apart and reassembles as the visitor scrolls. It suits someone whose work is best summarised — a studio sending a link in a pitch, where the reader wants the headline results and a sense of taste, not a process write-up.

The featured piece and the register. One project written up in full, with a list of the others beside it. Forge is built this way for a motorcycle workshop: one finished build shown with its specification and the hours spent on it, four builds listed in a register, and the page’s real argument — how a commission works, stage by stage — underneath. It suits makers and practices where one well-documented piece proves the rest.

The method page. The work is the approach itself, and the projects are evidence for it. Verdant, written for an interior studio, leads with twelve design principles, illustrates them with nineteen photographs, and ends with how an engagement runs. It suits consultants and service designers, whose clients are buying a way of working more than a list of past jobs.

None of the three is a forty-image gallery with filters, and we would rather say so than let a demo imply it. If a large, browsable body of visual work is what you need, that is the requirement to test every candidate against, here or anywhere else.

Count the slots, then find where they live

Every portfolio template has a fixed number of places for work. Count them in the demo, and compare the count with the number you wrote down. Fewer slots than projects means cutting projects or building more slots; many more slots than projects means a page that looks unfinished.

Then find out how a project is stored, because that decides both how easy it is to add one and whether search engines can read it. There are two common answers.

• Written into the page as HTML. Each project is a block of markup: a heading, a paragraph, an image. Adding a seventh means copying a block and editing it. The words are in the page itself, so they can be indexed without anything having to run first.

• Kept in a list inside the script. Aperture works this way: its six cases sit in one short list in the code, and the script builds whichever card is on screen from it. Editing a case, or adding a seventh, is changing a few lines of plain text in that list — arguably easier than editing markup. The trade is that the raw HTML carries almost none of those words, only the ones the script writes out while the page runs.

The second is not wrong. It is what makes a single-screen presentation like Aperture’s possible. But it changes what that page can do in search: a crawler reading the raw HTML finds a page title and very little else. Why that matters, and how to check any page for it in a few seconds, is the central point of our guide to animation and SEO.

The page most portfolio demos leave out

A portfolio usually needs a page per significant project: the case study, where you explain the brief, what you did, and what changed. It is the page a client forwards to a colleague, and the one most likely to be found by someone searching for the kind of problem you solve — because it is the only page that talks about that problem in detail.

Template demos rarely include one, because a demo is built to be browsed, not read. Ours are no exception. Aperture labels each case “Full case”, but in the template that label is not a link — there is no page behind it. Nocturne is the same fictional studio’s About page — mission, services, process — and ends with a “See selected work” button left for the buyer to point at wherever their work lives. Taken together they are two pages of one studio site, and neither is a case study.

So ask of any template: where would my case studies go? If the answer is a new page built in the template’s visual language, budget for designing that page once and repeating it. If the answer is “nowhere”, the template is an index or a front door, and it will need a second layout behind it.

When motion helps the work, and when it competes

The deciding question is whether your work can be seen. If it is visual — photography, illustration, interiors, product — it is already the most interesting thing on the page, and a full-screen scene moving behind it is competing for the same attention. Motion that serves visual work tends to be small: an image that eases into place, a transition between projects.

If your work cannot be photographed — positioning, strategy, engineering, anything whose result is a number or a decision — motion can do the job an image would otherwise do. That is the logic of Aperture’s exploded object, and of the rendered set pieces in Nocturne: they give a studio whose output is intangible something worth looking at while the reader takes in the claims.

A practical test: imagine your best project image in place of the demo’s centrepiece. If the template’s motion would now be moving across or around your work, it is in the way. If your work would sit in a card beside the motion, the two can coexist.

Your images are the page, so check how it handles them

A portfolio is mostly pictures, which makes the template’s handling of pictures matter more than on almost any other kind of site. Three things are worth checking in the demo’s source before you commit.

• Each image declares a width and height. Those let the browser hold the right space open before the image arrives, so the page does not jump. Verdant declares both on all nineteen of its photographs.

• Images below the first screen load lazily. Verdant defers eighteen of its nineteen and loads the first one straight away, which is the right way round: the image a visitor sees on arrival should not wait.

• Every image that shows work has alt text describing what is in it. For a portfolio this is also a question of reach — alt text is how the work is described to someone using a screen reader, and to a search engine indexing the images.

And a practical note if you choose one of our classic templates: their photographs are embedded inside the page file rather than stored beside it. Swapping in your own images works differently as a result, which our guide to rebranding a template walks through.

Before you buy: a short checklist

• You know how many projects you will show and how much each needs to say.

• The template’s shape — index, featured piece with a register, or method page — matches that.

• You have counted its project slots and they are close to your number.

• You know whether projects are written into the HTML or kept in a script, and what that means for search.

• You know where your case studies will live, or have budgeted a second layout for them.

• Your best image, imagined in the demo, is not fighting the motion.

• Images declare their dimensions, below-the-fold ones load lazily, and the work carries alt text.

Every template mentioned here has a public demo, linked from its page. The full catalogue is filterable if you would rather compare the conventional and the scroll-driven options side by side.