Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
You can change this under Settings & Account at any time.
The Golden Section
Transcript of The Golden Section
The Golden Section
What is it?
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).
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?
What else can it be called?
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.
What is it?
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.
How do I make one?
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.
So how is it used?
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.
Should I use it?
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.
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.
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.