Elements of Web Design

Now that we've discussed the advantages of a great web design, we can move on to look at the elements of design that need to come together to create a professional looking design.

1

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.

2

Proximity

Related elements should be grouped together to help the reader understand which elements are related and treat them as one.

3

Visual Rhythm

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.

4

Hierarchy

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.

5

Repetition

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.

6

Contrast

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.

7

Typography

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.

8

Colour

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.

Copyright © 2019 by Netmonics