From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
The divine proportion is a mathematical concept dating to ancient times that is used as a principle in almost all types of design from architecture to art to websites. Although the exact origins of the formula and shape are not known, examples of its use can be found through history – Egyptians used the shape in the design of the great pyramids and Greeks used it for the Parthenon (note the shape below).
Print designers have been using the concept for newspaper and magazine design for more than 100 years and the basis for many websites starts with the divine proportion. But is this a “magic” formula and does it have a place in today’s web design toolbox?
Identification
The divine proportion goes by a handful of names that all refer to the same rectangular shape. Golden rectangle, golden ratio, mean ratio and Phi all refer to the shape that is considered the most pleasing and harmonious to the eye.
The golden rectangle is defined by a shape that has a proportion of 1.618; this is sometimes referred to as the magic number. Although the mathematical equation is quite precise, the use of this theory for design is not. Many opt to round numbers to two decimals and whole numbers to make creating the formula less complex.
But the golden rectangle is used for more than just an overall aesthetic. The shape can be found in navigation bars, the shapes of photographs and in the grouping of parts on a page. Because the shape is so common, many designers create golden rectangles throughout their work without even knowing it.
Perhaps one of the most famous examples of the golden rectangle appears as a Leonardo Da Vinci’s “Vitruvian Man” drawing, which was first published in “De Divina Proportione.” Parts of the shape, in particular the spiral, can also be found in nature; this shape is exemplified by the shell of the nautilus.
Create
To get this shape for your website, measure the width of your available content area and divide that by 1.618. The resulting number would be the width of your content area and the remaining with would be the space you use for the site’s sidebar.
Using a little math, you can create a simple golden ratio outline for your website. Start with your content area. (We will use 1,024 pixels, the width for most laptop and flat-screen monitors.)
1,024 px/1.618 = 632.88 px (which we will round to 633 px)
This number, 633 pixels, will be the width of the main content area.
1,024 px – 633 px = 391 px
This number, 391 pixels, is the width for the sidebar.
The perfect golden rectangle maintains the aspect ratio of the original square and adds the extra with to it. So the optimal height in this formula would also be 1,024 pixels.
You can also use an online calculator to figure this equation. Golden Ratio Calculator is a good tool that allows you to enter a width and get an instant calculation that breaks a width into a golden rectangle, such as the 1,024 pixels we used above. Further it uses that number as the width of the larger portion of the golden rectangle and provides the width of the small section and overall shape.
Uses
Twitter, which launched a redesign late in 2011, used the golden rectangle for the outline of its site. The feed and sidebar combined mirror the golden rectangle. The use of the magic formula was quite intentional according to Doug Bowman, the site’s creative director, in a post on Flickr: “We didn’t leave those ratios to chance. This, of course, only applies to the narrowest version of the UI. If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise.”
It’s Numbered uses the idea of the golden ratio to pair images and text. The idea of the golden rectangle can be used for more than just the overall site design; it can also be used to group items within the site outline.
MmDesign uses the principle of the golden rectangle for the dominant image on its site. Not only is the image striking, it has the perfect harmonic shape. The golden rectangle is not just for site design but can be used to create balanced parts throughout a site.
Pros and cons
Using the golden rectangle will not ensure that your site design works. There are a host of other factors that contribute to a successful design. The formula, though, can help you create harmony and balance and provide a basis for how to formulate a design concept. Many beautifully designed sites do not use this principle, but you are likely to find examples of the golden rectangle within the site structure. Photos, text blocks and sidebars can also showcase this “perfect” shape.
Use the golden rectangle in projects where you want to create a feeling of natural balance and harmony. The structure created by using the shape is naturally pleasing and mimics some of the most well-known images of all time and even nature. Without knowing it, visitors to your site will feel comfortable with the look you have created.
But not all designers agree with the concept. Trying to design around a mathematical formula can be complicated, time consuming and won’t guarantee a nice site layout.
Analysis
Using the theory of the divine proportion is not for everyone. I think using the theory can get all-consuming when planning a site outline. Moreover because of the depth of each web page, it is almost impossible to maintain the true ratio and then you get stuck trying to fit a golden rectangle above the scroll or stacking multiple golden rectangles in the page design. (Neither option is very efficient.)
When designing with the golden rectangle in mind, try to not get too caught up in the numbers (although some math purists will disagree). Go for the basic shape and idea but don’t force it on your design. Play with variations as well. Create a golden rectangle and forget using the perfect height. (This can work for creating a sidebar for the full depth of your site.) Use the golden rectangle for the shape of images throughout your site or for colored frames.
The golden rectangle works best in web design when used for parts of the site rather than the whole. The shape will help you create beautifully arranged groups of images or text blocks of mirroring size. It can also be used to pair photos without that overly symmetric look. (Size one photo, then size the other using the 1.618 proportion and pair them side by side.)
Look at the grouping of multiple images on the Irving & Co page. The landing page features six images. The group uses the outline of the golden rectangle, but the photos are cropped and put together in an interesting way. The shape is not mathematically perfect, but creates a sense of balance and harmony that goes hand-in-hand with the principles of the formula. When using the golden rectangle, plan your design to mirror the shape but not fit into perfectly, pre-shaped boxes. Look past the numbers and think about the overall effect.
I like the classical feel of pages that employ the principle of the golden triangle. Nothing tops a good feel when you land on a new site. Using this theory, you can create that feel and sense of balance using a time-tested theory. But as with any design concept, use the golden rectangle in moderation. Too many perfect shapes stacked on top of each other can end up looking flat, repetitious and uninviting.
Cool, will definitely try out in my next design 🙂
Wow! perfect now i know #useofwhitespace 🙂
May be Google is following this in there new design but forgot to implement it well.
Nice reading thanks for the blog post.
Hi guys,
I have another example about this proportion:
look at this slider I’ve made: http://www.al-tho.it/
Good article, you learn new things.
Good article. This is something you learn very early when you are getting a design degree. If you (commenters) are only learning it now, you probably need to study more, as this is a very basic, ancient and necessary knowledge.
Placings Da Vinci’s Vitruvian Man right next to a Nautilus Shell is an unfair comparison. The Vitruvian man does indeed acquire the Fibonacci ratio but the Nautilus isn’t even close. Place a Fibonacci spiral over the shell and you’ll see that it doesn’t fit. The shell does however follow a logarithmic pattern of 1.33 to 1, quite different than the “golden ratio”.
Both ratios are legitimate techniques for building a website. As Carrie suggests in the article, don’t get too caught up on the perfect execution of this methodology. This “divine proportion” is an important educational tidbit for a designer but, despite what the name might suggest, it does not define the perfect proportion or layout for all of your projects.
I am surprised the author hasn’t mentioned the Fibonacci number (and his spiral).
I find it very difficult to use the divine proportion on web design, theanks for the analysis
I wish people would stop believing everything they are told without properly testing the evidence. The golden ratio or divine proportion is completely misunderstood en given properties which it does not have. There is no proof whatsoever that 1.618 appeals more to us than any other Fibonacci number. Or any other ratio for that matter. If you look hard enough you will find ratios in nature that are 1:5, 1:2, 1:2.345, 1:1.5, 1:1, etc. etc. None of which is any more abundant than any other or any more beautiful or ugly.
For more information see http://www.maa.org/devlin/devlin_06_04.html or read the book: Misconceptions About the Golden Ratio.
Amazing article. thank’s!
http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash3/522869_221572804616082_139662199473810_334739_1187634452_n.jpg
If you need to calculate the layout to make it look good, you are doing it wrong.
Design education teaches you about layout, proportions, color etc. When you study those and try thing out for years it becomes automatic. But there is education and knowledge behind it. Learn design or hire a real designer. This article is a good start to learn to understand design but don’t make the mistake that you can just calculate it.
After Basecamp redesign I am seeing this divine proportion mentioned more and more! And I didn’t know Twitter also used this golden ratio!
We are getting smarter and smarter in design industry! 🙂
I love that ancient innovation methods like the divine proportion can extend itself to completely 21st century design needs like web layout. Another engaging article from Codrops! Cheers for the insights
Sarah Bauer
http://www.navigatormm.com
Great read. I had always used the “golden triangle” effect when trying to do layouts, but this makes much more sense and is more organic than the mechanical golden triangle studies.
I think some comments above are getting a little too technical and robotic. The ultimate goal is to give a pleasant user experience when they visit the site and I feel this theory has some great ideas.
All right, I’ll give this a shot!
Good article. I use the calculation to get a rough idea of prime dividing areas in my layouts.
However, I’m not feeling your Parthenon example. All you’ve done is drawn the Golden spiral on top of the ruins. The start of the spiral and subsequent areas around the spiral don’t lend themselves to the proportion. In fact, the Golden Ratio isn’t even on a column—it’s on the space between two columns. Also, the top apex of the structure, were it still intact, would be outside the area you’ve shaded. This image doesn’t support a good example of the Golden Ratio.
Hi Carrie
I have always been fascinated with the role of the divine proportion in things like architecture and fine art. However there are not many articles around concerning its role in web design.
I particularly like the example of the images on the Irving & Co website, sticking to the simple principals of the divine proportion really helps the layout appear easy on the eye.
Cathy
I am very interested in utilizing responsive design to develop client websites. In order to show
“respectability” to convince my clients I am wondering who in the corporate world has used this
design style.
Golden Rectangle!!!..This concept can change the way we design the websites.Very Interesting concept though.Thanks for sharing.Hope to use it whenever necessary
Personally, I dislike the golden rectangle. Well, yes, in some cases it does in fact come in handy, but at the very end, it should meet special needs. For instance, the Twitter design is following the golden rectangle not only by beauty but function. Imagine a milk-box would be designed with the golden rectangle in mind, or a logo – well, yes, it may be done, but at the very end there’s much more freedom for the designer, in case the design itself is only partially based on the golden rectangle or not at all.
Nice. Very good explanation. Will try it in some project.
I’m not that much of a web design person, but I do think that there is some “magic” proportion that a lot of people follow to make their site look good. The catch here is that a lot of them don’t even notice that they’re already using it. For some reason, I think this site is using that golden rectangle, too. About that spiral, I think it’s pretty hard to make out of it if it’s going to be made into a standard. I mean, what’s the exact measurement of the radii of the spiral, and all sorts of questions like that.