There are many ways to create balance in a design and using odd numbers of elements is an easy way.
The Rule of Thirds
The rule of thirds is a photography principle of composition. It also plays a large role in one of the principles of design: Balance.
If you think about how photographers have taken your portrait over the years, you’ll notice they always put your eyes about 1/3 of the way down the photo. Some photographers do place the top of the head here, which, in my opinion, is less interesting… who cares what the top of your head and the background above it look like! We want to see your face!
Odd Creates a Nice (A)symmetry
When you use odd numbers, both in grids and in visual elements on the canvas, you create a nice sort of symmetry with asymmetry; one object is directly in the middle, with an even number of objects on either side.
Odd Adds Visual Interest
I use odd numbers particularly when creating my grids for layouts. It makes placing elements much easier if you have nine spaces and four points where the weight of the composition should rest.
By dividing up the space of a composition before you start laying down elements (text, images) into three parts, both horizontally and vertically, you can better achieve a visually balanced layout.
To get you started with a grid, divide your page into three areas, both vertically and horizontally, then head over to Using the Grid and The Grid in Practice for further explanations on using the grid system in graphic design.
Triangle Composition
There is another way to use thirds and that is creating a triangle composition. Many movie posters use this concept and since writing on this subject, I’ve seen that it’s often used in cinematography. The idea is to either have three main focal points or to compose the layout in such a way that the main content is in a triangle. This example was pointed out by Soap on the GFXVoid forum and it’s an excellent one!
Examples
Take a look at this example (it animates, but sometimes it doesn’t work in FireFox, no clue why): On the left is an element place directly in the middle of the page, on the right, it is placed in the lower right hand corner. It looks ok in the middle, but doesn’t it look so much more balanced in the lower third of the composition? The white space is evened out by the opposing dark circle. This gives the layout a comfortable visual weight and makes a solid, yet pleasant statement.
Most people take vacation shots with the people smack in the center. Next time, try putting the people off to the side in one of the thirds. For these particular types of shots, not only are they more visually appealing, you’re also allowing the people and the interesting landmark in the background to share the frame. Sometimes you’ll also get some cheek from your subject if you take too long to compose the perfect shot.
Websites often make use of three and five column layouts. We’ve already looked at A List Apart before, which makes use of the five-column approach and many blogs use 3 column layouts. This blog (at the time of writing, I’m using the Cutline theme) uses a three column layout; this text you are reading occupies two of the three columns and the sidebar is the third.
Did I miss anything important? Share it with us in the comments!
Want more instructional posts like this? Subscribe to the Creative Curio feed! You can also receive articles delivered directly to your inbox. And remember, with either subscription (both of which are always free), you also receive a free PDF of the essential Photoshop shortcuts that we’ve talked about here on Creative Curio!
Very well illustrated.
One of the first things I learnt when studying photography was to place people off-centre, and it’s amazing what a difference it makes.
Liking that animated .gif too.
David,
Thanks! It really does make a big difference for photos. I can always tell who was behind the camera when I look at our vacation photos (besides looking at who is in the frame). We vacation a lot with my folks and I’ve taught my mom how to take good pictures like this, too :D
What are some other places that a grid can be useful? I have seen grids used in font type character design. Any others?
Yeah I agree about the photography picture… I always get so annoyed when I asked other people to take a picture of me and my friends and its like just us - we could have been anywhere!
Great article! I always knew that I found 3s and 5s more appealing, but I had never thought of it with such solid rationale.
I keep seeing and reading things that make me want to design a WP theme to put all this into practice - typography, grids, creative use of footers etc. However, I’m reluctant to start because I don’t want to get too excited and rush it.
Perhaps if I do most of the coding first and leave the layout until later I might have it clear in my head. Hmm… sorry for the tangent! ;)
I like the grid model, but isn’t that something closely related to the golden section? Im not a mathmatician, so I can’t really answer this myself :-[
About the triangler position. I’ve seen that when you want drama or exciment, you should turn it 180 degrees, so it becomes unbalanced and thus making it look like the grid is toppling.
Dylan B,
You use the grid in everything! Did you see my other articles about using the grid? Using the Grid and The Grid in Practice will introduce you to the grid concept. It’s always a good idea to start your designs with that basic structure. While some feel it is restrictive, it actually greatly speeds up the process of laying elements down, gives uniformity to the design (especially across multiple pages or pieces) and helps the designer organize information. It may feel cumbersome and limiting at first, but once you get used to it, it’s your best friend! I’m so glad you ask questions. Keep ‘em coming!
Jacob,
Oh yeah, I know how that is. You’re either filling up the whole photo (which sometimes I don’t mind) or so tiny and smack dab in the middle that no one can even tell it’s you!
kristarella,
Isn’t it fun to realize that a gut instinct really has a basis in a principle like this? I have never design a WP theme, but it seems a little backwards to me to do the coding first… no? And getting excited is where all the fun is! Design it, but then sit on it, stare at it, put it away and tweak it for a bit before building. I seem to always come up with my best designs when I have the time to do that.
Esben,
Yup, you’re absolutely right! The golden section is another way to name this principle. Soap talks about it in his article on the forum I linked to above (next to the Star Wars poster). I haven’t heard that about the triangle layout, but I think it makes sense if done properly. There is a balance (haha) in making things unbalanced; it has to be with purpose, because the disequilibrium helps to get the message across.
Don’t worry, I’ll still be excited - just not too much so.
Actually I think it might be better practice to do most of the coding first. You already know what the important elements are: header, content, sidebar, footer and you know which template files you need because WP needs them. If you do all the PHP and HTML first, then you can get styling on it!
I suppose if you’re making a mock up of your site in Photoshop or organising the layout in another program you could do that first and then code, but you’d still have to do HTML before you do CSS (to a degreee).
I think this time I’ll start the PHP, then do a mock up and do the CSS. In the past I’ve yoinked the default theme’s PHP, but I want to do my own so I know exactly what is in it and can minimalise unnecessary code.
kristarella,
Oh yes, yes, I know that part. I have always done a mock up in Photoshop first, which always comes after thumbnail sketches
I think learning what code does what to minimize the unnecessary is a great idea. John suggested starting with Sandbox for the basic structure. Have you seen it?
Yeah, I’ve seen Sandbox and think it’s an awesome idea. I was going to use it before I found Copyblogger, but I didn’t because the code seemed a bit weighty. However, I’ve downloaded it again to take another look (it looks better than I remember).
I think I’d like to write my own set of template files, then I have some that I’ve done, and I can use them for new themes in the future.
It’s really the same idea behind Sandbox. I’d just like to think I’m capable of doing my own - not sure if I am capable of going from scratch yet!
It’s also a good opportunity to read up on SEO and other stuff and make sure I incorporate those principles properly.
kristarella,
Do you have a particular style in mind yet? Hand-drawn, Web 2.0, grunge…?
I know what you mean about wanting to know you can do it yourself. There’s a great sense of pride in that! Can’t wait to see what you come up with
I have so many examples of different styles bookmarked I’m not quite sure where to go! Maybe a cross between 2.0 and grunge… hard to say :P
great article, as usual, Lauren. Did you notice that mountain in the background behind you is shaped as a lion’s head? Very neat. Here in Vancouver, we can see two mountains that are shaped as lions, and we call them appropriately Twin Lions. There are many other things bear the name “lion”: Lions Gate Bridge, famous movie company Lionsgate Films…
Good luck with your websites design, Lauren and Kristarella. Look forward to see the final results.
Vivien (ib),
I didn’t notice that about the background! Cool! That’s Waimea Canyon in Kaua’i, Hawaii. It was so beautiful there! We didn’t see any real lions though ;)
One Trackback
[…] that would be worth reading by a newbie designer. Her category the basics include posts such as: Why Being Odd is Good: The Principle of Balance Create Some Space The Grid in […]