Website Design: Page Anatomy and Layout

The Golden Ratio in Web Design

Dec 29th in Other by Jarel Remick

Math is beautiful. Does that sound a little strange? I sure thought so when I first started designing. Math is so rigid and often times boring, or so I thought. You would be surprised to find out that most aesthetically pleasing designs, works of art, objects and even people have math in common. Specifically the Golden Ratio, also known as the divine proportion, which is designated by the Greek letter Φ (phi). This tutorial will cover the anatomy and layout of a website and how the Golden Ratio relates.

PG

Author: Jarel Remick

I'm a freelance designer and web developer, an author and reviewer at ThemeForest.net, a writer for the ThemeForest blog and occasionally web.appstorm.net. When I actually manage to get away from the computer, I'm hiking, watching movies or spending time with my girlfriend in sunny Las Vegas. – View my net.tutsplus.com posts here.

Anatomy of a Web Page

The elements of a web page are like organs; they are vital to a properly functioning and aesthetically pleasing web page.

These are the main elements of a web page. There are many different ways to organize them but this is perhaps the most common basic layout used online.

Container

All web pages use a container and for the same purpose; to contain page elements, however the way it is accomplished varies. For example, the body tag or a div is most commonly used. In the past, even a table has been used (do not use a table as your page container, it is a depreciated method). Think of the container as the external walls of your house in which your bedrooms, kitchen, living room, etc. are then placed.

Types of container:

  1. Liquid: Expands to fill the width of the browser window.
  2. Fixed: A specific width you choose which does not change regardless of browser window size.

Header

The header isn't really a specific element although some may consider it to be. It is more generally used in referring to the top section of your web page where your logo, navigation, tagline, etc. are located. Many people prefer to keep these elements contained within a div for easier page styling, element separation and/or element containment. The header would be considered a container so it would have two types to choose from: liquid or fixed as mentioned above.

Logo

Your logo is your identity and branding. The most common placement for the logo is within the header, aligned left. We read from left to right, top to bottom, so your logo will most likely be the first element your visitors look at.

Navigation

Page navigation is one of the most important elements; your visitors need it to use your website. It should be easy to find and use, which is why it is almost always located within the header or at least near the top of the page. Sometimes both types of navigation are used for high content websites.

Types of navigation:

  1. Horizontal: A series of links displayed inline, usually referred to as "navigation".
  2. Vertical: A series of links displayed as a vertical stack, usually referred to as "menu".

Main Content

As everyone knows (or should), content is king! When people visit your site, this is the element they will be looking for primarily. It should be the main focal point of a web page so visitors find what they are looking for quickly.

Sidebar

The sidebar is the element with your secondary content such as advertising, site search, subscription links (RSS, Twitter, Email, etc), contact methods, etc. This element isn't necessary although many websites use it. It is most often right aligned but can be left aligned or both (two sidebars) so long as it doesn't disrupt main content viewing. For websites that use horizontal AND vertical navigation, the sidebar is often replaced with the vertical navigation element.

Footer

The end of a web page should always use a footer to let your visitors know they have reached the completion of your web page. Like the header, the footer isn't really a specific element but more of a containing section. Within your footer will be copyright, legal and contact information primarily. It's a good idea to include a few links to the most important sections of your site such as the top of the page, home page, contact page, etc. Some websites use this area as an opportunity to mention related material or other important information.

"Whitespace"

This is any area of the web page that is not covered by typography or other content. You may feel the strong urge to fill as much empty space as possible but don't do it! Empty space is just as important to a good web page design as the content to be used. You can see how the NetTuts site uses empty space very effectively to help guide visitors through content, create page balance and give a good sense of content separation.

So that covers the anatomy of a web page. Now lets take a look at how the Golden Ratio relates to these elements.

The Golden Ratio and Using Grids

Remember earlier when I said math was beautiful? We perceive visual appeal based on ratio (i.e. The Golden Ratio). For thousands of years artists, designers, architects, etc. have either intentionally or unintentionally used a common ratio in their work that is aesthetically pleasing. What is the magic number? 1.62 (actually 1.618...) I won't get into the origins of this number but I will tell you how to use it.

Using the golden ratio is very simple. Lets say you want to find the width of your Main Content and Sidebar columns. You would take the total width of your content area (we'll use 900px for this example) and divide that by 1.62. As shown in the example above we divide 900px by 1.62 and get 555.55px. We don't need to be exact so we will round it off to 555px. Now you know your main content element will be 555px wide and your sidebar will be 345px! How easy is that?!

But wait! The fun doesn't stop there. You can also apply the Golden Ratio to other element's width in relation to its height or vice-versa. This produces aesthetically pleasing elements with the Golden Ratio proportions.

Using Grids

If you're like most people though, you won't want to pull out a calculator every time you want to use this ratio. To simplify the process, we can use a simple grid. All you do is divide your width and/or height by thirds.

Each division can be even further reduced by thirds, producing a more detailed grid. If you read the previous article "A Close Look At the Blueprint CSS Framework" you will see that the Blueprint CSS framework uses a detailed grid system. Not only does the grid make designing easier and faster but also it creates an aesthetically pleasing layout! If you aren't already using a grid when designing, now may be a good time to give it a try. You can download a grid template for fireworks, photoshop and more from http://960.gs, which is another fantastic CSS framework that uses grids.

As you can see, NetTuts abides by the Golden Ratio quite well. The top one third of the page is divided again into thirds to show how even the header section breaks down into smaller increments of thirds, very close to the Golden Ratio. No wonder why the NetTuts design is so appealing!

If you're new to design I highly encourage you to find some popular sites, evaluate their element layout and how it abides by the Golden Ratio and grids. Then take some time to practice using the Golden Ratio with your elements and placing them in your layout using a grid.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    insic December 29th

    cool article. Golden ratio, hmmm how it differs to Divine proportions? or its just another term. Great Post

    ( Reply )
    1. PG

      jorge September 29th

      wao you´r beautyfull!!!

      ( Reply )
    2. PG

      Franqueville October 23rd

      Bravo et merci !

      ( Reply )
  2. PG

    Raymond Selda December 29th

    Great to see an article on using the Golden Ratio in Web Design. This would definitely be in my bookmarks!

    I once asked a designer who finished architecture and said that he’s not familiar with the Golden Ratio! I hope he’s kidding me! :-)

    ( Reply )
  3. PG

    Stephen Coley December 29th

    Reminds me of the movie Pi, which everyone should check out by the way. Darren Aronofsky is a genius.

    ( Reply )
  4. PG

    John December 29th

    @insic: They are the same. Search on Wikipedia for ‘divine proportion’, and you’ll be redirected to ‘Golden ratio’.

    Very nice article. Though I suggest everyone to read more about the subject, because it’s very interesting – both historically and mathematically.

    ( Reply )
  5. PG

    Andrea December 29th

    I find confusing that the descriptive pictures are above the title, no golden ratio for this? :-)

    ( Reply )
  6. PG

    Owen December 29th

    Golden shower… now that’s more like it.

    ( Reply )
  7. PG

    xQlusive December 29th

    Working with these grids makes life much easier!

    ( Reply )
  8. PG

    Ryan Nicholson December 29th

    Ahhh awesome way to approach the subject and apply such a cool theory! Well done.

    ( Reply )
  9. PG

    OXYLUS Stock Flash December 29th

    Good article, a fine read for the beginner web designer that needs to establish his bearings. These ratios do work, but they don’t necessarily fit any layout so guys, feel free to experiement :)

    ( Reply )
  10. PG

    Paris Vega December 29th

    I love it. Thanks for the simple formulas.

    ( Reply )
  11. PG

    DE December 29th

    The layout of this particular TUT, defies documentary logic. Put your graphical elements in the correct documentary containers.

    ( Reply )
  12. PG

    M.A.Yoosuf December 29th

    thanks, its a simple and summarized article on layouts

    ( Reply )
  13. PG

    Brenley Dueck December 29th

    Great article for those designers who are still figuring out the grid system. The rule of thirds and golden proportions are great things to keep in mind when designing a website.

    But as with any site, there are no hard and fast rules. Eventually you will get that knack.

    -Brenelz

    ( Reply )
  14. PG

    spyder December 29th

    960 grid system is my favorite find of 2008. It’s in every single web design I do now.

    ( Reply )
  15. PG

    Chris Robinson December 29th

    a great website dedicated to designing by grid systems:

    http://www.thegridsystem.org/

    ( Reply )
  16. PG

    Josh December 29th

    Nice tut! This will help me a lot for my jobs!

    Thanks!

    ( Reply )
  17. PG

    Ben Carroll December 29th

    This is what I hate, you just limited yourself. I really hate making websites in a defined rigid specification. Websites are a work of art and they shouldn’t be limited by a grid system.
    This is how innovative, and inspiring websites are made.

    ( Reply )
    1. PG

      Bina Nayak June 5th

      I totally agree with you. So many sites are blidly aping this and looking alike. At least in the early days of web design everybody tried to be different- even if some efforts were clumsy

      ( Reply )
      1. PG

        Taylor Satula June 11th

        Hey, clumsey is what got us to today. You need to start somewhere

      2. PG

        Haider Ali June 19th

        I just observed the above post. Although I also like the way “proportion” have been calculated and yup that’ all Math and “Math is beautiful” not a strange term at all, very much applicable at most of the part of web. However, Ben is also right and few of below poiint will give the clarity about the same:

        This terms is very useful for novice designer :-) and will give them good start to follow this, however, once they spent some time with this “proportion” they will get to know the “aesthetic” and once they are, Ben you could understand they will arise the same question you did.

        I hope this will help.

        In case you have any queries give me shout at @ haiderali10686@gmail.com

        Thanks
        Haider Ali

  18. PG

    macias December 29th

    nice article..i try to use 960 grid system

    ( Reply )
  19. PG

    crysfel December 29th

    i think this article should be at PSDTuts :o

    ( Reply )
  20. PG

    Zen Elements December 29th

    It is the basics I find a lot of people miss when setting out to create something new and this is a great post reflecting the fundamentals that should be taken into account for laying out a new website.

    I posted something a little while back about my business card too that adopts the Rule Of Thirds, as supposed to the Golden 1.618… Ratio. Those that read were quite taken back by it as it was not something they had considered so much in their own designs. Link to that post is here if anyone is interested: http://www.zenelements.co.uk/blog/rule-of-thirds-business-card/

    Thank you for the great post!

    Alex | Zen

    ( Reply )
  21. PG

    Janos December 29th

    I like golden ratio. It look very natural.
    I use google as calculator, because it kwos thing like the constant ‘phi’, which is the proportion number of golden ratio.
    So, if you want to divide 960px to two golden parts, you just have to ask goole:
    960 / phi

    ( Reply )
  22. PG

    Beto Arpi December 29th

    Such a great Article! I remembered my old days in University.

    ( Reply )
  23. PG

    Derek Vigil December 29th

    Great article! It pretty much sums up the Golden Ratio that I learned about in Art History. Every great artist in our time has had a strong comprehension of this golden rule.

    ( Reply )
  24. PG

    Drew December 29th

    A great refresher article and nice use of images to reinforce your point. Thanks for taking the time to write this!

    ( Reply )
  25. PG

    SOS Media Web Design December 29th

    Great! I’ve been secretly using the golden ratio in all my designs for years!

    ( Reply )
  26. PG

    dreamweaver December 29th

    This is going to sound completely weird but I had a dream the other day about someone writing an article about web design and connecting it to Michelangelo using the golden ratio. In the dream the term was golden mean and it was written by a woman.

    ( Reply )
  27. PG

    Max December 29th

    I developed a little tool which calculates the two other quantities for me when I enter the 1 I know. Let’s assume I know the width of the main container of my website. Then this program tells me how wide my content-area and my navigation-area must be in order to be in the golden ratio.

    Have a look:
    http://rapidshare.com/files/177988656/golden_ratio.xlsx

    Have a nice day!

    ( Reply )
    1. PG

      Haider Ali June 19th

      Hey Max,

      I checked it buddy and Yes you did a nice job.

      Thanks
      Haider Ali

      ( Reply )
  28. PG

    Dan London December 29th

    Great post. I was looking for something exactly like this to send out to a few clients.

    THANKS!

    ( Reply )
  29. PG

    kenduret December 29th

    I have a background in photography and have made good use of the rule of thirds while the internet was still in it’s infancy. It is a basic principle that every designer should understand thoroughly.

    It’s also fun to break the rules and achieve excellent results!

    ( Reply )
  30. PG

    Mason Sklut December 29th

    To be honest, I’ve never followed that rule. If you know what a good design looks like, it’s pretty easy to “guesstimate”.

    ( Reply )
  31. PG

    Jarel Remick December 29th

    @Mason Sklut – Not all people know what good design looks like and lots of people think they know what good design looks like but really don’t so this comes in handy for them.

    What’s funny is that you say you don’t follow this rule, but you’re still using these proportions which means you technically are following this rule only it’s being calculated buy what you brain thinks is appealing. :)

    ( Reply )
  32. PG

    Carl - Founder December 29th

    Hay, this is very useful. We will make sure our students check this out when they are learning web site design with WebCoursesBangkok.com

    ( Reply )
  33. PG

    Meshach December 29th

    Great article, thanks.

    ( Reply )
  34. PG

    Ahad December 29th

    E=mc2: Its as simple as that!! :-)

    @Zen Elements: I totally agree with you about the fundamental concepts. They are often overlooked and turn into confusion, which in turn leads to frustration or quitting..

    ( Reply )
  35. PG

    Paul December 30th

    The golden mean is a curious thing. I often wonder if we’re attracted to it like members of the opposite sex or like a dominant chord in music. Is the ratio beautiful or have we been bred to be attracted to it through thousands of years of conditioning. This ratio was used to built the Parthenon!

    Anyone making anything visual needs to be aware of this relationship. If a reader takes nothing else away from this article, it should be to pay attention to proportions in general. Many designs I see on the web today seem to hit balance by luck. Often as I work as a developer I see designs that work only as PSD files and fall apart as soon as they are put into HTML because hierarchy of proportion, or the grid is not responsible for the balance of the design, but the exact placement of one element is.

    One nit I would pick with this article is it seems to be pointed at this type of blog where layout is concerned. Most enterprise level sites are three-column layouts and employ the beat-to-death inverted “L” navigational layout. (if it ain’t broke…). This layout calls much more for 5ths and 3rds together.

    as for all of the hullabaloo about the 960 grid CSS framework… If you care about CSS/XHTML optimization, don’t use frameworks. Plus you end up designing for the framework not for your client.

    Soapbox over. Thanks for the post

    ( Reply )
  36. PG

    Moksha December 30th

    good artical, thanks for sharing

    ( Reply )
  37. PG

    Víctor December 30th

    Great article!! I have used the Golden Ratio and Grids in a Portfolio Theme powered by Wordpress. You can find it at http://demo.wpesp.com/portfolio/ or check the tutorial at http://wpesp.com

    ( Reply )
  38. PG

    kenroy george December 30th

    some great words of wisdom. good read!

    ( Reply )
  39. PG

    Entertainment December 30th

    ha, ha it is great work, nice

    ( Reply )
  40. PG

    Rick December 30th

    This is stupid. Most websites don’t use the golden ratio for proportions. Additionally, there is nothing inherently or especially good about this ratio from any other number of ratios; in fact, change detection requires at least a 10% difference to be noticeable. To presume there is one structural secret to making a well planned or aesthetic layout is asinine. May Darwin have mercy on your soul.

    ( Reply )
  41. PG

    John December 30th

    Hey, this is just like the theory that I came up with on my own, but I call it “John’s Super Dooper Design Number”. I wonder if somebody hacked into my computer or something and stole my notes to make up this “golden ratio” thing.

    ( Reply )
  42. PG

    Chris Mills December 30th

    Great topic!

    I’ve been researching this topic for a few clients and my findings are a bit different. Would you consider the aspect ratio of a computer screen and develop a new mean consistent with this format as opposed to overlaying a golden mean designed for fine art or other mediums? The golden mean helps determine not only the divisions, but the frame aspect ratio. Unfortunately, we can’t control that.

    Even though the two are related, The Fibonacci spiral may be better suited for web design, considering the screen ratio is a predetermined factor.

    ( Reply )
  43. PG

    MikeB December 30th

    Very nice tutorial! A nice pattern when designing web templates.

    ( Reply )
  44. PG

    Wazdesign December 30th

    1.62 .. yes its really golden ratio.. I hope my clients will love this . if they really understand ratio and technical terms ;)

    ( Reply )
  45. PG

    Dulce December 31st

    This reminds me of the Rule of Thirds in photography. Excellent write up. I love using 960 grid system.

    ( Reply )
  46. PG

    thenetguruz December 31st

    Very nice back to basics guide! I would like to add that Container can be center aligned or left in case of fixed width.

    ( Reply )
  47. PG

    Biz December 31st

    It is good to have guidelines of proportion, instead of wandering around. This article is a good example of web design basics.

    ( Reply )
  48. PG

    Ryan December 31st

    The hard thing with web design and divine proportion, rule of thirds, etc. Is the fluid layout.

    ( Reply )
  49. PG

    Ryan December 31st

    “To presume there is one structural secret to making a well planned or aesthetic layout is asinine.”

    I love ignorance. The golden ratio is God’s favorite number in creation … or evolution or mother natures, or whatever:

    Adolf Zeising … found the golden ratio expressed in the arrangement of branches along the stems of plants and of veins in leaves. He extended his research to the skeletons of animals and the branchings of their veins and nerves, to the proportions of chemical compounds and the geometry of crystals, even to the use of proportion in artistic endeavors. In these phenomena he saw the golden ratio operating as a universal law. (wikipedia)

    ( Reply )
  50. PG

    Andrew December 31st

    TIP:
    For people who don’t want to do the calculations use these 2 tools

    Grid calculator: http://www.29digital.net/grid/
    (Does all the calculations for you)

    Grid Maker (Photoshop plugin)
    http://www.29digital.net/grid/

    Take the values from the grid calculator and put then into the input fields of the photoshop plugin, and bam your ready to go! Creates the guides and everything for you!

    ( Reply )
  51. PG

    Josh December 31st

    Studies have shown that there is actually no preference in the human mind for objects with the golden ratio. Nice try.

    ( Reply )
  52. PG

    Abraham January 1st

    You guys should try this software from Designers Bookshop called Grid Calculator. Check it out here: http://www.designersbookshop.com/grid-calculator-buy.html

    There is also videos there of the software.

    ( Reply )
  53. PG

    Buzzlair January 1st

    Ive seen this kind of articles on Smashing Magazine. But Nettuts explanation is a bang! tho.

    ( Reply )
  54. PG

    Vishwa January 2nd

    its subtly presented…

    ( Reply )
  55. PG

    Alamgeer January 2nd

    very nice……

    ( Reply )
  56. PG

    serdar January 2nd

    1.62 is a good point.

    not only in web design maybe in interiour decoration also …

    ( Reply )
  57. PG

    Web Design January 2nd

    The quality of website design is determined by visitors spend time and their longevity with your website.

    ( Reply )
  58. PG

    Jason January 3rd

    Maybe that’s why this blog layout is so popular. Because it works.

    ( Reply )
  59. PG

    Keith January 4th

    Interesting article, the layout certainly makes a lot of sense when it comes to designing something that is user-friendly, easy-to-browse and SEO. Thanks for showing this tips.

    ( Reply )
  60. PG

    Me January 4th

    ‘deprecated’ not ‘depreciated’.

    ( Reply )
  61. PG

    Creative Writing January 4th

    You know, ever since I began redesigning my site, I’m trying to take more stuff like this into consideration, though not quite to the level you’re able to. Thanks for this article. I’ll try to incorporate some of your ideas into my design.

    René
    http://www.workingauthor.com

    ( Reply )
  62. PG

    Janko January 4th

    Great article for beginners. This is very important to understand.

    @Ben Carroll: I believe this is for beginners, and if they don’t understand the basics, they won’t be able to create art of it.

    ( Reply )
  63. PG

    Monica S. Flores January 4th

    Thank you! Great post. I have always wondered how a layperson understands a web page: breaking it down into these components will be helpful for clients who are trying to explain what they want in what part of the page.

    ( Reply )
  64. PG

    Jason Clark January 5th

    “As you can see, NetTuts abides by the Golden Ratio quite well. The top one third of the page is divided again into thirds to show how even the header section breaks down into smaller increments of thirds, very close to the Golden Ratio. No wonder why the NetTuts design is so appealing!”

    The Golden Ratio and the Rule of Thirds don’t really relate to one another.

    I agree that your site is split into thirds nicely, but I think you broke your 1.62 rule for separating your main content from your sidebar.

    Even if you used 1.62 in your main/sidebar example, you’re really only dividing your site in 1 dimension – X. The Fibonacci series of numbers divides things in both the X and Y directions. The series takes the current number and adds it to the previous number to get the next in the sequence. 1, 1, 2, 3, 5, 8, 13, 21 – thus creating a spiral. See link

    http://en.wikipedia.org/wiki/Fibonacci_Numbers

    Just more food for thought – would love to see an article on this. I tried sites (none up currently) that use this. The center of my “spiral” site was 1:1, second was also 1:1, then 2:2, 3:3, 5:5, then ending at 8:8. Created a rather nice layout, and presented an automatic hierarchy of information.

    ( Reply )
  65. PG

    Bill in Detroit January 5th

    @Josh \\ This design ratio is found in humans. Could be why some of us shoot each other, but others of us just make more humans, eh? Or didn’t your study consider this?

    My own blog is bug ugly simply because I don’t understand CSS well enough to implement this stuff. I want the header image behind the title but it won’t go there for me. Eventually it will … if I have to white-out half my screen!

    ( Reply )
  66. PG

    Rick January 5th

    “I love ignorance. The golden ratio is God’s favorite number in creation … or evolution or mother natures, or whatever:”

    Right, because I clearly expressed that I didn’t know what the golden ratio is. Thank you kind sage for your timeless wisdom. You’ll notice that there are tons of other ratios and constant numbers in nature. Perhaps we should all base our layouts on pi, or e. Hey why not just use i?

    My point is that despite this entire article explaining how to use the golden ratio, it doesn’t mean your page is going to look any better. Just because a nautilus shell follows some arbitrary ratio doesn’t mean our pages have to. This article is counter-intuitive and ridiculous.

    The other thing I mentioned is change detection. You could skew this ratio by 5% and nobody could tell the difference. That means your claim is bogus. How about we all stop writing about useless crap and actually do something useful?

    ( Reply )
  67. PG

    Al January 5th

    I love seeing articles too. Aren’t words and sentences great?

    ( Reply )
  68. PG

    TheBig January 5th

    funny how my cock abides by the golden compass rule, and it looks dam appealing. i swear every chick that sees it just wants it up there a$$.

    am i at the right blog ?

    ( Reply )
  69. PG

    Brett Virmalo January 6th

    This is nonsense. A little knowledge is a dangerous thing.

    A few facts…

    1. The Golden Section and division in a theme of 3 (”rule of thirds”) are two different things. Yes, phi (1.618) and 0.666 look close but are calculated differently and refer the ratios of two completely different elements. This is the same lack of accuracy that has led to misconceptions about the presence of phi in art and nature over and over again.

    2. Classical design is about elements being in proportion to each other as well as the whole (see Vitruvius, Palladio, Alberti, etc.) – NOT using one “magic” ratio once. Are your fonts built on 1.618? Are your images in a 1:1.618 ratio? Your header? Your logo? Just because my 4 year old scribbles on piece of paper that I trimmed to a 1:1.618 ratio does not mean he has completed a drawing using a Golden Section ratio.

    3. Many proportions have had special relevance throughout history ( 1:1.618, 3:4, 1:√2, 1:√3, 4:9, 3:8, etc.) and none have ever proved inherently more beautiful than others in any objective study. Here are the premier proportions: http://www.flickr.com/photos/brettvirmalo/3171035420/

    4. The Parthenon is NOT on the Golden Ratio (neither are the Pyramids at Giza, the Mona Lisa, or most seashells). See Livio below.

    5. Sorry, this one is nitpicking, but the selection of Da Vinci’s proportioned man image has absolutely nothing to do with the Golden Section. Even though he drew the images for Fra Luca Bartolomeo de Pacioli’s book De divina proportione, it is well documented that Da Vinci shunned any dogmatic approach to art and design and preferred to develop his own approaches. In the vast volumes of writing Da Vinci left behind there are no references his use of the Golden Ratio.

    If you are really interested in Phi, I strongly suggest a book by Mario Livio, Senior Astrophysicist at the Hubble Space Telescope Science Institute. http://www.amazon.com/Golden-Ratio-Worlds-Astonishing-Number/dp/0767908163/ref=sr_1_1?ie=UTF8&s=books&qid=1231234621&sr=1-1

    If you are interested in design and typographic grids look into books by Josef Müller-Brockmann – http://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann
    I also recently encountered this site which seems to have some potential http://www.thegridsystem.org/

    ( Reply )
  70. PG

    Mathew January 6th

    Really enjoyed the article. I have always liked mathematics and this article just added another check for its many wonders. Never thought about relating it to Da Vinci – the golden ratio & web design that is!

    ( Reply )
  71. PG

    matt January 6th

    I’ve never thought about applying the golden rule to websites – but it makes so much sense. i’ll take a look at this.

    ( Reply )
  72. PG

    César Chas January 6th

    Thank you Jarel,

    I had heard about this before but I didn´t know it was so widely used. I will use it from now on!

    ( Reply )
  73. PG

    free banners January 6th

    Thnx a lot. It is something to visit an art gallery and get in formation about. I enjoyed a lot.

    ( Reply )
  74. PG

    versak January 7th

    a month a go i was researching the golden ratio in regards to some posters i was making and began sketching up ideas for using it in a web page, but all the math hurt my head a little!

    great article!

    ( Reply )
  75. PG

    jeff samorano January 7th

    are you crazy!! you can’t start telling people about the Golden Ratio. pretty soon everybody will be using it and this world will be full of gorgeous design. then what!?? THEN WHAT?? i hope you’re happy with yourself!!

    :o P

    PS> great article!

    ( Reply )
  76. PG

    Rick January 8th

    jeff: stfu.

    brett: well said. :)

    ( Reply )
  77. PG

    Justin January 10th

    Great article. You really broke down most of the main Elements.
    Thanks for the information.

    ( Reply )
  78. PG

    Caffeine Injection January 13th

    Very simple. Thanks. I bookmarked this as a standard for layouts.

    ( Reply )
  79. PG

    sindustries January 21st

    Golden Ratio’s and working with grids really help with making pro like layouts :)

    ( Reply )
  80. PG

    VooDoo January 22nd

    Before readeing this article, please read Brett Comments!!

    ( Reply )
  81. PG

    R.E. Ferguson January 22nd

    A very thorough and analytical approach to web design.

    ( Reply )
  82. PG

    Rene Sapp January 26th

    Great article, thanks.

    ( Reply )
  83. PG

    ChiangMaiWebDesign January 26th

    very nice!

    ( Reply )
  84. PG

    steve January 27th

    This isn’t really the golden ratio. It a a simplified version of the rule of thirds. However the rule of thirds is not a rule for how to build out a grid(neither is the golden ratio). It supposed to reflect were you compositions point of interest are, were you want people to focus. With both of these systems the points of focus should fall on the intersecting points. The idea is that people eye will be drawn naturally to those point so that is were you would put content that you want people to focus on. Using it to define your grid breaks that (except for maybe some of your headers).

    For example the rule of thirds applied to a photograph would have you divide your composition into a grid of 3×3, and you are to put the subject you want to focus on at one if the intersecting points, It is not something to be used to define distinct regions of content.

    When I was learning layout theory, a general rule used that grids of odd numbers were more pleasing that those of even. Mainly 3 columns should be more pleasing to the eye the 2 or 4. Which seems to be what this article really is talking about.

    Anyway, just my opinion.

    ( Reply )
  85. PG

    Aaqib February 10th

    Thankd

    ( Reply )
  86. PG

    Luis Rivera February 15th

    Nice i really seeking article like this

    ( Reply )
  87. PG

    webrsai March 15th

    nice article .its really help for me.thnx

    ( Reply )
  88. PG

    Scarf*oo March 29th

    Another great article I stumbled upon.

    ( Reply )
  89. PG

    huwaw69 April 21st

    This is somewhat confusing but really a good help…

    ( Reply )
  90. PG

    Setiawan April 27th

    Very well done article. Thank you.

    ( Reply )
  91. PG

    Polundra May 26th

    Thanks for this article. Perhaps also useful http://www.gridsystemgenerator.com/

    ( Reply )
  92. PG

    saurabh shah June 24th

    nice article thought i don’t follow and limited myself with fixed ratios …

    ( Reply )
  93. PG

    emili July 3rd

    That was a nice read

    ( Reply )
  94. PG

    Point of Sale July 8th

    good!thanks!

    ( Reply )
  95. PG

    Miguel July 21st

    Nice article. its a great guide for a website design.

    ( Reply )
  96. PG

    göğüs estetiği July 29th

    i like this site. i added on my bookmark i thanks

    ( Reply )
  97. PG

    charley July 30th

    that was some sort of good solution – there are some other good solutions available into the market but this sems to be the best so far.. .

    ( Reply )
  98. PG

    Health Care August 3rd

    that was some sort of good solution – there are some other good solutions available into the market but this sems

    to be the best so far.. .
    Quite a week, indeed.-Online Sports

    Quite a week, indeed.-Health Care

    ( Reply )
  99. PG

    charley August 7th

    Quite a week, indeed. -Beauty solutions

    ( Reply )
  100. PG

    joe August 11th

    great article, very useful..keep up the good work…

    regards
    joe

    ( Reply )
  101. PG

    Aidil August 12th

    Everything in this universe follows a system. and indeed webdesign too, follows a system.

    I read some above posts that say that following these systems, e.g. the golden ratio, severely limits creativity and shunts originality…

    Here’s a different perspective… do you see any 2 trees of the same species being exactly alike? Or do you see 2 people looking and acting exactly the same? Both tree and human are created/evolved based on their same frameworks…Yet both tree and human are on their own unique in each n every way..

    Hmmm

    ( Reply )
  102. PG

    jack September 8th

    Thanks for sharing your valuable thoughts.

    ( Reply )
  103. PG

    pest September 9th

    I have been reading your blog last couple of weeks and enjoy every bit. Thanks.

    ( Reply )
  104. PG

    Design September 23rd

    Small Business Website and Small Business Web Design. Whether you’re a small

    business, non-profit, club or individual, we can build you a powerful site in no time.

    ( Reply )
  105. PG

    Acne September 29th

    wawo, wonderful images. it is great to see. i think it is photo shoped, but it’s amazing .

    ( Reply )
  106. PG

    expert witness October 2nd

    wow, wonderful images. it is great to see. i think it is photo shoped, but it’s amazing .
    That’s really a fantastic post ! i added to my favorite blogs list..

    ( Reply )
  107. PG

    josphat October 5th

    Nice works.Keep up.Even God calculate may be using pi to create this Universe.I love it and I will use it as a basic fundamental.I’m a beginner in web design and I need helpful stuff like this

    ( Reply )
  108. PG

    Nick Thompson (be people not sheeple) October 12th

    There is nothing at all special about the golden ratio, it’s a load of BULLSHIT, the human mind likes patterns, not just that one! You people are eating this up without question, that makes you very very unintelligent. You could make a building based on ANY number of ratios, and it would look JUST AS AESTHETICALLY PLEASING! Music for example, IS NOT based on this, it is based on a 12 note scale which is created by the ratio 1 / 1.05946 which equals .943874, this number is used to place frets on a guitar, to establish the pitch relationships, the same ones that make all the music you have ever heard in your life! Pretty amazing huh? Well it’s not the golden ratio! OUR MINDS JUST LIKE PATTERNS, there is NOTHING special about this, stop obsessing over math. Math is just a way to describe what we perceive, it shouldn’t be held as some kind of mysterious pattern throughout history, thats ridiculous.

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    October 12th