html, css, jQuery, PHP, mySQL

« | »

HTML and CSS From Scratch. 10:1 Design Principals

So now you know how to create a web site using HTML and CSS, but how do you make it beautiful and useful? This is an important aspect of web design. In other posts I have described how bad design causes stress and makes users more likely to leave your website, and the colour associations that may be used to underline the purpose of your website. In this article, I will cover some of the principals of beauty: the golden ratio, symmetry, a balance between complexity and simplicity, and colour schemes.

 The golden ratio.

Geometry has two great treasures:
one the Theorem of Pythagoras;
the other, the division of a line into extreme and mean ratio.
The first we may compare to a measure of gold;
the second we may name a precious jewel.
–Johann Kepler (1571-1630) 

The division of a line which Johann Kepler was describing is often known as the golden ratio or golden mean. It is formally defined as a division whereby the sum of the two parts is in the same ratio to the larger of the two parts as the larger part is to the smaller one, and is an irrational number (a number which cannot be expressed accurately as a fraction). The golden ratio is roughly equal to 1.618. This number has been used to construct “beautiful” rooms, books and other works.

Similar Golden Rectangles

The golden ratio: where a is 1, b is 0.618 ....

So how can we use this ratio in web design? Well, a very simple way of approximating the golden ratio is to divide your page into nine equal boxes (see below). Then make sure that points of interest are placed on the left- or right-most dividing lines. Why? Because the golden ratio is roughly equivalent to two thirds of the web page, either from the left, or from the right. But there’s one more principal to be aware of: this brings us to the next section.

Eye tracking.

Humans tend to look at pages or pictures in the same way that they are used to reading a page of text. For western English-speakers, this means that they tend to look at the top left corner first, and then their eyes zigzag down the page until they end up in the bottom right. Therefore, it’s best to put the company logo, tagline, or other important information, in the top left corner (roughly on the intersection described above). The corresponding bottom right corner is sometimes known as the corner of death, as this is the place where people are least likely to bother reading information. Never put anything really important in the corner of death!

nine boxes

Use nine boxes to find points roughly corresponding to the golden ratio.

Another good reason for putting the logo in the top left is simply that this has become a convention on the web: people expect to see it there. They also expect to be able to click on the logo and return to the home page.

As most people are right-handed, it has also become accepted convention to place vertical navigation links on the right-hand side. This is because it is easier to access them with the mouse when they are in that area: the rightmost column in your nine-box grid. However, another popular choice is the leftmost column, which also looks good.

 Aesthetics.

Two general principals to be aware of in terms of aesthetics (beauty) are those of symmetry and of an optimum balance between simplicity and complexity in your design. We tend to find symmetrical things more appealing: faces, butterflies and architecture all tend to be most beautiful when symmetrical. However, a little deviation from perfect symmetry can make the composition more interesting, as it adds an element of complexity and unexpectedness to the design. This brings us to the principal of a balance between simplicity and complexity: perfectly symmetrical designs are predictable and boring. Your design may need a little of the unexpected, or some more detail, to spice it up. However, no area should be so complex that it draws attention to itself. This is a sign that an area needs to be simplified or toned down, to allow it to blend into the overall design. One exception would be if the attention drawn enhances useability: for example an action button should perhaps be clearly visible. However, this should not be at the expense of attention paid to the rest of the page. Have someone else look at your page and ask them what they think: they will soon tell you if one area screams for attention.

Symmetry

Symmetrical shapes are more appealing.

 Colour Schemes.

A colour wheel can be a useful tool when picking colour schemes. Be aware of the associations that people have with different colours, and try to make sure that the dominant colour(s) of your website reflect its purpose and intended audience. Once you have decided on a general colour, it’s time to look at the colour wheel and pick out some extra colours to complete your design.

The most basic colour scheme uses harmonious shades to create a soft and subtle look. Pick three or more adjacent colours on the colour wheel, or for a tasteful and natural look pick shades from a photograph. This will give an even more gentle gradation of colours. Harmonious colour schemes are easy on the eye, relaxing and sophisticated.

The next most basic colour scheme is using complimentary colours for dramatic effect. Pick two colours opposite one another on the colour wheel. One should be your main colour, and the second can be used to add drama. Complimentary colour schemes can be very bold and dazzling: use with caution.

Triadic and quad colour schemes use three and four colours respectively, chosen from points equidistant around the colour wheel. You can combine these with harmonies of one colour, using the other two or three colours for accents.

Bright colours can also be used sparingly against a backdrop of neutrals for a dramatic modern look. Navy blue also makes a good neutral, as colours look very vivid against it. Chocolate brown and grey are also very modern-looking neutrals to use with an accent colour.

color wheel

color wheel

When it comes to colour, experiment as you wish but be aware that people will spend less time on a website where the colours are not appealing!

Tags: , , , , , , , , , , , , , , , , , , ,

This entry was posted on Thursday, August 25th, 2011 at 9:00 am and is filed under Tutorials, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply