Design Melt Down: Study the Principles of Design

According to Lisa Graham the basic principles are emphasis, contrast, balance, alignment, repetition and flow. All design is built on these basic blocks, and the more thought that is put into those elements the better the design will be. It seems that design goes astray when this is forgotten. By returning to the fundamentals we can refocus our eyes and minds when producing design.

• Emphasis

Emphasis is defined as special importance or significance. In many ways emphasis is closely, if not the same as, related to hierarchy. Basically emphasis is the analysis of a site's content in order to determine what the hierarchy of importance the content has. Once this is determined a design can be created that carries out these goals. One great method is to list all of the elements required on a page in order of importance. Then, design with that in mind so that the visual hierarchy of the page reflects the determined importance. One reason this is so important is to avoid an attempt to emphasize everything. Remember, if one tries to emphasize everything, one effectively emphasize nothing.

Sample 1 - Zedmo

The Zedmo site is a nice example of emphasis. Patrick McNeil has placed numbers over the elements of the page to order them in terms of the hierarchy and emphasis he perceives in the page. In this case, the order starts at the top and works its way down the page. Physical location plays into hierarchy and the elements at the top of the page have a greater weight. In this case, the top most element (the logo) has been sized such that it stands out, making it the most emphasized element on the page. The logo also has the highest contrast on the page, which further emphasizes it.

On the Zedmo site the brand name is the most impactful element on the page. This is great in terms of stamping the name and image on the users mind. Being remembered on the web is a difficult task. The second key element of the page is the sign in & sign up section. It is of the utmost importance to sites such as this to get people to sign up. In this case the sign up link is heavily emphasized. In fact, the sign up block closely competes with the logo for the most visual dominant element of the page. It could easily be argued that this is in fact the real number one element on the page.

Finally, one can find some supporting copy and secondary tasks for the site at the lower section of the page. The designers of this site clearly understood the goals and purpose of the home page and designed it appropriately.

Sample 2 - Oaktree Creative

The Oaktree Creative site is a bit more complex when it comes to hierarchy and emphasis. Part of the difficulty in determining hierarchy on this site lies in the close similarity of so much content. But there is a hierarchy at play here. First and foremost the central white band of content pops out. This is the largest text on the page, it is near the top of the design, it spans the entire width of the page and it is the highest contrast section of the page. All of this makes it pop out.

The difficulty comes after this stage. McNeil's perception is that number two is the logo, and then the tabs. In terms of brand consumption this is a nice order of business. First we get a snippet of what they do, then we get the brand reinforced, and finally we are given a set of options for navigation. A nice flow in terms of visual consumption.

The bottom three columns of data come in last place. But even inside of these 3 buckets we can see a hierarchy at work. The text at the top of each is larger and creates an order.

Again, the order of emphasis on this site follows a logical progression of important brand messages to less significant clutter of content.

Sample 3 - Spine

The Spine site is most defiantly one of the more complex examples of this principle. In this case the large text at the top easily gets the most emphasis and therefore the number one slot in the hierarchy. The simple statement is powerful and connects with visitors on an effective level. It is a great start for sure.

Things most definitely get more complex from there. Second in the hierarchy of the page is the main chunk of content. It's close proximity to the most emphasized part of the page helps make it more dominate. The larger font size helps as well.

Clearly the third most dominant element is the image to the right. If only because it is the only image on the page and easily draws attention. From there it jumps back to the left of the page and continues down.

The order of emphasis on this page might not flow in the most common of paths, but it ultimately works. One neat thing to note about the design is how when going from 3 to 4 one can easily get caught back on number 1. This really helps to beat that message into the viewers mind.

Conclusion

Designers should map out what is most relevant and use it as a checklist before they declare a design complete.

• Contrast

Contrast is simply the visual differentiation of two elements. Elements with strong contrast look distinct, elements with low contrast appear similar or blend together. There are many ways to achieve contrast, some of these include: color, size, position, font choice and font weights. Through contrast a site design can have visual variety, and avoid being stale. It is also through contrast that focus can be achieved, there by addressing the need for emphasis on certain elements.

A key purpose behind contrast is to implement the hierarchy of a page and enforce the desired emphasis. Contrast can be used to draw attention to the most important elements of a page. Things like the content, action items or purpose statements. Depending on the needs of a site, the designer can choose to draw attention to certain elements though the deliberate control of contrast.

Sample 1 - Studio 3k

The Studio 3k is a great example of a common sense approach to the use of contrast. The design of this site features a very logical approach to the use of contrast. By playing into the strengths of contrast and the natural order of things the site makes no attempt to force contrast to achieve difficult tasks.

Above all this site uses position combined with contrast to establish hierarchy. The hierarchy of the page rather clearly goes from top to bottom. The top most elements of the page are first in the hierarchy and the steps just go down from there. It most certainly took some time for the designer to tweak the design to ensure this happened. A little to much contrast here or there and all the sudden this order would change and the viewers eyes would bounce around the page.

Lets start at the top of the page where the highest contrast part of the page is found. The bright white logo stands out on the gray background. This reinforces the brand of this design shop and helps its logo and name stand out. A wise thing considering the vast selection of design shops.

The next band of content we find is a simple purpose statement. The white background of this section helps to establish a more powerful contrast. Especially when combined with fairly large and dark text. The photographs are also the largest in the page and overlap the section above it. This type of contrast has been leveraged to effectively focus users attention on an important element of the page.

Below this white section is the final third of the page. At the top most portion of this section we find the third level of hierarchy in the page. Again we find the use of color contrast, in this case blue on gray. Additional larger type has been used to help draw attention. This image serves as a header to the 3 columns below it and are visually connected to them by being placed inside the same gray section. This is important because it helps keep the user from wandering off. If the visitor has made it that far down the page with out clicking on something, the 3 columns provide a host of links that might be of interest.

It is easy to see how the top down approach of this sites simply makes sense and plays on visitors natural top to bottom motion. This creates a really clean and effective design that doesn't leave the user confused or lost.

Sample 2 - Clear Function

Clear Function is a great example of the use of contrast in a more complex way. For starters their home page is very content heavy and with out the use of contrast all of it would run together and be impossible to scan. By careful usage of contrast they have reduced the overwhelming nature of so much content and made it far more manageable.

One of the first things McNeil notices is the large bold purpose statement across the top. Several elements give this text an increased contrast that ultimately makes it stand out above the rest of the page. The text is larger then any other text on the page, even the main logo. It is also white on dark, where as the main content chunk is dark on light. Also, it contains the only green text on the page. The green is echoed in other smaller parts of the page to unify things. The prominent placement at the top of the page also gives it more weight and plays nice with the need for greater contrast. All of these things basically give this chunk of text the first order of hierarchy in the page and ultimately the most emphasis.

From there the eye is drawn in several directions. But each section has effectively used contrast to direct attention. For example the main content text is the only part of the page with text set on white. This makes the container of this text pop out the page. This is a really nice way to help avoid content overload. The side bars for example has quite a bit of text which combined with the main copy would cause a visual meltdown. Instead these side bars are far lower contrast. One has dark gray on light gray text, the other light gray on dark gray. Both of these are very low contrast and don't draw the users eyes as easily. The copy in these chunks is also smaller, further contributing to this order of things.

Notice how in the main content region the article headings stand out very nicely. This vastly increase the scanability of the page and makes for a much friendly presentation.

Conclusion

Contrast is a tool all designer use, whether they think about it or not. The trick is to remember to put some thought into the contrast of the page. Contrast is one of the most powerful tools in the quest for effective hierarchy.

• Balance

The principle of balance revolves around the idea of how the elements in a design are distributed and how they relate to the overall distribution of visual weight. Balance is all about how elements are distributed on the page and the way this affects the stability of the page. As elements are grouped together in a design they create visual weight, typically this weight must be balanced out by an equal and opposite weight in order to achieve a desired balance in the design. Not doing so results in a design which feels unstable. The idea is that a balanced designed is more appealing and creates a subtle notion of stability. Well balanced designs are often very comfortable and appealing.

Symmetrical Balance

The first method for accomplishing balance is through symmetrical design. This is when the design of a page is mirrored on some axis and the two halves have identical visual weights. Typically in web design this is when the left and right sides are split vertically and each side has an equal weight. 

Sample 1 - Mobile Web Design

The Mobile Web Design site by Cameron Moll is a perfect example of this. It is fairly obvious that the split is split on a vertical axis and is reflected in equal weight on each side. The site has a very nice balance to it that feels incredibly stable.

The real beauty of this site is that the balance doesn't just feel nice, it is actually really functional. The purpose of the site is to promote an ebook about mobile web development. As such the central image of a mobile device helps to clearly establish the purpose of the site. This image is the central focus of the design. When combined with the high contrast page title the image instantly lets the visitor know what the purpose of the site is. There is no fuzz on it. From there the hierarchy turns to the two side bars which contain all the juicy details the reader will no doubt want.

Sample 2 - Rebuilt World

The Rebuilt World site clearly has a symmetrical balance to it. The simple grid of images is centered on the page as are the other elements in the design. While this layout is not extraordinary, it is extremely clean and comfortable. In this case the central focus combined with high contrast helps the main logo and title to really pop out. It is important to remember that with symmetrical design the center points become the focus of the design and ultimately have the most weight to them. This makes the space prime real estate for a high location in the hierarchy of the design.

Sample 3 - HBC Web

While the Bill Share site has a side to side balance to it, it also has a vertically oriented version of symmetrical design. If one were to split the page along the axis the left and right arrows are on one would find that the top and bottom halves reflect on this axis. The horizontal band across the top containing the logo and tabs is reflected in the band along the bottom containing three large images.

While this sort of balance is not necessarily overly obvious, it does serve one key role in that it effectively frames the content with a top and bottom. By doing so the visitor is encouraged to bounce up and down in the site and focus on the content. Instead of having an overly heavy header or footer, they are just enough to frame the content. Thus the focus is subtly placed on the contents of the site. A very nice balance indeed.

Symmetrical balance is actually relatively common in web design. Especially in home page design. Dozens of examples can easily be found of this type.
Asymmetrical Balance

Asymmetrical balance is achieved when the visual weight of a page is equally distributed on some axes but the individual elements of these halves are not mirror images. That is a really complex way of saying that asymmetrical balance is a result of the use of dissimilar elements to create an overall balance. 

Sample 1 - Green Renaissance

The Green Renaissance site is a fine example of asymmetrical balance. In this case the very heavy green column on the left is balanced out by the combination of the header and two columns on the right. In this way the entire right side of the page is viewed as a single element. What this does is allow the left bar to easily be the most prominent element and occupy the focus of the page. Users eyes are easily drawn to visually heavy elements which contain less content. The weight of this side bar has been balanced out through the unification of the remaining elements so as to create a visually appealing design that is nice and stable.

Without such a balance the weight created on the left side would feel awkward and unstable. Resulting in a less appealing design. The lack of appeal would be subtle and hard to identify, but the subtle nature of design is not to be underestimated.

So in this sample, asymmetrical balance has been used to not only create a comfortable design, but also to establish hierarchy in a page and control the user experience.

Sample 2 - Further

The Further organization which specializes in online marketing has a web site which demonstrates the idea behind asymmetrical balance very effectively. In this case the axis of symmetry is dead center and runs vertically as most samples of balance do. In this case the left side contains more images which stand alone with a lot of visual weight. Each of these is balanced out as a group by an equally heavy set of content. In this way the right side is richer in terms of depth creating a weight as a whole. While the left sides beefy visuals create an equal weight.

The neat thing about this sample is how the left side is simpler in terms of ease of consumption and thereby creating a hierarchy in the page. And yet the visual balance of the page is maintained. So again balance was used to establish both a unified design and a hierarchy within the page.

Conclusion

Balance is one of the elements of design which tends to come naturally. And yet at times, it can still be overlooked. McNeil find that one way to tell if a design is balanced is to step back and squint at the design. If it feels like it is falling to one side it is probably unbalanced. Another strange thing is that designer tend to attach a lot of designs at the top of the page and let everything hang down; McNeil refers to this as a curtain style site. In contrast many sites (and some of the above) consider the entire vertical balance of the site. This is most defiantly more difficult to do, but is still an important thing to consider. This is perhaps most true on home pages where one can more easily control it.

McNeil find this hanging from the top approach interesting considering how unstable it really should feel. In painting a lot of thought often goes into creating triangles with a flat base along the bottom (aka Leonardo da Vinci). These triangles provided a stability to the works. Somehow in web design designers have inverted this and it feels ok.

• Alignment

Alignment is quite simply the arrangement of elements in such a way so that the natural lines (borders) created by them match up as closely as possible. By doing so these elements become unified and form a greater whole. Without being aligned these elements tend to fall apart and lack the unification designers so often seek out. A perfect example of this is having the tops of two columns line up, or the left edges of a series of stacked elements align with each other. When examined carefully, well aligned pages can present rather complex interactions among the elements of the page.

The primary reason to focus on alignment is for unification. Often times a page which somehow doesn't feel very sharp simply lacks alignment. Sometimes McNeil gets so focused on each section of a page, the header, content and footer, that he forgets to look at how they interact in terms of alignment.

Those charged with the task of taking designs and turning them into code should be particularly aware of this principle. As a design is translated into reality it often becomes more tedious and difficult to replicate the alignments established in the original design. Not only is it tedious, but it is often easy to not even notice and perhaps forget about. As developers an awareness of design on this level can really help in the translation process.

Sample 1 - Progressive Design In Motion

The Progressive Design In Motion site is a fine example of alignment. This site is a perfect example of how an underlying grid can help create a unified approach. Imagine if this content heavy site didn't make liberal use of alignment. The result would be a chaotic hard to read page. The grid of the page not only serves to unify it visually, but to also increase the ease with which the page is consumed.

Another interesting point about this site is how the designer broke the grid. Take the logo for example. It would have been really tempting to find a way to make it fit into a single column. But would that have improved the design? Not really. Also, look how the main nav items overflow from one column, but don't fill the second. Again, forcing this to live in a single cell of the grid would have probably just made it harder to use. So in this way the site not only demonstrates the power of a grid system, but also the appropriateness of breaking it.

Sample 2 - Poccuo

The Poccuo site is yet another demonstration of the usefulness of basing a site design on a grid for alignment purposes. In this case the grid has been followed to an extreme. And yet, it doesn't feel forced. Perhaps that is the differentiator. Don't force the grid when it needs to be broken, but follow it when it should. How is that for ambiguous advice.

What McNeil really love about this sample is how the content fits into the grid. At the top of the page the content is large and occupies the full width. As the page goes down the content grows in density and the subdivisions of the grid become smaller. Consider the principle of emphasis in this case. The order of hierarchy in the page follows the page from top to bottom. This couldn't possibly play into the natural order of things any better.

Honestly the beauty of this site speaks for itself. And the power of the grid could not be more obvious.

Sample 3 - Rob Goodlatte

In this less extreme sample, the Rob Goodlatte site demonstrates the principle of alignment in a more typical situation. The home page of this site is designed such that the side bar ends at the same place as the main content column. This simple feat means that these two chunks form a whole. The grid is even extended to the footer, there by unifying it with the design. The end result is a design which doesn't feel pieced together, but rather built to be one solid unified chunk of content.

• Repetition

This principle the focus is on how elements of a design are used more then once throughout a design in varying ways. By doing so designs that contain such repetition become far more unified. This repetition can come in many forms, things such as: color, shape, line, fonts, imagery, theme, or just an overall approach to style. Repetition is an inevitable design principle. If no elements in a design are repeated it typically lacks a unified and cohesive feel.

Sample 1 - Lets Fax

This sample makes use of repetition in pretty obvious ways. And yet, it is still worth talking about. Overall the design of this page is rather simple, and pretty straight forward. No over the top design going on here. But there is a richness to the design, an overall aesthetic that feels soft and cozy, a design which feels unified and clean. In this case repetition has single handedly unified and elevated the design of this site. Rounded corners in this case have been used over and over to bond the page together.

The main frame for the content had rounded corners. As do the main buttons, sub containers and numerical highlights. Even the logo and font choice is all based on soft rounded corners. Clearly the designer consciously chose to unify the page through the repetition of such an element.

The service this site offers is simple and straight forward, as is the design of the site. No cheesy stock photos. No goofy fax machine cliches. Just a simple straight forward design which is nice and cleanly designed.

If instead of rounded corners the designer had chosen the typical pointed ones, the design would feel more typical or default and would simply not feel nearly as sharp.

Sample 2 - Ed Did It

This site is of course another demonstration of how to effectively use repetition. In this case the use of it is not necessarily what makes the page such a grand success, but it certainly is an element of the design which makes it successful. It is obvious of course, but the curly brackets on the side elements echo the same treatment in the logo. This simple, semi graphic element, unifies the bare bones page in such a way so as to give it a much more designer feel. Without these simple little brackets, the design would feel very bland. It is truly amazing how such a small element can be make the difference between success and failure.

Sample 3 - Bandpush

The Bandpush 07 site is an interesting example. In this case the usage of repetition is somewhat hidden, or at least it is a less dominant element of the page. Sure the bold yellow headings repeat each other and from a glance visually unify the page. But what really pulls the page together is its rich use of texture and distressed design. The wooden background fits well with the worn and tattered paper. Every element of the page has been worn and battered to visually unify them.

Sample 4 - iMarc

Another less obvious approach can be found on iMarc . Here repetition has been used in terms of layout. Well sure color has been repeated, but a 3 bucket layout has also been repeated. In the header we find 3 main elements. Then we find two bands of 3 elements. It is these repeating chunks which manage to give the page an overall unified feel.

• Flow

Flow is simply the path a users eyes take through a design. This is primarily a result of how elements like emphasis and contrast are used. In fact, flow is entirely the result of how other elements are put together.

One thing to always remember when considering flow is the natural order of things. There have been studies to determine where eyeballs go (eye tracking study) and it is pretty clear that people tend to work in a rather predictable fashion. Typically things go from left to right and top to bottom; with some variation in there of course. This is why a web site that is right justified feels so funky to us left to right readers. Nothing wrong with doing so of course, designers simply must understand the implications of such decisions.

So selecting sites based on flow is a really tough challenge. Every site has flow, good or bad. So ultimately designers have to determine what defines good flow? McNeil have settled in on this: Flow that feel stable, comfortable and as natural as possible. It can be complex, but it must feel natural and comfortable so that one doesn't feel like he/she is bouncing around the page like a pinball. Now of course the eyes naturally do bounce around, but a site with what McNeil considers good flow will encourage him to take a nice stable path.

Sample 1 - Rikcat Industries

McNeil has superimposed over this first sample site what he believes to be the visual flow of the site. Certainly this is a matter of opinion, but McNeil believes that he has fairly accurately assessed it. This site is super clean and has a pretty much minimal approach to it. As such it is pleasing to see that the flow of the site has been setup so as to resonate with this style of design. The focus starts just where we expect, the top left, and flows down from there, making its way to the right column, and finally the footer of the page. This natural progression follows a patter found all over the web and merges our expectations with our natural tendencies. Nice and easy on the eyes making the site rather easy to consume.

Sample 2 -

The Mark Boulton site presents a bit more complex solution to a similar situation, and yet it retains an easy to use model. The extreme emphasis placed on the main tag line forces the user to start their visual exploration there. The natural tendency is to flow down from there and the next most emphasized text is directly below the tag line. This flows to the right side and finally to the bottom where the sheer quantity of content draws the viewer downward.

This sites flow is not quite the "standard" approach, but it is still very effective. Clearly the focus is on making sure you get the main theme of "beautiful, simple design." In fact, the overall feel of the design reflects the mantra, even more supported by a nice and comfortable flow.

Sample 3 - Kineda

The Kineda site presents a slightly more complex flow then the first two. First the bold red open sign grabs the users attention. Intentional or not, this is the boldest element on the page, and it is prominently placed at the top. So it simply grabs one's attention. From there the mass of images and copy in the top block draws one's attention as one filters through the mass of 8 topics. This section is easy to get lost in. This is not a bad thing, it is actually a bit of feat to have a block of 8 articles like that and to actually capture one's attention in such a way that one can't help but look through them. McNeil find himself not skimming them as much as he typically would. From there the large ad in the lower right quickly draws his attention. Ads are the sort of thing one wants to give enough priority to so as to make them valuable, yet not so high a priority that the content takes second stage. Then again, McNeil guesses it depends on the style of site one is running. Finally the users eyes scan the bottom section and swoop back up to the headline.

Sample 4 - Golden Apple

This final example has a much richer complex looking design then the first two examples, and yet it retains a very simple and clear flow. This is again mostly related to a through analysis of emphasis and an effort to carry out such goals. The reason McNeil finds this sample encouraging is that it is more typical of how sites tend to look. Not in a particular style so much, but just that there are lots of container stuff, tabs, links, lists etc. And yet, it is so simple to scan and consume and the eyes find a pleasant path through the content.

Conclusion

Certainly this is one of the more subjective topics, and only actually testing would show where users eyes go in these designs. Designers should keep in mind the natural tendencies of viewers and how they might consume the designs they create.