Access Our Exclusive Tools, Templates & Downloads!   Discover Now
Website

8 Principles of Great Website Design

8
  Minute read

What is good website design?

Good website design is more than just making things look pretty. It’s all too easy to get sucked into a world of colour shades and logo placement but there are far bigger factors at play when it comes to great website design.

If you're truly trying to accomplish something with your online business (e.g., brand awareness, lead generation, etc.), you'll need to focus on more than just how your website looks. Good website design encompasses several factors that, when combined, contribute to customer experience. 

In a world where there are more than a billion websites, you need to ensure yours is designed to offer a great user experience that keeps people coming back. We could spend hours, if not days, talking about the importance and value of UX, but to give you low-down, we’ve summarised our knowledge into 8 core principles of great website design.

1. User-centric web design

Although you may be able to talk about your organisation and its offering for hours on end, believe it or not, your website isn't about you. It's about your visitors. To put it frankly, potential consumers don’t really care about you. They’re not particularly interested in where you’re located, the colour of your office walls or your team’s favourite sandwiches...

They want to know how you can help them. They want to know how you can solve their problems. And they want to know why they should choose you over the thousands of other companies out there. 

Everything about your website should be targeted at your audience, from text to imagery. It should play on emotion to stimulate purchases driven by desire - the type of act-now, think-later decisions because in that moment, you are exactly what your consumers crave. 

For a great example of this, check out Bose. They don’t start with a big, shiny image of their product, users are greeted with human imagery which sparks connections. Instantly, the Bose products become relatable, desirable and irresistible - like magic! 

User-centric imagery makes great website design
User-centric imagery is just one part of great website design

2. Simple, engaging content

Yes, this article is about great website design, but content is an integral part of that. It is all too often overlooked, but content is a vital part of your website strategy and should be the absolute core.

Whether it be text, images or video content, arrange your site so visitors naturally gravitate to the most important elements. 

It’s the content that converts!

Here are 5 top tips:

  1. Bear in mind that your customer isn’t the expert, so don’t overuse jargon.
  2. Consider being upfront about your pricing (this will also help deter those who don’t want to pay your prices!).
  3. Choose typography carefully - typefaces should be highly legible, so nothing too artsy and very minimal script fonts, if any.
  4. Ensure it's accessible - for text colour, make sure there is a good level of contrast between the font and background. Avoid bright, vibrant font colours in body text and reserve this for pull out words and headings.
  5. Avoid grammar mistakes like the plague! It highlights a lack of attention to detail. Grammarly will help you fix that 👍🏻

3. Easy navigation

Make your site’s navigation simple and obvious. Whether it’s a list of links across the header or a tidy and compact burger menu in the top corner, every website needs a guide for navigation positioned at the top of every page, but don’t over-clutter it! Research has shown that a contributing factor of high bounce rates (alongside poor load speed and responsiveness) is unclear navigation and an overwhelming number of choices. 

Planning out the navigation on your site is crucial in helping visitors find what they're looking for. In an ideal world, a visitor should land on your site and not really have to think about where to click next; moving from point A to point B should be as frictionless as possible.

Top tips for clear navigation:

  • Keep the structure of your main navigation (at the top of the page) simple
  • Include an expanded navigation list in the footer of your site
  • Include a search bar near the top of your site so visitors can search by keywords
  • Don't offer too many navigation options per page
  • Include internal links within your page copy
  • Don't make users dig too deep - wireframe your site so that pages are arranged like a pyramid. We’d advise going no more than 3 layers deep.

Check out Apple’s clear and concise main navigation below - they offer the absolute dream when it comes to Customer Experience!

Super-easy navigation is a vital aspect of good web design
Super-easy navigation is a vital aspect of good web design

4. Clear CTAs

Eliminate unnecessary design elements and make your site easy to understand. You don’t need to reinvent the wheel - use elements and design that people are familiar with. Sometimes we can overcomplicate a site with quirky designs and oddly placed elements. Different can be good but if it isn’t broken, don’t fix it. 

Psychological research shows that the easier something is to understand, the more likely an end user is to take action. It’s a little something called Processing Fluency.  

A big challenge in website design is balancing originality with user expectations. Most of us are seasoned internet users who have become accustomed to specific conventions, such as:

  • Placing the main navigation at the top of a page
  • Placing a logo at the top left of a page
  • Making the logo clickable, so it always brings a visitor back to the homepage
  • Having links and buttons that change colour/appearance when hovered over
  • Using a shopping cart icon on an eCommerce site

Whilst some website designers might opt to throw these out the window for the sake of authenticity, this is a mistake. There’s still plenty of room for creativity within the constraints of web conventionality.

A great example is Spotify’s homepage (see below). The design is bold, daring and exciting, but the foundations are as expected - main navigation across the top, logo in the top left corner and one clear CTA taking centre stage. 

Purposeful web design achieved through a clear CTA
Purposeful web design achieved through a clear CTA

5. Page hierarchy - the F pattern

In most languages, we naturally read from left to right, but we don’t always read every line of text. The F pattern layout follows the eye movement of website users as they scroll down a page.

Now-a-days, scrolling is a part of our daily lives. The invention of the infinite scroll on social media platforms, like Instagram, means that we’re all too capable of whizzing through masses of information until something snazzy catches our eye.

Unfortunately for web pages, this means that anything below the fold doesn’t get anywhere near as much attention as we’d like… Most people don’t read, they scan. A 2008 study found that, on average, only 28% of the text is read...

Visitors begin with full attention, reading across the top of the page - that’s why the information above the fold is super important. They’re mildly interested in what we have to say just below the fold, however, for the remainder of the page, they just skim read, scanning for key information without fully taking in the content. 

On average, a headline has less than a second of a site visitor’s attention so the first couple of words need to be real attention-grabbers.

As for the rest of your content, consider these general best practices:

  1. Make introductory paragraphs in boldface or a larger font size
  2. Keep paragraph line lengths short and in a single column
  3. Use an easy-to-read font with a good colour contrast (ideally black and white)
  4. Add links - the number of link clicks increases as you add more in your content
  5. Give clear, bullet pointed information

Remember, when it comes to optimising for CX, the goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable. By adjusting the position, colour, or size of certain elements, you can structure your site in such a way that viewers will be drawn to those elements first.

6. Trust signals - social proof

Although the power of the internet is a wonderful thing, nothing says trust more than word-of-mouth - a personal recommendation. Gather reviews from clients and use testimonials on your website. Good design incorporates these seamlessly without the need to throw them down your users throats - intersperse your website with glowing reviews that fit in context. 

You might also want to consider creating case studies to showcase on your website. These will allow you to go into more detail about how you helped your client and are a great opportunity for showcasing statistics and project deliverables. 

Perhaps the quickest fix for trust signals is using client logos - just make sure you have permission! See how Airtable splash their big name clients across their home page - who wouldn’t want to try it out if Netflix has!?

Social proof improves customer experience
Social proof improves customer experience

7. Video content

No matter who your target audience is, they’re lazy. You might sell gym subscriptions by the bucket load but when it comes to reading websites, people are downright lazy! They just don’t have time for large amounts of text (unless they’re purposely looking for an insightful answer like this article). 

The solution? Get them to watch a video instead.

Viewers retain 95% of a message when they watch it in a video, compared to just 10% when reading it in text. They’re also 85% more likely to take action. 

Adding visual content on your site might seem like a lot of work, but it doesn’t have to be as tedious as it seems. To create videos, you can repurpose your text-based content into presentation videos. Ironic that this blog isn’t a video really...

Video content is an incredibly important aspect of great website design as it increases customer experience through offering ease and convenience.

Here are a few ideas and tools to get started with video content at any level:

  1. Use a simple design tool like Canva to stitch together graphics and explainer slides
  2. Create a short screen recording to supplement a how-to video using a tool like Loom
  3. Leverage automated voiceovers and subtitle creation using Descript

And then of course, you'll need to host your video content somewhere like YouTube, Vimeo or Wistia.

If you're short on video inspiration, visit Vidgrid 🎥 👀

The best video inspiration tool

8. Enhance the brand - consistency in look and feel

You might be wondering why this is last on the list. An article about good website design with the design bit at the bottom - seems backwards, doesn’t it?

Well, not exactly. You see, the look and feel part of your site is the easy bit (if you're great at design).

Below are some best practices to adhere to, for example:

  • Colour palettes - 5 colours are recommended, 7 at an absolute max and 3 if possible
  • Page layouts - create different layouts for specific types of pages (e.g., landing pages, informational pages, etc.)

If you’ve got your brand on point and a strong website strategy in place, what many people consider to be the design part, aka making things pretty, is easy.

What many people don’t realise is that user-focused design that converts visitors into customers comes with plenty more considerations than simply looking good.

Check out Webspo.io for incredible website design inspiration:

Best in class website design


So, what exactly does great website design look like?

Good website design hangs on the preferences of the end-users. After all, if you're not designing for them, who are you designing for? Imagine yourself into the shoes of your visitors and keep them in mind every step of the design process.

Whilst the principles detailed in this article are a great starting point, the final piece of the jigsaw for improving the design of your site is to consult your users, conduct A/B testing, gather feedback and implement changes. Constantly updating your website is the only sure-fire way to optimise customer experience through great website design.

Emma Fieldhouse Founder of Beyond Agency
Do you want our help growing your business?

Ready to go? Yes, let's get started

Just a heads up, some of the links in this article may be affiliate links, meaning we may make a small commission on any sign-ups or purchases for the tools we recommend.

More from Beyond
The Evolution of AI in Search - How Google SGE is Set to Transform Search Experience
Will AI Take My Job?
Will AI Take My Job in 2023 and Beyond?
More from Beyond
The Evolution of AI in Search - How Google SGE is Set to Transform Search Experience
Will AI Take My Job?
Will AI Take My Job in 2023 and Beyond?

Success Stories

Demystifying R&D Tax with a Transformative Online Presence
Revolutionizing Retail with Psychology-Driven Marketing
Boosting Venture Capital Accessibility
Cutting-Edge Digital Solutions for Office Lettings
Reimagining Global Lead Generation
Revitalizing B2B Lead Generation
Unveiling The World's Best Video Inspiration
Skyrocketing Tutor Recruitment with Hyper-Localization
Nurturing Potential Together
Unleashing a New Era of Creative Tools
Redefining Ticket Delivery
Igniting a Digital Evolution for Exclusive Fireplaces
Designing a Dynamic Hub for Innovative Startups
Tapping into New Realms for Career Guidance
Tripling Ecommerce Growth with Strategic SEO
Transforming Lead Generation
Cooking Up a Digital Strategy that Drives Healthy Lifestyles
Elevating the Luxury Home Cinema Market
Propelling Logistics to New Heights
Revolutionising Cryptocurrency Trading
Rethink the World of Pitching
Powering Next-Generation IT Solutions
Accelerating the Future of Motorsports
Elevating Impact Through Digital Storytelling
Changing Children's Lives for the Better
Maximizing Business Solutions with Advanced SEO
Creating a Digital Gateway for Early-Stage Investment Success
Building Futures Together
Powering Pipelines with AI-Powered Automation

Marketing Self Assessment Quiz

Unsure about your marketing priorities? Take the 2-min quiz for tailored insights!