Blog

15/05/2024 • Website Design

How to Design a Website

In this article we take a deep dive into what it takes to design a website.

In this article we take a deep dive into what it takes to design a website. There’s more to website design than meets the eye. Platforms like WIX, Squarespace and even WordPress.com have made it much easier for anyone to build a website, but not all websites are created equal.

Let’s take a look at some of the steps involved in creating well designed, and highly optimised websites.

Your Website’s Purpose

It’s a good idea to begin any design project by creating some kind of purpose statement. This can help provide some constraints later on in the project. It can also be used to measure the success of the website following its launch.

A website’s purpose statement doesn’t have to be long or complicated. It could be something as simple as:

Our website will promote our business online and help us reach more customers.

This is a good place to start. But it can be helpful to get a bit more specific. When it comes to reaching potential customers online, creating customer personas can be helpful. For example, when developing a website for Cee King Charter Fishing in Whitby, we considered various kinds of customers:

  • Inexperienced anglers looking for a fun activity for a few hours whilst in Whitby

  • Experienced anglers wanting to fish wrecks and reefs off the Yorkshire coast

  • Groups of anglers looking to share in a fishing experience together

These distinct types of customers helped us determine the purpose of the website, as follows:

Our website will attract anglers of all capabilities to enjoy a sea fishing experience on the Yorkshire coast.

This statement is specific, it mentions particular customers (those interested in sea fishing) and a specific location (the Yorkshire coast). Writing a purpose statement like this is a fantastic place to start when designing your website.

Develop Your Website’s Site Map

Once you’ve created your purpose statement you can spend some time considering what information will be required. Turning this into a simple site map (which can just be a bullet point list), begins to add some structure to your design.

Remember that design is about far more than visual appearance.

Your site map doesn’t need to be complete. For example, you may decide that you want to have a blog or news page on your website. You don’t have to list all the posts you’ll write in advance, but you will want to consider where these articles sit within the overall structure of the website.

It’s a good idea to flesh out your site map with a few details about what each page will include. These can even serve as headings once you begin writing your content.

Here’s a simple example for a basic website:

  • Home – introduction to the business, overview of key services, latest news article and contact details

  • About us – more information about our team, our premises and our history

  • Services – overview of each of our offerings

    • Service 1

    • Service 2

    • Service 3

  • News – helpful articles about [your primary offering]

    • Article 1

    • Article 2

  • Contact – contact details, email contact form, links to social media

Spend some time considering which pages should be ‘top level’ and which can be sub pages, which are less visible. Whilst not always necessary, it’s helpful if your navigation structure makes it very clear what your organisation does. For example, Hello Technology offers Design, Technology and Support services. These are 3 of the top level pages within our website.

If you’re an accountant, you may want to include things like Bookkeeping, Payroll and Tax Returns as top level pages. Equally, you could have Accountancy Services as your top level page, with distinct services as sub-pages.

Write Your Website’s Content

Now that you have your website’s purpose and sitemap determined you can get on writing your website content.

It’s important to do this before considering the visual design of the site. This is because moving to the visual design too quickly and inadvertently constrain your copywriting. In turn this can harm your search ranking (more on that below).

You can write your content in any wordprocessor, like Microsoft Word or Pages on a Mac. Equally, tools like Google Docs can be really helpful as they allow for collaboration between team members.

Whilst writing your content you’ll need to consider your intended audience. What kind of language are they familiar with? If you provide specialist services to a particular sector you may be able to get away with use specialist language. Otherwise, it’s always best to try and keep your language simple, so that anyone can understand it.

Tools like hemingwayapp.com can be really helpful. Hemingway Editor provides feedback on the readability of your copy. This can help ensure that you keep it simple and accessible to anyone who visits your site.

Logos, Typefaces & Colours

If you’re designing a site for an existing organisation it’s likely that you’ll already have logos, typefaces and colours to use. It’s important that your website is recognisable. The visual design of your site should match that of assets, such as signage or print advertising.

This being said, designing a new website is a good opportunity to thoroughly consider your organisation’s branding and design.

Whether you’re using existing assets or designing your site from scratch, it can be really helpful to develop a set of brand guidelines. Brand guidelines dictate how you are to use logos, typefaces and colours within your design. This helps create uniformity.

There are lots of tools available to help with things like choosing colour combinations. A good place to start is https://color.adobe.com. Choosing colours for your website is less about personal preference and far more about building a strong visual identity. Getting some professional input at this point can be extremely helpful, as poor colour choices can be awkward to rectify later on.

Choosing typefaces for your website can also require specialist knowledge. This is because not all fonts are available to use online, and many require licensing. A designer will know where to find fonts which can be used freely – both online and in print. A good place to start to find out more about typefaces is Google Fonts.

Visual Hierarchy

Visual hierarchy is part of the visual design of your website. It refers specifically to the way different elements within the design relate to one another.

When browsing a website it should be clear to the visitor which information is the most important. This can be achieved in a number of ways, but primarily it is to do with the size and colour of objects and the space between them.

Headings are a great way to create visual hierarchy which helps a user navigate a website efficiently. Ensuring that your headings are well written and stand out visually is the first step in creating an effective visual hierarchy.

You may also have primary and secondary content within a page. That is, content which it is important that every visitor reads with more content which is ‘optional’. The primary content could be highlighted through font size, font weight, colour or surrounding. The secondary content could be smaller, or coloured differently to demonstrate that it is of less importance.

Websites are also full of CTA (calls to action). These might be links, buttons, or instructions aimed at the visitor. Make sure your CTA elements are appropriately designed. They need to stand out so as to not get lost amongst less important content.

A rudimentary way of checking for visual hierarchy is the ‘squint test’. It’s a real thing, honest! Once you’ve put your design together, take your glasses off or squint your eye to reduce what you can see. Everything should go a bit blury. Does your visual hierarchy still make sense – can you see the headings and CTA elements or are they lost? This can be a helpful way to get a useful first-hand feedback on your design.

Flexible Layouts

Once you’re happy your design elements allow for helpful hierarchy, it’s time to put them together. The most useful way to do this is to determine how the elements can work together to create flexible page layouts.

A website is a living document. It should be changed and updated from time to time. Because of this it’s important that your layouts can accommodate varying amounts of content, different sizes of image, different font sizes and so on.

Most websites are built in this way. Some website platforms provide a huge array of layout options, but this is often overwhelming. Many websites contain only a handful of layout options. This may sound limiting, but if well designed these flexible options can be used creatively to produce a wide range of page layouts.

Using the same layout options across the website is also helpful to your visitors. Websites which use different layout options on each page can be difficult to navigate, and the visual hierarchy can be lost.

Navigation & User Experience

Key to a website’s success is navigation. Are you making it easy for your visitors to find the information which is important to them? It can be really helpful to get feedback from others about the names you give your pages.

Although most websites will have some kind of navigation within the header, at the top of the page, websites will also contain links between pages within the content. These links can help guide a user around the website without requiring them to scroll back to the top to move to the next page.

Consider your user journey. What is your primary CTA? If you want to generate enquiries then perhaps you’ll try and guide your visitors through your key ‘services’ page or pages, towards a contact form. One area of website design which is often overlooked is the footer. But as your visitors get to the bottom of a page you will want to guide them somewhere else, or risk losing them as they hit a ‘dead end’.

Try adding CTA elements at the bottom of each page, prompting your visitors to move elsewhere within your site.

The ‘3 Click Rule’

Although the 2 or 3 click rule has been shown to be false, the premise is correct. We should make it as easy as possible for website visitors to find the information which is important to them.

An easy way to get feedback on this is to ask others to perform tasks on your site, and count the number of clicks it takes them to do it. For example:

  • Submit an enquiry through the contact form

  • Download [name a document]

  • Read our most recent news article

If your guinea pigs struggle to perform such tasks within a reasonable number of clicks, or aren’t sure how to achieve the aim, you probably need to do some work on your navigation, visual hierarchy or CTA elements.

Choose the Right Platform

Every organisation is different and will have different priorities. In turn these priorities might help you determine which is the most suitable platform for your website.

For example, if your organisation is an ecommerce business, you might want to choose Shopify. Shopify is a fantastic choice for those looking for an out of the box ecommerce solution which is easy to setup. Equally, WooCommerce might be the right choice, especially if you’re already familiar with the WordPress platform. Find out more about Shopify vs WordPress.

Depending on your skills and experience you might be happy setting up your site from scratch using a do it yourself website platform like WIX or Squarespace. These platforms can be easy to get started with, but can become more difficult to manage over time.

At the end of the day most people are more comfortable working with a professional developer who can take care of the whole project. Get in touch if you’d like our help.

Putting Your Website Together

Now you’ve got your site structure, content and design worked out it’s time to put your website together. If you’ve opted for a platform like Squarespace or Shopigy you may find yourself constrained by the available themes. It’s not always possible to use your preferred typefaces or to design layouts which make the most of your content.

At Hello Technology we design and build websites from the ground up. This isn’t to say that the self-build platforms don’t have their place. Rather, a well designed website deserves to be well built, using tools and technologies which are most appropriate.

We prefer to build WordPress themes from scratch, rather than using off the shelf solutions. This is because most themes contain lots of additional code, everything needed to create an infinate number of different website designs. In turn this can add ‘bloat’ to your website which slows it down.

By choosing the best platform for your site, and building your website using best practice, you’re investing in the future of your organisation.

Optimise For Mobile Devices

Once you’ve built your website it’s time to run through some optimisation audits and make any necessary changes. One of our favourite tools for this is Google Lighthouse. Google Lighthouse is a Chrome plugin which provides excellent feedback across 4 key areas:

  • Performance

  • Accessibility

  • Best Practice

  • SEO

When it comes to optimising for mobiles, the Performance area is the most important. The Google Lighthouse audit will identify problems such as images which are large and slow to load. Based on the feedback you receive changes can be made which will help your website perform better.

Please read our post about scoring 100% in Lighthouse to find out more about this process.

Optimise for Search Engines

Another key area of optimisation is SEO. Search Engine Optimisation is the process of making improvements to your website to improve your search ranking. There are many aspects to SEO, such as:

  • Content and keywords

  • Navigation structure and links

  • Meta tags and page titles

  • User-friendliness

  • Accessbility

Ultimately, Google is looking for sites which demonstrate EEAT. EEAT stands for Expertise, Experience, Authoritativeness, and Trustworthiness. When writing content for your website you should always consider these key priorities.

Page titles are perhaps the easiest way to boost your SEO quickly. Read our article on writing optimised page titles for your website. There are also many SEO problems to avoid.

Content Strategy & Continual Improvement

Your website design is complete You’ve built and launched your website. Congratulations! But this is just the beginning.

Remember your purpose statement? Now your website is online you can use your purpose statement to help develop a content strategy. Rather than focussing on the visual design of your website, your content strategy will help your website demonstrate:

  • Expertise

  • Experience

  • Authoritativeness

  • Trustworthiness

We’ll write more on content strategy in another post. But in brief, you’ll want to continually add new content to your website, and refresh older content. Depending on your aims and objectives this may be small amendments from time to time, or it could be regular high quality articles. Either is fine, it really depends on what you’re hoping to achieve.

Website Design Conclusion

There’s more to designing websites than meets the eye. There are many platforms available which make getting started quite straight forward. But there can be a world of difference between a ‘do it yourself’ site and one produced by a professional web designer. Website design and development is a specialist subject.

If you want help designing and developing a well structured and highly optimised website please get in touch. We’d love to talk through your project with you.

Photo by Kelly Sikkema on Unsplash