1. Knowledge Base
  2. Anytime Website
  3. Prepare for your website build

Guidelines and Best Practices for Pro Package

Guidelines and Best Practices for Exceptional Web Design and Usability

Website Design Guidelines

1. Simplicity

While the appearance of your website is certainly important, most people aren't coming to your site to evaluate how slick the design is. They want to complete some action, or to find some specific piece of information.

Therefore, unnecessary design elements (i.e., those which serve no functional purpose) will only overwhelm and make it more difficult for visitors to accomplish what they're trying to accomplish.

From a usability perspective, simplicity is your best friend. If you have all the necessary page elements, it’s hard to get too simple. You can employ this principle in a variety of different forms, such as:

  • Colours: Basically, don't use a lot. We recommend using a maximum of five different colours in your design.
  • Typefaces: The typefaces you choose should be highly legible, so nothing too artsy and very minimal script fonts, if any. For text colour, again, keep it minimal and always make sure it contrasts with the background colour. A common recommendation is to use a maximum of three different typefaces in a maximum of three different sizes.
  • Graphics: Only use graphics if they help a user complete a task or perform a specific function (don't just add graphics willy-nilly).

Here's a great example of a simple but effective homepage design from Trevellas Manor Farm Campsite.

Screenshot 2023-08-16 at 09-27-55 Trevellas Manor Farm Campsite in St Agnes Cornwall

2. Visual Hierarchy

Closely tied to the principle of simplicity, visual hierarchy means arranging and organising website elements so that visitors naturally gravitate toward the most important elements first.

Remember, when it comes to optimising for usability, the goal is to lead visitors to complete a desired action (make a booking), 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.

In the example below from Golden Bay Holiday Village, you can see that the main heading “Golden Bay Holiday Village” sits atop the visual hierarchy with its size and page position. It draws your eye to their mission before anything else. This is followed by the "Book Now" and "View All Properties" CTA, which prompts action.

Screenshot 2023-08-16 at 09-21-51 Golden Bay Holiday Village - Westward Ho! North Devon

3. Navigability

Planning out intuitive navigation on your site is crucial to help visitors find what they're looking for. Ideally, a visitor should land on your site and not have to think extensively about where to click next. Moving from point A to point B should be as frictionless as possible.

Here are a few tips for optimising your site's navigation:

  • Keep the structure of your primary navigation simple and near the top of your page.
  • Include navigation in the footer of your site.
  • Consider using breadcrumbs on every page (except your homepage) so users remember their navigation trail.
  • Don't offer too many navigation options per page. Again, simplicity!
  • Include links within your page copy, and make it clear where those links go.
  • Don't make users dig too deep.

4. Consistency

In addition to keeping your navigation consistent, the overall look and feel of your site should be similar across all of your site's pages. Backgrounds, colour schemes, typefaces, and even the tone of your writing are all areas where consistency has a positive impact on usability.

That's not to say every page should follow the same layout. Instead, create different layouts for specific types of pages (e.g., landing pages, informational pages, etc.). By using those layouts consistently, you'll make it easier for visitors to understand what type of information they're likely to find on a given page.

5. Responsivity

According to Statista, 48% of page global views were from mobile devices like smartphones and tablets. And according to our research, 93% of people have left a website because it didn’t display properly on their device.

The takeaway here: To provide a truly great user experience, your site has to be compatible with the many different devices that your visitors are using. In the tech world, this is known as responsive design.

Ultimately, it's more important to provide a great experience across different devices than look identical across those devices.

mockup-rockleyviews-3a4f2d9c-684w

Alongside mobile-friendliness, it’s worth your while to test your website’s cross-cross browser compatibility. In all likelihood, you’ve only viewed your site on one web browser, be it Google Chrome, Safari, Firefox, or something else.

Now is the time to open your pages on each of these browsers and evaluate how your elements appear. Ideally, there won’t be much difference in presentation, but you can’t know for sure until you see for yourself.  


Hopefully, these guidelines are useful in informing the structure of your web pages and website as a whole. But, how does one put these guidelines into practice? Let's take a look at some actionable best practices you can follow during the design process.

Website Design Best Practices

1. Select a typography that’s easy to read and skim

Typography refers to how type - meaning letters and characters - are arranged and presented on the page. Since website typography affects not only how we read but how we feel about text on a web page, it’s important to pick carefully.

Ideally, you want a typeface that is:

  • easy to read
  • easy to skim
  • accessible to all users
  • legible across multiple devices and screen sizes

 2. Choose a colour scheme that suits your brand

Like typography, colour can affect not only how we understand and interact with content, but how we feel about it. Your colour scheme should therefore check off the same boxes as your website typography. It should:

  • reinforce your brand identity
  • make your site easy to read and navigate
  • evoke emotion
  • look good

3. Add images to engage and inform readers

Striking a balance between text and images is essential in website design. Incorporating visuals can make your content more informative, engaging, and memorable. You’ve probably heard the statistics that people remember only 20% of what they read, but 80% of what they see? While the exact percentages are debated, the basic idea isn’t. It’s easier for some people to learn and process information visually.

4. Simplify your navigation

Navigation is one of the most important design elements on a website. It impacts whether visitors arrive on your homepage and browse, or click the “Back” button. That’s why it’s important to keep it as simple as possible.

Many websites opt for a horizontal navigation bar. This navigation style lists the major pages side by side and is placed in the website header.

5. Make your CTAs stand out

CTAs are elements on a web page, advertisement, or another piece of content that encourages the audience to do something. The call to action could be to sign up, subscribe, start a free trial, or learn more, among many others.

You want your CTAs to pop in your website design. To make that happen, consider how you’re using colour as well as other elements like background colour, surrounding images, and surrounding text.

6. Optimize for mobile

We’ve already discussed how important it is for your website to be responsive. But since mobile devices accounted for 59% of organic search engine visits in 2021, we’re doubling down on how important it is to design your website to be mobile-friendly. That might mean altering or removing some elements that would clutter smaller screen sizes or negatively impact load time.


Pro-Tip: Don't have the time to follow the rules? You can always opt for our Bespoke Builds package, where we'll create a website for you following the guidelines and best practices.