A visitor looking through a website portfolio is trying to judge whether the work is relevant to their problem. A good thumbnail helps them choose a project. The project page then needs to explain the decisions and show enough of the interface to let them assess the result.
Our catalogue grew to 162 entries: 150 self-initiated demo projects alongside 12 earlier portfolio entries. At that size, presentation became more than a matter of selecting attractive images. People needed a way to find a useful example without opening the whole collection.
Organise the collection around the visitor's question
We added industry filters such as B2B, healthcare, restaurants and real estate. Those categories help someone commissioning a restaurant website find dining and enquiry examples, rather than merely narrowing a large collection to the equally broad category “websites.”
The index serves six entries per page, with newest additions first. Numbered pagination keeps the full collection reachable, while filtering happens before pagination so a category includes all its relevant records.
A smaller portfolio may not need filters at all. The useful decision is how much organisation the collection requires, not whether a filtering control makes the page look more substantial.
Make the project account explain a choice
Our property development project explains why floor plans remain publicly accessible and why internal and terrace areas are shown separately. The residence screen then lets the reader inspect that decision.
“We designed a beautiful property website” would not give the screenshot the same context. Nor would a paragraph listing the positions of the navigation, photograph and button. The useful account identifies a problem, explains the chosen approach and acknowledges what the page actually does.
Choose a screen that explains the project decision
The recording studio project has a different argument: choosing a session type before preparing a brief. A portfolio should preserve that difference instead of making every project sound like the same successful redesign.
Choose screenshots after deciding what the page needs to explain
A homepage is not automatically the best illustration. If the account concerns an approval, show the comparison or review screen. If it concerns an application, the candidate's account may be more useful than the recruitment brand page.
The caption should name what matters in the image. “The current revision stays beside the review history” gives the reader something to inspect. A label such as “Home” only names a page type, and generic language about evidence does not explain why the image is there.
Screenshots should support the account rather than dictate its structure. A gallery can provide the broader tour for readers who want it, while selected images carry the specific explanation.
Show the decision
- 01FindMake relevant work easy to locate.
- 02UnderstandExplain the task, design decision and scope.
- 03InspectUse selected screenshots as supporting evidence.
Keep the thumbnail recognisable without pretending it is the interface
We use illustrated covers with the project palette, then carry the same colours into the work page and retain the original screenshot colours. The cover introduces the project; the screenshot shows the actual interface.
The distinction allows the cover to be concise without substituting an invented mockup for the work. It also avoids making a dark studio interface appear to belong to a completely different light-themed project when someone opens the gallery.
Review identifying information before sharing screenshots. Names and contact details can appear in forms, secondary records and activity histories as well as logos. Keep enough surrounding context for the design to remain understandable after those details are blurred.
Give the article a different job from the project page
A work page describes a particular build and its scope. A blog develops a question across examples. Our studio website article, for instance, explains why a room description and session brief need to work together, then links to the project for a closer look.
Let the introduction and the detail do different jobs
Our portfolio examples guide provides wider reference points. Both forms of content connect to web engineering, but the service link should follow naturally from the reader's question. A useful portfolio earns that next click by explaining the work clearly, not by placing a sales pitch below every screenshot.
Sources and calculation notes
Catalogue counts were checked against data/work-projects.json on 31 October 2026: 162 entries, comprising 150 demo projects and 12 earlier entries. The work index serves six entries per page; 162 / 6 = 27 pages.
- Our residential property website project. The project page includes the design account, delivered scope and screenshots discussed in this article.
- Our recording and sound studio project. The project page includes the design account, delivered scope and screenshots discussed in this article.
External references checked on 31 October 2026.