Advertisement
Articles

Unity in Web Design

by

Today we're going to take a look at a design principle that plays a major role in the success of a web design: Unity. As with many designed elements in the world, unity can make or break a site's design. A well "unified" site feels natural, organic, and seamless; Where an site lacking unity can feel disjointed, discontinuous, and discombobulated (in other words, it just falls apart visually). Read on to find out more!


Introduction to Unity

Unity is an interesting concept. If we take a look at the technical definition, there's a few that can apply in the context of web design.. such as "the state of being united or joined as a whole" and "harmony or agreement between people or groups". Specifically though, we can look at one definition that applies to this scenario as of the golden rules of good web design: "the state of forming a complete and pleasing whole".

Unity is really important because it helps create a consistent brand and identity for your site. It forms a connection between your elements so users have an easy time progressing between those elements, and also between the different pages of your website. Basically, the concept of unity creates a strong relationship between elements so the user will perceive them as one, not as a group.


Why Is Unity Important?

Think of it this way. If you live in a house made of bricks, you don't say, "I live within a bunch of bricks". Instead, you say, "I live in a house". That's because you have a group of different elements (namely, the bricks) that are unified as a house and people take in the structure as a single building thanks to the connections and strong relationships between the (literal) building bricks.

The same goes for lots of things in the natural world as well. Consider the leaf at the right. It contains millions of cells and other building block structures, but most people just think of it as a leaf.

Unity holds your design together as the structure, both visually and conceptually. It adds organization and will ease the user's journey over your webpage because they don't have to process each element individually. This, indirectly, helps push the content out and allows the user to focus on the primary message of the webpage.


The Factors Of Unity

There's many factors that contribute to a sense of unity within a web page. However, before you try to apply any of them, you should make sure you understand what the core aim of the design is. The purpose of the design should be supported by the unified design that makes everything visibly linked and easier to be perceived.

  • Color - Color is one of the biggest factors in the unity of a design. That's why businesses usually stick to a controlled color scheme; It helps unify their products into a family; It can also take large bodies of desperate information and make it all feel continuous. Take Apple for example; they stick to silver, white and grey products because it's helps represent that their Macs are part of a product family.
  • Repetition - Continuing with the Apple analogy, let's take a look at the iOS line. Each of the products there repeats certain elements, like the home button at the bottom, or the camera at the top. This "template" for their devices helps people recognize that they are part of the same family, because it repeated throughout the products. Apple is unifying their products as a brand - or a family - due to their repetition of specific elements throughout.
  • Alignment - Alignment can actually play a role in unity, since elements designed around a common axis can feel more connected. This is sided towards visual unity, not conceptual unity.
  • Proximity - Things look together, when they are closer. It's just natural. This is pretty simple because when you put stuff together, they look... together. However, should they not be together, other factors (like color) can be utilized to continue the sense of unity.
  • Continuity and Visual Direction - Moving between elements easily helps the unified feel and inducing this through tactical visual direction is one method of doing so. I'll explain it more in a moment.
  • Consistency - Consistency in other factors like typography also make the elements not too unlike. Keeping things consistent means that they look like each other, and the connections are generated from there.

Now let's explain a little more how each of these factors can be utilized to create a strong relationship between elements.


Color

As we've already established, color can be a great way of forming a connection between objects. Almost everything sticks to a color scheme - website or not - since it helps to create a relationship, especially when used in connection with a product or some non-web entity. For example, the Coca-cola website (see below) uses primary red and white colors, the same as its flagship product. Therefore, our usage of the product can be instantly linked with the site due to its consistency of color.

Unity through color can also be generate through just making sure you follow a defined color scheme in your designs. Not being consistent in this respect will result in a design that feels detached because one of the biggest influences to a visual link will be missing. We can even go as far to say that you can damage your unity if your choice in isn't related to your type of product, like how green can be related to finance.


Repetition and Consistency

Recurring elements that look identical form a connection since your brain will think, "hey, I've seen that before!". It creates familiarity within the design so your users aren't obliged to reprocess that particular part of your website again. It connects the pages through their similarity, so your main focus is on the content and the message you want to push.

Of course, the repetition of elements is not the only method of creating unity in your design. Simply using similar factors (like color, or typography) can connect the elements of your design because they look similar. Using the same color scheme, the same border style or just the same font can attach the pages, or the objects, in your design.

For better understanding, let's look at an analogy. We can look at repetition from another perspective: A lot of malicious sites replicate a popular site's design so it appears to the user just like another page of a service they use every day. A fake Facebook login screen will replicate the color scheme and layout of Facebook.com so it appears, to the innocent user, like an official page from the social network. The uneducated user won't think twice because their brain isn't forced to reprocess these particular elements on the page.


Alignment

Keeping a consistent alignment contributes to visual unity within an element. Designing around a common axis makes elements appear related. A bunch of paragraphs with the same alignment look like they're part of an article, not just different bits of text thrown together, and end up looking organized and cleanly positioned.

Multiple alignments just require more effort to form a connection, and it's just overly better to avoid spending time doing that.

Consider how a grid can play a role in alignment as well. As limiting as a grid can feel to a new designer, it offers a solid foundation for you to align a wide range of elements onto a single grid. Consider the Squarespace website below:

Notice how the simple three column grid turns a page that's chock-full of information into a neatly designed, well aligned page that feels unified. Not bad right?


Proximity

Proximity is another concept that contributes to the overall unity of your design. As you push elements closer, they are more readily taken in as one. In an attempt to create an analogy, I could only think of the following, if you had a bunch of sheep together in a field, they might be called a herd. However, if they were stationed in different fields, you might not instantly recognize them as part of the same mob (and yep, that is a correct collective term for sheep). Perhaps a more fitting analogy would be to look at two people waking down the street, laughing and talking together. Because of their proximity to each other we can guess they have a previous relationship of sorts.


Notice how even dissimilar shapes (the squares) feel unified in the center, whereas the circles on the outside appear to lack unity even though they share the same shape.

As we come to apply this to web design, it's not too different. The closer the elements are together, the stronger the relationship that the user recognizes and the better the unity it creates. If we step back for a moment and appreciate that all unity really means is the interaction between elements, we can recognize that a stronger relationship correlates smoothly with the level of interaction, and by that extent, unity.


We instantly recognize that these people have some sort of preexisting relationship, purely because they are together. Hopefully you agree that they look like a family and, if so, what other indication is there other than proximity?

Visual Direction

We have a great article here at Tuts+ on visual direction and how it can influence a design. In a nutshell, it is the theory that we can influence a specific direction of a user over a webpage by tailoring our content to that goal. To some extent, we can utilize visual direction in this scenario to help influence users to move on to another element naturally.

I'm maybe pushing it a bit here, but by introducing this type of manipulation, we can push together the elements of a page to create stronger bonds, so you glide seamlessly between each one but hit all of the areas the designer wants you to see. This relationship can be used in context to draw the user's attention to another story on your webpage, or possibly to continue reading down a page. You could use the concept to encourage, subconsciously of course, someone to look and interact with the tweet button, or the "Add to Cart" one.


This is an example used in the visual direction article. Notice how the subject of the image influences the user to look in the top center. We can use this in web design to try and make the elements of the page flow together seamlessly.

Consistency

Consistency in your web design is a basic principle that contributes to unity. A football team wouldn't go out and play in shirts with a different color per player. Instead, they are united as a team with a single design that represents their brand (or in this case, a team).

Consistency is achieved by trying to keep the style of similar elements the same, and relates to themes like color since they are the very factors that create successful consistency. To achieve it, there's not much to do other than sticking to a scheme throughout your elements.


Conclusion

Unity just makes things feel connected and together by making them look like they should be. A website is a website, not a navigation bar, and a sidebar, and a logo, and a piece of content. No, instead, it's one thing that we visit: a website.

However, if we have too many colors and fonts, or the items are pushed away, or the alignment differs inside your text, the bonds are broken and it doesn't feel connected any more. You may ask, though, why should my design need to be unified? To put it simply, it means that the user does not need to process each element, or each page, every time they encounter a new one because it's recognizable. It also enhances the journey across a page since the menu does not look like it's in a different territory to the content.

Related Posts
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Web Design
    Interface
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…
  • Web Design
    User Experience
    Best Practices for Designing Effective Banner AdsAd effective retina
    If you’ve ever been online — which, if you’re reading this, I assume you have — you’ve probably encountered a banner advertisement or two. These typically come in the form of a prominent image on the page, although the exact size, positioning and content can differ drastically.Read More…
  • Web Design
    Design Theory
    Building Visual Hierarchy into Your DesignsDsfd hierarchy visual retina
    It’s important to remember that hierarchy has not only to do with content and the words that you have on a page. The imagery you include in your designs, from photos through to icons, buttons and any other visual elements other than text, has a big impact on the hierarchy and perception of your website.Read More…
  • Web Design
    Design Theory
    Building Consistency and Relationships into Your DesignsDsfd relationships retina
    One key part of composition is understanding how to build consistency into your designs and how to display the relationships between each of the elements on the page.Read More…
  • Web Design
    Design Theory
    Using Alignment to Improve Your DesignsDsfd alignment retina
    Alignment is one of those things that comes hand-in-hand when working with grid systems. The subject of alignment isn’t simply a matter of choosing whether or not you want to align text or images to the left or right of a design (though those decisions obviously still matter), instead, we employ alignment to improve our designs. Proper alignment in your designs will make them visually more appealing and will also make it easier for users to scan over a page, sub-consciously also offering a calmer reading experience.Read More…