Unity in Web Design

Unity in Web Design
24 October 2011 | | Creative 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


Previous Post:
Next Post:

Back to all news

Reviews2024
Five Star
Reviewed Marketing
5 gold stars
google review logofacebook review with 5 stars
"Excellent service from James at Dental Design, thank you very much for your prompt attention whenever I get in touch! Would definitely recommend to a friend" Alison Tarmey View Full Testimonial
Google reviews logo "Would definitely recommend to a friend"
5 gold stars
"As a dental practice manager I cannot recommend Dental Design highly enough. They are just brilliant at what they do. Lucy and her colleagues are just an email or a phone call away...." Emma Smith View Full Testimonial
Google reviews logo "I cannot recommend Dental Design highly enough"
5 gold stars
"Really great company to deal with. They always respond quickly and are truly reliable. I would 100% recommend, the staff are so friendly and helpful." Michelle Molloy View Full Testimonial
Google reviews logo "Really great company to deal with"
5 gold stars
"I got increased traffic and new patients applying to my surgery, once Dental Design upgraded my website. They are very professional, efficient & adaptive to new situations..." Joanna Gallop View Full Testimonial
Google reviews logo "Very professional, efficient & adaptive to new situations"
5 gold stars
"Lucy has been a star, responding to and acting upon our requests in a prompt, efficient and professional manner, as well as the rest of the Dental Design team..." Abhay Shah View Full Testimonial
Google reviews logo "I cannot recommend them highly enough"
5 gold stars
"...Since the website has been up and running Lucy Mander has been our point of contact. She has been invaluable and gone out of her way to help us, especially during COVID-19 lockdown... " Lucy Jones View Full Testimonial
Google reviews logo "Has been invaluable and gone out of her way to help us"
5 gold stars
"Thank you for all your help and support, and the provision of valuable learning aids for our patients and staff alike in these difficult times. We love the look of our practice website. Very professional!" Sandra Luck View Full Testimonial
Google reviews logo "We love the look of our practice website. Very professional!"
5 gold stars
"Dental Design stood out both in their knowledge of the industry and their professionalism and can-do attitude. All of their staff are exceptionally competent and knowledgeable..." Harvey Rook View Full Testimonial
Google reviews logo "Dental Design stood out both in their knowledge of the industry and their professionalism"
5 gold stars
"Having done extensive research into all the dental website companies, the team and package offered at dental design was unrivalled..." Neil Shah View Full Testimonial
Google reviews logo "The team and package offered at dental design was unrivalled"
5 gold stars
"The team at dental design (especially Rosie) are absolutely fantastic and are always on hand to help. They are professional, friendly and extremely efficient. Rosie always gets back..." KiKi Wilmot View Full Testimonial
Google reviews logo "absolutely fantastic and are always on hand to help"
5 gold stars
"Dental Design are fantastic to work with, our website is amazing and the support they provide is second to none. Our account manager Rosie L is a fabulous point..." Luke Lucas View Full Testimonial
Google reviews logo "Dental Design are fantastic to work with"
5 gold stars
"Having worked with the Dental Design team for the last six months, I've found them not only helpful, but friendly and approachable too. I bombard Marcus with regular..." Sophie Harper View Full Testimonial
Google reviews logo "always met with a swift and professional response"
5 gold stars
desk with branded documents