Attractive Website

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 gizmos,  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 makes 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 page has to have the same type of content on both sides but that there is a balance of light and dark throughout 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 ↑


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 website. These schemes are:

  • monochromatic,
  • analogous,
  • complementary,
  • split complementary,
  • triadic,
  • tetradic,

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


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). uses a different monochromatic colour for each page.
top ↑


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). is an example of a website that uses an analogous colour scheme.
top ↑


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 complementary 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 complementary 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 website using gold and purple and blue.
top ↑



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

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


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

Tetradic colour scheme uses two complementary 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 ↑


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, your 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

  • You can now reasonably choose from a wide variety of fonts to add to your page.
  • Your font can match the mood of your site
  • The fonts are accessible to screen readers
  • You can use Google Fonts to make your site more attractive.

Disadvantages of Using Google Fonts

  • Each font slows the speed of your page download
  • Too many different fonts create a sense of confusion on the web page.
  • Not all google fonts are easy to read.

top ↑


vine curling up a treeIt is difficult to find straight lines and square shapes in nature but for years websites 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 ↑


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 on your website. For example, on 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.

Last updated 4th August 2018

Redback Web Design 2004 - 2020