How do you design a web page from scratch?

Designing a web page from scratch means working through six stages in order: planning the page's purpose and content, sketching the layout, choosing how you'll build it, applying design fundamentals like typography and colour, making it responsive and accessible, then testing it before publishing. Skip the planning and structure stages and jump straight to "making it look nice", and you end up with a page that looks fine but doesn't do its job.

What does designing a web page from scratch actually involve?

A web page goes through roughly the same journey whether it's a one-page site for a sole trader or a single page inside something bigger: you decide what the page is for, you map out where things go, you build it, you make it look and work well, and you test it before anyone else sees it.

That's the order that matters. Most people start with the visual bit — picking colours, fonts, a template — before they've worked out what the page actually needs to say or do. That's how you end up redesigning the same page three times.

• Planning: who it's for and what it needs to achieve
• Structure: a rough layout before any visual decisions
• Building: hand-coded, a website builder, or a professional
• Design: typography, colour, spacing, images, hierarchy
• Responsiveness and accessibility: mobile and everyone else
• Testing: links, speed, browsers, a second pair of eyes

Step 1: Plan your page's purpose and content

Before you open any design tool, write down what this page is for. Is it meant to sell a product, explain a service, collect an enquiry, or simply tell people who you are? A page trying to do everything at once usually does nothing well.

Then think about who's reading it and what they need to know, in what order. Draft the actual words — headings, the main message, any supporting detail — before you think about how it looks. Content should shape the design, not the other way round. A page built around a stock layout and then stuffed with whatever text fits rarely reads well.

• What's the one action you want a visitor to take?
• What questions will they have before they'll take it?
• What's the single most important sentence on the page?

Step 2: Sketch the layout and structure

This is wireframing — a rough plan of where things sit, with no colours, fonts or images involved. It can be done on paper, in a notebook, or with simple boxes in a design tool. The point is to decide structure before style.

Work out your visual hierarchy: what should a visitor see first, second, third. Most pages follow a predictable order — a heading that states the main point, supporting content underneath, then a call to action. Decide where navigation sits, how sections are divided, and how much space each part gets relative to its importance.

• Put the most important message above the fold, where it's seen without scrolling
• Group related content into clear sections rather than one long block
• Keep navigation in a predictable, consistent place
• Leave the call to action — a button, a form, a phone number — somewhere obvious

Step 3: Choose your design approach — code vs builder vs professional help

Once you know what the page needs to contain, you need to decide how you're going to build it. There are three realistic routes, and each suits a different situation.

Hand-coding with HTML and CSS gives you complete control over how the page looks and behaves, and nothing is added that you don't need. It takes longest to learn and every change has to be made by someone who can read code.

Website builders let you drag sections into place without writing code, and they're quick to get started with. The trade-off is that you're working within someone else's template, which limits what's genuinely possible and often adds weight the page doesn't need.

Hiring a professional designer gets you a page designed around your content and your goal rather than a template, without you needing to learn design or code yourself. It costs more than doing it yourself, but it's the route that avoids the common DIY traps covered below.

If you'd rather not build the page yourself at all, our brochure websites are designed from scratch — no templates — and start from £69 a month with nothing to pay up front.

Step 4: Apply core design principles

Once the structure is settled, the visual decisions are what make a page feel trustworthy and easy to use rather than amateurish.

• Typography: use no more than two typefaces, keep body text large enough to read comfortably, and keep line lengths short enough that the eye doesn't lose its place
• Colour: pick one or two main colours plus a neutral, and use colour consistently to show what's clickable
• Spacing: give content room to breathe — cramped pages feel cheap, generous spacing feels considered
• Imagery: use images that support the message rather than filling empty space, and keep file sizes small
• Visual hierarchy: use size, weight and position to guide the eye to what matters most first

None of this needs to be complicated. Consistency matters more than cleverness — a page that uses the same spacing, colours and type sizes throughout reads as more professional than one with lots of small variations.

Step 5: Make it responsive and accessible

Your page has to work on a phone screen as well as a desktop monitor, because a large proportion of visitors will arrive on mobile. Responsive design means the layout rearranges itself for smaller screens rather than forcing visitors to zoom and scroll sideways.

Accessibility means the page works for people using screen readers, keyboard navigation, or who simply need larger text or stronger colour contrast. Practically, that means proper heading structure, descriptive text on links and images, sufficient colour contrast, and buttons and forms that can be used without a mouse. Our responsive web design work is built around this from the start, rather than fixed afterwards.

Step 6: Test and publish your page

Before the page goes live, check it properly. Test every link, check how it looks in more than one browser, and check how quickly it loads — a slow page loses visitors before they've seen anything. Get someone who hasn't seen the page before to look at it and tell you what they think it's for, without being told.

• Every link and button goes where it should
• The page loads quickly, not just on your own connection
• It displays properly on Chrome, Safari and at least one other browser
• Someone unfamiliar with it understands the page's purpose within seconds

Only once it passes those checks should it go live.

When to bring in a professional web designer

DIY makes sense for a quick, low-stakes page you can afford to get wrong. It stops making sense once the page is doing real work for your business — bringing in enquiries, representing you to new customers, or competing with other businesses who've had theirs done properly.

At that point, the time spent learning design and code, plus the gap between a DIY result and a professionally designed one, usually costs more than simply having it built properly. We design every website from scratch — no templates, no outsourcing — and you deal directly with the person doing the work. Our web design services start from £69 a month, fixed and agreed before anything begins, and if you want help working out what you'd need, the website cost calculator gives you a figure without needing a call first.

Questions people also ask

How do I design my own webpage?

Start by writing down the page's purpose and the content it needs, then sketch a rough layout before touching any visual design. From there, build it using code, a website builder, or a professional, apply core design principles like typography and spacing, make sure it works on mobile, and test it thoroughly before publishing.

What is the 3 second rule in web design?

It's the idea that visitors decide whether to stay on a page within about three seconds, based on how it looks and how quickly it loads. If the purpose and main message aren't obvious almost immediately, or the page is slow, most visitors leave before reading anything.

What are the 7 C's of a website?

They're a rough framework for judging a website: content, context, community, customisation, communication, connection and commerce. In practice they're a reminder that a good page needs the right content, presented in the right context, and a clear path to acting or getting in touch.

Can ChatGPT actually create a website?

ChatGPT can generate HTML, CSS and some JavaScript, and can help you draft content or get a basic page started. It's less useful for genuine design judgement, accessibility, responsive behaviour across devices, or anything that needs to integrate with your existing systems and brand.