Design Fundamentals and The Golden Section Rectangle

Sorry guys, I’m gonna say it… being a designer isn’t about being able to use PhotoshopIllustrator, fireworks or whatever tool, knowing the creative suite, doesn’t 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 palette does, every layer blending mode is backwards, but this won’t make you a designer or help you when designing, sure you’ll 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… it’s the same set of ‘tools’ for designing a poster, a website or a book cover.

web courses bangkok learn web design photoshop illustration,golden ratio for design

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 favourite 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 square.

web courses bangkok golden ratio for design  learn web design

2. Using the far right edge, create your new rectangle – you’ve now created your golden section.

web courses bangkol golden ratio in design web design

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.

web courses bangkok learn photoshop golden ratio in design learn web design

4. We can now subdivide up 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

web courses bangkok learn web design golden ratio in design

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.

web courses bangkok learn web design golden ratio in design

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… coincidence or ninja design skills!

web courses bangkok learn web design  golden ratio in design

We can see the teaser box has also used the golden section to layout its contents.

web courses bangkok learn web design golden ratio in design

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.

web courses bangkok learn web design golden ratio in design

Then with 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, European 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 or any of our other courses then contact us regarding courses at Web Courses Bangkok click here.

  • Mike

    Typo – typeography should be spelt typography!

    • Carl Heaton

      Fixed, thanks for spotting for us! 😉

      • pandeybpo

        thank you for you kind list.

  • Denis

    Tons of typos, almost in every sentence: “fundementals”, “firweorks”, “proprotions”, etc.

    • Bill

      We fixed it.