How to design a small-business website, step by step
THE SHORT ANSWER
Start with the customer and the action your website should help them take. Write a short brief, organize the essential pages, prepare real content, then design a mobile layout around it. Check readability, keyboard access, loading, and form delivery before launch. You can follow the same process with a DIY builder or ask a website team to handle the design and build.
Published
Updated
Want us to build it? New website or redesign. The build is free if selected; domain and hosting are separate. No required subscription.
Apply for a Free Website1. Write a brief you can actually review.
Before choosing a font or template, finish this sentence: “We help [customer] with [service] in [area], and the next step is [action].” A specific answer gives you a useful test for every design choice. If a section does not help someone understand the offer, trust the business, or take that next step, reconsider it.
For a fictional deck contractor, the brief might be: “Help homeowners in our service area understand our deck repair and replacement work, see approved project photos, and request an assessment.” That points to service details and a short enquiry form. It does not require an online store, a customer portal, or an instant price calculator.
Your one-page website brief
- The customer, main service, and genuine service area.
- The primary action: request a quote, enquire, call, or use an existing booking service.
- The pages and features needed for that action.
- The person providing content and the person approving it.
- The budget for the build, domain, hosting, and future changes.
- Any existing domain, email, forms, or software that must keep working.
2. Put customer questions into a page plan.
| Page | Question to answer | Useful content |
|---|---|---|
| Home | Can this business help me? | Services, area, selected work, and the next step. |
| Services | Does it handle my type of job? | Repair and replacement scope, exclusions, and the assessment process. |
| Work | What does its work look like? | Approved project images with the job, material, and scope explained. |
| About | Who will I work with? | A real introduction, working approach, and verifiable credentials. |
| Contact | How do I start? | A monitored contact route, relevant questions, and response expectations. |
This is a planning example, not a required template. A different business may need a service-area page instead of a gallery. Write the core copy before polishing the layout. Give each page one clear purpose so that the same generic introduction does not repeat across the site.
3. Sketch the smallest screen first.
Draw a single column on paper: what you do, a useful image, the main action, service details, evidence, process, and contact. For the deck contractor, a real project photo with a caption answers more than a generic meeting-room image. Keep the important information as page text so it remains readable when images are unavailable.
Use a small set of text styles, generous spacing, and consistent buttons. Check contrast, visible keyboard focus, labeled form fields, and understandable error messages. Links should say where they lead. Test the layout at different screen sizes and with enlarged text; a design is unfinished if content becomes inaccessible when someone zooms.[accessible-design]
4. Choose images with a clear job.
Use images you own or have permission to publish. Show real completed work when making a portfolio claim. Custom illustrations can explain your process or establish a visual identity, but should not pretend to document a customer, employee, or completed project. Label fictional concepts where they could be mistaken for real work.
Export images near their displayed dimensions and use compressed formats appropriate to the platform. Reserve space for them to reduce layout movement. Describe meaningful images with useful alternative text; decorative images can have an empty alternative. Avoid loading a full photo gallery before the visitor reaches it.[accessible-design][web-vitals]
5. Test the customer journey before sharing the address.
A practical launch review
- Open every main page on a phone and confirm the service and next step are clear.
- Use the keyboard to reach navigation, buttons, and forms; check visible focus.
- Send an authorized test enquiry and confirm it reaches the monitored destination.
- Test missing fields, invalid input, and successful submission messages.
- Check page titles, descriptions, useful internal links, and the public sitemap.
- Confirm that the live site is intended to be indexed and preview copies remain private or noindex.
- Measure loading and layout stability, then review real visitor performance when enough data exists.
- Record who owns the domain, renews hosting, and handles future corrections.
Google’s search guidance favors useful, understandable pages with descriptive titles and crawlable links. Performance tools also distinguish simulated tests from real visitor measurements. Use both to find problems; a single score is not proof that every visitor has a good experience.[search-starter][web-vitals]
Want someone to turn the plan into a website?
The Free Website Team designs and builds up to five core pages for accepted small businesses at no design or build cost. You supply approved copy and images, cover your domain and hosting, and receive one revision round and launch assistance. Ongoing updates are optional and arranged separately; no service subscription or hosting purchase from us is required.[scope][process]
Bring the brief, your current website if you have one, and the parts you are unsure about. You do not need a finished mockup to apply. Acceptance and the agreed scope come before the build.[process]
Related questions, answered.
Can I design a website without knowing how to code?
Yes. A visual website builder can help you assemble pages, or a website team can handle the build. You still need accurate content, a clear customer journey, and a plan for costs and future edits. Check the specific platform’s capabilities before committing.
Should I choose a template or write my website content first?
Write the brief and core content first. You can then judge whether a layout supports your actual services and customer questions, instead of filling a template with sections your business does not need.
Can a free website have a custom design?
Yes. The Free Website Team’s accepted standard builds include design and development around the agreed business needs and supplied content. Free refers to that design and build fee; domain, hosting, and work outside the agreed scope remain separate.
Sources & citations
- The Free Website Team: what’s included
The Free Website Team · Checked
Primary source for the offer’s page limit, revision allowance, inclusions, and exclusions.
- The Free Website Team: how it works
The Free Website Team · Checked
Primary source for selection, content preparation, ownership, and launch steps.
- Designing for Web Accessibility
W3C Web Accessibility Initiative · Checked
Design guidance for contrast, navigation, form labels, feedback, responsive layouts, and text alternatives. A checklist alone does not establish accessibility conformance.
- Search Engine Optimization Starter Guide
Google Search Central · Checked
Primary guidance for descriptive titles, useful content, internal links, and images. Implementing these practices does not guarantee indexing or rankings.
- Web Vitals
web.dev · Checked
Primary explanation of loading, interaction, and visual-stability measurements, including the distinction between field and lab data.