The WebsiteBasics logos consisting of a black on white computer icon with a green checkmark inside and a green circle around it on a light blue background with the letters Website Basics below it.

How to Create an Outstanding Website: Content and Navigation Structure Design

This guide outlines essential aspects of effective website design, the importance of clear goals, user personas, mobile-first design, accessibility, and a concise content structure. I show you how to use templates and themes for efficiency and aligning design with user expectations.

This post was last updated on November 9, 2023

In this guide

An illustration of two women tipping on a computer and a website screen in dark blue and greenish colors.

What is Great Website Design?

When discussing design, most people immediately think of colors, appealing fonts, or the layout of a website. However, web design encompasses much more than that!

This is what great web design is supposed to achieve:

The primary objective of every website is to solve a problem for its users.

The primary goal for every business owner is to convert website visitors into paying customers.

How can your business website assist visitors and provide an exceptional user experience? To achieve this, we'll adopt a holistic approach to web design, walking trough all facets of an exceptional website.

Define Your Website's Goals and Purpose

When visitors browse your site, they typically have several questions in mind:

  • What does your business represent?
  • What issues can you effectively address?
  • Where do you operate?
  • Can I trust this business?

Website users often return to a site multiple times before making an online purchase. The initial visit is usually for information gathering ("What is this?"), while subsequent visits are transactional, involving actions like scheduling an appointment or making a purchase.

Defining the primary goals of your website gives it a clear purpose and makes it easier to deliver the right information. You need a "north star" that you can refer to whenever you or someone else works on the website, ensuring that you stay on the right path. This helps eliminate distracting elements and keeps the focus on your business objectives.

Work With User Personas and Use Cases to Better Understand Your Customers

A persona represents a typical client of your business, while a use case outlines their problem and the steps required to solve it source.

A persona in User Experience (UX) design is a fictional representation of a target user based on research and data. It defines key characteristics, behaviors, and needs of a specific user group. Personas are used to humanize and empathize with users. Create and reference them throughout building your website, ensuring that design decisions align with user preferences, needs, and pain points, and to understand their mindsets when navigating your site.

An easy tool to generate personas is

6 illustrations in 2 rows of three representating personas as used in UX design. The first row has male, the second row female personas. Each persona is made of bright colours in a circle, the background is white.
Personas should represent your customer's demographics.

Example Use Case: Contact

An extensive team page may be of no help if the user struggles to find contact information. In our use case, what a user wants is an easy way to get in touch. In this case, directing the user to a phone number makes more sense than displaying a business organization chart. However, a team page can still serve other use cases, such as building trust. What communication means does the user prefer? A younger person in an informal setting might prefer WhatsApp while email and landline phone numbers are more appropriate in a business context.

Design the Structure of Your Website

Users don't visit a website to admire its aesthetics; they seek quick solutions to their problems. They don't care about features that don't contribute to their goals. The more clutter and friction you introduce, the higher the chance they'll leave your site. The key principle is: Don't Make Users Think! source

Users have a concept of how a website is supposed to work, based on other websites that offer the same services. When designing your website, repeat what is working for others. Too much creativity can actually harm your conversion goals.

A screenshot of a website with a white background and pink buttons
Note how this website is using clear Call-To-Action buttons and commonly used elements like a Pricing link, video, a logo in the upper left corner etc.

A good test is to go trough every element on your website and to ask yourself: Does the website still offer the same value if I remove this element (button, image, link etc)? If the answer is yes, then you might remove the element as it unnecessarily adds clutter to the website structure.

Example of a Website With an Excellent Information Architecture is an example of a website with an excellent information architecture. As a user I don't have to think what this website does but understand everything at a glance. All elements on this page have a clear function, there is no bluff. Note the call to actions for the most important use cases on the bottom right.

A screenshot of with the Hyher logo on the upper right, a picture of a small airplane on background with a blue sky in the center and various navigation elements in black colour placed bottom and upper right.
A screenshot of the website.

URL Paths Design

Your website's structure should be reflected in the URL paths, following a meaningful hierarchy. A URL path is what comes after the domain bit of the URL: Well-structured URLs are easier for humans and search engines to understand.

Example of a good URL structure: /men/sneakers. Easy to understand what the product is, right?

Prioritize Mobile-First Design

Mobile design, also known as responsive design, ensures your website works seamlessly on smartphones, such as iPhones and Android devices. Nearly 60% of all website visits come from smartphones source. Mobile screens are smaller, requiring efficient use of space, and user needs may differ when browsing on mobile devices.

I recommend to start the design process with mobile design first approach. Mobile solutions are often adaptable to larger screens, while the reverse can be challenging. Mobile is now the norm for internet usage, so optimizing your website for smartphones is essential.

An illustration with a laptop on the left and a smartphone on the right, both displaying the same website mockup, green and dark blue colors on white background

Use Website Templates and Themes for Design Efficiency

Users are accustomed to specific website layouts, like the familiar burger-like menu on mobile devices, a Pricing page or Call-To-Actions. Breaking these patterns can confuse users. Remember that users visit your site to find solutions to their problems. Aligning your website with their expectations increases the likelihood of conversion.

Your brand design should be unique, your website design doesn't need to reinvent the wheel

Website builders like Squarespace and Content Management Systems like Wordpress offer a variety of predefined designs, so-called themes. These themes adhere to common layouts and most adapt to mobile screens.

A screenshot of with a selection of WordPress business themes
A selection of WordPress business themes.

Using themes can also save on web development costs. Compile a list of 2-3 websites you like before consulting with web designers. You can even refer to themes as a starting point for discussions with designers.

The Significance of Website Accessibility

Web accessibility ensures that websites, tools, and technologies are designed for use by people with disabilities source. Approximately one-quarter of the world's population has some form of visual impairment source. To create an accessible website:

  • Ensure font sizes are adequate, and colors provide high contrast
  • Comply with laws regarding disability discrimination, like the Americans With Disabilities Act (ADA) in the US
  • Simplify language and clarify technical content
  • Make navigation elements clear to users and search engines by providing common labels and prominent placing

Remember, the primary purpose of your website is to solve users' problems, so focus on readability and accessibility. Remove distracting elements and keep it simple!

Design for Content

Allocate sufficient space for text to effectively convey your business's message. Search engines like Google rely on text to determine your website's relevance in search rankings. Combining text and images is vital, as text is an important ranking factor. Your content should be clear, concise, and informative for both users and search engines. I think it is very hard to rank successfully in Google's search result without at least some paragraphs of text content on each page.

The same way your website overall needs to have a clear structure, the same applies to text as well:

  • Every page should have a main title
  • Every page should have a summary text on top to assure users what the page is about
  • Every page should have Call-To-Actions for one or two specific conversion goals. Don't spread Call-To-Actions all over the place: give a few options for what the user should do next
  • Write some more in-depth articles about the purpose of your business to demonstrate your authority in the field

Summary: The Key Aspects To Design a Functional Website

  • Define your website's goals to maintain a focused design
  • Create user personas and use cases to empathize with your audience
  • Create a clear website and information structure
  • Prioritize mobile-first design
  • Ensure accessibility for visually impaired users
  • Develop accessible content to improve search engine visibility and user experience
  • Have well-structured text content


Receive new guides directly into your inbox. No spam, no bullshit!

You may unsubscribe and delete your data at any time using the link in the newsletter or by contacting me. I only use your email to send newsletters. By clicking the button above you agree to submitting your email address to Intuit Inc. and accept their data privacy statement.

Continue with these guides: