Design Fundamentals and The Golden Section Rectangle
Sorry guys, i’m gonna say it… being a designer isn’t about being able to use photoshop, illustrator, fireworks or whatever tool, knowning the creative suite, doesnt magically make you a designer. You can be the best photoshop monkey in the world, you can tell me what every single tool in the photoshop pallette does, every layer blending mode is backwards, but this won’t make you a designer or help you when designing, sure your be able to create some fun effects, but it won’t help you with layouts or typography. Photoshop, illustrator, fireworks are all tools, only tools, just because you can hammer a nail into a piece of wood doesn’t make you a carpenter. Part of being a designer is knowing design basics… a fundamental set of rules that will help you when creating a layout or design, and you use these tools for which ever medium your designing for… its the same set of ‘tools’ for designing a poster, a website, a book cover.
Enter “The Golden Section Rectangle”
The Golden section rectangle is a system used to create layouts that relate to the ‘Divine Proportion’ – 1:1.618 a number found in nature and all living things. We can use it to create proportions that humans find naturally pleasing. it is also very close to the rule of thirds which we use in photography to compose images, and in web design for simple layouts.
So how do we create the Golden Section Rectangle… Time to fire up your favorite tool – photoshop illustrator or whichever graphics application you like, or even ‘go old school’ and whip out a pencil, sheet of paper, ruler and compass!
1. Begin by creating a square, draw a diagonal from the center of the square to the top right corner. this diagonal becomes the radius of an arc that extends beyond the sqaure.
2. Using the far right edge of your arc, create your new rectangle – you’ve now created your golden section.
3. Now create a line from your bottom left corner and take it to the right top of the last rectangle you created. You can now use the intersecting lines to create you smaller golden section rectangles.
4. We can now subdivide up the the golden rectangle to have smaller golden rectangles section within by creating squares where our lines go from corner to corner and intersect, you can go on infinitely getting smaller and smaller until you run out of space…. but we won’t do that…just saying you could if you wanted to. See diagram
Looking around you, you’ll start to notice the Golden section everywhere.
Take the apple website for example… I like to use apple as the example as they are renowned for the design aesthetic of their products, you’ll see the Golden section applied across their website. By laying the Golden section rectangle over the top of a design, we can start to understand how the designers put it together.
Look at the way the main image is composed; the hand fits snuggly into one of the proportions of the rectangle, and it also happens that the space between the navigation and the teaser boxes has also been determined by the height of the Golden section rectangle. Notice also that the far left corner of the ipad directly intersects with one of the horizontal line of the golden rectangle… coincedence? or ninja design skills!
We can see the teaser box has also used the golden section to layout its contents.
Another part of the apple site, look how the eyes of both people in the image hit dead on the lines of our golden section rectangle
the same image with the rectangle flipped, we can see the designer also used it to determine where to place the typography, and also frame the main image nicely. Why is apple design so great, why is apple always upheld as a benchmark of good design… because the designers know the rules and when and how to apply them and when to break them! Every piece of apple design is well thought out and put together.
It’s all around us, books, magazines, Eurpoean architecture, product design. See if you can work out a way of using the Golden section rectangle in your next design.
Would you like to learn more about graphic design Ninja skill?
If you are interested in learning more about graphic design then please contact us here.