Planning the design of your website, and the resources that can help you

A guest post by Katy Carlisle from The Wheel Exists

So far in this series, we’ve looked at why it’s important to think about the purpose of your website, and how thinking about the structure of the website can help you to harness the power of storytelling to engage your website visitors. In this final blog post we’re going to bring everything together to decide on the branding of our example website.

As we’ll be creating this website in such a short time, we want to plan as much as possible in advance. This means we need to have our images and graphics ready, and have made at least a shortlist of fonts and colours that we could use as part of our brand.

What is your brand?

Before we get specific, let’s look at the concept of branding in a bit more detail. The most obvious part of a brand’s identity is its logo, but a brand is in fact so much more than this. In our December Café, Heather Ditch of  Native made us all obsessed with Scotch Eggs when she explained how an organisation’s brand is made up of many different layers.

 Heather Ditch from  Native shows her "Scotch Egg" diagram during December's café

Heather Ditch from  Native shows her "Scotch Egg" diagram during December's café

Heather explains:

“Imagine your brand is a scotch egg (apologies veggies and vegans). From the outside, all we see is something round, and potentially delicious. The egg is invisible, but it's so integral it gives the whole thing its shape, and its name. Invisible though it is, the egg makes it. Well, brand is the egg. It's the thinking that sits at the centre of a company, organisation, service or product branding and gives it its shape, and ultimately, defines the experience of it. It's the promise that we come to associate, however subconsciously, with the thing, its name, or logo.
In the third sector, we have to use brand to communicate our cause and purpose and make it compelling. The first stages of doing this are about defining our true value, and that is made of two parts - the difference we make and the spirit in which we do it, or the energy and drive behind us. Explore and articulate that, and you start to get the yolk of your egg. How we then communicate that is a job shared across everything we do, say and appear to be. Websites are a vital tool in expressing that brand - the experience of them and their content is a vital articulation of what we stand for.”

One of the great tips that Heather gave us is to come up with a sentence of 10 or so words that express the essence of what we do and why. The sentence would be for internal use but could form the basis of a strapline or slogan too! This ties in nicely with the first blog post where we identified our purpose, which was “Providing information on local charities and the actions that people can take to help them, and encouraging people to take those actions”.

However, this doesn’t really capture the drive or energy behind the campaign. What’s our motivation?  

  • Helping local charities that are doing lots of good work
  • Taking advantage of National Hug Day and Valentine’s Day to build momentum and awareness
  • Making it easy for people to support the charities
  • Recognising that people can support the charities in different ways (i.e. not just donations)
  • Capturing the “fun” element of National Hug Day and using that for the campaign

From this, we could say that our internal use phrase is “Making it easy and fun for people to support Sheffield charities”. If we were doing this for a real campaign we could delve into this even more to get to the real core that underpins what we do and why.

The HugSheffield design and brand should therefore capture the following ideas or messages:

  • It’s easy to support local charities
  • You want to talk about this campaign because it’s fun
  • You can support charities in a number of different ways
  • It’s related to showing love and affection

We’re going to convey these messages through a number of style and design choices, which I’m going to look at in more detail now.

IMAGES AND GRAPHICS

You will probably have noticed that lots of modern websites now have much more of a focus on images, and that's because they can often put across complex concepts more easily (or in a more easy to digest format) than text. They can also reinforce your brand, and are visually engaging.

Photos, icons or graphics can also allow people to easily identify relevant content at a glance and are often not constrained by language or cultural barriers. 

So, how do we choose our images for the HugSheffield website? Well, we've already identified love and hugs as a central theme, so let's start there. I used a photo website called Pixabay which allows you to search for high quality images that are free, and can be used anywhere without needing to credit the author. Unsplash and Pexels are also useful sources for these images. 

On Pixabay, I typed in "love" and refined my search to just photos. The clipart type images are generally quite bad and get in the way so I would always suggest doing this. These were the 12 images that I shortlisted as potentially useful for the website. 

I wanted to choose one image that could be used on the homepage. This image in particular would need to meet the following criteria: 

  • Support our brand and key concepts of the campaign (fun to talk about, easy to support charities in different ways, related to love and hugs)
  • Have the option to add text over the image and it still be clearly legible
  • Not be too sickly sweet in a way that could put people off
  • Not include animals (this comes from Laura who reminded me that not everyone loves animals... sad face)

Taking this into account, of all the images, there was one that stood out to me. I wonder if you can guess which I chose? All will be revealed at our café on Thursday. 

Top tip: to make your website more accessible to people using screen readers or with a poor internet connection, provide a short description of your image. This means that people who can’t see it still know what the image is about. Most website platforms will provide you with a way to do this within the image settings.

FONTS

Gone are the days when websites had a choice of six or so fonts that were all, quite frankly, a bit boring (with the possible exception of Comic Sans which has enough written about it already). With the introduction of new fonts that can be used on websites (also known as web fonts) there are now even more ways to represent your brand beyond your images, logo and colour scheme.

Within Squarespace, the website platform that we're using, there are lots of great web fonts built in, including some premium fonts you'd usually have to pay for. In this instance however, we're going to use Google fonts which are freely available. The advantage of these fonts is that we don't have to worry about having a licence to use them outside of the website (for example if we wanted to create a leaflet). Oh, and are you worried about having enough choice? There are over 800 Google fonts.

A lot of choice can be a double edged sword though... How can we find our perfect font from such a wide range? Luckily, Google lets you filter your font search. Because we want something that is fun and friendly, we want to incorporate a font that reflects this, so we're going to refine our search to just handwritten and display fonts. That leaves us with over 400 to choose from, which still sounds like a lot but is actually not that bad to skim through. If you want you can refine your search even further by saying how thick or slanted you want your fonts to be, for example.

I was looking for something quite rounded and chunky, a font that almost feels like a big bear hug! This was my shortlist:

 A selection of potential Google fonts for HugSheffield

A selection of potential Google fonts for HugSheffield

You'll have to wait until Thursday's café to discover the one that I chose! This will be used sparingly as too much of it would be overwhelming, so I also needed to select a sans serif font that could be used for the main text on the website. Having already selected the font I'd be using for the website title and some of the headings, I needed to find another font that would match well with it. This article from Digital Inspiration has a comprehensive list of tools that can help you to pair Google fonts together. 

Top tip: don’t use really small font sizes or fonts that are difficult to read, as this can also make your website less easy to use for people with sight problems.

COLOURS

With the love connection, it makes sense for our colour scheme to have at least some element of red or pink in it. Red is a strong colour and doesn’t have any gender associations (we want the website to be appealing to both men and women). This decision also have influenced my image choice, which in turn helped to narrow down the exact shade of red that we'll be using. 

This article talks about the different emotions and associations for a range of colours and you may find it a useful starting point when thinking about your own branding.

Another handy tool is Adobe Color CC which allows you to start with a particular colour and then see other colours in a range of different themes that work well alongside the original.

 Adobe's Color CC tool with a variety of red shades

Adobe's Color CC tool with a variety of red shades

Sites like Pinterest can also be a great source of inspiration when looking for colour scheme ideas.

 An example of red colour schemes on Pinterest

An example of red colour schemes on Pinterest

When you’re looking at colours for branding or websites you might get a bit confused about what all the different colour codes are, so I’m going to explain them briefly here.

RGB (also known as RGBA)

RGB stands for three colours: Red, Green and Blue, and the ratio that they are each present in the colour. The A at the end stands for Alpha which controls how transparent the colour is. 

This colour format is mainly used for designs that will be displayed on a screen. 

Hex

Hex stands for Hexadecimal and is a combination of numbers and the letters A to F, normally with a # symbol at the start. It's kind of a shorthand version of RGB as the different digits represent how much of each (red, green and blue) there is in the colour. 

This colour format is mainly used for designs that will be displayed on a screen. 

HSL

HSL stands for the hue, saturation, and lightness (or luminosity) of a colour. The hue is a degree on a colour wheel (like in the image above) between 0 and 360. Red is zero (or 360), green is 120 degrees and blue is 240. The saturation is how vivid the colour is (so 0% would be grey and 100% would be full colour). Lightness or luminosity is how dark or light a colour is, as you might imagine, so 0% is black and 100% is white. 

This colour format is mainly used for designs that will be displayed on a screen. 

CMYK

This stands for four colours: Cyan, Magenta, Yellow and Black, and the ratio that they are each present in the colour. If you have a printer, these are likely to be the colours of ink that you will have. Now I know what you're thinking... why on earth is K the initial used for black? There are a few theories, including that it could be mistaken for blue, but most people believe it relates to the "key" plate in a traditional printing press, which normally uses black ink.

This colour format is mainly used for designs that will be printed. 

Pantone (also known as PMS or Pantone Matching System)

You've almost certainly seen a Pantone colour chart or mug and there are 1,867 solid Pantone colours available, made from their own standardised blends. They are designed primarily for consistency across different media. Brand colours are often provided as Pantone colours, for example Coca Cola red is PMS 484. 

This colour format is mainly used for designs that will be printed.

If you need to display a Pantone or CMYK colour on a website, you can convert it to a RGB, Hex or HSL format. However, even the same website can display differently across different browsers or devices. This is because not all technologies reproduce the colour in the same way, for example an LCD screen vs a Plasma screen. 

If you do ever need to convert from one colour format to another (other than Pantone colours) then Convert A Color is a simple to use tool with no unnecessary clutter.

Top tip: when choosing the colours for your text, make sure that there’s enough of a contrast with the background image or colour. Ideally you want to have quite a contrast between the colours so that the text is easy enough to read.

If you're interested in reading more about how to make your website more accessible to a range of audiences, this article from Smashing Magazine is a good place to start. Its focus is people who are colour-blind but many of the examples are good practice for a range of website users, and it clearly explains the reasons for the design choices without too much web design jargon. For a more general overview, this article features some easy steps to take to make your website more accessible

And that's about it for my preparation! Join us in person or follow along on Twitter on Thursday when I will be bringing everything from the last three blog posts together and creating our example campaign website within the duration of the café.

WebsitesKaty Carlisle