Principles of Design #5 - Unity, Getting all to work together

Bit of a gap in the series, a 25 mile walk in the Mournes and a couple of projects at work got in the way.. Anyway on with the series - Unity, what is it?

Well that is a hard-ish concept as it sort of suggest that "What works ... works". However it is something that all devs should think about as most of aspire to create things that work and have an identity. Alternately we may work in a company that has a well defined corporate identity framework with in which we create our applications and whilst we work within this framework we may want to add to or improve the framework with our own ideas.

Other frameworks may be very well defined like IBMN's OneUI that we all know and some of us love. I have to add that I am not that keen on it but it does tick a lot of the "design" checkboxes  it is just a bit ... mmmm.... soulless unless you breath some of yourself into it.

Consistency

So in broad terms unity is an umbrella principle for visual design, meaning all aspects of "The Language of Design" that I have talked about so far (and in those to come) contribute to the visual unity of an image. Consistency among parts that contribute to the whole is a hallmark of a unified design. Such parts include color schemes, typography, semantic hierarchy etc. When all of these parts are in sync, the end result is a unified design. However, if one of the parts is inconsistent or improperly applied, unity suffers and the image or site or app often appears disjointed. A common problem that makes a good web site look thrown together.

The site above whilst at first glance looks OK suffers from a lack of consistency, the images do not compliment each other and distract from the design The navigation is confusing and not centred, the colours do not complement each other and the page has no focus which leads nicely into ...

Relationships 

Unity is the relationship among the elements of a visual that helps all the elements function together. Unity gives a sense of oneness to a page as a seen by the user as a single visual. In other words, the words and the images work together to create meaning. So basically don't use a picture of a dog when you are talking about cats or as in the example above have way way way to many unconnected images.

Colour Schemes

I will be talking in a separate post about colour however keeping colour consistent across all the pages or parts of your app.This is where frameworks like OneUI or Twitter Bootstrap come into their own and will help the designer from the get go.

By whatever method you should try to achieve a design that should consistently use a stable color scheme that appeals to viewers. For example, if a Web site consists of multiple pages and the font color for hyperlinks is blue on the first Web page, then hyperlinks should be blue on subsequent Web pages. Also, background colors should be used consistently and should enhance readability preferably by relying on a template or some type of CSS to ensure that page loads are cohesive.

Proximity

The simplest method of making objects or elements on a page appear to belong together is to group them closely together. We humans LOVE patterns and developing a pattern in your design or images will create unity in your design.

Similarity

Things that are the same shape, size, colour or orientation allows the viewer to associate them with each other and visually bind them together.

Repetition

Another method often used to promote unity is the use of repetition. Repetition of color, shape, texture or object can be used to tie a design together. 

Continuity

A much more subtle method of unifying a design involves a trick borrowed from the art community. The continuation of a line, an edge or direction from one area to another. Continuation is often used in books and magazines to tie the elements of a page together with the use of ruled column dividers and by lining up edges of text  headlines and graphics.

Take the picture above the artist has used the continuity of the road to unite the fore-ground with the back ground. The left to right stroked in fore-ground unite the left and right of the picture.

This continuity allows the viewer to start at the front of the picture and work to the back without interruption. The continuity of the stokes allows the view to recognise a pattern that consolidates the idea that we are looking at a "worked" field.

Closure
When you have a group of elements in a design it is important they they are "closed" . By that I mean that the group should be a recognised shape itself and the closure can be achieved with either a boundary line or by whitespace. Have a look at the example below at the 3 panels at the bottom each panel has an image with text below surrounded by white space. This is a "closed" group. Also looking at the 6 panels as a single group bounded by the grey side bars can also be considered as "Closed"

Conclusion

Consider the site above it shows all the elements of unity as a whole - the overall T pattern is easy for the user to identify with. The images work well together the fonts work well and the colour scheme works. This unity allows the elements of the site to be more than the sum of their parts and bind the site into a single pleasant visual experience.

This is what we as design-centric developers need to strive for design not only each element well but ensure that each element works well with every other element on the page.

That brings the principals bit of this series to an end. I hope you found it useful and in the next series of posts I will be talking about how we can leverage these fundamental ideas together with with your current skill sets in the development cycle to both develop and design apps and web sites.

First up is colour in the next post.