Design is broken up into a number of basic principles that apply to all design from type creation to painting to page layout, both on the web and in print. However, especially on the web, these rules tend to be forgotten and we just go with what feels “right.” This isn’t because designers are feeling too loose to abandon these rules, but rather, most people working on the web don’t even know they exist – if they do, they don’t understand how to use them.
If you’re unfamiliar with the five primary principles you may wish to read a semi-brief overview that gives a bit of background on each characteristic. Rather than discuss what each principle is, let’s look at how they relate to design on the web:
Balance is a tricky beast. There are two types of balance, symmetrical and asymmetrical. Nearly all of us are familiar with symmetrical images, most of us probably made some sort of paper cut out as a child and unfolded it into a perfectly symmetrical result. While symmetrical balance is easy to detect (things appear as mirror images), asymmetrical balance is less noticeable but seemingly more important.
Figure 1a is a prime example of asymmetrical balance in multiple places. Notably, the main banner image of Khoi’s dog, Mr. President. The placement of the dog leaves a lot more black weight on the left half of the design, this is balanced by the seemingly random ‘X’ on the wall to the right (1). This small addition creates a sense of balance that almost makes you feel as though the dog was centered in the banner when he really is not.
While the banner represents a bit of graphical balance, there is also some asymmetrical balancing occurring in the masthead of the site (2). The menu bar again, is a much heavier weight in its size and color. However, the narrower rule above the Subtraction logo and top most content uses the negative space above and below it to create a visual balance between the two. It lends the areas in white above the menu bar the same visual weight as the black navigation bar beneath it.
Symmetrical design, while a simple concept, can be surprisingly powerful.
Apple, kings of simple modern design use a completely symmetrical layout on their front page. As you can see in Figure 1b, each element is reciprocated on the other side of the half-line, creating a simple visual harmony.
Choosing the right size for elements extends beyond merely selecting a solid readable size for your body content, or the width of your columns. Proportion bleeds into balance and domination, which are both largely based on the proportions of certain objects. One example is the site you’re reading now, where one of the two columns (the right) is larger and therefore implies its importance through this. If the content was placed in the left hand column and meta data in the right, you would initially have to react to the meta data not being the content you’re looking for.
While some people prefer to use regimental grids that are all of the same width, such as Subtraction (featured in figure 1a), others prefer to use time tested proportion ratios as I have here on this site with phi representing the larger column (1.62 times the size of the left column).
Proportion can also be used to simply assign importance to elements on the page:
Rhythm on the web is something that primarily resides in data. It is especially important in sites that contain long pages or vast amounts of information. Digg falls into both categories, and also is a prime example of rhythm through repetition.
Digg creates a starting point in the header with its horizontal navigation establishing reader direction (1) and then immediately falling into the main content, which is identical for each article. This creates a consistent rhythm that the user subconsciously follows (2). This technique is repeated in the sidebar for the top 10 articles.
A good way to think about rhythm in visual design is in the same definition that comes to mind in music. Every design has a bit of a visual pulse depending on where you are on the page that either invites one to quickly read through information, pause on an interesting image, or guide them to the download button. A site that is too consistent in its rhythm may suffer from all of the elements on the page throwing an equal amount of weight around - leaving the user dumb struck as to what they should be looking at or where to find what they’re looking for.
Too much variance on the other hand can leave a page in chaos, this is usually obvious from a point of unity (discussed below). What is important is that you establish consistency within certain sections of your site as demonstrated above at Digg. Each section has its own internal rhythm depending on its purpose but as a whole the entire page is unified and everything instantly has meaning simply based on color, shape and proportion.
Dominance (aka Emphasis)
There is nothing more powerful in design than a circular shape, especially in a world of rectangles such as the web. A circle commands attention simply by shape. It doesn’t need to be especially vibrant in color or white-space. This power is part of the reason that your eye is commonly drawn to the plethora of badges that became popular recently, but the best place to harness this power is in the logo.
As you can see in Figure 4a, A List Apart is using not one, but a pair of circles to give dominance to their logo (1). This is reinforced by the issue number badge adjacent to it. You’ll note that a few smaller badges are used on the right hand side (2) to draw the eye to the t-shirt sale.
Another way to achieve dominance is through the use of white-space and/or color. These can be combined with shape dominance, but rarely would you ever need to combine all of them, one or two is usually plenty. The use of all three can create an almost irresistible impulse to look at the object, and makes it difficult to devote attention to other parts of the page, typically the main content.
Google uses both white-space and color dominance to pull the eye to the primary area of the page (1). The colorful playfulness of Google’s logo combined with the amount of white space that surrounds this area forces your eye to focus there immediately. Google uses this not only to reinforce their brand, but as your eye naturally flows from left to right to new line, you fall right onto the input box for your search term and next to the main search button. While Google may provide superb results for searches; the key to their success on the web is their ease of use being inbred by basic visual tendencies.
Unity is open to much more interpretation. Unity is something that truly is a feeling of everything tying together to create something of a whole. There aren’t elements that don’t fit in with the mood or feelings of the design, unless that’s a recurring theme. A great example of unity is the portfolio of Dave Werner, where every page of the site features hand writing, push pins, and all the manner of other things that all tie together to make for a feeling of unity. There is nothing that feels out of place and everything shares the same style:
Even his portfolio pieces, which as separate entities should feel different, are overlaid with notes and sketches; bringing even these aspects of the site into the design of the portfolio. There’s nothing on the site that you wouldn’t expect to see thumbtacked to a wall of projects.
While you may not be a design guru (I know I’m not), hopefully you picked something up among these examples that will assist you in creating a design that can enforce the visual hierarchy you desire and actually guide the user’s eyes across the page in the way that you intend. Without these elements you get nothing beyond frantic searching, even if your design “looks” right. The principles themselves are all very simple, but as designers we always need to be aware of them.
Have more examples of certain principles? An expanded opinion? Leave a comment.