Astheria.com is now an archive and is no longer updated, you can find new writings at kylemeyer.com →


08 15 2007

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

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.

SubtractionFigure 1a: Subtraction

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.

AppleFigure 1b: Apple

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.

Proportion

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:

CodaFigure 2: Coda

Panic does a great job of using proportionally sized elements to assign not only a visual hierarchy but meaning among them. Beginning with the logo for the product (1), then moving down to the three ‘calls-to-action’ (2) which are tied together by size and relational aspects (such as the icons to their left), and finally headlines and important bits of text (3). Combined with a very unified design this page is a joy to just play around on (especially if you’re a sucker for well done javascript user-interfaces).

Rhythm

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.

DiggFigure 3: Digg

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.

A List ApartFigure 4a: A List Apart

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.

GoogleFigure 4b: Google

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

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:

Okay DaveFigure 5: Okay Dave

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.

Conclusion

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.

Forty-three

Responses

  1. Very interesting article you’ve got there. After reading, I’m seeing more and more of these principles become apparent to me as I visit different sites. I wonder if I can use them at a cocktail party. *thinks*

    Keep up the good work! I’m looking forward to those coding articles :O

  2. how about simple and clean concept?

  3. Great Article
    Now I feel the need to view all the pages of my site with the new perspective you have shown.

  4. zoel: Simple and clean concepts are more of a style of design, and commonly fall under minimalism. However, they do share some emphasis on certain principles, using white-space or lack of clutter to help create dominance, and establishing a rhythm in the placement of elements rather than graphical textures. So the trick is really looking at different styles of design and seeing how they create such styles through the combination of different principles.

    JSeen & Choco: Thanks for the kind words. :)

  5. Very good summery of the basics of design. I like the use of other designs to illustrate the concepts your talking about. Well done.

  6. Like the article! But you mispelled “subtraction” in the proportion section.

    -e

  7. First time here. Nice design. Clean, easy to read just as a site should be. As I am just starting out on website design it is nice to see someone who thinks as I do. Clean and easy. I’ll be back.

  8. Great article. I love the use of examples in conjuction with revisiting the basic principles of design. The Web is definitely lacking in good design primarily because many “web designer” don’t have a solid grasp and foundation in traditional graphic design.

    This is the kind of article I’ve been looking for and since I’ve been out of school for awhile, was definitely the kick in the butt I needed to get my designs back on track with the basics.

  9. Fantastic article. Great examples! Bookmarked!

  10. Hey … I just wanted to leave a comment/question about your current design … when you have a longer article like this one, my eyes were a little uncomfortable reading it with so much white space on the left distracting me

    its fine at the top where you have the meta-data on the left , but have you tried playing around with the layout, keeping the same proportions, but shifting it slightly to the left so that when you scroll down the blocks of text are centered ?

    if that ruins the balance at the header and footer.. maybe the ’subtraction’ example with the random X can be applied

    these articles are great and i really like simple touches you added to decorate the text

  11. You know, I have to agree with yazan: reading a long article is a bit difficult with the off-center presentation of the main content. I’m not sure this is a significant problem, but I subconsciously noticed the same effect. Maybe I’m used to seeing primary content columns on the left versus right-hand side of the page?

  12. Matt and yazan: It is something to get used to, and Matt you hit it right on the head:

    Maybe I’m used to seeing primary content columns on the left versus right-hand side of the page?

    If the content was situated in the left hand column, even though it would still be equally off-center, you would feel more comfortable simply because it is what you would typically find on the web. It’s a simple matter of something being slightly unsettling because it’s not what you’re used to.

    I find this setup optimal as far as ensuring that readers see the metadata and extra navigation to the left before they begin reading the content, rather than afterwards (something that I may discuss in a new article). A famous design that also uses this appearance is that of Andy Rutledge if you’re interested in seeing further examples. I think I’ll address the issue further in the next blog post, thanks for the idea. ;)

  13. Reading through this fantastic article, I’m awfully reminded of studying about Gestalt principles in a recent usability class.

    The various Gestalt principles have concrete applications in designing web interfaces that users can just “get”. I guess many of them are along the same lines the ones you mentioned. For example, the law of similarity contributes to the establishment of rhythm on the page. And the law of proximity says that if you put things close enough to each other, people will treat them as one coherent unit on the page. For example, Digg’s upper navigation.

    I really hope more web designers learn about these principles in order to create a more systematic and proven methodology for web design.

    Oh, and by the way, CODA is just one of the most beautiful websites I’ve seen in a while. I spent 5 minutes just browsing the site for fun, since I’m not a Mac user. Simple eye candy!

  14. Great article, very eye opening.

    Along with Yazan and Matt’s comments, I just wanted to add that if you shrunk the white space on the left a little more, you could possibly minimize your paragraphs a bit more. I had to scroll up and down a few times because I couldn’t read your commentary and see the example at the same time (especially example 2 in Khoi’s dog). Aside from that, excellent work!

  15. Thank you for this article! Interesting subject indeed.

  16. Excellent article, Kyle. I’ve been meaning to give it a thorough read for quite some time and I’m really glad now that I have - it’s so important for people to take these basic principles on board.

    With regards to the main copy’s column width, I’m going to have to agree with Lonjee’s comment. I completely salute you on your use of negative space (and anyway, it’s all relative - there’ll always be more of it on a bigger monitor) but I too had the trouble of having to scroll back up to the screenshots to see what you were talking about. Again, because I completely agree with your design decisions, I think the simple act of widening your main container (at the moment it’s looking like a fairly tight 800px) will solve this problem.

    Again: great stuff. Keep up the good work!

  17. Fantastic article. It’s one thing to read explanations of these principles, but when you tie them to real life examples, they take on a whole new value. Hope to see more like this from your blog. :)

  18. great article! possibly, you could’ve used positive next to negative examples to add even more clarity.

    chris

  19. thanks, great post!

  20. Fantastic article. Nice design on the blog as well… super easy to read.

  21. hhresident: Thanks for the kind words, while it would be an opportunity to add further clarity I decided not to out of respect for other designers.

    Jesse: Honored to have you here!

  22. Thanks, you write decent articles . I learn lot with just few minutes of reading and pondering ..
    I really like how you explained the X mark on Khoi’s page. I always wonder why there is an X mark on his clean white page.. I found the answer here.

  23. Excellent article, amazing work!

  24. Top article; always good to illustrate with examples. Guru status should be attained shortly!

  25. excellent article - I’ve wondered why most web pages are so lame visually, compared to print media like magazines this is precisely the reason why I think because so called web designers, sure some can write code but they have no clue when it comes to actual design

  26. Excellent article. I’m just starting to learn grid-based web design and how to better balance all the elements that make up a good design. There’s a whole lot more that goes into it than people may think!

  27. great post. thanks!

  28. You touched on some great points. These tools used correctly, and combined with a great idea are an unbeatable combo. I think this is a great article. Easy to understand, and has useful information.

    garrett

  29. Another great article. Wish I’d found your site sooner. Keep up the great work. Thank you.

  30. Great post, very informative stuff. There are just some design elements that should never be overlooked when designing a site.

  31. I have enjoyed this article very much but could u please go further, may be put some more designs just for practical comprehension.
    couldnt read everything may I know who wrote it.
    Thank u.

  32. I never really appreciated these subtle design features in websites… thanks for sharing.

  33. Great analysis of the different aspects of a well structured web page. I will link back to our blog http://www.grafitat.com.

  34. Thanks for sharing.. really useful tips. Thanks again. Vitalia

  35. keep it up

  36. Thanks a lot for this article. Last time I was trying explain project manager in company what is symmetrical and unsymmetrical balance. He couldn’t understand, after this reading I think a will try again with positive result :-)

  37. Hi Kyle,

    I found your site for the first time this morning and (kids permitting) I’ve been going through it ever since.

    I really enjoyed this article your explanation of how design works is really refreshing against the more common (style-drenched) articles you find across the web.

    I particularly liked your point on Rhythm, something I think is easily over looked for the more picturesque areas of website design but, possibly one of the more important elements of layout design.

    I just want to thank you for taking the time to write all you have written here. A very useful resource indeed.

    Ste

    P.S.
    I don’t know if you changed the design, since the suggestion were from 2008 but I had no problem with the site and reading it. I liked the white space - gave the article full attention

  38. Feel the music in design, I like it! The web is mainly in square shapes, now I realize it, I wasn’t aware of that.

    Thanks for this article.

  39. A brilliant article and some handy comments. I love the use of white space to create a simple and yet brilliant design.

  40. it a good article on how to design and i love it.

  41. Very informative thanks.