Great Website Design - Design Principles Explored

Have you ever wondered what makes a good design? You can tell good design from bad, but what ACTUALLY is it that makes it good?  

 

Well, there are many components that make a ‘good’ design - composition, flow, colour and contrast are amongst some of these and designers discover these and learn how to use them with experience, but there are in fact some principles and rules of design that have been developed over generations and it is fascinating to know where they’ve come from and how they have been used. The designers that use these principles subconsciously have a natural eye for design but whether you consciously use them or not, they are techniques that can be used to improve layouts. 

 

Designers are problem solvers and these principles go hand in hand with usability on a website. Good usability is something that gets the intended message across clearly; that makes the user think less; presents the user with choices, but no more than necessary and gives the user a clear and ordered path to follow - but have a look at these interesting principles that can be used to make a ‘good’ design and create better usability.  

 

Divine Proportions – The Rule of Thirds – Fibonacci Sequence – Golden Ratio
Call it what you will, this ratio is the very essence of the universe and for thousand of years artist, architects and designers have used the Golden Ratio to create compositions that are pleasing to the eye.

 

fibonacci

Designated by the Greek letter Φ (phi), a ratio that is 1.618 or a sequence that looks like this:  1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144… (each number is the sum of the two before it), the sequence/ratio gives rules to layouts.

 

Fibonacci first wrote about this sequence in a book in the 11th century but this ratio has been used by ancient civilizations like the Incas and the Indian people for centuries before. Objects in nature that use the golden ratio are pine cones, and uncurling fern, or a sunflower head.

 

The Parthenon uses the Golden Ratio and so do the proportions of a modern day credit card! Because Phi is all around us in the world, it is something that the brain is comfortable with and therefore finds pleasing.
 
Used in design, the Golden Ratio can be used to create column layouts (and then subdividions within those columns) and is extensively used in photography to create a pleasing composition.

 

Golden Ratio

 

Gestalt Principles
This relates to the psychological theory of visual perception where the human mind organises elements into groups based on common characteristics where ‘the whole is greater than the sum of its parts’. Good design most often adheres to some Gestalt principles, some of which are:

 

similarity-beatles

Similar objects
If objects look similar to each other, the viewer perceives them as a group. This principle can be used to group objects by colour (as with headings) or with shape (as with promo boxes that have the same rounded corners).

 

In this example on the right, the back blob in the middle still seems part of the whole even though it is clearly different when seen independently.

 

 

 

Continuity
When a viewer is moved through an object and continues onto another object. A great example of this is using images of people on a website, the viewer scans the page, and reaches an image of a person looking right – the viewer’s eye will continue looking right (and the gaze could even speed up) until they look off the page or are stopped by another object.

 

If the viewer encounters and image of a person looking left, the gaze reverses and looks the other way. This way, a designer can guide the viewer with cleverly placed objects and images to retain the viewer’s gaze within the page.

 

Closure
When an object is incomplete, the viewer perceives the missing space as being part of that object.

 

closure IBM        Proximity          figureground

 

Proximity
When objects are placed together to create what the eye perceives as a ‘group’.

 

Figure/Ground
Where some objects take a prominent role while others recede in to the background.


Hicks Law
This is a law of limiting choices and it states that the time it takes to make a decision increases the more options are presented to the viewer. This is most often used incorrectly in ecommerce stores, where, rather than grouping products into a hierarchy, they are all listed in the left hand navigation.

 

It is good to limit choices to 3, a low, medium and high end product, so the viewer feels that they have a choice, but not too many so as to overwhelm them. (As you can see above, I’ve used Hicks Law in this post, where I’ve chosen three aspects of design theory to talk about so as not to overwhelm the reader).

 

Last thoughts…..
These ideas can help design and help create pleasing compositions, they are tried and true theories BUT I am also a strong believer in the theory that once you understand these rules, THEN you can experiment with them and break them – most importantly, and something that applies to all these theories, is that the human mind likes patterns and so if a website is designed to a pattern with thought out consistency, good colour usage and a relationship of elements that makes sense, then that will also make ‘good’ design.

 

ML

+ Back to blog home

Posted in: General

 
Thanks for reading! blog | catalog