The Complete Guide to Creating a Website

  • 13 min read

Creating a website has been made easy by the various website design and online content management software available on the web. The simplicity of website creation, provided by software such as WordPress, means that there is an increased emphasis on simple design that is easy to understand. Understanding the do’s and don’ts of good website design will put you a cut above your competition and will allow you to secure more customers – the fundamental goal of building a website.

There are various aspects of your website that you’ll need to take into account throughout the creation of your website. Below we will outline these elements and what the best and worst practices are so that you, a small business owner, know how to create your website.

Tone

There are two aspects to think about when dealing with the tone of your business’ website. On the one hand, you need to know your target audience, know your business’ goals and be able to pull these two things together to create a voice that can communicate what your product does and entice customers to buy it. On the other hand, where many websites go wrong, is they overplay their tone of voice.

How to create your tone of voice:

Above all, be clear. No matter what tone of voice you are in, you need to be able to convey your message. However, there are a couple of tricks to creating a general feeling or emotion behind your writing.

Firstly, knowing your demographics. Are you marketing to children, young teens, teens, or adults? Looking at other advertisements that have been directed at your demographic can be a helpful way to see which tones of voice have worked and not worked for various companies. 

Take for instance this advert by Lego. This is a good example of tone for children’s’ products. They make use of a fun, excited, and almost absurd tone when trying to market their toys to kids. Their use of exaggerated but simple language could be easily mimicked by a website wanting to sell their own kids’ toys.

Secondly, knowing your product. Sticking with the kid’s toys example, does your product, like lego, encourage kids to be imaginative? This imaginative part is likely what inspired Lego to add the more absurd style into their advertisement: with all the dragons, blue horses, etc. However, if, for instance, you are selling a kid’s tractor toy, you may want to use language which makes the child feel like he is imitating real life. For example, many toys use all the real names and jargon for the various parts and types of tractors. Here the tone of voice would be far more serious and industrial than that of a lego advert.

This mixture of both product and demographics should mold your tone. With all these things, however, you don’t want to take it to its excess. When this happens, the tone set out cannot be the tone received by your customers. A confident tone can quickly turn into an arrogant one as an absurd tone can quickly turn ridiculous. The subtlety needed to create a good tone comes with the redrafting of your website content before you publish it and, after you have set up your website, it comes with your users’ feedback. 

Features (what buttons do you need for your website to function)

Here you need to think about what features you will need to complete your website’s goal and how the client will interact with these features. For example, if your website is an online store, it’s the main goal would be to sell products. Here you would need a basket feature where the user can list the products they may want to buy, you will need a credit card processing feature too.

The easiest way to prepare all the features of your website is by going through what you want a “typical” customer to do on your website. Run through the steps it takes for them to purchase your products. If you have any competitors, looking at their website may be very helpful too. They might’ve included features in their website you haven’t thought of or they might be missing features that stand out painfully obvious to you. Either way, you get a greater understanding of what you will need in your website.

Here are a few examples of features you may need:

  • Basket features and payment processes
  • Subscription process to build an email list
  • Lead magnet to entice people to subscribe
  • Video or photo gallery
  • Frequently asked questions
  • Contact page or helpdesk
  • Information page
  • Reviews
  • Security measures such as an SSL certificate
  • Search Engine Optimisation to get more people to come across your website
  • Caching to help load your webpage faster

Continuing on from the last feature, making sure your website has minimal loading time is helpful to increase your website traffic. Somewhat ironically, the website of the University of Advancing Technology serves as a good example of what not to do. As you can see, when clicking on the link above, their website takes 3 or more seconds to load – even with good WiFi.

Aesthetics

This part is arguably one of the most crucial aspects of your website. It makes the user experience comfortable and helps customers return to the website. This is especially true if your website is a store. A good website design here will increase the period of time a user spends on the website; increasing the likelihood of one or more purchases.

Many website creation software has a host of templates you can choose from. These will have been professionally designed and are likely very functional and pretty. Despite this, remember that you want your brand image and company to stick out. Use these templates as a starting block for your website’s design, not as the design itself.

Creating your website’s aesthetics

  1. Demographics – Again you should have your customer at the forefront of your mind throughout the entire website creation process. You wouldn’t choose fun playground colors as a law firm. Rather you are likely to have a mostly white or grey website that clearly reflects the serious characteristics of your business. Often these very minimalist schemes use their logo color as their tertiary highlight colour. Take these law firms for instance: Allen and Overy, DLA Piper, and Linklaters.
  1. Font – Making your font easy to read is a key part of enticing customers. Firstly, there would be little point in having the “tone” section of this blog if the customer doesn’t want to or finds it hard to read any of the information on your website. Secondly, it hinders customers from finding out more about your product and other products. They will be more drawn to sites that are easier to read, even if you have the superior product. As a rule of thumb, a darker font on a lighter background is far easier to read than vice versa. For example, even though the “official Thelonious monk” website has very little on it, its use of font and colour completely puts users off.
  1. Pictures – Using one or two pictures often helps attract customers to your website. These should be high graphic pictures that take up enough space for the user to fully see the picture. However, the picture shouldn’t clutter the website. A good example of how to use high graphic pictures is https://hocusfocus.no/. The image here speaks for the website as a whole. As a result, the website designers have left out any cluttering words from the webpage.

If you are wanting to use smaller pictures, then these should typically be cartoonish or only two colours. Take for instance the monster and trees at the bottom of http://thesum.ca/.

The final reason you may want to use pictures, especially as an online store, is that many web searches come from pictures. As we see in the graph below, almost 27% of all web searches in the US came from pictures; the second largest US search property.

  1. Headlining and visual hierarchy – As displayed brilliantly by the Hocus Focus website, you want your most important information at the front and center of the screen. Like the headline to a newspaper, the front and center of the Hocus Pocus website outlines exactly what they will do for their customer: they are a post-production team who have helped with the beautiful pictures they are presenting to you now. Your website should try to mimic this style of simple headlining. It is a tried and tested way to attract customers which has been seen in the newspaper industry for years. 
  1. Formatting – Have a responsive design that can easily format onto mobile devices such as smartphones and tablets.

Layout/Navigation

Website navigation is another crucial aspect to your website. Like your aesthetics, website navigation should allow your customers to find the information they want quickly and easily. Not only will this bring customers to your website but it will also increase the likelihood that customers will return to your website. 

The best way to start mapping out your website navigation is using a flow chart. Have the features section of the plan ready to hand during this section of website planning as your navigation will likely be based around this.

The diagram easily maps the path that a typical user would take. You may have multiple different diagrams for the various sections of your website. For example, you may have a feature to return to the products page from the purchase page while being able to retain the customers order as they shop for another product.

Steps to improve your website navigation

  1. Use web conventions – Having web conventions makes it easier for users to navigate through your website. Nowadays people use the internet so much, many of these conventions are muscle memory – sticking to them will have the users moving through your website in no time.  Furthermore, any deviation from these conventions, if not done well, can be frustrating for users, putting them off your website to never return. Here are some of the main website conventions you shouldn’t risk breaking – unless you are very confident of your better solution:
  1. Placing logos on the top left corner of your website
  2. Having your navigation bar across the top of your site
  3. Styling links differently to the other words on your page. Normally links are a different colour and are underlined. Don’t try to be fancy with links.
  4. Using standard icons such as an envelope linking to an email, a shopping trolly linking to the checkout page and the various logos of social media platforms which are attached to your small business’ pages on those platforms.
  1. Having a clear main menu – This ties in with the navigation bar as the main menu should allow the user to navigate through your website. Although the most common position for it is at the top of the page, it is often found aligned along the left or right hand side. Furthermore, the primary navigation of a website is usually designed in contrast to everything else on the website so that it stands out clearly. The Zeis Excelsa website is a great example of both these conventions done right.
  1. Link your logo back to the homepage – this is a standard practice that is very helpful for user navigation. Often, even on well designed websites, users find themselves down one rabbit hole or another. Being able to go to the logo to return to the homepage allows the user far easier navigation of your website.
  1. Responsive design – this is a great way to hide information to stop cluttering your screen while indicating that there is further information to be had. For example, you probably know what this button does when you click it on a website:

This button will present you with a hidden menu. As a result, your company is able to fill the users whole screen with a simple clear design while hiding the navigation to other clear designs almost out of sight.

  1. Sticky navigation – This is a menu that locks into place as the user scrolls down the page. This is often a tricky one to get right, however, when done properly can make the users experience simpler and easier. MarketPlace used the sticky navigation technique very well through the simplicity of their menu: it sticks to the menu conventions talked about earlier, it has clear writing in a clear font, and it has a linked logo.
  1. Show the user their navigation path – As you know by now, what makes a good user experience is simple and easy navigation. Showing the user where they are on the website, for example, in the menu, will allow them to quickly navigate back to pages they liked. There is a similar thing when you look for files on your computer where you are shown your directory like this:

A website that does this type of user navigation well is Emporium Melbourne. If you click on the various sections of the website in their menu, you will see your route displayed simply under the title of your section:

Once you’ve designed your website you should now be ready to put it all together. You can now buy a domain name. Before you post it onto the web, do final run throughs of your website, checking that the pages and graphics load correctly on all browsers (Chrome, Firefox, Edge, Safari) and devices (Laptop, mobile and tablet). If you are positive that everything is working, you are now ready to launch your website.

Did you find this helpful? If so, check out our other blogs designed to help small businesses grow. Look at our blog on the Best Ways to Research your Competitors as this is another great way of improving your website design and overall business strategy.

Form your company in a matter of clicks and simultaneously open a current account.