Website Design: How to Plan a Better Site

Good website design isn’t simply about making a website look good.

A successful site needs to help people find information, understand what you offer and take the next step without unnecessary friction. At the same time, it needs to support your business objectives, work across different devices, remain accessible to as many users as possible and give search engines a clear understanding of your content.

That’s a lot to ask from something that’s sometimes treated primarily as a visual exercise.

The reality is that many of the most important website design decisions happen before colours, fonts and imagery enter the conversation.

What does the website need to achieve? Who will use it? What are those people trying to accomplish? What content do they need? How should information be organised? Which functionality is genuinely useful? And how will you know whether the finished site actually works?

At ZEAL, we approach websites as a combination of strategy, user experience, content, design and development. Each discipline affects the others, so planning them in isolation usually creates problems later.

Whether you’re replacing an outdated website, planning a redesign or starting from scratch, this guide walks through the key decisions behind creating a better site.

What Is Website Design?

Website design is the process of planning how a website looks, works and communicates with its users.

Visual design is an important part of that process, but it’s only one part.

Effective website design also considers:

• Business objectives
• Audience needs
• Information architecture
• User journeys
• Content
• Navigation
• Accessibility
• Mobile and responsive behaviour
• Conversion paths
• Search engine optimisation
• Technical performance
• Testing and measurement

These elements work together.

A visually impressive website can still be unsuccessful if users can’t navigate it. Brilliant copy can be overlooked if the hierarchy is confusing. A perfectly structured site can frustrate users if it’s painfully slow on mobile.

The aim is therefore not simply to create an attractive collection of pages. It’s to design a useful digital experience that balances the needs of the organisation with those of the people using it.

Why Planning Matters in Website Design

It’s tempting to begin a website project with the homepage.

What should the hero look like? Should there be animation? What colour should the buttons be?

Those questions matter eventually, but they’re rarely the best place to start.

Planning first helps establish what the website actually needs to do. Without it, projects can become driven by individual preferences rather than user needs or business objectives.

This can lead to familiar problems:

• Pages exist because somebody internally requested them, not because users need them.
• Navigation reflects company departments instead of how customers think.
• Content gets squeezed into designs created before anybody considered what needed saying.
• Important conversion journeys become unnecessarily complicated.
• New functionality is added without a clear purpose.
• SEO requirements are discovered after the site has already been built.
• Accessibility is treated as a final check instead of a design consideration.

The earlier these questions are addressed, the easier they are to solve.

Planning doesn’t remove creativity from website design. It gives creativity a clearer problem to solve.

Step 1: Define What the Website Needs to Achieve

Before discussing pages, layouts or technology, establish what success means.

A website can have several jobs, but trying to prioritise everything equally often results in a site that doesn’t do anything particularly well.

Your objectives might include:

• Generating qualified enquiries
• Selling products online
• Increasing bookings
• Explaining a complex service
• Building credibility
• Supporting a rebrand
• Recruiting employees
• Providing customer support
• Generating organic search traffic
• Encouraging newsletter sign-ups
• Increasing repeat purchases
• Entering a new market

These objectives should shape the website from the beginning.

For example, a lead-generation website might prioritise service information, case studies, trust signals and clear enquiry routes. An ecommerce website needs to consider product discovery, filtering, product information, checkout and post-purchase experiences.

Neither is inherently better. They’re simply solving different problems.

Turn Broad Goals Into Measurable Outcomes

“Build a better website” isn’t a particularly useful objective.

What does better mean?

Where possible, connect broad ambitions to measurable outcomes.

Instead of:

We want a more modern website.

Try:

We want more qualified visitors to reach our service pages and submit an enquiry.

Instead of:

We need better UX.

Try:

We want customers to find the right product more easily and reduce abandonment before checkout.

Specific objectives give designers, developers, marketers and stakeholders something meaningful to evaluate.

Step 2: Understand Who Will Use the Website

The next question is simple:

Who are we designing for?

Not your managing director. Not the design team. Not whoever speaks loudest in the project meeting.

Your users.

Good website design requires an understanding of what those people need, what they already know and what might prevent them from completing their task.

Research Real Users Where Possible

You don’t always need an enormous UX research programme.

Useful insights can come from sources you already have, including:

• Website analytics
• Search data
• Customer interviews
• Sales conversations
• Customer service enquiries
• Reviews
• On-site search queries
• Heatmaps and session recordings
• User testing
• Surveys
• Existing CRM data

Each source tells you something slightly different.

Analytics might show that a page has a high exit rate. User research can help explain why.

Search data might reveal how people describe your services. Sales teams may know the objections people raise immediately before buying.

Bringing those insights together creates a much stronger foundation than assumptions alone.

Identify Your Users’ Main Tasks

Think about why somebody is visiting your site.

They might want to:

• Compare services
• Check a price
• Understand how something works
• Find opening hours
• Research your experience
• Read reviews
• Compare products
• Book an appointment
• Find contact information
• Download a resource
• Apply for a job
• Get support

Those tasks should influence everything from navigation to page hierarchy.

If an important task requires five clicks, several confusing menus and a search through your footer, there’s probably an opportunity to improve the experience.

Step 3: Plan Your Website Content Early

Content shouldn’t be the material you pour into finished page designs.

It should help shape those designs.

Before wireframing individual pages, determine what information users need and how that content relates to the goals you’ve already defined.

Start With a Content Audit

If you’re redesigning an existing website, don’t assume every current page needs to migrate.

Review what you already have and decide whether each piece of content should be:

• Kept
• Improved
• Consolidated
• Redirected
• Removed
• Rewritten from scratch

Look at performance data alongside editorial quality.

A page receiving little traffic isn’t automatically useless. It may serve an important audience or conversion purpose. Equally, a page generating traffic isn’t necessarily doing its job if visitors consistently leave without taking the intended action.

Design Around Real Content

Placeholder text has its uses during early design, but relying on it for too long creates risk.

Real content has awkward headline lengths. Service explanations require different amounts of space. Product names vary. Images aren’t always perfect dimensions.

Designing with representative content helps expose these realities before development.

It also allows copy and design to work together.

A page’s heading hierarchy, imagery, supporting evidence, calls to action and layout should reinforce the same message rather than being developed independently.

Step 4: Create a Clear Site Structure

Once you understand your audience and content, you can start organising the website.

This is known as information architecture: deciding how information should be grouped, labelled and connected.

A clear structure helps users understand where they are and where to go next. It also helps search engines discover and interpret your pages.

Build a Sitemap

A sitemap provides a high-level view of the pages your website needs and how they relate.

For example:

• Home
• About
• Services
  • Service A
  • Service B
  • Service C
• Work / Case Studies
• Insights
• Contact

The right structure will obviously depend on the organisation.

What’s important is that the hierarchy reflects how users look for information rather than simply reproducing your internal company structure.

Keep Navigation Understandable

Website navigation isn’t the place to prove how creative your copywriting can be.

People should be able to predict what’s behind a navigation label before clicking it.

“Services” may not be exciting, but it’s immediately understandable.

An imaginative alternative might fit your brand personality, but if users have to stop and decipher what it means, you’re adding friction to a fundamental part of the experience.

Clarity usually wins.

Step 5: Map Important User Journeys

A sitemap tells you what pages exist.

A user journey considers how somebody moves between them to achieve a goal.

Take a potential customer looking for a service.

Their journey might look something like:

Google search → service page → case study → about/team page → contact page → enquiry

Another visitor might enter through a blog article:

Article → related service → case study → enquiry

Good website design considers these journeys rather than treating every page as an isolated destination.

Ask What Users Need at Each Stage

At every point, consider:

• What does the user know already?
• What are they trying to understand?
• What question do we need to answer?
• What might make them hesitate?
• What evidence would increase confidence?
• What’s the logical next action?

This produces more useful calls to action.

Not everybody arriving on your site is ready to “Buy now” or “Get a quote”.

Sometimes the most useful next step is viewing a case study, comparing options, reading an FAQ or learning more about your process.

Design should support that progression.

Step 6: Wireframe Before You Polish

Wireframes are simplified page layouts used to establish structure before detailed visual design begins.

They allow teams to focus on questions such as:

• What’s the most important information on this page?
• What should users see first?
• How should content be grouped?
• Where should calls to action appear?
• What happens next?
• Does the hierarchy make sense?

Because wireframes strip away much of the visual styling, conversations can stay focused on function.

That’s valuable.

It’s much cheaper and easier to rethink a user journey at wireframe stage than after a polished interface has been designed and developed.

Don’t Treat the Homepage as the Whole Website

Homepage design often attracts a disproportionate amount of attention.

It’s understandable: the homepage feels important.

But many users won’t enter your website through it.

Organic search, social media, advertising, email and external links can take people directly to service pages, product pages or articles.

Those pages need to work independently.

A service page shouldn’t rely on somebody having read the homepage first. A product page should provide enough context to help somebody make a decision wherever they entered the site.

Think in systems, not just homepages.

Step 7: Build a Strong Visual Hierarchy

Once the structure is working, visual design can help users understand it.

Visual hierarchy determines what people notice first, second and third.

Designers create hierarchy through elements including:

• Size
• Colour
• Contrast
• Typography
• Spacing
• Position
• Imagery
• Movement

When everything on a page demands attention, nothing really does.

Important content should look important.

A strong heading should clearly establish the topic. Supporting text should feel secondary. Calls to action should be visible without overwhelming the content around them.

Whitespace is useful here too.

Empty space isn’t wasted space. It can make layouts easier to scan, separate ideas and direct attention towards the elements that matter.

Step 8: Make Website Design Responsive

People will visit your website using different screen sizes, devices and orientations.

Responsive website design allows layouts and content to adapt accordingly.

But responsive design isn’t simply about shrinking a desktop layout until it fits a phone.

Mobile users may have different constraints. They’re using a smaller screen, perhaps one-handed, potentially on a slower connection and without the precision of a mouse cursor.

That means designers need to consider:

• Navigation
• Font sizes
• Touch targets
• Form fields
• Image behaviour
• Tables
• Interactive elements
• Content order
• Spacing
• Sticky elements
• Page speed

Something that feels effortless with a large monitor and mouse can become incredibly frustrating on a small touchscreen.

Think Mobile Early

Mobile shouldn’t be a final adaptation after desktop designs have been approved.

Considering smaller screens early forces useful prioritisation.

When space is limited, what genuinely needs to be there?

That question often improves the desktop experience too.

Step 9: Design for Accessibility

Accessible website design aims to make digital experiences usable by people with different abilities and access needs.

That includes people who may have visual, auditory, motor, cognitive or neurological impairments, as well as people experiencing temporary or situational limitations.

Accessibility should be considered throughout strategy, design, content and development rather than treated as a checklist immediately before launch.

Important considerations include:

• Sufficient colour contrast
• Readable typography
• Logical heading structures
• Keyboard navigation
• Visible focus states
• Descriptive link text
• Alternative text for meaningful images
• Labels and instructions for forms
• Captions or transcripts for relevant multimedia
• Interfaces that don’t rely exclusively on colour
• Appropriate semantic HTML

The Web Content Accessibility Guidelines (WCAG) provide an internationally recognised framework for making web content more accessible.

Accessibility Usually Improves Usability

Many accessibility improvements make websites easier for everybody.

Clear labels help someone using a screen reader, but they also help somebody quickly scanning a form.

Captions support people with hearing impairments, but they’re equally useful to someone watching a video on a train without headphones.

Strong contrast helps users with impaired vision, but it can also make a mobile screen easier to read in bright sunlight.

Accessible design isn’t about designing for a tiny edge case.

It’s about reducing unnecessary barriers.

Step 10: Think About SEO During Website Design

Search engine optimisation shouldn’t begin once the new website has launched.

Decisions made during website design can have a significant impact on how easily search engines discover, understand and rank its content.

SEO considerations during planning can include:

• Site architecture
• URL structure
• Navigation
• Internal linking
• Heading hierarchy
• Page content
• Image optimisation
• Indexability
• Structured data
• Page speed
• Mobile usability
• Redirect planning

This is particularly important during redesigns.

Changing URLs or removing pages without understanding their existing organic performance can result in lost rankings and traffic.

Map Existing URLs Before Launch

If you’re replacing an established website, identify pages that already receive:

• Organic traffic
• Rankings
• Backlinks
• Conversions

Decide what will happen to each one.

Where a URL must change, an appropriate redirect can help users and search engines find the replacement.

Redirect planning may not be the most glamorous part of website design, but discovering after launch that your highest-performing pages now return 404 errors is considerably less glamorous.

Design for People First

SEO matters, but a page shouldn’t become awkward because you’re trying to force a keyword into every heading.

Search optimisation works best when it’s aligned with user needs.

Understand what people are searching for, answer their questions clearly and structure information logically.

Useful content and good UX should support each other.

Step 11: Prioritise Website Performance

Visual ambition needs to be balanced with performance.

Huge imagery, unnecessary scripts, autoplaying video and excessive animation can create an impressive prototype while producing a painfully slow real-world website.

Performance matters because slow websites create friction.

Users shouldn’t have to wait for your design to become usable.

Design and development teams should consider:

• Image dimensions and compression
• Modern image formats
• Video implementation
• Font loading
• JavaScript
• Third-party scripts
• Animations
• Lazy loading
• Caching
• Hosting
• Content delivery

Performance shouldn’t mean creating boring websites.

It means making intentional decisions about where complexity genuinely adds value.

Step 12: Make Calls to Action Useful

Calls to action help users understand what they can do next.

Common examples include:

• Get in touch
• Request a quote
• Book a consultation
• Add to basket
• Download the guide
• View our work
• Compare options
• Start your application

Good CTAs are clear and relevant to the context.

A visitor reading an introductory educational article probably has different intent from somebody reviewing a detailed pricing page.

Your website should recognise that.

Reduce Friction Around Important Actions

If an action is commercially important, make it straightforward.

Forms are a good example.

Ask whether every field is genuinely necessary. If somebody wants to make a simple enquiry, requiring their full address, annual turnover, favourite biscuit and life story probably isn’t helping.

The same principle applies across conversion journeys.

Every additional step should earn its place.

Step 13: Build Trust Into the Experience

Before somebody submits an enquiry, makes a purchase or hands over personal information, they need enough confidence in your business.

Trust shouldn’t be confined to one testimonial slider on the homepage.

Depending on the organisation, useful trust signals might include:

• Customer reviews
• Case studies
• Client logos
• Accreditations
• Awards
• Guarantees
• Team profiles
• Contact information
• Clear pricing
• Delivery and returns information
• Security information
• Privacy information
• Original research
• Detailed product information

The right evidence depends on what somebody might reasonably worry about.

A £15 purchase and a £50,000 professional service require different levels of reassurance.

Put evidence close to the decision it supports.

Step 14: Test the Website With Real Users

The team creating a website knows too much about it.

You know where everything is. You understand the terminology. You know what each icon means. You’ve probably seen the navigation hundreds of times.

A new user doesn’t have any of that context.

That’s why testing matters.

What Should You Test?

Depending on the project, usability testing can explore whether people can:

• Find a particular service
• Locate important information
• Understand what the business offers
• Complete a form
• Find and purchase a product
• Navigate on mobile
• Understand labels and instructions
• Recover from an error
• Identify what they should do next

You don’t need to ask users whether they “like the design”.

Give them a realistic task and observe what happens.

Where do they hesitate? What do they misunderstand? Where do they go first? What do they completely miss?

Behaviour often tells you more than opinion.

Step 15: Test Properly Before Launch

User testing and pre-launch quality assurance aren’t quite the same thing.

Before a website goes live, it should also be checked across the technical experience.

That can include:

• Major browsers
• Mobile and desktop devices
• Different screen sizes
• Forms
• Navigation
• Internal links
• External links
• Redirects
• Tracking
• Cookie consent
• Page titles and metadata
• Indexing directives
• XML sitemaps
• Structured data
• Images
• Error pages
• Accessibility
• Performance

For ecommerce sites, test the complete purchasing process rather than assuming checkout works because individual components do.

Place an order.

Check confirmation emails.

Test payment methods.

Review what happens when something goes wrong.

A website isn’t finished because the homepage looks correct.

Step 16: Measure What Happens After Launch

Launch day isn’t the end of a website project.

It’s the point where you finally get to see how real people use what you’ve created.

Monitor performance against the objectives established at the beginning.

Depending on your goals, that could include:

• Conversion rate
• Enquiries
• Sales
• Revenue
• Organic traffic
• Search visibility
• Engagement
• Form completion
• Product discovery
• User journeys
• Page performance
• Error rates

Look at qualitative information too.

Are customers asking the same questions despite the new content? Are sales teams finding the website useful? Are users struggling with a particular part of checkout?

A website is a living digital asset.

Good teams continue learning from it.

Common Website Design Mistakes

Website projects involve hundreds of decisions, so problems are inevitable. Some mistakes, however, appear particularly often.

Designing for Internal Stakeholders

Internal opinions matter, but stakeholders aren’t necessarily representative of users.

When decisions become dominated by personal preference, return to the evidence.

What are users trying to achieve? What does the research tell you? Which option best supports the agreed objectives?

That moves conversations away from “I don’t like blue” towards something useful.

Prioritising Style Over Usability

Visual distinction matters.

But if achieving it requires hiding navigation, making text difficult to read or turning every interaction into an animation, the experience can suffer.

Good design doesn’t require users to admire the interface before they can use it.

Writing Content After Design

If content is important enough to appear on the website, it deserves consideration before the final layouts are fixed.

Designing first can force copywriters to write to arbitrary character limits rather than communicating what users actually need to know.

Content and design should develop together.

Ignoring Accessibility Until the End

Retrofitting accessibility is generally more difficult than considering it throughout the process.

Make it part of briefs, wireframes, visual design, content, development and QA from the beginning.

Following Every Website Design Trend

Trends can introduce interesting new techniques, but they’re not a strategy.

A design decision should earn its place by supporting the brand, user or objective.

If an interaction exists solely because everyone else is doing it, think carefully about whether you need it.

Forgetting What Already Performs

Redesigns sometimes focus so heavily on the new site that teams forget to understand the old one.

Before removing pages, changing navigation or rewriting URLs, identify what currently generates traffic, links, enquiries and sales.

Don’t accidentally design away your successes.

What Makes a Good Website Design?

There isn’t one visual formula for a good website.

A law firm, fashion retailer, university and independent restaurant shouldn’t necessarily look or behave alike.

But effective websites tend to share some fundamental qualities.

They’re useful. People can accomplish what they came to do.

They’re clear. Content, navigation and interactions don’t require unnecessary interpretation.

They’re accessible. Barriers have been actively considered and reduced.

They’re responsive. The experience works across different devices and screen sizes.

They’re fast. Design doesn’t make users wait unnecessarily.

They’re credible. Claims are supported with appropriate evidence.

They’re discoverable. Search and technical considerations have been built into the structure.

And they’re purposeful. Design decisions support a user or business need rather than existing simply for decoration.

That’s a much more useful definition of good website design than whether somebody likes the homepage.

Better Website Design Starts With Better Questions

The best website projects don’t begin by asking:

What should our new website look like?

They begin with better questions.

• What does the business need the website to achieve?
• Who are we designing for?
• What do those people need from us?
• What information will help them make a decision?
• What could create friction?
• What evidence will build trust?
• How can we make the experience accessible?
• And how will we know whether we’ve succeeded?

Answer those questions first and the visual design has a much stronger foundation.

Because ultimately, great website design isn’t about adding more.

It’s about making intentional decisions: creating the right content, putting it in the right place and presenting it in a way that helps people accomplish what they came to do.

At ZEAL, our approach brings strategy, UX, content, design, development and digital performance together rather than treating them as separate stages that never quite meet. The result should be more than a good-looking website. It should be a useful, accessible and commercially effective digital experience built around the people who actually use it.

If you’re planning a new website or questioning whether your existing site is still doing its job, get in touch with ZEAL to talk through what a better digital experience could look like.