Unity means that a congruity or agreement exists among the elements of a design; they look as though they belong together, as though some visual connection beyond mere chance has caused them to come together.#

I often think of unity as being the overall aesthetic of a design. The thing that makes people sit back and say, “I like this, but I’m not sure why”. The reason is usually due to visual unity and harmony of the design. “Everything just sort of clicks and works.”

Visual Unity

…you must first see the whole pattern before you notice the individual elements. Each item may have a meaning and certainly add to the total effect, but the viewer must first see the pattern as a whole, rather than merely a collection of bits and pieces.#

I find a lot of design on the web nowadays gets this wrong. Sometimes very wrong. Many websites have a tendency to slap elements on the page in a haphazard manner. It’s often hard to attain any sort of visual unity when everything on the page is competing for your attention. A fantastic example of visual unity can be found on Web Designer Wall. Nick La manages to create a design that is visually-striking while maintaining a sense of unity. Paying special attention to unity is particularly important while dealing with either large amounts of information or particularly complex designs. If your website is overblown with information, or hard to understand, you run the risk of exhausting your viewers. Do not do this.

Proximity

An easy way to gain unity—to make separate elements look as if they belong together—is by proximity, simply putting the elements close together.#

The technique of using proximity to create unity is ideal when working with navigational elements on a page. By placing the elements of a navigation near one another you create a hierarchy which is easy for the user to digest and interact. Those among us who have been using the internet for any length of time have come to expect certain conventions when dealing with navigation. The use of proximity is one great way of ensuring you do not disappoint. Using proximity to call attention to a certain area of a design can also be very effective.

Repetition

…something simply repeats in various parts of the design to relate the parts to each other.#

Repetition is extremely important on the web because  people will be navigating from one page to the next. If each page maintains a sense of unity, repetition will make it much easier for them to discern the new information from the old. Also, when the information is defined it is simple to tell which parts are content and which are part of the overall aesthetic. For example, if each of your pages have a slightly different placement of the navigational elements, the logo, or contact information you’re asking the user to reprocess everything again and again. This can cause them fatigue. Steve Krug has many fantastic examples of this in his book Don’t Make Me Think: A Common Sense Approach to Web Usability.

Continuation

Continuation, naturally, means that something ‘continues’—usually a line, edge, or a direction from one form to another. The viewer’s eye is carried smoothly from one to the next.#

Many people running websites are deathly afraid of The Dreaded Scrollbar. I would argue that if you’re using the technique of continuation when designing your pages you should not be afraid of expecting your users to scroll a bit to gather more information. Notice I said, “more information”. I feel that the most important information should be at, or near, the top of a page. That does not mean put everything ‘above the fold’ because, ultimately, this is the Internet and there is no constant ‘fold’ like on a newspaper. The following website for Jax Vineyards illustrates this concept perfectly. Not only did they make sure to include the call to action (in this case “Buy Wine”) high up on the page,  they also used the product to draw your eye down to scroll through important content. Brilliant.

Continuity

…a visual relationship between two or more individual designs.#

Continuity and repetition are very closely related when it comes to creating unity on the web. When you navigate from the homepage to the “About” page does the logo stay the same? What happens to the navigation? Have you changed the background in any way? All things to keep in mind when designing the flow, or information architecture.

Grid

…a network of horizontal and vertical intersecting lines that divide the page and create a framework of areas.#

I am a big fan of using grids while designing. It may just be the left brain getting in the way of the right brain, but I find the message of a page can be made much clearer when the elements have their place on the page. I find using a grid to define the relationships among elements helpful. It can allow me to step outside The Box since the foundation has already been established. Grids also help create unity because many times you define the boundaries and you will not be tempted to completely change them on a whim. An example of this would be  navigating from my homepage to my blog. You’ll find the basic grid remains unchanged. The main content and sidebar of the page still exists in the same spot. No need to reinvent the wheel here. You are just giving some more information, not knocking socks off with something experimental.

Conclusion

Truth be told I could stand to pay more attention to these techniques when designing my websites, there’s always room to grow. Never stop learning. If you keep all these things in mind when designing, redesigning, or working with your website then you will be much better off. Unifying your website design is a great first step in creating something truly spectacular.

Reference:
Design Basics by David A. Lauer & Stephen Pentak

Tweet