We can all spot a well designed website when we see one but putting a finger on exactly what the difference is between a well designed and badly designed site is a little more tricky. In this article, I will try to explain the elements of design that need to come together to create a nice looking site.
Alignment and Spacing
To create an organised look, related elements of a page should be aligned both vertically and horizontally. The width and height of the gaps between elements should be equal.
Related elements should be grouped together to help the reader understand which elements are related and treat them as one.
Visual Rhythm is achieved using consistent structures where corresponding items repeat at regular intervals. This predicitability helps the reader to scan through the information more easily.
A hierarchy is formed by creating a leading element and arranging everything under it to be progressively less dominant. This aids the reader scan the items on a page to find the topics of interest and then read more detail if required.
One little trick, where possible, is to create a large, medium and small item which helps to direct the eye. Some items can be grouped together and count as one larger item.
Repetition is about repeating some aspect of the design throughout the entire page and/or site. In the example, the headings and bullet point icons are the same colour.
Repetition helps guide the eye reader’s eye by creating structure in a page or page section and can be achieved with consistent spacing, fonts, alignments, colours etc. It also gives the impression that page elements belong together.
Contrast helps create visual interest on a page, drawing in the eye and can also be used to organise information and guide a reader’s eye.
Contrast is also important for legibility, black text on a white background is easier to read than dark grey text on a light grey background for example. Sounds obvious but care needs to be taken when placing text over an images for example, especially when images resize and text repostions according to the screen size and aspect ratio.
Images form an important part of any web design. Humans apparently process images 60,000 times than text and can remember them much longer. Images can be used to trigger emotions, especially those that include people which helps form a connection with the visitors.
Meaningful images should be carefully chosen, please see also my page on finding images for your website:
If the text on your website is difficult to read, visitors will simply leave early though they won’t necessarily realise why they’re moving on. Great typography will help reinforce your brand identity, inspire the reader through it’s visual appeal but most importantly help convey your message.
Awkward to read text will deter people from reading large amounts of text. Short paragraphs, bullet points, pull quotes not only help to break up large chunks of text.
Colour helps set the tone and mood of the website but it can also be used to lead the readers eyes and create a unified feel to the site if a colour scheme is applied consistently.
Colours have psychological meanings and associations which may vary depending on your country, geographic location, language & culture.