# The Golden Ratio - Principles of form and layout

Now, we’re going to look at a subject that comes directly from mathematics and that we can also find all around us – the **golden ratio**. Don’t worry; we’re not going back into the classroom for long. We will examine what this concept is and exactly how much it is a fundamental part of making designs pleasing to the user’s eye.

The golden ratio’s story is the stuff of legend. With a history dating back almost to the time of *Pi* (another great mathematical formula, which is essential in understanding properties of circles), scholars, including Pythagoras and Euclid, have called it by many names, including the *golden mean* and the *divine section*.

What is the appeal of this ratio? For centuries, it has been thought that art, architecture and nature are more appealing to the eye when the proportions of designs and structures are based on the golden ratio. You can find examples of the golden ratio in human endeavors as far back as Ancient Greece. The Parthenon statues appear to show the golden ratio in their form, and some of Plato’s five solids (including the cube and the dodecahedron) are related to it, too. The golden ratio was popularized in the Renaissance era, and the artists of that period sought to ensure that it was used to deliver aesthetically pleasing works. Today, we can use the golden ratio in our web and app designs to improve the layout and appeal to the eye, placing full confidence in this time-honored fact.

## What Is the Golden Ratio?

The Golden Ratio has been used throughout history to create visually appealing designs. In the Renaissance, it became a formalized part of design theory. Its frequent appearances in geometry (in such shapes as pentagons and pentagrams) drew the attention of ancient Greek mathematicians, who began studying it at least 2400 years ago. The ratio is based on the relationship between consecutive numbers in the Fibonacci sequence. Fibonacci was a medieval Italian mathematician; however, *you* don’t need to be a mathematician to understand this sequence, as it is so simple.

Each number in the Fibonacci sequence is simply the sum of the two numbers before it. It begins with 1, 1 (i.e., 1 + the unseen 0 = 1), and the first 10 members of the sequence are 1, 1, 2, 3, 5, 8, 13, 21, 34, 55. It continues infinitely. We can calculate the ratio using the formula above (we use the Greek letter *Phi* to represent the output). The ratio is approximately 1.618, although, like *Pi*, it has a long string of numbers after the decimal point. For our purposes, though, we don’t have to worry about going past 1.618.

How is the ratio used in design? Think of a rectangle, with a short side of length 1. To calculate the most aesthetically pleasing rectangle, you simply multiply the length of the short side by the golden ratio approximation of 1.618. So, the long side, in this instance, would have a length of 1.618.

If you have a pencil, paper and ruler handy, try drawing a rectangle of this scale. Or, if you can jump to another screen, create one in a drawing application. What you will see before you is not just any rectangle but the *ideal* rectangle!

We can find the golden ratio throughout the world of design. The architects of the day used it for the base and height of the Acropolis in Greece. It’s used to determine the format of the vast majority of books on your physical bookcase. It’s literally everywhere you look. Perhaps because we’re surrounded by figures and shapes derived from the golden ratio, we’ve grown especially used to it. As designers, we need to keep this concept of comfort and familiarity in mind for our users. The eyes of the world view this ratio favorably. Literally, in fact: the magazine *National Geographic *uses a yellow rectangle proportioned according to the golden ratio.

However, the golden ratio doesn’t help us just to make nice rectangles. You can also form a spiral using side lengths based on the decreasing order of the Fibonacci sequence. So, if we take a length 55 as our starting point, we can make our spiral by drawing it inwards so that when it passes that starting point, the new length is 34. We continue working inwards with lengths of 21, 13, 8, 5, etc. until we get to the middle (length = 1). This spiral is also based on the golden ratio and can be more interesting than an equally balanced spiral to the human eye. It is present in nature, ranging from plants to shellfish and mollusks. Even the specific proportions of many larger animals (including humans!) are often said to be proportioned according to the golden ratio. In that sense, it could be said that it’s a part of us. So, you as a designer can use this kind of spiral to catch the eyes of users from any part of the world and focus them on a particular point in your design. Research has shown that the human eye identifies (and the brain interprets and processes) images based on the golden ratio more quickly than it does images that do not incorporate the ratio.

We can also use the golden ratio to balance elements within other elements. The logos of Toyota and Pepsi make use of this fact. Toyota uses the ratio to balance the ovals within their logo, and Pepsi uses it to balance the circles in theirs. Can you think of any other brands that exploit this “magic” ratio? Perhaps it’s what can make logos truly iconic!

## Calculating the Golden Ratio

Let’s briefly get down to some mathematics now. As with the image shown at the top of this lesson, the equation for calculating the ratio is simple. It is the relationship between two sides of a design (usually the horizontal and the vertical). It does not matter which side we choose as the longest (A) and which we choose as the shortest (B). (Although if you are trying to see whether the golden ratio has been used in another piece, you will need to follow which side is longest or shortest.)

The formula for this is:

**A/B = (A+B)/A = 1.618033987 = ****Φ**

**Φ** is the Greek letter *Phi – *how we represent the golden ratio. *Why* does A/B = (A+B)/A? It does because we are following the Fibonacci sequence and A and B (if expressed in whole numbers) are simply two consecutive numbers in that sequence. Fortunately, we can approximate this to 1.6 or 1.61 or 1.618 in designs without surrendering the aesthetic appeal of the golden ratio. Our eyes aren’t bothered with such slight deviations.

## How to Use the Golden Ratio in Your Designs

You can use the golden ratio in your designs easily. Taking applications such as Adobe Photoshop and Adobe Illustrator, you can create guides or layers that will help you to design using the golden ratio.

If your software doesn’t calculate the golden ratio automatically, you can always use an online tool to help specify the ratio for side lengths. Here are three such tools:

## The Take Away

The golden ratio, which philosophers, mathematicians, architects, artists, and designers have employed for over two thousand years, is fundamental to both designers and users. Designs such as the Pepsi logo and even natural formations carrying the proportions of the golden rule, such as a nautilus shell, surround us.

Because these forms are so prevalent, our eyes identify them quickly, and we tend to process these as familiar and pleasing. Although the golden ratio has been a subject of study for centuries and was known to the ancient Greeks, the medieval Italian mathematician Fibonacci determined his famous sequence. Using this (where a series of numbers, beginning with 1,1, is such that we add the preceding number to the one following it) is the key to understanding the golden ratio (which we represent with the Greek letter *Phi*).

We use the golden ratio widely in web and app design. In particular, it’s very easy to incorporate when building wireframes. You can ensure that the content you need is prioritized properly and that the aesthetic demands of the layout will be met without doing too much design work at first. Only when you, for instance, decide where you will place elements and features over this framework will the work become more involved.

In the top picture in the example above, the ratio between the content area and sidebar is equal to *Phi* (1.618). You can check this with the measurements below:

- The total width of the fixed layout is 960 px. You divide this into a content area and a sidebar. The content area is the longer of the two areas.
- If you divide the total width of 960 px by 1.618, you get 593 px. You then assign this length to the content area.
- You assign the remaining 367 px to the sidebar.

As this is a ratio, it is flexible. This means that you can easily apply it to make many design layouts, as there’s no need to use fixed numbers. All you need to do is specify that the longer area is 1.618 times longer than the shorter one.

You can apply the golden ratio in any part of your page layout. For example, you could use the golden ratio within the header to grab the user’s attention and then repeat it within the body, too.

In the lower picture (above), we also see the spiral form that uses the golden ratio. Using the Fibonacci sequence in decreasing order to apply to the lengths of a spiral’s side, we can easily create spiral designs based on the golden ratio.

As designers, we find a wealth of software available that makes it easier for us to unleash the potential of the golden ratio in our creations and optimize the user experience. Adobe, with Photoshop and Illustrator, is such a company offering this great aid.

## References & Where to Learn More

- Hero Image: Author/Copyright holder: Matthew Oliphant. Copyright terms and licence: CC BY-ND 2.0
- Friedman, V. (2008) Applying Divine Proportion to Your Web Designs.
*Smashing Magazine.*Retrieved from: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/. [2014 Aug 1]

# What you should read next

## 10 Great Sites for UI Design Patterns

You don’t want to spend your whole life redesigning the wheel do you? No, neither do we. If you are looking for a design that solves a problem that has been solved inside a different application before; then the template for your wheel is probably already out there. That’s a design pattern to you and me. We’ve put together a list of some of the...

- 133 shares
- 1 week ago

## How to Change Your Career from Graphic Design to UX Design

If there’s an occupation that is 100% linked with the public’s idea of what design is all about, it’s graphic design. From the familiar golden arches of the McDonald’s brand to the typography and colors of movie posters, graphic designers create some of the most iconic and ubiquitous designs around us. So why would a graphic designer like you wa...

- 234 shares
- 1 week ago

## Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces

Follow Ben Shneiderman’s 'Eight Golden Rules of Interface Design' if you want to design great, productive and frustration-free user interfaces. Apple, Google and Microsoft are among some of the highly successful companies whose well-designed products reflect Shneiderman’s rules. The characteristics derived from Shneiderman’s golden rules can be ...

- 339 shares
- 1 week ago

## User Interface Design Guidelines: 10 Rules of Thumb

Learn to design with your user’s needs and expectations in mind by applying Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines. These heuristics have been reflected in many of the products designed by some of the most successful companies in the world such as Apple, Google, and Adobe. Further evidence of how their design teams incorpo...

- 276 shares
- 2 weeks ago

## Adaptive vs. Responsive Design

The differences between responsive and adaptive design approaches spotlight important options for us as web and app designers. Choosing with insight can empower you to plan and execute your designs with better aim, purpose and results.With the pervasiveness and diversity of mobile devices, as designers we need to cater to the variety of screen s...

- 150 shares
- 3 months ago

## Recalling Color Theory Keywords: a way to refresh your memories!

Choosing the best combination of colors for an interactive design layout is not, as it may appear, a guessing game. Knowing which ones to use will save you time (and headaches). Getting it right will also keep your users connected.Since the early days of art and design, the use of color has followed many rules and guidelines, which are collectiv...

- 358 shares
- 1 month ago

## Principle of Consistency and Standards in User Interface Design

Learn to design with consistency and standards in mind and understand the reasons why they’re important to incorporate them into your work. Derived from Jakob Nielsen and Rolf Molich’s Ten User Interface (UI) Guidelines, ‘Consistency and Standards’ are evident in many of the widely-used products created by some of the most successful companies. ...

- 386 shares
- 2 months ago

## 9 Free to Use Wireframing Tools

We all know that wireframing is a great way to test ideas in our UX projects but we also know that there are a ton of wireframing tools available to do it with. It can be hard to choose the right tool but one of the easiest ways to get an idea – is to get hands on with the tool and have a play with it. The wireframing tools in this article are ...

- 131 shares
- 4 weeks ago

## The Grid System: Building a Solid Design Layout

Now that we’ve seen some grids at work in the Rule of Thirds article, let’s examine them a little more deeply. As a concept that deals so fundamentally with the fabric and background of our work as designers, it’s easy to overlook the power of grids and think more about the elements we want to create. Many traditional artists still paint their m...

- 289 shares
- 1 month ago

## Google’s Material Design - Android Design Language

Material Design (originally referred to as and codenamed “Quantum Paper”) was developed by Google and is a design language used for Android devices. The idea, according to Matias Duarte Vice President of Design for Google, is to provide a design language which mimics the feel of pen and paper. Material design offers the user physical edges and s...

- 250 shares
- 1 month ago

# New to UX Design? We're giving you a free ebook!

Download our free ebook ** The Basics of User Experience Design** to learn about core concepts in UX design.

In 9 chapters, we'll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

# New to UX Design? We're giving you a free ebook!

Download our free ebook ** The Basics of User Experience Design** to learn about core concepts in UX design.

In 9 chapters, we'll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!