Golden ratio in layout design

How to create software layout pleasant for the eye of the user? Use fibonacci sequence and combine maths and art for the pixel perfect result.

There’s a common mathematical ratio which is common in nature that can be used to create pleasing, natural looking compositions in your design work. It is called the Golden Ratio, Golden Mean, Fibonacci Spiral or Fibonacci Sequence.

The Golden Ratio or Fibonacci spiral

This kind of composition is widely used in art and photography. But first and foremost, this ratio is a common pattern found in nature. E.g. pinecone shape, sunflower seeds, weather patterns, etc.

Golden ration in photography composition

Designing a piece of software has many aspects to be considered. There are a ton of books and articles related to the best practices in creating a stunning user experience. One aspect is solely devoted to the visual composition. The software has to have a pleasant visual appeal to it. If it is pleasant for the eye, more likely is that the users will subconsciously get to like it. More important, if the composition is right, the eye will naturally rest on the things that are important.

If the composition is right, the eye will naturally rest on the things that are important

There is a lot we can do to subconsciously draw attention to our call to action or any other part of the software. I like to use the Golden Ration in the layout composition because it naturally emphasise every other UX technique. Place the Fibonacci spiral on top of your screen, and start the layout plan. Place the most important information in the center of the spiral. These components in the center will grab users attention at the first glance. This principle works great with the Gutenberg Diagram presented below.

The Gutenberg Diagram describes a general pattern our eyes follow when interacting with our application or content. The pattern suggests our eyes will sweep across and down the page in a series of horizontal movements. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area. This path is referred to as ‘Reading Gravity’.

Gutenberg diagram in combination with the Fibonacci spiral

Important elements should be placed along the reading gravity’s path. The most important information should be placed in Primary Optical Area. As you can see, primary optical area is placed right at the center of the Fibonacci spiral, which makes it a perfect place for the user to notice the area. Strong Follow Area should contain useful data as well so that the user maintains focus. The terminal area is usually reserved for a CTA — where attention is focused.

If you take this approach, it will improve your design by a percent, or even less. But details are important. This percent might just add enough value to your product so that the user love it. There is a thin line between meh and wow reaction so you would want to use as many tricks as possible, including this tiny one. Cheers!

Want to learn more?

Learn how to turn your idea into a successful business today.

This book offers you a comprehensive guide through the entire process of creating a successful business. It is designed to make your start much easier by laying out the entire business plan for you. The entire process is boiled down to its essentials, making the steps simple and easy to understand.

If you follow the formula which I reveal in this book, it’s very possible you can make a living by turning an idea into a successful business.

Treasure Roadmap — How to turn your idea into a successful business — Best Books For Entrepreneurs…_If you choose to follow the formula which I reveal in this book, it’s very possible you can make a living by turning an…_treasureroadmap.com

Get your free book summary by clicking on the image below: