great website design

Composition is crucial in composition. But you don’t need an “artist’s eye” to wow viewers- just follow these timeless techniques!

By Kendall

We all know how important it is to create stellar image composition.  But you don’t have to have an “artist’s eye” in order to wow your viewers—just follow these timeless techniques to ensure that your designs are spot-on every time.

The rule of thirds is commonly used in composition today, but the concept has dated back some 2,400 years to ancient Greece with the mathematical discovery of the golden ratio.  Without getting into the nitty gritty of the equation, it shows that asymmetry and a 1:3 proportion are aesthetically (and scientifically) pleasing.

Nature abounds with the golden ratio, as you can see from the nautilus image above.  My sketch on top of it further demonstrates the ratio.  First, you see the outer rectangle with a geometric arc that intersects at pivotal points to create a spiral.  Looking closer, you’ll notice that the outer rectangle is cut in two, giving us a square and another rectangle.  The ratio repeats itself again and again in each rectangle, leading eventually to a “sweet spot,” where the rectangles grow smaller and become more concentrated.

There are a total of four sweet spots in the golden rectangle, depending on how you first begin constructing it—think about where that spot would be located if you were to flip this image horizontally and vertically.

It’s a good idea to keep these sweet spots in mind when framing and editing images.  I’ve posted some of my own images below to show how the rectangle can be applied to photographs to make for some easy editing.

Boat

Notice how your eye goes directly to the boat in the sunset.

Golden Ration and Flower Image

You can see how the rule of thirds influences web design even in basic blog layouts.  When we designed our blog, we created a two-column theme to maintain order and minimize distractions away from the actual content.  A two-column theme also allows for larger image sizes, and this site is (obviously) going to be graphically-focused so we need all the space we can get! In terms of the rule of thirds, you can see that our sidebar column takes up around a third of the page layout.

The rule of thirds and the golden ratio are important philosophies to remember when framing images, but don’t let them override your own creative spirit.  There will always be exceptions to the rule, but as I learned long ago, you have to learn the rules before you can break them.

Related Media

  1. Free Photoshop Texture: Graffiti No. 2
  2. The Roundup of Roundups
  3. Cool Fonts: Calligraphy Fonts & Wedding Fonts
  4. Weekly Blog Stats Review: 07.11.09-07.17.09
  5. Organize your Photoshop Brushes

Comments

  1. Jason
    10.16.09

    … I also find myself torn between the coffee shop and my dual monitor setup :)

  2. Cyndi Hall
    11.04.09

    May I suggest ABR Viewer as an alternative to loading and trying each brush in Photoshop? It’s free, and I use it regularly. You may find this a great time-saving alternative!

    http://abrviewer.sourceforge.net/

    Hope it helps!

  3. Kendall
    11.04.09

    Thanks for the referral, Cyndi! I’ll have to spend some time tonight trying it out.

  4. 4elves
    02.11.10

    I love you to pieces man!!

  5. Lia
    10.14.10

    I wished and wished for a Mac, then was given one at work.

    So I moved all my files over.

    I HATE it. I’m a designer. I have about 50 folders for 50 different projects. I name the banner psd “banner.psd” for all of them. Try and search for them all, yeah the Mac finds them but then you have to do “get info” for each one (or change some such setting and still click on each to see where the dang thing is located. On windows. I glanced at the path to the folder and voila. Yeah changing permissions on Vista is a headache but it’s far better than the constant problems I have on the Mac. Photoshop is twitchy at best, the thing crashes, although my Roku, PS3, Wii, personal laptop all do fine with my wirless, the mac drops it all the time. I use multiple monitors. Oh my god what idiot thought of leaving the application menu on one screen when the application is on another? You can only choose one little sprout because Steve Jobs knows better than you how you should work.
    can’t wait to ditch it.

    sorry tirade over.

    ps tons of free windows applications out there.

  6. Obcali
    11.26.10

    Um… how about not naming all of your files the same name? Sounds more like an organizational issue than an operating system issue, either way.

    I might recommend using an identifier and THEN _banner.psd? I assume it’d be difficult to find photos as well if every picture on a drive had its own folder and was named “photo.jpg”.

    Examples:
    Projectname_size_banner.psd
    Clientname_size_banner.psd
    etc…

  7. Russell
    04.17.11

    Ok, so… I’m a total newbie to photoshop. I have CS5 and a brickton of brushes. I have tried renaming them, but they do NOT show up in the list like I want them to. I’ve played around with it for like a half hour. Can anyone please help?

Leave a Comment