Developing Unity in Web Design

In the previous “Developing {blank} in Web Design” articles I’ve discussed Rhythm, Balance and Emphasis. But we are missing the last main principle of design — Unity. It’s a very important concept in design and one that is actually pretty easy to achieve. Unity is simply that, the unification of objects within a composition. Unity is the measure of how objects or elements fit together — or don’t for that matter. Its really just a matter of linking elements together to create harmony.

This harmony in elements can be accomplished through:

• The physical proximity of elements
• The repetition of elements or the repetition of element attributes
• The continuation of lines and edges within a design — how elements align and group together

Legos are like Unity. By itself a Lego piece may not do or mean much but when combined with other Legos you can build really awesome stuff, and you can always re-use the single pieces to construct other things — each piece is universal but when unified become unique. Same goes for web design: each element, image, paragraph, navigation, logo, footer, links, by itself is not very meaningful, but when combined together the correct way can create a very powerful tool.

Unity exists in each element as well. Words are unified together to create paragraphs and paragraphs are unified to create pages. Links are unified to create navigation and navigation can be unified with other elements to create a much larger unified piece. So unity is important to the smaller elements as well, we can’t forget that if these smaller elements aren’t unified already, the harmony of the larger composition may be harder to achieve.

Static and Dynamic Elements

Unity is important to any art form, but since websites are dynamic and interactive creatures it’s even more so. Take for instance a print design ad, say a billboard on the highway. The unity (or harmony) between elements is simply visual: is the image unified with the headline text? But with a website you have many other elements to consider and in some cases these design elements change from page view to page view. When unifying for web design you need to consider both, the static elements (images, copy, etc.) and the dynamic elements (links, navigation, galleries, etc.).

In web design — versus print design for example — you may purposely not want every element on the website to seemlessly unify with each other as a whole. You may have sections of content or even pages that have their own harmony, so knowing the appropriate time and place to break these characteristics is also important to the overall unifying concept of the web site.

Unifying dynamic and static content can be tricky because each page view may have elements of content that change and elements that remain static. Applying the traditional principles of unity, proximity, repetition and continuation will still work to achieve the goal but we must apply them a little bit differently than that of a printed or static compostion.

Proximity in Web Design

As we disussed earlier, proximimty is simply just how close elements are to each other. Creating unity with proximity is easy because elements grouping elements together tells the viewer that all these elements belong together in the same “box”. For example, look down at the keys on your keyboard, you’ll notice that you have groups of keys lumped together. This is to signify to you the relationship between each group of keys and their functions to each other. By grouping all the keys that relate to each other you will know what they are supposed to do.

Proximity is also a great way to unify dynamic and static content. As an example, let’s use the standard old blog style layout with a content area and sidebar. In some blogs the sidebar content changes depending upon the category or content of the post, but when you place the sidebar next to the content area, the viewer will be able to easily recognize that it belongs to the article. Another example is arrow or number buttons in an image slider. By placing these buttons in the image slider the viewer knows that they control the images in the slider. If they are placed outside the slider the user may never find them.

Here is a few examples of websites that use proximity to develop unity:

Repetition in Web Design

Another fairly easy way to promote unity in a web design is to repeat colors, shapes, textures, patterns or other charaterists between elements and objects on the page. Repeating style elements will help to unify the entire site. Just simply using consistent fonts and colors will really go a long way in unifying a website as a whole. This is really what makes theming so powerful — you can simply repeat certain styles through out the web site in order to unify all elements.

Branding a website with particular colors, fonts and styles is probably the quickest way to unite the website all together. One really great thing about creating a solid brand is that you can unite your website with other elements outside the site itself. Branding is a great way to unify a product, but even creating a simple brand for a website is a great and easy way to achieve unity.

Here are a couple of examples of websites that use repetition to create unity:

Continuation in Web Design

Continuation is a really subtle way of developing unity in web design. It’s simply using visual lines and edges to group elements together. There are a couple of different ways to create continuation: alignment and eye direction. Alignment is simply aligning content up to a vertical or horizontal rule. This is common in book and article layouts where paragraphs and copy is aligned on a vertical rule. This vertical rule will unify the elements that are aligned on it. Using a grid system is a great way to subtly unify web content.

Eye direction and visual hierarchy creates unity because it creates a continuous visual link between elements. There are many different ways to create eye direct: arrows, lines, images of people looking certain ways, but no matter how you accomplish it, it is a powerful tool in unifying different types of elements because each element can be very different, but if they are “pointing” at each other the viewer is able to connect them and relate them.

Here are some great examples of websites that use continuation to unify their designs:

Read the previous articles:

• Developing Visual Rhythm in Web Design
• Developing Balance in Web Design
• Developing Emphasis in Web Design