A portfolio page is the highest-stakes page on most service business websites. It is the room where potential clients decide whether you are capable of their project before making contact. Most portfolio pages underperform not because the work is bad — but because the work is poorly presented: insufficient context about the brief and outcome, photography that does not show the work at its best, no narrative connecting the work to the viewer's specific situation, and no clear next action after seeing the portfolio. This guide covers how to design a portfolio page that converts curious visitors into client enquiries.
What Is the Purpose of a Portfolio Page?
A portfolio page serves three functions for a service business:
- Proof of capability — demonstrating that you have successfully completed work that is comparable in scope, style, or sector to what the prospective client needs
- Quality signal — the quality of portfolio presentation itself communicates the quality of work a client can expect. A poorly presented portfolio suggests poorly delivered work, regardless of what the underlying work actually looks like
- Credibility through specificity — showing work for recognisable clients, in specific sectors, at specific scales, gives prospective clients confidence that you understand their context and have navigated similar challenges
The common mistake: treating the portfolio as a gallery of finished images rather than a curated argument for why you are the right partner for this client's project.
How Should a Portfolio Be Organised?
By category, not by chronology. A portfolio organised in reverse date order — your most recent work first — is easy to build and hard to navigate. A prospective client from the healthcare sector needs to find healthcare work quickly. A client evaluating your commercial photography needs to see commercial work, not wade through architecture and hospitality projects.
Organise by the criteria that matter to your prospective clients:
- For agencies and design studios: by sector (Technology, Financial Services, Hospitality, Retail) or by service (Brand Identity, Website Design, Campaign Design)
- For photographers: by genre (Architecture, Commercial, Editorial, Events, Portraits)
- For architects and construction companies: by project type (Residential, Commercial, Heritage, Interior) and by scale
- For developers: by technology (Next.js, Shopify, WooCommerce) or by client type (Startup, Enterprise, E-commerce)
How many items to show: 8–16 portfolio items is the optimal range for most service businesses. Below 8 looks sparse; above 20 becomes difficult to navigate without strong filtering. Show your best work, not all your work. A selective portfolio of 10 exceptional projects signals higher standards than a comprehensive archive of 40 mediocre ones.
What Should Each Portfolio Item Include?
The minimum for a portfolio thumbnail on the index page:
- Hero image or video (the most compelling visual representation of the project)
- Project name and client name (or sector, if the client is confidential)
- Service category or project type
- Link to the full case study
The full case study page:
- Project context — who the client is, what their business does, and the specific challenge or opportunity the project addressed. Without context, beautiful work looks arbitrary.
- The brief — what was required, any specific constraints, the deliverables agreed
- Your approach — the thinking and process that led to the solution, not a step-by-step process description but a narrative of the key decisions and why they were made
- The outcome — results where available (traffic growth, conversion improvement, press coverage, awards, client revenue impact). Outcomes are the difference between a portfolio and a case study.
- Visual documentation — multiple images, device mockups, and where appropriate: before/after comparisons, process sketches or wireframes, and close-up detail shots
See web design process guide for how to document and communicate the process behind each project.
What Photography Standards Apply to Portfolio Items?
Portfolio photography quality sets the ceiling for perceived work quality. A beautifully designed website shown in a low-quality, badly framed photograph communicates less value than a mediocre design shown in a professional mockup.
Standards for portfolio photography:
- Device mockups — for digital work (websites, apps), place designs in high-quality device frames. Angle mockups (laptop on a desk, phone being held, desktop monitor in context) communicate how the work lives in the real world better than flat screenshots.
- Multiple views — show the homepage, a key interior page, and mobile. For websites, showing only the homepage tells half the story.
- Print work — in-situ photography (business cards on a desk, stationery in use, packaging on a shelf) communicates the work's real-world impact more effectively than flat lays. Professional staging and photography is worth the investment.
- Brand identity work — show the identity applied across multiple touchpoints (logo, business card, signage, website) rather than the logo in isolation. The power of an identity system is only visible when you see it applied.
- Resolution — portfolio images should be a minimum of 1200px wide at 72dpi for web display. Low-resolution portfolio images are inexcusable on a professional service website.
How Should a Portfolio Be Filtered and Navigated?
For portfolios with 10+ items across multiple categories, filtering is essential. Without filtering, a prospective client must scroll through all items to find relevant work.
Filtering options:
- Category tabs (most common, best for 3–5 categories): visible above the portfolio grid, clicking a tab filters items in place without page reload
- Dropdown filter (best for 6+ categories): compact, keeps the portfolio grid prominent
- Combined filters (for complex portfolios): allow filtering by both sector and service type simultaneously
Grid vs list layout:
- Grid layout (2–4 columns of equal-height cards): best for visual-led portfolios where the thumbnail image is the primary hook
- Featured + grid (one large hero item, followed by a standard grid): use for your strongest or most representative project — it frames the viewer's expectations for what follows
- List layout (single-column with larger project descriptions): best for portfolios where context and outcomes are more important than visual impact — strategy studios, consultancies, technical developers
How Should Testimonials Integrate With the Portfolio?
Testimonials from the same clients whose work appears in the portfolio are significantly more powerful than generic testimonials displayed separately. For each case study, include a direct quote from the client about the outcome or the experience — ideally alongside their name, role, and company.
A testimonial that says "Working with [agency] on our website redesign was excellent" is less compelling than one that says "The website launched in March. By June, inbound enquiries from organic search had increased by 45% — exactly what we needed." See website testimonials design guide for the standards.
Your Portfolio Should Win You the Next Project
We design agency, studio, and service business websites with portfolios that communicate capability, convert visitors into enquiries, and present work at its best — for businesses in the US, UK, Canada, and Australia.
8–16 portfolio items is optimal for most service businesses. Below 8 looks sparse and suggests limited experience. Above 20 becomes difficult to navigate without strong filtering. Show your best work — not all your work. A selective portfolio of 10 exceptional projects with detailed case studies signals higher standards than a gallery of 40 briefly-documented projects. If you have a large body of work, filter it down to the most relevant examples for your current target clients and present those in full.
A compelling portfolio case study includes: client context (who they are, their business, their challenge), the brief (what was required and any specific constraints), your approach (the key thinking and decisions that led to the solution), the outcome (measurable results — traffic growth, conversion improvement, client revenue impact, press coverage, awards), and comprehensive visual documentation (multiple images across the project — homepage, interior pages, mobile, application on different touchpoints). The outcome section is what transforms a portfolio into a case study and distinguishes professional service businesses from amateurs.
By category — always. A portfolio organised by date is easy to build but hard to navigate. Prospective clients need to find work relevant to their sector or project type quickly. Organise by the criteria that matter to your target clients: by sector (Technology, Healthcare, Retail), by service type (Web Design, Brand Identity, Photography), or by project scale. If your portfolio has more than 10 items across multiple categories, add filtering so visitors can find relevant work without scrolling through everything.
For a web design portfolio, the minimum photography per project is: 3–5 screenshots in professional device mockups (laptop, desktop, mobile), showing at minimum the homepage and one key interior page. Angle device mockups (laptop on a desk, phone held in a hand) communicate real-world context better than flat front-on screenshots. Include mobile presentation for every project — showing only desktop design communicates that you do not think about mobile. For large projects, short video demos of animations or interactive features add significant portfolio impact.
Yes, with modification. For work under NDA: describe the client as 'a leading [sector] company' rather than by name, describe the project scope without disclosing proprietary information, and show the visual output where the design itself does not breach the NDA. Most design and creative NDAs cover business information, not finished visual work — but review the specific terms of each NDA. For some sectors (financial services, government), a brief 'available on request to qualified prospects' note with a contact CTA is an alternative to full public display.