The Cobbler's Shoes: Build a Web Design Studio Website That Sells
A web design website wins projects by showing real work, explaining how a project runs and making it easy to send an enquiry with a budget and a date. Because your visitors are professionals judging your craft, your own site has to meet the standards you would set for a client.
- No coding required
- Live in minutes
- Blog, SEO and chatbot tools included
Your studio's own site is the first project a prospect judges, so build a web design website that behaves like your best client work: finished projects up front, services and process in plain steps, and an enquiry form that asks for budget and timing. Make it accessible too, because your visitors can tell.
- WCAG 2.2, the current version of the Web Content Accessibility Guidelines, became a W3C Recommendation in October 2023. W3C WCAG 2.2
- WCAG 2.2 adds 9 success criteria to 2.1, including rules that keyboard focus must not be hidden behind a sticky banner and that anything done by dragging needs a simple alternative. What's New in WCAG 2.2
- The US Federal Trade Commission's rule banning fake reviews and testimonials went into effect on 21 October 2024. FTC questions and answers
- Google uses the mobile version of a site's content for indexing and ranking. Google mobile-first indexing
- AI Web Maker built the Pixelcraft Studio sample, 5 pages, in 40 seconds. Pixelcraft Studio sample
What must a web design website do for its visitors?
It must prove you can design, show how you work, and make starting a project easy. A visitor decides within moments whether to keep reading.
The old saying about the cobbler's children going without shoes fits this trade well. Many studios and freelancers spend their days on client sites and leave their own for later. The result is a thin page, a stale portfolio and a contact form that nobody has tested. That is a costly habit, because your website is the one piece of work every prospect is sure to open.
Your visitors are businesses that need a website. Some are replacing an old one, some are launching, and some have been let down by a previous designer. They arrive with three questions. Can this person make something good? Will the project be handled calmly and on time? Can I afford it, and can I start soon? Your site has to answer all three without making them dig.
This changes how you write. A web design site is judged on craft and on clarity at the same time. A visitor who finds a confusing menu or an unreadable paragraph will assume your client work is the same. So the design, the copy, the speed and the accessibility of your own site are all part of the pitch. Treat it as the best case study you have, because it is the only one you control completely.
You can see this approach on a finished example. Pixelcraft Studio is a fictional web design business, and its home page opens with the line "Design that earns its place. We craft work you can be proud of." It then moves straight to recent projects, what the studio does, how a project runs and a way to get in touch. Open it beside this guide and follow along.
Which pages does a web design website need?
Five pages are enough to start: home, services, portfolio, about and contact. Each has one job, and together they take a visitor from curiosity to an enquiry.
Resist the urge to build ten pages on day one. A studio that launches five good pages beats one that launches fifteen thin ones. You can add case study pages, a blog or a page per service later, once you know what prospects ask about most. The five below cover the whole journey from first look to first message.
| Page | What it must do | Where to see it on the sample |
|---|---|---|
| Home | Show your best work, say what you do, outline the process, point to the enquiry | Pixelcraft home |
| Services | List what you build and how a typical project runs | Services |
| Portfolio | Show real sites with context and results | Our Work |
| About | Introduce the people and what working with them is like | About |
| Contact | Take a project enquiry with budget and timing | Contact |
The order matters because visitors read in a rough sequence. They look at the work first, check what you offer, learn who you are, and then reach out. Your navigation should follow that order, and the enquiry link should be visible from every page, not hidden in a footer. A visitor should never have to hunt for the way to hire you.
A single freelancer may fold the about page into the home page, and that is fine. The test is whether a stranger can find the work, the services and a way to contact you in two clicks or fewer. If they can, the structure is right. If they cannot, simplify before you add anything new.
What should each page say?
Each page should lead with a plain answer to one question and back it up with specifics. Avoid vague claims about passion or quality, and show evidence instead.
On the home page, the first screen needs a clear promise and a glimpse of work. The Pixelcraft home page does this with its headline, then a section called "A taste of recent projects", then "What we can help with" and "Four clear steps". That order shows the work, names the services and reassures the visitor about the process, all before asking for anything. End with a short prompt to talk about a project, so a convinced visitor has somewhere to go.
On the services page, name each thing you build and say who it suits. Do not list technologies for their own sake, because most buyers do not care which framework you use. Say what the client gets: a site that explains their business, a shop that takes orders, a redesign that keeps their search visibility. Then explain how a typical project runs. The sample has a section titled "How a Typical Project Works", and that is the right idea: stages in plain words, from first call to launch. State what you need from the client at each stage, such as copy, photos and feedback, because that is where projects stall.
On the portfolio page, quality beats quantity. Six strong projects are better than twenty average ones. For each, give the client's name or type of business, the problem, what you did and what changed afterward. Only state results you can stand behind. If you cannot share a number, describe the outcome in plain terms, such as a clearer booking path or a faster mobile page. The trust section below explains permission, which you must settle before anything goes live.
On the about page, introduce the people. The sample's about page has a story of how the studio began, a "Meet the team" section and a section on what it is like to work with the studio. That last part is worth copying. Prospects are choosing a partner for weeks or months, so tell them how you communicate, how often you update them and how you handle changes. A freelancer can do the same in the first person, with a real photo and a short, honest account of how they work.
On the contact page, keep the form short and make the next step obvious, as the next section describes.
How should a project enquiry work?
A good enquiry form asks for the few things you need to reply usefully: name, email, what the project is, a budget range and a target date. Anything more will lose people.
The Pixelcraft contact page has a section called "Send a project enquiry" and a form named "Project enquiry", with a separate "Get in touch directly" block for people who prefer to email or call. Offering both is wise. Some buyers want to write a paragraph and some want to talk. Letting them choose removes a small barrier that costs more enquiries than most studios realise.
Asking for budget is the hardest choice for many freelancers. Some worry it scares people away. In practice it saves everyone time, because a request for a three-thousand-dollar build and a request for a thirty-thousand-dollar build need different answers. Offer ranges as options rather than a blank box, and include a choice such as "not sure yet" so nobody feels trapped. Ask about timing the same way: a launch date, a rough season or "flexible". These two answers let you decide quickly whether to book a call or send a polite note.
Add a short line above the form saying what happens next and how soon you reply. Only promise a reply time you can keep. A visitor who knows they will hear back within a stated window is far more likely to press send than one staring at an unexplained button. Treat your first reply as part of the service, because it is the first thing a new client experiences.
Test the form yourself every month. Send an enquiry from your phone and check that it arrives and that the confirmation makes sense. A broken form on a design studio's site is the most damaging bug there is, because it silently costs you projects and tells prospects you do not check your own work.
How does a web design site earn trust, and what are the rules?
It earns trust through real work, real people and honest reviews, and it respects the rules on client permission and fake reviews. Never invent anything.
Start with permission to show client work. Most of your portfolio belongs to someone else, and the images, logos and text on those sites are theirs. Before you publish a case study, check your contract. If it does not clearly allow you to show the work and name the client, ask in writing, and agree what you may say about results. Some clients will want their name left out, and that is their right. Rules and contract norms differ by country, so this is general information, not legal advice. Check with your own association or a lawyer if you are unsure.
Next, reviews. The US Federal Trade Commission announced a final rule on 14 August 2024, in force from 21 October 2024, that bans fake or misleading consumer reviews and testimonials, such as reviews by people who do not exist or who had no real experience with the business (FTC announcement). The FTC also publishes a questions and answers page on the rule. In the UK, since April 2025 the law bans posting or commissioning fake reviews, and the CMA can fine a company up to 10% of its global turnover (UK government). The practical lesson is simple: show only words real clients gave you, with their agreement, and never write a testimonial yourself.
This is why the Pixelcraft sample labels its reviews as examples. The studio is fictional, so its testimonials are invented, and the sample says so. When you build your own site, replace any placeholder text with real client quotes, or leave the section out until you have them. An empty slot is better than a made-up one, and a prospect who spots a fake quote will doubt everything else on the page.
One more point on reviews and search. Google explains that it treats a business marking up reviews about itself on its own site as "self-serving", and it no longer shows review stars in search for such pages (Google Search Central Blog). You do not need to remove honest testimonials from your site. Just do not expect them to produce star ratings in search results.
How should your own site work for every visitor?
It should load fast, read well on a phone, and meet accessibility guidelines. A studio that preaches good practice and ignores it on its own site loses credibility at once.
Phones come first. Google uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking (Google's mobile-first indexing guide). Many of your prospects will also look at your site on a phone between meetings. Check that your portfolio images are sized sensibly, that text is readable without zooming and that buttons are easy to tap. A heavy gallery that crawls on mobile tells a buyer more than any claim about performance.
Accessibility deserves more attention in this trade than in most, because your visitors may well ask about it. The Web Content Accessibility Guidelines, in version 2.2, became a W3C Recommendation in October 2023 (WCAG 2.2). The version 2.2 additions include rules that matter on a design studio's own site. One says that when an item gets keyboard focus it must not be entirely hidden, which is a trap for sites with a sticky banner or cookie bar across the bottom. Another says you must be able to see where the keyboard focus is, and a further one says that anything operated by dragging should have a simple alternative, which affects fancy sliders and reorderable galleries (What's New in WCAG 2.2).
In the United States, the Department of Justice's guidance of 18 March 2022 says Title III of the ADA prohibits discrimination against people with disabilities by businesses open to the public. It names WCAG as helpful technical standards and lists common barriers: poor colour contrast, colour alone used to give information, images without alt text, videos without captions, inaccessible online forms and mouse-only navigation (ADA web guidance). That list reads like a checklist for your own site. Check your portfolio images for alt text, your enquiry form for clear labels, and your whole site for keyboard use.
Portfolio sites tend to fail in predictable ways. Autoplaying video with no captions, light grey text on a white background, and image carousels that cannot be used without a mouse are all common. Fix these on your own site first. Rules differ by place, and this is general information, so check your own regulator for what applies to you.
How do local customers find a web design studio?
They find you through searches for your service and your area, and through a consistent business listing. Many studios work remotely for clients anywhere, but a local presence still helps.
Decide first whether you serve a place or the whole world. If you want local clients, say where you are on the home and contact pages, in plain text, and name the areas you work in. If you work remotely, say that clearly, and list the kinds of business you serve, because buyers often search by their own trade, such as a site for a restaurant or a clinic. Being specific about who you help makes you easier to find and easier to choose.
Next, Google's guidelines for a Business Profile ask a business to represent itself as it is consistently represented and recognised in the real world, using its real name, address, phone number and hours (Google Business Profile guidelines). Keep these identical on your website, your profile and your social accounts. Small differences confuse both people and search engines.
You can also tell Google about your business with structured data. Google supports LocalBusiness structured data, which can tell it a business's hours, departments and other details (Google LocalBusiness documentation). Finally, write for people. Google's ranking systems are designed to prioritise helpful, reliable information created to benefit people, not content made mainly to rank in search (Google's helpful content guidance). Case studies and clear service pages that answer real questions do that job better than keyword padding.
How do you build a web design website with AI Web Maker?
Describe your studio in a few sentences, let the builder plan and write the site, then edit it until it sounds like you. You can preview everything before it goes live.
Start on the AI Web Maker homepage and give your studio name, an email, a phone number and a short description of what you do and who for. Be specific. "Websites for independent restaurants and clinics, with booking and a shop" gives the builder far more to work with than "web design". The site is built while you watch: it plans the pages, writes the words, chooses the photos and sets up the forms where you need them.
The Pixelcraft sample shows what that produces. It was built in 40 seconds as a 5-page site, from a short description, and its pages scored 89 out of 100 on the checks AI Website SEO Tools runs on any website. That is a starting point, not a finished studio. Your real work begins in the editor.
Then edit every page. Replace the sample-style project descriptions with your own real projects and, with the client's permission, their names. Swap placeholder photos for screenshots of your actual work. Rewrite the process section so it matches how you really run projects. Check the services, prices and hours, and change anything that is not true of your business. The editor lets you change the words, the photos, the sections, the services and the prices before going live.
Building and previewing cost nothing. Going live costs $119 a year of hosting, and the domain name is paid separately. Optional AI work, such as extra blog posts, is paid with credits of about $0.65 each. If you want to check how findable your pages are afterwards, AI Website SEO Tools checks the pages of any website for the problems that keep it out of search results and says how to fix each one.
Whatever you decide, look at another web design business website example before you write yours. The Pixelcraft Studio sample is a good one to open, and you can try the builder with your own studio's details once you have seen it. Seeing a finished site makes your own choices far quicker.
Frequently asked questions
How many projects should a web design portfolio show?
Show your best six or so, not everything you have ever made. Each one should come with the problem, what you did and what changed. A few well explained projects persuade more than a long grid of screenshots. Add more later, and retire anything that no longer reflects your standard.
Should I put prices on my web design website?
You do not have to publish fixed prices, but give buyers something to calibrate against. A range, a "from" figure or a description of what different budgets buy helps them judge fit before they write. Asking for a budget range in the enquiry form does the same job from the other side and saves time for you both.
Can I show client work without asking?
Do not assume so. The work belongs to the client, and your contract may or may not allow you to display it. Ask in writing, agree what you may say, and respect a client who wants to stay unnamed. Rules differ by country, so check your own association or a lawyer if unsure.
Do I need to worry about accessibility on my own site?
Yes. Your visitors are professionals, and some will check. WCAG 2.2 is the current version, and the US Department of Justice names WCAG as a helpful technical standard and lists barriers such as poor contrast, missing alt text and mouse-only navigation. Fixing these also helps every visitor.
Can I use testimonials I wrote myself?
No. The FTC's rule bans fake or misleading reviews and testimonials, and UK law bans posting or commissioning fake reviews. Use only words from real clients, with their agreement, and leave the section empty until you have them. The Pixelcraft sample marks its reviews as examples because the studio is fictional.
What should you do this week?
Pick one day for each step and finish them in order. By the weekend you can have a site that is live and honest.
On Monday, choose your six best projects and write three sentences for each: the problem, what you did and what changed. Email each client to confirm you may show the work and agree the wording. On Tuesday, write your services in plain language and the stages of a project from first call to launch, including what you need from the client at each stage.
On Wednesday, decide what your enquiry form asks. Keep it to name, email, project, budget range and target date, and write the line that says when you will reply. On Thursday, open the Pixelcraft sample and click through all five pages, home, services, portfolio, about and contact, noting what you would copy and what you would change.
On Friday, build your draft with the AI Web Maker builder, edit every page, and preview it on your phone. Tab through it with the keyboard, check contrast and alt text, and send yourself a test enquiry. Then go live, and look at it again in a month with fresh eyes.
Build your website in Minutes and get the AI Tools that work
Start Building Your Website →