perfectdesign.

Website types

Portfolio website design

The site your buyers judge you by is the one that shows your work. We scope it around the few projects that win the enquiries you actually want, and the permission, structure and speed needed to make them land.

In short

A portfolio earns work when it shows few enough projects to be read, tells each one in a structure that makes your judgement visible, publishes only what you have permission to publish, and puts a way to start a conversation beside the piece that convinced someone. Most of the difficulty is selection and permission rather than design, which is why we settle both before anything is drawn.

Written for a studio, practice or independent professional deciding which work to show and how to turn it into enquiries · 7 min read

Which work should the site actually show?

Choose each project for the visitor you want to hear from. The test is short: does this piece resemble the problem, the audience and the kind of contribution your next good enquiry will involve? If it does, it earns a place. If it is there because it was fun, or recent, or because the gallery looked thin, it is spending attention rather than earning it.

Relevance beats volume, and it is not close. Someone comparing three possible partners will not read forty entries. They scan until something looks like their situation, open it, and decide whether you understood a problem shaped like theirs. Be precise about what each item is, too. Work delivered for a client, a concept prototype and a collaboration where you did one part of the job are different things, and a visitor who works out the difference later will discount everything else on the page.

What a web page actually weighs. The writing is a rounding error. Everything a visitor waits for is the pictures and the code someone chose to add. A full text version follows.

What a web page actually weighs

Published statistic. The writing is a rounding error. Everything a visitor waits for is the pictures and the code someone chose to add.

Source: HTTP Archive: Web Almanac 2025, Page Weight. Reviewed .

Read the graphic as text
  • Images: 911 KB.
  • JavaScript: 632 KB.
  • Fonts: 122 KB.
  • CSS: 77 KB.
  • HTML: 22 KB. The words

Chart scale: Median kilobytes on a mobile home page by file type. Each is its own median, so they do not add up to the 2.6 MB median page..

Download this infographic (SVG)

When a portfolio site is the right shape

A portfolio-led site suits businesses where the work is the argument: studios, architects, photographers, interior and product designers and independent consultants. It is the wrong shape when the decision turns on capability, coverage or procurement rather than craft. If prospects need to understand a service catalogue, or several audiences each need their own destination, a business or corporate website is the better frame with selected work inside it, and our services overview sets out the other project types. The selection, permission and enquiry decisions below apply either way.

One picture decides how fast it feels. On three pages in four, optimising the hero image is not a detail. It is the performance work. A full text version follows.

One picture decides how fast it feels

Published statistic. On three pages in four, optimising the hero image is not a detail. It is the performance work.

Source: HTTP Archive: Web Almanac 2025, Performance (CrUX, July 2025). Reviewed .

Read the graphic as text

Mobile

  • An image: 76%. The largest thing painted on screen is a picture, so its file size is the loading score
  • Text: 24%. On desktop it is rarer still: 85.3% of pages paint an image last
Download this infographic (SVG)

What each project entry has to establish

Before anything is designed, each candidate project needs five things settled: who it was for, what you actually contributed, what constrained it, which media and details you may publish, and what evidence you can stand behind. Entries that skip those read as a gallery. Entries that answer them read as proof.

Take an assumed example: an independent studio preparing three permission-cleared sample projects. The actors and policies below are planning assumptions rather than a description of anyone's business, and the last column lists evidence to collect during the project, not checks that have already passed.

A portfolio entry workflow, using an assumed independent studio as the example
Workflow stepAssumed actorProposed system responseExceptionAcceptance evidence to collect
Select a projectStudio ownerRecord the intended buyer, the actual contribution made and the media permitted for publicationPermission is missing, so protected details stay unpublished and the entry is written genericallyA rights and evidence register entry per project, with no approval assumed on behalf of the client
Publish the project storyEditorExplain the problem, the contribution and any substantiated result, with accessible media at a sensible weightA result was never measured, so it stays a qualitative description rather than a figureClaim sources, alt text, and display checks at the screen sizes you support
Invite a relevant enquiryProspective buyerOffer an enquiry route from the project itself, carrying the project reference into the messageThe route a visitor wants does not exist yet, so the page gives clear context instead of a dead linkLive destination checks and a test enquiry that arrives, is acknowledged and is answered
What turns a gallery image into proof. The constraint is the part most portfolios leave out and the part that shows judgement. A full text version follows.

What turns a gallery image into proof

Editorial framework. The constraint is the part most portfolios leave out and the part that shows judgement.

Basis: Google: Creating helpful, reliable content. Reviewed .

Read the graphic as text

One project entry

  • Who it was for. Named, or described by sector and scale
  • Your contribution. What you did, not what the team delivered
  • The constraint. The budget, site or deadline you worked inside
  • Publishable media. Images and details you hold permission for
  • Claims you can back. A description, or a figure with a source
Download this infographic (SVG)

The case-study structure that persuades

A project entry that works follows the same shape each time: the situation and the constraint, the decision you took and why, what was actually built or made, and what happened next as far as you can honestly report it. The constraint is the part most portfolios leave out and the part that demonstrates judgement. A difficult site, a fixed budget, a protected building, a launch date that could not move: that is where a reader recognises their own project.

Keep four things apart as you write. Your contribution, which you can show. What can be observed, such as the pages that exist. A qualitative description, such as a client saying enquiries became easier to handle. And a measured result, which needs a traceable source, the context it was measured in, and permission before it goes anywhere near a page. An unmeasured improvement stays a description; stretching it into a number is the fastest way to lose a sceptical reader.

We hold our own work to that rule. Hire Creative is a concept prototype of a two-sided creative services marketplace, where creative professionals present their work and packages to be hired, and it is labelled a prototype everywhere it appears because it shows what we can build rather than a result delivered for a named client. Orialis Group is a concept prototype too, a corporate group site with a newsroom and an investor centre. If we applied a looser standard to our own evidence than we recommend for yours, you would be right to discount both.

Permission, confidentiality and the register that saves you later

Rights cover more than the pictures. They cover the client name, the logo, the location, the photographer's licence, any quote, any figure, and the parts of the work that are commercially sensitive. Plenty of good projects sit under an agreement that allows the images but not the name, or the name but not the numbers.

Write around partial permission instead of stretching it. A confidential project can be described by sector, scale and problem without identifying anyone, and that is honest. Wording that implies an approval nobody gave is not, and neither is a logo wall where half the logos are clients and half are companies you once did a small piece of work for. Record each decision as you go: the asset, its source, the permitted use, who granted it, when, and what would trigger a review. That register answers every awkward question later, including the one where a former client asks to be removed.

Image quality and page weight are one decision

A portfolio is the heaviest kind of site we build, because the images are the product. The instinct is to upload the full-resolution files and let the browser cope, and the result is a beautiful page that someone on a phone abandons before the first image resolves. The craft is keeping the work looking like the work while shipping a fraction of the bytes.

In practice that means several sizes of each image prepared in advance so a phone never downloads a desktop file, modern formats with fallbacks, anything below the first screen loaded only as the visitor scrolls, dimensions reserved so the layout does not jump, and video treated as an expensive choice rather than a default. Accessibility belongs in the same pass: alternative text that describes what matters about each image, and captions where a video carries meaning. Search engines also read the words around an image rather than the image itself, so a project described only in pictures is invisible to anyone searching for what it shows. Our search visibility guide explains how that is measured.

One photo, several files, one stable layout. The work still has to look like the work, which is why this is a craft decision and not a compression setting. A full text version follows.

One photo, several files, one stable layout

Primary-source guidance. The work still has to look like the work, which is why this is a craft decision and not a compression setting.

Source: web.dev: Serve responsive images. Reviewed .

Read the graphic as text
  • Several sizes. A phone never downloads the desktop file
  • Modern formats. With a fallback for older browsers
  • Reserved space. Dimensions set so the layout cannot jump
  • Loaded on scroll. Offscreen images wait until they are needed
  • Words alongside. Search reads the alt text, not the picture
Download this infographic (SVG)

Make enquiring easy wherever conviction happens

The moment someone decides to contact you is almost never the contact page. It is the third project, halfway down, when they recognise their own problem. If the only route from there is back to the navigation, you have put a step between interest and action for no reason.

So every entry gets a way to start a conversation about that specific piece, and the message carries the reference with it. Ask for the situation, who it affects, the change they want, what they use now and any constraint worth knowing, and you can reply properly rather than with a request for more detail. A large collection also needs a way to narrow down, and filtering by sector, service or scale is worth building once the set is big enough to need it. Our catalogue and search page covers how we keep that fast as the collection grows.

Keeping it accurate after launch

A portfolio dates faster than any other kind of site, because it is a set of factual claims about real projects. Separate four jobs and name an owner for each: routine care of the environment, renewals and dependencies; content work such as adding a project or correcting a detail; new features such as filtering or a change of case-study format; and larger upgrades such as a rebuild. Adding work should not require us, so we build the entries as client-editable content with the structure protected, and website maintenance covers the rest. On accessibility, the W3C Web Accessibility Initiative treats the work as a continuing activity with assigned responsibility, monitoring, involvement from the people affected and repeated review, rather than a box ticked at launch.

Three in ten images say nothing. Alt text is the cheapest accessibility and search work there is, and it is still missing from a third of the web. A full text version follows.

Three in ten images say nothing

Published statistic. Alt text is the cheapest accessibility and search work there is, and it is still missing from a third of the web.

Source: HTTP Archive: Web Almanac 2025, Accessibility. Reviewed .

Read the graphic as text

Images

  • Carry alt text: 69%. Readable by a screen reader, and by image search
  • Do not: 31%. Invisible to anyone not looking at the screen
Download this infographic (SVG)

What to bring when you want it scoped

Bring the eight or ten projects you would like to show, whatever permission you already hold in writing, and the original image files. That is enough for us to say which pieces are doing work, which are diluting the set, what needs a permission conversation first, and where the honest gaps are. Or simply tell us about the project, and we will come back with what we would need confirmed before anything could be built.

What you get

What is actually delivered

01

A selected set, argued

Which projects earn a place for the enquiries you want, which dilute the set, and what the collection is missing.

02

Rights and evidence register

Per project: the asset, its source, the permitted use, who granted it, when, and what would trigger a review or removal.

03

A consistent entry structure

Situation, constraint, contribution and what was made, so each project demonstrates judgement rather than showing pictures.

04

Media prepared for weight

Several sizes per image, modern formats with fallbacks, deferred loading below the first screen and reserved dimensions so the layout holds still.

05

Accessible media

Alternative text that describes what matters about an image, captions where video carries meaning, and quality that survives at real screen sizes.

06

Enquiry from every project

A route to start a conversation from the piece itself, carrying the project reference to an accountable person.

07

Publishing in your hands

New projects added by your team without coming back to us. See how we build client-editable content.

08

Filtering when it is justified

Sector, service or scale filters built only once the collection is large enough to need them, using our catalogue and search approach.

How it runs

Select and clear first, design second

A portfolio fails at selection and permission far more often than at layout, so those are settled before anyone opens a design tool.

  1. 01

    Choose the work

    We go through your projects against the enquiries you want and agree a shortlist, including what is better left out.

  2. 02

    Clear the permissions

    Names, logos, images, quotes and figures are checked against what you actually hold in writing, and anything unresolved is written generically.

  3. 03

    Prototype one entry

    You get a working project entry on a live link, so the structure is judged from the real thing rather than a layout.

  4. 04

    Build and optimise

    The full set is built, the media pipeline is tuned for weight, and the enquiry route is wired from every piece.

  5. 05

    Check and hand over

    Display at real screen sizes, alternative text, working destinations and a test enquiry are checked, then the accounts and code are yours.

Proof

Work you can click through

Both are concept prototypes rather than client engagements. Hire Creative demonstrates a two-sided creative services marketplace; Orialis Group demonstrates a corporate group site with a newsroom and an investor centre.

Concept prototypes are labelled as prototypes everywhere they appear. They demonstrate what we can build, not work delivered for that named client. More client work is going live and will be added as it does.

How we work

The parts people ask about before they commit

How we build

React first, other languages when a project needs them

We build in React by preference, on both web and mobile, and we work in other languages when a project genuinely calls for it.

Timeline

Project dependent, and often quicker than expected

Timelines are project dependent. A focused build can go live in about a week, while a larger platform takes longer once scope is agreed.

Ongoing care

Quoted with the project, not bolted on

Ongoing care for a front-end website starts from RM 1,000 a year and covers hosting, SSL, domain renewal and maintenance. Care is quoted with the project, not bolted on afterwards.

Getting hold of us

Normally under one working day

We normally respond to a support request in under one working day, and we work to solve problems as fast as we can. That is how we normally work rather than a contractual guarantee, and responding is not the same as resolving. If your operation needs a formal response or resolution commitment, we can write one into your scope.

Ownership

Everything belongs to your business

You own everything we build for you: the code, the content, the domain, the hosting account and every third-party account opened for the project. There is no lock-in. If you move to another provider, everything goes with you and we help with the handover.

  • Source code, handed over in your own repository
  • Domain and DNS, registered to your business
  • Hosting and every service account, in your name
  • Analytics, search and ad accounts, with us as a manager you can remove
  • All content, media and data in the system

Questions

Asked about portfolio websites

Straight answers to what people ask before they commit. Anything else, message us.

How many projects should we show?

Fewer than feels comfortable. Six to twelve entries with real context outperform an archive, because a visitor reads two or three before deciding. Keep the rest of the work for conversations, where you can choose the right example for the person in front of you.

What does a portfolio website cost?

Our website packages are published openly on the pricing page. What moves the number is how many entries need writing, whether the images need preparing from raw files, and whether the collection is large enough to need filtering.

Can we add new projects ourselves?

Yes. Project entries are built as editable content so your team can publish a new piece, with the structure protected so an edit cannot break the layout. The parts that rarely change stay fixed on purpose.

A client will not let us name them. Can we still show the work?

Usually, by describing the sector, the scale and the problem without identifying anyone, and by keeping out any detail that would. What we will not do is write wording that implies an approval you do not have.

Will all those images make the site slow?

They will if the site is built carelessly. Prepared sizes, modern formats, deferred loading and reserved dimensions keep a heavy portfolio usable on a phone. We measure it rather than promise a score, because the weight depends on what gets published after launch as much as before.

We already have a portfolio site. Rebuild or improve it?

We audit before recommending either. If the platform is sound and the problem is selection, writing and image weight, improving is faster and cheaper. Where a rebuild is the honest answer, website redesign covers how we handle the existing URLs.

Will people find the work through search?

Only to the extent it is described in words, since search engines read the text around an image rather than the image itself. Well-written entries help; how that is measured over time is covered on our SEO page, and we do not promise rankings.

Where to go next

Sources

Tell us what you need built

We will show you the closest thing we have already built, then scope the real version against your requirements.