Continued from Part 1…..

Similarity breeds good design:
“Things that are similar are perceived to be more related than those that are dissimilar”

#5 Colour
The most obvious technique in design to create attention is to use colour contrast. To create contrast you obviously need to choose dissimilar colours. Contrast is a fundamental technique in web design and key elements like CTA’s and buttons should carry more contrast in colour in order to draw more attention. Also you can categorise elements by using the same colour.

All the above leads me to believe that often we should to try keep the main design as simple as possible becuase the elements inside it are those which speak loudest and therefore should take design preference.

I have in essence applied the same technique to my new front room. What I’ve done is to apply a similar technique to that applied in an art gallery. I’ve painted my walls white and accompanying elements like the couch and curtains are a dark brown. I can use cushions, ornaments and furnishings to provide my colour. The great thing with this is that it then becomes easy to change your colour scheme rather than having to repaint a whole room. This same principle can be applied to web design.

The principles of similarity – Proximity, Uniform Connectedness & Good Continuation.

Colour (left) and Proximity (right)

#4 Proximity
Elements in close proximity of each other are more closely related; enough said really. As you have probably guessed this is the most basic principle and therefore comes in at number 5!

#3 Uniform Connectedness.
As I mentioned earlier, humans have a tendency to group things. We need hierarchy and order to makes things clearer. We try to see groups and then patterns rather than unrelated individual elements. Segregation is the most obvious way to group a variety of elements and the bluntest technique to do this is to use an outlined box with related content t inside it.

An example of Uniform Connectedness

#2  Good Continuation
Probably a better technique to use when segregating content is the principle of good continuation. As a designer you will certainly already be using this technique in the form of grids which facilitate good continuation. This basically puts related elements on the same vertical horizontal or diagonal line!

An example of Good Continuation

#1 Common Fate
Anything that breaks from synchronicity we pay more attention to. We pay more attention to moving things and even more attention to things moving towards us. Again apply the sabre tooth analogy I alluded to earlier in the article; it is a survival instinct. The key to contrast is breaking synchronicity and an object headed towards you is the most effective technique…quite simply your senses become heightened.

An example of how to use Common Fate in Web Design

Using common fate in design
Using moving elements in your design (when done well) can really help capture attention; more so than a static site. I guess this explains the popularity of flash and also the more recent emergence of  J-query which helps produce more dynamic websites. Common Fate techniques we can use for this include rotating images and tools tips.

Closure - Filling in the blanks, letting the user believe they are in control.
The final principle is quite a complex one…closure and this takes you closer to psychology in design than any other principle. Closure reaches into our psyche and draws upon our worldly experiences. A good way to explain this is to look at an image which has parts missing yet our mind fills in the blanks to create a complete picture. I guess this principle plays more on the skills of suggestion and persuasion, creating intrigue to draw your user in. Be careful however this is a masterful technique and if not executed well will leave you with egg, bacon and tomato on your face.

Educating your client for a smoother process.
As I’ve stated before by having scientific reasoning behind your actions it makes it easier for clients to accept your designs and also hopefully makes it clear that this is a learned discipline that requires years of practice. So the next time your client comes back to you with amends try to explain to them why you have taken that action, just by having a conversation it will hopefully become clear to both of you who the expert is. Remember the end goal is to produce the best website possible, this isn’t about Designer vs Client. As my art teacher once said take a step back and look at the bigger picture.

 |    |