Portfolio Page Design: How to Build a Gallery That Wins Clients

At Talha Aslan and team, we review a lot of portfolio pages in our client work. The most common problem we see is simple: the work is good, but the page does not explain it. In other words, hundreds of photos sit side by side with no context at all. This guide walks through every step in practical terms. We cover project cards, filtering, case studies, image optimization, lightbox accessibility and client permission.

What should a portfolio page actually do?

A portfolio page builds trust first. Above all, visitors want an answer to one question: has this team done something like my project? Therefore, the job of the page is not to display everything. Its job is to show the right work to the right person.

The second job is to make the decision easier. For example, someone looking for a residential project on an architecture studio site should not waste time on office towers. The third job is to make the next step obvious. A quote form, a phone number or a booking link should always stay in view.

We can sum up these three jobs like this:

• Trust: real work, clear context and consistent quality.
• Easy selection: fast narrowing by category, industry or service type.
• Direction: a clear call to action at the end of every project.

So we suggest you start the design with these three questions, not with the images. Who visits, what do they look for, and what should they do next? Once the answers are clear, the layout, filters and card structure follow naturally. The page also needs to match your wider web design strategy. Our guide on conversion-focused web design is a good place to start.

What is the difference between a gallery and a case study?

A gallery is a visual area built for quick scanning. A case study tells the story of a single project: the starting need, the chosen approach and the result. Both can live on the same page, but they still do different jobs.

Galleries shine where the work itself is visual. Photographers, interior designers, event planners and product makers benefit the most. On the other hand, in consulting, software or engineering, a single screenshot says very little. Instead, visitors there care about the process and the outcome.

In practice, the healthiest structure has two layers. The top layer holds a card grid or gallery that visitors skim. The bottom layer opens a dedicated case study page for each card. As a result, quick scanners and detail seekers both find what they need.

Example scenario: picture a kitchen cabinet maker. The gallery shows twenty different kitchens. However, a visitor who clicks the "U-shaped kitchen in a narrow space" project lands on a separate page. That page covers measurements, material choices and installation time. The gallery attracts attention, and the case study persuades.

Which projects belong in your portfolio?

It is tempting to add everything, but a crowded portfolio looks weaker than a selective one. Visitors see your weakest work too, and they judge quality by the average. That is why selection is the first and most important design step.

We recommend these criteria when you choose projects:

1. Does it resemble the work you want to sell? Do not feature project types you no longer take on.
2. Do you have high-quality images or documents? A blurry photo hurts even great work.
3. Do you have permission to share it? We cover permission in its own section below.
4. Does it have a story? A tough need with a clear solution beats a routine job.
5. Is it current? Old styles can mislead new clients.

Also, keep a balance across categories. For example, if one of your services is very strong but has only one sample, visitors will assume it is a side offering. In short, your portfolio should mirror your sales priorities.

Here is a starting point based on our field experience: pick a few strong projects for each main category, then add more over time. That said, this is not a rule. The real test is whether a visitor can decide without getting lost.

What information belongs on a project card?

A project card is each box in the grid, and it acts as the door to the case study. Because the card is small, every element has to earn its place. So treat the card as a summary, not a poster.

An effective card usually includes these elements:

• One strong cover image that best represents the project.
• A short, meaningful title, such as "3-bedroom apartment renovation in Brooklyn" instead of "Project 12".
• Category or industry labels that use the same names as your filters.
• One sentence of summary that focuses on the need or the result.
• A fully clickable area, not just a tiny "details" label.

Using the card title as the link text also matters for accessibility. A screen reader user then hears meaningful project names in the link list instead of dozens of "Read more" labels. In addition, linking the image, title and label separately creates three links to the same address. Use one link instead.

Card sizes should also stay consistent. Covers with different aspect ratios make the grid look messy. Therefore, cropping cover images to the same ratio from the start saves a lot of cleanup later.

Which grid layout fits your work?

A portfolio page usually relies on one of three common layouts: an even grid, a masonry layout or a list view. Masonry stacks images of different heights without gaps. The right choice depends on the nature of your work and how visitors scan.

The table is a starting point, not a strict rule. For example, a photo studio might use masonry on the home page and an even grid on category pages. In other words, different pages on one site can use different layouts, as long as each serves its own purpose.

Masonry also needs extra care. If the visual order differs from the order in the document, keyboard users see focus jump around the screen. So make sure both orders follow the same logic.

Also check the visual weight balance. A single bright photo can overpower the entire grid. Our guide on visual weight in web design shows how to keep that balance.

When do you need filtering?

You need filtering once the number of projects grows and visitors look for different things. With only a handful of projects, a filter bar adds empty clutter. On the other hand, many projects in one stream without filters make visitors leave before they find anything.

We suggest these principles for a good filter system:

• Use the visitor's language: service or industry names that clients search for, not internal department names.
• Keep the number of options limited, because too many filters create decision fatigue.
• Always keep an "All" option on screen.
• Make the selected filter visually clear and announce it to screen readers too.
• If a result is empty, do not leave a blank area. Show a message that points to other categories.

On the accessibility side, filter buttons should be real buttons. Announcing the selected state with an attribute such as aria-pressed tells screen reader users which filter is active. In addition, a live region that announces the result count, such as "6 projects", prevents disorientation after each change.

The sales impact of product filters in ecommerce is a separate topic. For details, see our article on how product filtering affects ecommerce sales. In a portfolio, the goal of filtering is to build trust rather than to close a purchase.

How do filter URLs affect SEO?

The way filters show up in the address bar decides how search engines see your page. Filters that run only in JavaScript and never change the URL can work well for users. However, a category like "residential projects" then never becomes a searchable page of its own.

If a category is a topic people actually search for, consider giving it a separate, permanent URL. For example, if "office interior design projects" is a valuable query, that category can become a standalone page. It gets its own title, a short description and a project list. As a result, both visitors and search engines can reach it directly.

On the other hand, if many small filter combinations such as sort order, color or year each generate a URL, you can end up with hundreds of near-duplicate pages. Consequently, that wastes crawl budget. Therefore, give permanent URLs only to meaningful categories and keep fine-grained filters on the page.

In short, split your filters into two groups. The first group covers searched categories that deserve their own page. The second group only adds convenience and does not need indexing. Making this split during design saves redirect and cleanup work later.

In what order should you build a case study page?

A case study page tells a project's story from start to finish, and it carries most of a portfolio's persuasive power. Visitors should think "my problem looks like this one" while reading it. So the page needs to read like a narrative, not a photo album.

We usually follow this order for case studies:

1. Summary box: client type, industry, scope of service and duration.
2. Need: the situation before the project and the goal.
3. Approach: which options you weighed and why you chose this path.
4. Process visuals: sketch, interim stage and final result.
5. Outcome: measurable data with its source if you have it, otherwise qualitative observations.
6. Client quote: only a real quote you have permission to use.
7. Next step: a call to action for similar projects.

Above all, stay honest in the outcome section. Invented percentages, unverifiable success figures or claims like "we tripled sales" without a source destroy trust. If you have no measurable data, describing the delivered scope and the client's feedback is enough.

We build this structure on your site: our web design service covers everything from project cards to case study templates, and we plan the content layout together with you. That way, every new project you add fits the same clear template.

How should you prepare portfolio images?

Portfolio images are the heaviest load on the page. If you upload high-resolution photos as they are, the page slows down and mobile visitors wait. That is why every image needs preparation before upload, and then a quick check after.

We recommend these preparation steps:

1. Resize each image to the largest size it actually displays at. Do not keep a huge file for a narrow card.
2. Use a modern format. Google supports common formats, including WebP and AVIF.
3. Prepare a small version for the card and a large one for the lightbox.
4. Give files meaningful names. A short descriptive name beats a string of numbers.
5. Strip unnecessary metadata, especially location data.

For resizing and converting, you can use our image resizer and JPG to WebP converter. You can also serve multiple versions for different screen widths with the srcset attribute, and the browser then picks the right one.

Google's image SEO best practices page also recommends the picture element or srcset for responsive images, always with a fallback src. For broader advice, our guide on optimizing images for speed and SEO goes deeper.

How do you handle lazy loading and layout shift?

Lazy loading means the browser downloads images outside the screen only when the visitor gets close to them. In a long gallery, this lightens the first load considerably. However, a wrong setup can have the opposite effect.

The web.dev article on browser-level image lazy loading gives a clear warning: use lazy loading only for images outside the initial viewport. In other words, the cover image and the first row of cards should load normally. Otherwise, the Largest Contentful Paint (LCP) element shows up late.

The second critical point is layout shift. If the page reserves no space before an image loads, the photo pushes everything below it down when it arrives. For this reason, the same source recommends width and height attributes on every image, so the browser can reserve the space in advance.

Both issues affect Core Web Vitals directly. For details, see our articles on lazy loading and page speed and fixing cumulative layout shift. In short, load the first gallery row fast, defer the rest and draw every image box up front.

How should an accessible lightbox work?

A lightbox is the layer that shows an image large on top of the page after a click. Technically, it is a modal dialog, so it must also follow modal rules. A lightbox that you cannot open or close with a keyboard traps visitors on the page.

The W3C modal dialog pattern describes these behaviors:

1. When it opens, focus moves to an element inside the layer.
2. Tab and Shift with Tab cycle focus inside the layer, and focus cannot escape.
3. The Escape key closes the layer.
4. When it closes, focus returns to the element that opened it.
5. A visible close button stays available.
6. The layer has an accessible name, for example through a link to a visible heading.

In modern browsers, the native dialog element handles much of this work for you. When you open it as a modal, the content behind it becomes inert and the Escape key works by default. So instead of writing a focus trap from scratch, you start from a solid base.

Also, the previous and next buttons need meaningful names. A button with only an arrow icon sounds empty in a screen reader. In addition, a position indicator such as "3 of 12" helps visitors know where they are in the gallery.

How do you write alt text in a gallery?

Alt text is a short description that conveys an image's purpose to someone who cannot see it. The WCAG non-text content criterion asks that every meaningful image has an equivalent text alternative. Purely decorative images, on the other hand, should be easy for assistive technology to skip.

We suggest this approach for portfolio alt text:

• Describe what the image communicates in context, not just what it shows.
• Include the project and the standout detail, such as "Open kitchen with wood paneling, an island counter and pendant lights".
• Do not copy the same text across images in one project. Say what each frame shows differently.
• Avoid keyword stuffing.
• If the card title already describes the image, do not repeat it.

The last point matters because of duplication. When the image and the title sit inside the same link, repeated alt text makes a screen reader read the same thing twice. In that case, consider whether the image is purely decorative.

Our alt text guide explains the general rules with examples. If you want to see accessibility standards for the whole site, our article on WCAG standards shows the way.

Which decisions matter for a portfolio page on mobile?

On mobile, a portfolio page often drops to a single column, and that is a natural choice. However, shrinking a four-column desktop grid into two columns can produce tiny, hard-to-read cards. So treat the mobile layout as its own design decision.

Here are the main points to watch on mobile. First, the filter bar can scroll sideways, but the selected filter should stay on screen. Second, tap targets should be large enough for a thumb. Third, swipe gestures for previous and next images in the lightbox can work alongside the buttons.

On the other hand, the image size you send to phones should differ from desktop. Sending a desktop-resolution photo to a narrow screen wastes data and time. This is where the srcset and sizes attributes come in. Our website image sizes guide lists practical starting dimensions.

Example scenario: a visitor opens an interior design studio's site on a phone with a weak connection on the subway. The first two cards appear right away, and the rest load during scrolling. The lightbox fills the screen, and the close button sits within thumb reach. These small decisions keep the visitor on the page.

Why do client permission and privacy matter?

Every project in your portfolio belongs to a client, and you need permission to share it. That applies to logos, venue photos, screenshots and client quotes alike. Publishing without permission puts both the relationship and your reputation at risk.

We recommend these practices for permission:

• Add a portfolio clause to your contract and spell out its scope.
• For confidential projects, remove the client name, logo and recognizable details, then present it as an anonymous case.
• Get consent from people who appear in photos.
• Blur real personal data in screenshots or replace it with sample data.
• Remove location metadata from image files before publishing.

Specifically, residential projects need extra care. When interior photos of a home meet location data, the homeowner's privacy can suffer. Therefore, naming only the neighborhood or city instead of the address is usually enough.

For a general framework on personal data, see our article on building a GDPR-compliant website. Note: this section is not legal advice; ask a lawyer about contract clauses.

How does Google find your portfolio page and its images?

Google finds images through the src attribute of the img element in HTML. Google's official documentation states plainly that it does not index CSS background images. Therefore, place important portfolio images as real image elements, not as backgrounds.

Second, consider context. The heading, description and alt text near an image tell Google what the image is about. A gallery made only of images with no text stays weak in search for this reason. A short category description and meaningful card titles fill that gap.

Third, think about discovery. On sites with many images, an image sitemap helps Google find files it might otherwise miss. The same documentation notes that you can list images in the sitemap even when they live on a content delivery network.

File names and extensions should also match the actual file type. If a wrong image appears in Google results, our article on fixing a wrong image thumbnail explains the options. In short, visible, contextual and discoverable images make your portfolio work in search too.

How do you move portfolio page visitors toward a quote?

Conversion here means the visitor gets in touch after seeing your work. A beautiful gallery alone does not achieve that, because the visitor needs a clear next step. So do not hide the call to action at the very bottom.

These placements tend to work well. Use a context-specific call such as "Get a quote for a similar project" at the end of each case study. On category pages, add a short form for that specific service below the project list. In long galleries, you can also consider a simple contact button that stays within reach while scrolling.

Also, place trust elements near the call to action. For example, a permitted client quote, a short list of industries you serve or a summary of your process steps can clear the last doubt. Still, do not overdo it; a clean layout is more convincing than a wall of badges.

Next, keep the form short. A name, contact details and one field about the project are usually enough. In addition, passing along which project the visitor came from speeds up the first conversation, because your team knows their interest from the start.

If you want to rebuild your portfolio page with this logic, you can request a quote through our web design services page. We review your project scope and propose a structure and work plan that fits.

Pre-launch checklist

Before you launch the portfolio page, we suggest checking the list below item by item. Each check takes little time, but together they make a big difference.

• Do you have written sharing permission for every project?
• Do all cover images share the same aspect ratio?
• Are card titles meaningful and wrapped in a single link?
• Do filter buttons work with a keyboard and announce their selected state?
• Do images in the first view load normally while the rest use lazy loading?
• Does every image have width and height values?
• Does the lightbox close with Escape and return focus to its trigger?
• Is alt text contextual and free of repetition?
• Did you strip location metadata?
• Does every case study end with a relevant call to action?
• Are tap targets comfortable on mobile, and does the filter bar work?

Sharing this list within your team also helps. For example, the content editor checks permission and alt text, and the developer checks loading and keyboard behavior. That way, responsibility stays clear and no item slips through.

Use the list again whenever you add a new project. A portfolio is a living page, and problems usually creep in over time with rushed additions.

What are the most common mistakes?

The mistakes we see most often look alike. The first one is uploading every job without selection. Strong projects then get lost in the crowd, and visitors judge quality by the average.

The second is a gallery without context, which is just as common. A page of photos alone does not say what you did, for whom or how. Short descriptions and case study pages solve that.

The third is heavy, uncompressed images. Files uploaded straight from the camera slow the page and drive mobile visitors away. The fourth is a lightbox that does not work with a keyboard; visitors cannot close the layer they opened, so they leave.

The fifth is sharing without permission. Publishing a project the client did not want public undermines even the best design. Finally, a missing call to action is common too. The visitor feels convinced but does not know where to click.

All these mistakes share one root: nobody looked at the page through the visitor's eyes. So before launch, hand a phone to someone who has never seen the page and ask them to find a specific project. Every spot where they hesitate is a spot to fix.

To sum up, a good portfolio page is selective, contextual, fast, accessible and directive. When you build these five qualities together, your gallery does more than look good; it brings in work.