Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Golden Ratio

One of the major characteristics of effective design is a clear user interface. All the elements need to be well-balanced and placed in the harmony so that users could easily perceive the information on the screen and interact with a product without efforts.

Everything in the world strives to the harmony and balance. Even mother nature brings things in the forms close to the perfect. People enjoy everything which has natural touch and they always aim at implementing these patterns and forms into their outcome. In pursuit of discovering the secrets of creation, mathematicians calculated a formula which appears in the majority of things on the Earth.

The golden ratio is a mathematical proportion between the elements of different sizes which is thought to be the most aesthetically pleasing for human eyes. The golden ratio equals 1:1.618 and it is often illustrated with seashell-shaped spirals which you could have probably seen on the Internet.

So, how exactly the perfect asymmetry is calculated? First, you need to decide the length of the small element. Then multiply it by a golden ratio which is 1.618 and the result will be the perfect length of the bigger element.

Golden ratio theory is believed to exist for more than 4000 years. Scientists discovered that the majority of the ancient buildings, as well as famous artworks, obey to the golden ratio. Leonardo Da Vinci and Salvador Dali were known as the followers of the golden ratio theory and they used it as a key tool for their amazing artworks. Today the golden ratio is applied in various fields including architecture, art, photography, and design.

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.

Now, let’s talk about how we can use Golden Ratio in design.

How to Use It In Design

Examples

https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2012/04/twitter.jpg

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.”

https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2012/04/numbered.jpg

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.

https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2012/04/mmd.jpg

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.

Typography

Another way to use the Golden Ratio is typography scales. For example, let’s say that you’re using 10pt font for the body text. Using the golden ratio, you can determine the best size for the headings by multiplying by 1.618.

So, 10 × 1.618 = 16.18, which you can round down to 16pt font.

Or let’s say your headline text is 20pt and you want to find an appropriate size for your body text. Since the headline text is the bigger element, you would divide by 1.618 instead of multiplying.

Therefore, 20/1.618 = 12.36, which you could round down to 12pt body text (or up to 13pt, if you so choose). That’s the beauty of the golden ratio—you don’t have to be perfect.

Sizing/cropping images

Another simple way to incorporate the golden ratio into a design is to crop photos (or any other images you may use) into a golden rectangle shape. Again, that doesn’t mean you should always do it for every photo, but you may want to consider it for an image that’s particularly central to your design.

When you crop images with the golden ratio in mind (especially when working with photography), you might also consider using the golden spiral as a guide for the shot’s composition. For example, you could crop a photo to golden proportions in such a way that the main focal point of the image is at the center of the corresponding golden spiral. It adds interest in a way that’s very similar to the rule of thirds, but many consider it a more natural-looking, aesthetically pleasing choice.

Using the golden ratio in your visual designs can also be as simple as applying it to the proportional size difference between two different elements—even elements that aren’t “golden” shapes themselves.

For example, say you had an image in your design that was 2 inches wide and you wanted to pair it with a smaller picture. A 2 inch image divided by 1.618 comes out to about 1.236 inches, which you could safely round down to 1.2 inches.

You could also add a larger image to the design, which would require you to multiply your 2 inch photo by the golden ratio to end up with roughly 3.2 inches. And now you’ve got yourself a Fibonacci sequence going, creating even more interest than before.

https://www.companyfolders.com/blog/media/2015/09/golden-ratio-photos.jpg

Logo design

You can also use the golden ratio to add aesthetic appeal directly to a company’s branding. Even if the logo itself isn’t shaped like a golden rectangle or triangle, it can still employ elements that use golden proportions.

General layout

Once again, using a golden spiral to inform your graphic design’s layout is a lot like using the rule of thirds grid—you want the focus of the design to be centered on the spiral, using the golden rectangles as division lines for the placement of visual elements. But unlike the rule of thirds grid, you can move the golden rectangle around to suit your needs.

After all—if you couldn’t move around a golden rectangle, then every design would look like a golden rectangle or spiral. Instead, think of your golden rectangle as a ruler—it doesn’t change, but you can move it around the canvas to measure out the elements that are already there.

Digital designers have to work within tighter constraints when it comes to creating a layout; they can’t control the dimensions of the audience’s monitor, after all. A common trick in web design is to use the golden ratio to divide space between the body of the website and the sidebar. Taking the measurements of the space they’re working with, web designers can ensure that the body is 1.618 times larger than the sidebar by taking the total width of the canvas, dividing it by 1.618, and then subtracting that number from the overall width of the canvas.

The same technique can still apply to print design—but you have to be careful. Web designers are working within a horizontal medium, and much of print design is vertically oriented. Of course, pretty much anything that is printed vertically can also be printed horizontally—but you won’t always have the option.

The advantage to working in print is that the size of the media itself can be measured out according to the golden ratio. However, there are also times when print designers are constrained to a standard size and unable to use custom print options. Thankfully, you can still apply the golden ratio to the layout of any print template; you just have to be smart about it.

Pros and cons

https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2012/04/golden.jpg

Even thought there are many benefits of using the Golden Ratio in Design, 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.

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.

Scroll to Top