Website Design

Now that you have the beginnings of your brand – a logo, tagline and brand personality, you can start incorporating some of that design thinking into the next step.

In this section of our checklist, we’ll delve into the sorts of things you need to consider in the creation of your website, starting with the basics.

Great content communicates the right message into the hearts and minds of your customers.

Bring your brand to life!

Your brand story connects people to the products and services you are offering – therefore, your website needs to represent your brand! Especially if you plan to only have an online presence, and not a bricks and mortar type of business. The more aligned your website content is to your brand personality, the more authentic and appealing it appears to potential customers.

Have you ever heard of the phrase ‘Content is King‘? What it basically means is that the content you put in your website – the textual, visual, or aural content – is a lot more important than you may realise. Web content may include—among other things—text, images, sounds, videos, and animations.

Why is good content important?

* Speaks to your audience
* Builds trust and loyalty
* Great for SEO (searchability)
* Helps generate leads
* Adds value to your offer
* It sells

content is king

So when writing copy for your site, remember who you’re speaking to (know your audience), write short and simple sentences (ditch the jargon), think like a search engine (what words will people use to find you?) and don’t forget that call to action!

Imagery is considered content too, but we’ll look into images and the resources available in our next post.

Information Architecture

Information Architecture (IA) is a term that is used to describe how information is organised and structured on websites, web and mobile applications etc.

The way information is grouped – from navigation methods through to the layout of a page – helps people to understand where they are and what they’re looking for. Really effective IA is easy and intuitive, and reflects the way people think!

Some common pages or navigation links you’ll find in most websites would include a ‘Home’ page, as well as an ‘About’ and ‘Contact’. Depending on the product and/or service, you’ll probably have additional pages which are custom to what you’re offering.

Below are some things to consider regarding content for each page:

Home

* Clear value proposition
* Call to actions
* Supporting images
* Intuitive navigation
* Benefits
* Features

About

* Tell your story
* Vision
* Mission
* Who are you?
* Why are you doing this?
* What makes you different?

Contact

* Postal address
* Contact email
* Contact number
* Hours of operation
* Contact form
* Call to action

FAQs

* Answer common questions
* Postage and shipping options
* Return policy
* Sizing guidelines
* Faulty products policy

Website Layout

Web page layout refers to how the different elements are structured or organised on your page. A website is often divided into sections such as header, navigation, banner image, content, footer.

You will need to consider where you will place images, text, buttons and other objects on the page.

Try and make sure that important information and a call to action appear ‘above the fold’ – that is, your customer should see this before they have to scroll down for more information.

web page layout

Colours

There is a whole science to choosing colour for your brand, logo and website. There’s even a name for it – Colour Psychology – which studies how different colours affect people’s behaviour. Colour used as an influence of emotion has been proven over time and is extremely effective in growing brand awareness as well as sales.

There are many articles and blogs in the webosphere which goes over all the different colour emotions and combinations so we won’t go into too much detail here.  However, we’ll help you out with the basics to get you started:

* Choose a dominant colour as your brand colour
* Choose 1 to 2 accent colours to create a colour palette for your site
* Choose a background colour to complete the design

Dominant colour

Your dominant colour is your brand colour, and is generally the most prominent colour found in your logo. It’s the colour people remember when they think of your brand. Think of the Cadbury purple, the Coca-Cola red or the Bunnings green.

Accent colours

Your accent colours help to make your website design a lot more interesting and highlight other important parts of your website such as buttons, links, quotes, etc.

Background colour

The background colour of your website has to blend in with the other colours, and not compete with any products or services you may be trying to highlight or draw attention to. A white or neutral background is often a good choice for sites such as ecommerce websites which often have many different coloured products displayed.

colour palette

Colour Inspiration

As we mentioned earlier, there really is a whole science to colour that you can google and read about before deciding on the colours for your website.

Choosing colours that complement each other may seem daunting, but there are many colour resources on the web that help make these decisions that little bit easier! The following sites can help you decide or at least get inspired.

Colour Lovers – is a creative community of people who create and share colour palettes, patterns and discuss all things colour!
Adobe Color CC – a colour palette generator, you can create colour schemes or browse combinations
COLOURCODE – an online design tool which features preset modes

Typography

Typography can be a really decorative element to your site and can, quite literally, make a statement!

However, for the majority of the fonts on your website, it’s best to keep it sweet and simple. Fonts are there to help support your content, and make the copy as easy to read as possible for the reader.

Here are some general, best practice tips to consider when choosing fonts for your website:

* Keep it simple – 2 types of fonts is plenty and keeps the site looking clean and structured. Select a font for the headings and one for the body text.

* Take into account visual hierarchy – divide your page properly with headings, subheadings and then main text.

* Consider readability – opt for a body text size of 15 pixels or more.

* Avoid lengthy lines/sentences.

* Pay attention to white space – surrounding your images and text with whitespace helps to increase legibility and provides a ‘resting place’ for eyes, to avoid overstimulation.

* Use colour contrast effectively – don’t use similar colours for both the text and background.

As you can see, there is so much to cover when creating a website.

This post really just touched on setting up the ‘foundations’ of your site. In the final part of our checklist, we will look at the more decorative elements of a website, such as imagery and graphics, as well as how this can apply to your own online store. You’re almost there!

Little Big Shop is an ecommerce platform built for small business and the simplest and easiest way to create an online shop and start making sales.