Web Design for Non-Designers

If you have a business it’s very likely you have a website. This website could’ve been done by yourself or by someone else, but you still might have the power to login to it and make updates and changes, which means you have to deal with web design at some point. When you are not trained in design elements and principles or don’t have the experience and practice, trying to make your website looks good and function well can be a big task.

This month I was invited to give a presentation to a networking group: Chrysalis for Women. After some thoughts and research, I realised that there are a lot of workshops and presentations for business owners about topics such SEO, how to drive traffic to your website, marketing and sales strategies, etc, which is great, but not a lot (almost nothing) about actual web design. So I decided to prepare a short workshop on Web Design for Non-Designers,

In this post, I will share the three tips I gave for four design principles (Colour, Fonts, White Space and Text Alignment), and at the end, you can find the PDF file with the presentation slides.

Before I dive into the tips, I wanted to mention that a website is composed of a number of different elements and every one of them needs to work well in order to the website to function effectively. Design is one of those elements, and it should be taken seriously to help the website to succeed.

What is web design?

In short, website design is making your content look good and creating an interface that works well. The design not only refers to the appearance and looks of your website, but it also refers to how the content is displayed and organised in order to make your visitors have a good user experience.

Colours

1. Stick to your brand palette

Your business has a brand and, hopefully, you will have a branding guideline document that will define the exact colours you should always across your brand. This document could be as small as one Word document to a 100 pages book! The only important thing is that you register the RGB/HEX codes of your colours and use those while making changes on your website clours. Please, never, ever, use the web colour pickers options, you might try to pick a ‘similar’ colour by eye but it might end up looking different in different computers or browsers.

2. Pick 2-3 colours (accent colour included)

A brand can have an average of 4-6 colours on its brand palette, but this doesn’t mean you need to use them all on your website. To make things easy try picking 2 or 3 colours from your palette and use them as the main colours on your website. Make one of these colours be your accent one, and use it to emphasise and create an impact on strategic places, like CTAs, headings, links, etc.

3. Use shades for variation

Sometimes a little bit of variation is good or necessary, to add significance, hierarchy or other effects. In these cases instead of trying to add more colour, use different shades of the same colours you are already using. Using colour shades to add variation allows you to make the design visually attractive and still simply consistent.

The example below, SEQURE website homepage, has 6 different colours on its brand palette, however, because the blue has 4 different variations we have only 3 colours as the base of the overall palette. This has allowed us to play with different visuals in blue shades without being over the top and visually heavy. Note how the red acts as an impactful accent colour.

Fonts

1. Keep the number of fonts low

A good rule to follow is: use one font for headings and titles, and another one for body text. Again, keeping things simple will make your design look modern and professional.

2. Use styles and weights for variation

The same idea as with the colours, if you need to add a new level of design or variation to your fonts, don’t use a new one, use font styles such as italics, bold, all capitals, different colours, etc. The styling will add the variation you need and it will keep the consistency and a cohesive style you want.

In the sample below we can see one font for headings and another one for body text. In addition, the subheading has a very different styling as the main headings, despite looking very different they’rein the same font family (Cardo).

3. Play with size for hierarchy or impact

A very simple way to add visual hierarchy to a heading or a piece of text is to increase their size. Well done well an oversize text can create a high statement and will help your visitors get the most important bits right away.?

Quick tip: Google Fonts pairing tool

Pairing fonts (headings + body) it’s not an easy task. In Google Fonts you will find more than 900 fonts to choose from, so can be quite overwhelming. However, there is a very good tool inside each of those fonts pages that shows you the most popular fonts paired with the one you chose. See the video below where I pick the Libre Baskerville font as an example. Scroll down the page and click on the different options Google Fonts suggests.

White Space

1. Don’t be afraid of White Space

For some people, leaving too much empty space is a waste of space… but for me, there is no other better design rule better than white space to make a design look elegant, easy and inviting to read and help guide your visitor through a specific layout.

2. Reduce clutter

It’s easy to fall into the habit of adding as much information as you can in your website pages, but clutter will only confuse and overwhelm your visitors, and all that information you want to provide it will likely be ignored. Try cutting down your content, synthesize and summarise the most important bits and work with a copywriter to help you say the same with less. Remove unnecessary pictures or elements that don’t provide essential information. Reducing the number of elements will add room for white space and will help your design to look more modern and clean.

3. Give your elements room to breathe

One of the simplest way to help improve your layout and design is to add space around your elements. See the example below, the image to the left is cluttered and all the elements are very close together, but if I add a bit of space around the columns it already looks more inviting and easy to read. For the headings and CTAs this rule is particularly important, because ‘owning’ their own space makes them stand out and gain hierarchy and importance.

Quick tip: Narrow wide paragraphs

I see this in a lot of websites, very wide paragraphs… try to narrow them to a half or 3/4 of the page and it will:
1. add white space around for a better and uncluttered look,
2. make it so much easy for your visitors to read or scan the information.

See sample below.

Text alignment

1. Prioritise left alignment for paragraphs

In the occidental world, we learn to read from left to right, so it’s natural for us to look for a baseline on the left to start our reading and come back to the same line to read the next line. Especially on paragraphs, if you don’t align to the left it makes it really hard for your visitors to follow a natural and comfortable way to read, you have to also consider that they are reading on a screen, which per se it’s already tough for our eyes.

2. Use center alignment only when necessary

Center alignment is acceptable on web design, but I do recommend it only on special occasions, such us short blurbs and paragraphs. As I mentioned above without a clear starting baseline and long pieces of text, center alignments make the content harder to read and scan.

2. Right or justified… hm… think again

Right alignment should be used only in very special cases, in very short sentences or headings. And when we talk about justified, it’s a big no in web design. Justifying text will spread the words to fit inside the block or container, which end up with horrible uneven gaps, that we call ‘rivers’, in between the paragraphs. When working on static material like prints, it’s quite easy for us designers to fix those, but not on a website which the elements adjust to different screen sizes.

See the image below and note the differences between the four text alignment option on web design.

Wrapping up

There are a number of design principles and tips I had to left out of this presentation/post, the work of design is a complex combination of different elements that when combined well allows you to create beautiful, simple and effective designs.

You can find the presentations’ slides in the button below, if you have any questions please don’t hesitate to contact us.