Principles of good web design no1- unity

PRINCIPLES OF GOOD WEB DESIGN | no 1 UNITY

In this article, I am going to be talking about the principles of good de-

sign. This means the visual composition of elements - such as the design

decisions that that happen in Photoshop - as opposed to good practices

when it comes to front-end web development and areas like CSS, us-

ability and W3C. Web design is a very often just a general term applied to

both of these areas.

Every good design - irrespective of whether it is a web design, a print de-

sign, or a piece of applied art - is good because it adheres to the ‘PRIN-

CIPLES OF DESIGN’. There are lots of written resources about these

principles as they are included in every design and art college course,

so I’m not going to be explaining the details of theories behind each of

them. Instead I’ll apply them specifically to websites and genuine website

design examples.

If you want to find more in-depth theoretical explanations and definitions,

please visit one of the websites mentioned in the references section, or

even better - pick up one of the books mentioned.

Some of the ‘Principles of Design’ are: balance, movement, repetition

and rhythm, emphasis, simplicity (i.e. visual economy), contrast, propor-

tion, space and unity.

We are going to start with what is - in my mind - the most obvious sub-

ject when discussing web design: unity.

UNITY: A DEFINITION

‘The concept of unity describes the relationship between the individual

parts and the whole of a composition. It investigates the aspects of a

given design that are necessary to tie the composition together, to give

it a sense of wholeness, or to break it apart and give it a sense of variety.

Unity in design is a concept that stems from some of the Gestalt theories

of visual perception and psychology, specifically those dealing with how

the human brain organizes visual information into categories, or groups. ‘

1

‘Unity exists when your elements agree. Unity can be seen as the single most important goal of any design; to make your whole design more than the sum of its parts.’


Or to paraphrase, unity is: ‘the relationship between the individual parts

and the whole of a composition’.

When talking about unity in regard to web design, we say that the whole

website and all its elements need to look like one coherent composition,

not a random collection of elements. Nothing should look out of

place and everything should relate to each other in some way. If the

composition is ‘perfect’ then removing or adding any new element would

‘upset’ or spoil that composition.

I used the phrase ‘random collection’ on purpose. Websites can quickly

become a random collection of elements, and this can happen very easily

in design agencies and production environments (yes, just like ours),

unless it is closely monitored, creatively and aesthetically.

Let’s think about a real example: you have created a design, you are

happy with it and it looks great. Then customer requests changes.

If someone applies these amends to your design without ‘working

them in’ and properly rethinking the whole composition to make it

peacefully coexist with the new elements, this design will lose its unity.

It will gradually begin to resemble a random collection of retrospective

customer requests, functional amends, ‘ticked usability box’ changes

that QA guys may have requested…and on and on the list continues.

KEEP IT ‘UNIFIED’ - THE PRACTICAL HOW TO

Ok, let’s discuss the practical steps of how to make sure that your design

is coherent to begin with, and how to keep that coherence and unity

healthy throughout multiple rounds of amends.

UNITY - THE INITIAL DESIGN

So what makes a design a ‘unified’ one? There are a few simple pointers

that may help, but this is by no means an exhaustive and definitive list.

There is no rulebook that can guarantee the transformation of a messy

and incoherent site into a perfect Premium product, but sticking to these

general guidelines will definitely help.

1) Make it as one whole piece

It’s all about composition and making sure that things belong together

visually. Your design should be viewed first as a whole by the user, and

then as a sum of small elements all acting together to deliver a coherent

message.

Typical website elements include a logo, a header, a navigation bar, and

a hero space or feature area. Each of these elements should be a part

2


of an overall page composition, and each has to be in visual relation and

complement to each other.

Furthermore, all the elements within each hero area or header must

also act as one entity, and have an inner structure and visual relation. If

a header contains a logo, a phone number and strap line that have just

been dropped into an empty container, you are going to have a bad

header.

It is a good practice is to self examine your work for elements that may

be out of place -

‘Look over your design and ask yourself if everything belongs there. The

navigation you came up with may look great, but if it doesn’t contribute

to the general concept it’s probably better left out in favor of navigation

that does reinforce the concept. You can use that great looking

navigation on another project.’

2) Stay focused and don’t deviate

Good coherent design needs a theme or a message; an idea that is

reflected in every element of the composition. Very often the initial

concept is shown in a mood board, and if that’s the case, you should

to it. However, this doesn’t mean that you can’t deviate from the concept

if you think that your creative decisions make the whole composition

work better with elements supplied by customer, such as images and

logos. Just use your creative judgement.

Don’t overdo the design, and stick to your theme. If you indicated a few

strong stylistic elements in your initial concept design, just use them

consistently to connect the whole composition together. Don’t mix any

new styles with it as they will probably clash. Good execution of the ‘less

is more’ rule is a real winner, but only if you pay close attention to details.

3) Keep it consistent

a) Colours

If you use a colour, make sure that this colour is referenced somewhere

else on the page, even if it’s many tones darker or lighter.

It is very difficult to create a design with several completely different

colours and use each of these colours only once on the page. I’m not

saying it’s impossible, but it definitely would take a clever and creative

designer some time!

3


The same applies not only to colours, but also to other elements of

composition, such as line, form, texture, value of colour, and shape.

b) ‘Design’ Elements

What I mean by a ‘design element’ in website design is anything that is

going to be an image on the website (including background images) or

stands out visually on a page due to styling like CSS shadows or borders.

For example, you’ve popped a nice curvy badge under the customer

logo, which has quite an unusual shape. If the rest of the website is quite

squared and regimental, it probably won’t work.

The same applies to other shapes. For example, if the customer logo

has bold squares in it, and you use distinctive triangles as bullet points, it

may look very odd. Similarly, if you have lots of flowing shapes in the hero

image while your navigation features square and dated buttons with a

simple gradient…yuck!

MANAGE THE CHANGE TO PRESERVE THE UNITY

Unity in design is a perfect composition that is as complete and fragile as

a human body, and like a human body it will suffer if you cut something

out or try stitching something onto it. Therefore, if you reach the state

of happy balance where all the elements are relying on each other in

the composition, you need to be careful and cautious when making any

design amends.

As I said earlier, if every bit of your design reaches unified relationship

heaven, then removing anything should spoil it. Otherwise, this element

didn’t really belong there.

‘The final and ideal test of unity is to have a design where nothing can

be added or taken away without having to rework what’s left. The

relationship between all your elements should be so strong and so right

that to change anything would hurt the design. This is the ideal.’

A few practical tips on managing the amends and preserving the unity of

the design:

a) Redesign OR make the element look as if it was always there

Always rethink whole composition if you need to introduce a new ‘alien’

element to it. In practice it may mean redesign, especially if you have

to include something that is not necessarily in sync with your design.

This may seem counter-productive and impractical, and your customer

might have seemed to actually love the original design. If that’s the case,

there is only one option left: make the new element look like part of your

design. Redesign the element, not your design! This is possible with

4


elements such as web forms, or even logos - why not desaturate them

or merge them into a part of composition with a shared badge or design

feature?

b) Be there to hear the reason for change

Being involved directly in the conversation with customer, you stand

a better chance of understanding the reason for change, and you can

come up with solutions that will fit in with your design. You will also

have a chance to influence the customer’s often blissfully uninformed

decisions.

References

Online -

1. http://www.vanseodesign.com/web-design/design-unity/

2. http://www.digital-web.com/articles/principles_of_design/

3. Art, Design, and Visual Thinking by Charlotte Jirousek

4. Gestalt Design and Composition by James T. Saw

5. Society for Gestalt Theory and its Applications

6. Graphic Design Basics

7. Introduction to the Principles of Design by Jacci Howard Bear

Books -

1. Design Basics by David Lauer

2. The Elements of Graphic Design by Alexander W. White

3. Principles of Two-Dimensional Design by Wucius Wong

4. Grid Systems in Graphic Design by Josef Muller-Brockmann

5. Design Principles and Problems by Paul Zelanski, Mary Pat Fisher

6. A Primer of Visual Literacy by Donis A. Dondis

7. History of Art by Anthony F. Janson

8. A History of Graphic Design by Philip Meggs

9. The Non-Designer’s Design Book by Robin Williams

10. Geometry of Design: Studies in Proportion and Composition by Kimberly Elam

5

Written by: Ursula Zajkowska Edited by: Honor Clement-Hayes

Thank you for reading

Principles of good web design no1- unity

Design

Transcript of Principles of good web design no1- unity