This article explains what does principle of 'unity' mean in the context of web design, and how to achieve it.

1. PRINCIPLES OF GOOD WEB DESIGN | no 1 UNITY
In this article, I am going to be talking about the principles of good design. 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, usability 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 design, or a piece of applied art - is good because it adheres to the ‘PRINCIPLES 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, proportion, space and unity.
We are going to start with what is - in my mind - the most obvious subject 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.’

2. PRINCIPLES OF GOOD WEB DESIGN | no 1 UNITY
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

3. PRINCIPLES OF GOOD WEB DESIGN | no 1 UNITY
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

4. PRINCIPLES OF GOOD WEB DESIGN | no 1 UNITY
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

5. PRINCIPLES OF GOOD WEB DESIGN | no 1 UNITY
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