First, let’s talk about composition…

Your web site is similar to a photograph in that it is a 2 dimensional representation of 3 dimensional subject matter.  How your information is arranged in its design can have an impact on how your message is understood and reacted upon.  Let’s take a look at three rules…

  1. Rule of Thirds
  2. Golden Section Rule
  3. Diagonal Rule (also referred simply as leading lines)

Rule of Thirds

Strong composition relies heavily on proper balance of visual information, taking into account all elements within the area of view.  For a web site this means that all elements of the page relate in some way to each other.  Sometimes they relate well, and sometimes they relate poorly.

The rule of thirds refers to the balance of the visual information on your page.  You want to arrange your visual elements according to this rule, for example:

rule-thirds

www.colonialjewelers.com

This rule is as it sounds, a rule dictating that a layout is divided into thirds horizontally and vertically.  When you mark a page like this you can see how the information relates to those areas of the design.

You almost never want to completely center something as it will be the only thing that the eye is drawn to.  It is better to offset things using the rule of thirds so there is a better balance and the eye is led through the all of information on the page.

Golden Section Rule

This rule refers to the intersecting areas in your rule of thirds grid.  These are what we would consider prime real estate, especially in the top intersecting areas of a web page.

golden-rule

www.colonialjewelers.com

In the example above you can see that the main bits of information exist within or close to those intersections…

  1. Tagline
  2. Main Product Shot
  3. Contact Information
  4. Company Overview

Having these elements located in the zones is certainly important but you will want to be aware of how the eye will move across the page.  Remember, most people read left to right.

Diagonal Rule(also referred simply as leading lines)

This rule really brings it all together.  You have arranged your information in the appropriate areas of the page; now add design elements that lead the eye around the page.  These elements are referred to as leading lines.  They are shapes, shades, negative space, lines, etc that are added to the design to lead the eye from one area of information to the next.

The eye will naturally follow a pattern.  Because of this you can lay out your design using spatial arrangements and patterns to direct the eye towards the information that is most important.  This will eliminate the visual clutter that may get in the way of an effective delivery of your web site’s message or call to action.

leading-lines

www.colonialjewelers.com

Using our same site, you will notice three elements I have labeled that are considered to be “leading lines”:

A. Subtle design elements – in this case effects meant to mimic that of the inside of a jewelry box – that draw your eye down and to the right towards the product links

B. Negative space that pulls the eye toward the contact information “floating in the lower corner”

C. And a ring set at a very deliberate angle pulling the eye up and to the left toward the logo

At first glance you would think these things were done simply to enhance the look – when in actuality these were done in an effort to lead the eye to very specific elements of the message contained within this.

In other words, let’s look at the A, B and C example again:

A. Look at our products

B. Give us a call or stop in our store

C. Look at our logo

We hope our lesson in composition has helped you to understand the importance of design in messaging.  You have a message to deliver, make sure you are very deliberate and targeted in how you deliver it.

Wood Street co-founder and partner, Jamie has more than 14 years experience designing web sites and interactive media. He served on the Greater Frederick Advertising Board for more than 4 years and has been a proud member and judge for the International Academy of the Visual Arts. His role has transitioned into Creative Director but he still uses his design skills and knowledge to create award winning web sites. He earned his Bachelor of Fine Arts in Graphic Design from Frostburg State University with a minor in Art History.