Attractive Websites

Mind map of attractive web design

Piece of cherry cakePeople take milliseconds to decide if they like your site. If your  website is not attractive to your visitors they are likely to develop a negative view of your products. Make sure your website looks appealing, isn’t too crowded and does not annoy your visitors with flashing gismos,  or pop-up boxes that are difficult to close. Take the time to make your site attractive or employ someone to do it for you.

Keep the appearance of your site up-to-date. If your site looks like it was created 10 years ago and has not been updated your visitors are likely to assume that the information on your site is also out of date.

White Space

White space may not necessarily be white. It refers to empty space on a web page or publication. When there is not enough white space on the page, it looks crowded and chaotic. Too much white space makers the page look empty. It is not necessary to cram every bit of information above the fold. Most of your  viewers are now familiar with how web pages function and can scroll and navigate to another page. There is an art to finding a balance in the amount of white space on your page.
top ↑

Balance and Symmetry

Two moths togetherA website that is balanced is more attractive than one that is higgledy  piggledy. This does not mean the the page has to have the same type of content on both sides but that there is a balance of light and dark through out the page. Dr Christopher Tyler discovered the that there is a response to symmetry in the occipital lobe of the brain. In other words we are “hard-wired” to respond to symmetry (Perception, symmetry of art discussed at brain lecture)
top ↑

Colour

Blue sky and green field

My mother told me that blue and green should never be seen together. I didn’t believe this adage when I looked out at the green wheat fields against the blue sky.

The way we respond to colour depends on our age, personality, gender, culture, upbringing and socio-economic status. The colours you choose for your website should depend on your target audience.

Warm colours, for example red, yellow and orange are associated with excitement, danger, happiness, energy or hunger while cool colours like blue and green are calming and are often chosen to imply trust and reliability.

Discordant colour on a website is like a discordant note in a melody. Just as there are rules with music there rules to follow to help you choose colours that harmonise. The colour wheel is a good place to start.

colour wheels

The above pictures are based on the subtractive colour wheel which is still used to choose colour schemes. In the subtractive colour wheel the three primary colours are red yellow and blue. These colours are good to use for websites aimed at young children. The secondary colours are orange, purple and green. The remaining six colours are tertiary colours and are created by mixing a primary colour with one of the closest secondary colours.

You can use one of the six different colour schemes to guide you in choosing colours for your web site. These schemes are:

(from The Principles of Beautiful Web Design by Jason Beaird 2007 p 49)

Monochromatic

An example of a monochromatic web site. in purple-blue colours

A monochromatic colour scheme is one that basically uses one colour but varies the tint (adding white) and shade (adding black).

Orbit.ai uses a different monochromatic colour for each page.
top ↑

Analogous

An example of an analogous web site

An analogous colour scheme uses colours next to each other on the colour wheel, for example orange and red or blue and green (so nature got it right when it put the blue sky next to the green landscape).

blinksale.com is an example of a website that uses analogous colour scheme.
top ↑

Complementary

an example of a complimentary web site

This colour scheme is based on two colours from opposite sides of the colour wheel, for example red and green or orange and blue.

Dyslexia Unlocked is an example of a website that uses a complementary colour scheme. A complementary colour scheme needs to be used with care as the two colours are so different they vie for dominance on the page. Using complimentary colours for foreground and background colours can be difficult to read.
top ↑

Split Complementary

an example of split complementary web site final touch

A split complimentary colour scheme uses a base colour and two colours from the opposite side of the colour wheel for example red for the base colour and blue and green for the secondary colours.

Final Touch  is an example of a split complementary web site using gold and purple and blue.
top ↑

Triadic

 

A colour wheel with a triangle pointing to three different colours on the wheel

To create a triadic colour scheme choose three colour that are equidistance on the colour wheel for example: purple, green and orange.

Tetradic

A colour wheel with rectangle on it pointing to 4 different colours

Tetradic colour scheme uses two complimentary pairs opposite to each other on the colour wheel.


Some sites that will help you choose your colour scheme are:

Often you already have at least one colour to start with from the company logo and you can use the above tools to find other colours to work with.

Otherwise you can consider the mood you want to create on your site. For example blue is considered to imply trust, greens and browns for nature and bright colours for a site for young children.
top ↑

Typography

When I started to learn about web design there was very little choice of accessible web fonts and sites were limited to a few basic fonts that were available on most computers. Now web designers have a vast array of fonts to choose from thanks to Google Fonts. First of all you site should be easy to read so choose a font that is not too fancy for the body of your site. The font you choose should reflect the mood you want to create on your site.  Using CSS you can control the size of your font and the amount of space between lines. A site with not enough space (leading) looks cluttered and is difficult to read.

How to use Google Fonts

Advantages of Using Google Fonts

Disadvantages of Using Google Fonts

top ↑

Shape

vine curling up a treeIt is difficult to find straight lines and square shapes in nature but for years web sites were boxy and square. Web designers had to use hacks and images to make rounded corners on boxes. With the wide incorporation of CSS3 in most modern browsers designer can easily include boxes with rounded corners and even circles into their page just by using CSS.
top ↑

Psychology

Mother and baby chimpIn her book “100 Things Every Designer Needs to Know About People” Susan Weinschenk talks about a part of the brain called the “fusiform face area” which helps us to recognise faces quickly. People respond positively to faces on a website especially to a full frontal face. Dr Wienschenk also lists danger, food, sex and movement as things that grab people’s attention. Did you notice that all those items are on this page?

Think about how you can include eye-catching items in your web site. For example in a real estate site you can include an attractive bowl of fruit on the table. Use front-facing faces on the site to grab your reader’s attention.

Some usability experts such as Jacob Nielson believe that functionality is more important than having an attractive site but I believe that attractive websites can also be functional and add value to the user experience.