Unity in Web Design
Over the weekend I found a series of blogs relating to the composition and design of web design which outlines the key concepts in designing and developing a great user experience and website.
“Unity is 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
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.
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.
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.”
More posts from our team
Five Star
Reviewed Marketing
"Would definitely recommend to a friend"
"I cannot recommend Dental Design highly enough"
"Really great company to deal with"
"Very professional, efficient & adaptive to new situations"
"I cannot recommend them highly enough"
"Has been invaluable and gone out of her way to help us"
"We love the look of our practice website. Very professional!"
"Dental Design stood out both in their knowledge of the industry and their professionalism"
"The team and package offered at dental design was unrivalled"
"absolutely fantastic and are always on hand to help"
"Dental Design are fantastic to work with"
"always met with a swift and professional response"
