4 Quick & Easy Design Theory Tips

Oftentimes you can create a snappy design that just doesn’t seem to work – it looks nice and all, but there’s something about it, something you just can’t quite put your finger on, that stalls it dead in it’s tracks. We’ll explore four areas that may just solve the problem… or at least help you get pointed in the right direction.

1. Contrast

If something has strong contrast, it means it stands out better from the page, or from other items on the page. In a nutshell, contrast works something like this:

As you can see illustrated above, the most common way to increase contrast is through colour (black on white works better than light grey on white, for example), through size, or through other treatments. But it can also be done visually by reducing the number of items that compete for attention and putting the primary focus on the main stuff although this might apply a bit more to websites or ad pages that have many items, or where the ‘real estate’ is more valuable and more information is presented at one time.

It can also be applied to type treatments, the size of the item in question, and even something as small as line thicknesses.

A good rule of thumb is that if they are not the same, make them markedly different.

However, there should always be a measure of consistency with what contrasts you use for certain areas on the page — simply, don’t jumble up your contrasts to such an extreme that some content is harder to read or it hurts your viewers’ eyes, and keep contrasts the same (or very similar) in given sections of a page.

Contrast is key to differentiating among sections of your website, as illustrated:

2. Repetition

Repetition aids in the understanding of content (visual or written) through organization. Repeating these elements not only helps the viewer to understand their relationship to each other but also to the page as a whole (and subsequently understanding relative importance within the page) as well as its importance within the site. Knowing what importance to put on key areas helps the viewer organize the content in his mind.

Defining key elements through repetition makes the experience coherent and unified — whether the experience is browsing your website, reading a brochure or looking at a business card.

For example, if we were to style all copy on the page at the same font size and weight, we’d certainly have repetition but there would be no sense of importance on key areas. (see Contrast, above as well) We’ve learned to style redundant items like navigation, footers, etc., to be a certain size and weight and other areas to be ‘heavier,’ visually. This marked consistency in the former areas comforts the viewer by telling his brain that these items are unchanging and reliable (important for navigational elements) and the content can have his attention without needing to re-examine each page every time it loads. In this example, we use repetition to our benefit and it aids in navigation and understanding. It wouldn’t work that way if every single item looked the same. (unless, of course, our site, by design, needs to be this way — in which case we find other, more subtle ways to inform the viewer of primary and redundant areas) The greater the similarity between or among elements, (typically) the more gravity is given to subtleties, as shown below:

These subtleties would be lost on a busier, more graphically intense site but work well on these sites that are already a bit minimal to begin with. For example, on Amazon.com these subtleties in main navigation would be missed more often than not and that would result in a drop in sales volume and revenue for the company. Individual elements of good design, as illustrated, compliment itself as a whole.

Example

Notice how the Amazon index page breaks up information and content sections using good use repetition for each component or type of item:

3. Alignment

Each item or element on the page should not just be placed at random. This doesn’t mean that every single item must be aligned with every thing else, or even aligned with something else — but should contribute to the coherence of the whole. What you’re looking for is a visual connection between or among the elements on the page.

Alignment can help increase an item’s visual weight on the page, and therefore the importance the viewer puts on it.

This can be used to increase contrast as well — pull quotes are a great example of how bumping out of regular alignment can draw attention without throwing the user’s train of thought. By aligning more strictly most items on the page (or redundant items like navigation) and letting a main feature pop out of this alignment, we are contrasting that item with the others on the page, and thereby increase it’s visual weight and the importance the viewer puts on it.

Example

Take a look at how Amazon accomplishes this on their product info pages (I pulled up Simple Minds “Graffiti Soul” album):

4. Proximity

It goes without saying that if we have two related elements on a page (eg: a picture that accompanies an article) we want to keep it close by it’s article, and preferably close by the part of the article it relates to specifically.

Proximity is one of the key ways we determine relationships and organize information.

For example, some business cards have both a business name & number and a personal name & number. Nowhere on the card does it specifically say that the number under the business name applies to the person, and the number under the person is the generic business number. We know, by their proximity, that if we dial the first number we’ll reach the front desk and if we dial the second we’ll reach the person whose name is on the card.

Example

Take a look at Amazon.com again. Notice the bottom links and screen size information for the two Kindle models:


We wouldn’t think for a second that the screen sizes would apply to anything other than the Kindle models they are shown under, respectively. The power of proximity is one of suggestion. Without actually saying two pieces of information are connected, you are able to reduce visual clutter and present material more intuitively.

Items placed closer to the primary content on a site we know are related to the primary content or are at least of greater relational importance to that content. Relevancy is implied by the proximity of one item to another: We increase the likelihood of a relationship the closer these items become.

It’s Design Theory

It’s important to understand that these are principles of design theory — common sense, if you will. They aren’t hard and fast rules, and sometimes we can bend a principle a bit more on one project than we do on another. It’s all in the design at hand. That said, it’s really about common sense although sometimes having a good eye for this type of stuff can make a big difference.

These four principles are a good starting point to break down any design and see if it needs to be tweaked or worked with a bit. And it’s easy to remember (work out the acronym for yourself :D)

Here they are again, simply:

  • Contrast
  • Repetition
  • Alignment
  • Proximity

Practice & Have Fun

With each of these four principles in mind, grab a small notebook and spot areas in common visual designs that can be tweaked or worked with – whether they’re your projects or not – and write down ways they can be improved. After a little while, it’ll be like second nature looking at things this way and you’ll also notice an upgrade in your own design work.

Guarantee Pass 1z0-047 exam with help of 000-085 practice questions and 000-974 test engine.

Have fun!

Derek has been passionate for design since childhood and more recently has designed & developed for international projects, as well as written about social ethics and design for several digital magazines. He lives in New York with his family, two cats, vintage Italian espresso maker. You should follow him on Twitter & read his blog, ThisIsInspired Magazine.

19 Comments
  1. Reply Chris Thurman January 12, 2010 at 3:21 PM

    Revisiting the basics in theory is always necessary. Even veteran designers need this. Great post!
    .-= Chris Thurman´s last blog ..Wet Logos: Showcase of Logo Designs Featuring Water =-.

  2. Reply Tom | Build That List January 12, 2010 at 8:22 PM

    A lot of designers miss theses points. Especially contrast!
    .-= Tom | Build That List´s last blog ..RSS Subscribers VS Email List | Which Is Better? =-.

  3. Reply Ben January 14, 2010 at 9:30 AM

    Good post -I like the’crap’ at the end – thanks for the design theories
    .-= Ben´s last blog ..Win 100 Free Postcards – Competition =-.

  4. Reply Car Tuning January 15, 2010 at 10:15 AM

    I’ve printed these out and pinned them up in the office! Hopefully this will have a beneficial effect on our output.

  5. Reply Konstantin January 18, 2010 at 11:15 AM

    Very informative, thank you sir! And picking Amazon as an example is awesome, haha! And yeah, this is totally common sense, I agree. Thanks again!

    ~ K.
    .-= Konstantin´s last blog ..E-Commerce: Google Checkout Store Gadget =-.

  6. Reply alone January 20, 2010 at 8:13 PM

    Great Post!! Thank you!!

  7. Reply Leon January 21, 2010 at 10:49 AM

    I love this post. Makes me aware of the meaning of things we usually do instinctively

  8. Reply Derek Land January 21, 2010 at 6:36 PM

    Thanks for all your comments! I agree they might seem like common points, but it’s amazing how the obvious things are sometimes missed by even the most experienced one of us.

    :)
    .-= Derek Land´s last blog ..When Someone Says… A Guide to Rebuttals for the Freelancer =-.

  9. Reply SM February 9, 2010 at 7:25 AM

    Great tips! Thanks
    .-= SM´s last blog ..????? ??????????? Blogger (Blogger in Draft) =-.

  10. Reply waterman March 2, 2010 at 6:40 PM

    Very Good information,I have Digged this site to my list for future and will keep a eye on your other posts.

  11. Reply Christa Schuner March 16, 2010 at 7:47 PM

    thanks this helped me a lot

  12. Reply giri May 11, 2010 at 4:54 PM

    thnks alot for the valuble basic lessions of desigining… :-))

  13. Reply Club Penguin May 15, 2010 at 8:52 PM

    Nice post. Have you ever considered web design? It’s really growing.

  14. Reply Club Penguin July 12, 2010 at 10:01 PM

    Yes! Great lists! Its funny how new designers dont even understand these basic principles.

  15. Reply Trina Colon @ homes foreclosed las vegas July 13, 2010 at 9:03 AM

    This would really help my web blog thanks for sharing this one – I’m really bad choosing or emphasizing some important words on my blog, now I think after reading your blog, I would likely enhance and review my blog to make some alterations.

  16. Reply Career Outlook August 15, 2010 at 3:19 AM

    Excellent post, I am newbie and I don’t understand these things. Thanks a ton for this informative post.

  17. Reply France Dayne August 28, 2010 at 4:08 PM

    Thanks for this, it’s something I hadn’t thought of and will certainly take a look at.

  18. Reply Orlando Vacation Hotel August 10, 2011 at 9:11 PM

    Thanks for sharing! These are some excellent tips that I will be attempting to implement into my new designs.

  19. Reply Template Design November 25, 2011 at 9:06 AM

    Very informative, thank you sir! And picking Amazon as an example is awesome, haha! And yeah, this is totally common sense, I agree. Thanks again!

Leave a Reply