our portfolio web design
Step-by-step plan to build a portfolio site that showcases your work, ranks in Google and converts visitors into clients.
This guide covers structure, copy, image optimisation, on-page SEO, and practical conversion tactics — designed for freelancers, creatives and small agencies who want a portfolio that actually brings enquiries.
Portfolio Structure: Pages Every Portfolio Needs
Organise your portfolio with a clear navigation and purpose. Visitors should understand who you are and what you do within 3 seconds.
- Home / Landing — short intro, signature project, clear CTA to view work or contact.
- Work / Portfolio Index — grid of case study thumbnails with brief tags (service, outcome, year).
- Project Pages — dedicated page per project showing problem, approach, visuals, tools used and measurable outcomes.
- Services / What I Do — short service descriptions that link to relevant project pages.
- About — 1–2 paragraphs, photo, credentials, and a clear contact CTA.
- Contact — phone/email and a simple contact method (or booking link). Add location if relevant.
- Blog / Updates (optional) — useful for SEO and showing ongoing work or process posts.
Keep navigation minimal: Home, Work, Services, About, Contact. Use sticky header on desktop and a clear mobile menu.
How to Write Project Pages That Persuade
Each project page is your chance to tell a short story: client challenge → your approach → results. Structure each page consistently.
Recommended project page layout
- Title: Clear project name + short descriptor (e.g., "Brand Refresh — GreenLeaf Interiors").
- Hero image: Large visual that shows the finished result. Use descriptive alt text (see image section).
- Summary at a glance (3 bullets): Service, timeline, outcome (e.g., 40% increase in leads).
- The problem: One short paragraph describing client goals and constraints.
- Your approach: Tools, process and specific deliverables. Use subheadings and short paragraphs.
- Visual gallery: Before/after, close-ups, mobile screenshots, annotated images if useful.
- Outcome: Hard numbers if available (traffic, leads, conversion improvements). If numbers aren’t shareable, describe qualitative impact.
- CTA: A contextual CTA like "See how this was built" linking to contact or a related service.
Keep project pages focused — one page per project. Avoid bloated pages that try to show everything at once.
Image & Media Optimisation
Photos and screenshots are the heart of a portfolio. Optimise them for speed, accessibility and search.
File formats & sizes
- Use WebP or AVIF for photos where supported — much smaller files with equivalent quality.
- Keep hero images under 200–400 KB when possible; thumbnails under 80 KB.
- Serve responsive images with srcset so browsers pick the right size for the device.
Accessibility & SEO
- Write descriptive alt text: include the project name and what the image shows (e.g., "GreenLeaf Interiors lounge area — before renovation").
- Use captions for context where helpful — captions are read more often than body text.
- Lazy-load off-screen images to improve initial page speed.
Video & interactive media
If you include short video walkthroughs, host on a fast CDN or use an embed that loads lazily. Provide a short transcript for accessibility and SEO.
SEO: Make Your Portfolio Discoverable
Good SEO helps your ideal clients find your work. Focus on the fundamentals and a handful of targeted pages.
Priority checklist
- Keyword-focused project titles: Include service + location or niche if relevant (e.g., "E-commerce Website Design for Local Florists").
- Unique meta title & description per page: Keep titles ~50–60 characters and meta descriptions ~120–155 characters.
- Headings: Use a single H1 per page, then H2/H3 for sections. Project pages should have H1=Project Title.
- Structured data: Add Article/CreativeWork schema and, for local businesses, LocalBusiness schema to boost rich results.
- Image markup: Use descriptive filenames and alt attributes (e.g., greenleaf-interiors-lounge-after.webp).
- Sitemap & robots.txt: Submit your sitemap to Google Search Console and ensure important pages are crawlable.
- Internal linking: Link from service pages to relevant projects and vice versa to create topical clusters.
- Page speed: Target under 2.5–3s on mobile; optimise images, enable compression, and use caching/CDN.
- Mobile-first: Design and test primarily for mobile users.
Content strategy
Publish 1–2 in-depth posts or project write-ups per month that answer common client questions or explain your process. These pages attract organic traffic and improve authority over time.
<title>E-commerce Website Design for Bakers — Jane Doe Studio</title>
Convert Visitors: CTAs, Trust & Contact Flow
Conversion is about removing friction. Make it obvious how a visitor becomes a client.
CTAs that work
- Use clear, action-oriented CTAs: "See How It Works", "View Project", "Get a Quote". Put one primary CTA above the fold.
- Add contextual CTAs on project pages: "Want this result? Book a quick call".
- Use micro-CTAs on thumbnails: "View case study".
Trust signals without testimonials
You can build trust without client quotes by showing:
- Project process screenshots (shows competence).
- Logos of platforms or tools you use (e.g., Figma, Shopify).
- Certifications, awards or publications (if applicable).
- Before → after visuals with short captions.
Contact flow tips
- Provide multiple contact options: email, phone and a short contact form (kept minimal).
- Set expectations: "We respond within 24 business hours".
- Include a short qualifier: "Tell us your budget and timeline" (reduces low-quality leads).
Launch Checklist
- ✅ Title tags & meta descriptions set for every page
- ✅ PageSpeed: mobile under 3s
- ✅ Images optimised and responsive
- ✅ Analytics installed (Google Analytics / GA4) and goals set
- ✅ Sitemap submitted to Google Search Console
- ✅ Contact methods tested (email deliverability verified)
- ✅ Mobile usability tested on popular phones
- ✅ Backups & SSL active
Tip: Launch on a weekday morning. Monitor traffic and form submissions closely for the first 48 hours.
Recommended Tools & Resources
Design & Build
- Figma — design and assets
- Webflow / Congero-style subscription — quick responsive builds
- Shopify / WooCommerce — for e‑commerce projects
SEO & Performance
- Google PageSpeed Insights — performance check
- Google Search Console — indexing & coverage
- GTmetrix / WebPageTest — deep audits
Images & Media
- TinyPNG / Squoosh — compress images
- Cloudinary — on-the-fly resizing & format switching
Analytics & CRO
- GA4 — visitor tracking
- Hotjar / Microsoft Clarity — session recordings & heatmaps
Frequently Asked Questions
How many projects should I showcase?
Should I show prices?
Can I reuse client images?
How long until I see enquiries?
Ready to Build a Portfolio That Gets You Hired?
Follow the steps above to structure, optimise and launch a portfolio that showcases your best work and attracts clients.
Pro tip: launch with 5 strong case studies and iterate monthly based on analytics.
