top of page
Golden Ratio, Divine Proportion, Design System, UI kit, Figma, Figma Design System,

The Golden Ratio

Design System + Plugins

  • Writer's pictureMichael Ruocco

Design Like a Pro: 5.5 Unmissable Lessons on the Golden Ratio & Applied Psychology

Updated: May 30, 2023


Using the Golden Ratio is applied psychology.


So if you want to be a better designer, here are 6 golden ratio psychology applications that you can start using in your designs.


1. Cognitive Ease:

What it is:


Our minds instinctively gravitate towards simplicity and familiarity, favouring things that can be understood effortlessly. The Golden Ratio, woven deeply into our natural world, aligns perfectly with this cognitive preference. It effortlessly resonates with our brain's innate processing patterns, rendering designs based on it uniquely captivating and profoundly appealing.


How to apply it:


Think of ways you can apply Golden Ratio in your designs. For example, you could create a type scale based on the golden ratio. Typography is 95% of ALL websites.


Get the type right, and your customers and clients will glide effortlessly over your messaging.




2. Perceptual Organisation.

What it is:


According to the principles of Gestalt psychology, we often perceive objects as organized patterns or wholes rather than as separate component parts.


The Golden Ratio provides a balanced and harmonious proportion, which might be more appealing to our innate sense of organization.


How to apply it:


Use a Golden Ratio Grid.


As well as telling you where to place your graphical components within a particular area, the BOXES that the grids make are also telling you the sizes those elements should be.


This gives your elements the appearance of being connected to a WHOLE design and each other rather than as SEPERATE elements.



Get your FREE 7-day trial of the Grid plug in here - https://www.figma.com/community/plugin/1182047151469830150/Golden-Ratio-Grid


3. Aesthetic Preference.

What it is:


Studies have shown that people tend to rate objects and images designed according to the Golden Ratio as more aesthetically pleasing. This is thought to be due to the harmony and balance provided by this propo


How to apply it:


Set your grid up to a single line either from the left or right to determine your layout guide on a new website design.


Set your grid up to a single line either from the left or right to determine your layout guide on a new website design. For example, the national geographic website uses the golden ratio to work out the size of its side panel and main content area.




4. biophilia.

What it is:


Is a notion that humans have an innate tendency to seek connections with nature and other forms of life.


The Golden Ratio is prevalent in billions of bio-systems, such as the spiral arrangement of petals on a plant, the seeds of a sunflower or the way whales trap krill in a golden ratio air-net.


Therefore, our attraction to the Golden Ratio may stem from this deeply rooted affinity for nature.


How to apply it:

Within a picture:


Position the focus point of the Fibonacci spiral on the element you want to emphasize. Then, adjust the boundaries of the image to align with the outermost curve of the spiral.




5. Principle of least effort

What it is:


A principle that proposes that human beings naturally gravitate towards the path of least resistance or effort.


In terms of perception, our brains find it easier to process information or structures that adhere to the familiar proportions of the Golden Ratio, leading us to prefer these forms..


How to apply it:


You can build incredibly appealing logos by using Golden Ratio proportions. Way too in-depth to drop in this newsletter, so here is something from the amazing Mohamed Achraf ...





5.5 The Gestalt Principle theory.

What it is:


Seven principles of design created by german psychologists in the 1920s. The term means ‘unified whole’ These refer to the way in which humans, when looking at a group of objects, will see the whole before we see the individual parts.


The 7 principles are:

  1. Similarity

  2. Continuation

  3. Closure

  4. Proximity

  5. Figure/Ground

  6. Symmetry and Order

  7. Common Fate

The Golden Ratio uses 4:


Continuation:

The principle of Continuation refers to the visual tendency to follow a line, path, or curve, leading the observer's eye through the composition. This preference drives the viewer to perceive separate lines as a singular, cohesive figure, rather than as distinct entities.


Proximity:

The principle of Proximity involves strategically positioning elements close to one another to imply a connection or association between them, thereby fostering a perception of them as a collective group.


Symmetry and order:

The underlying principle here asserts that a composition should maintain a sense of equilibrium and coherence, preventing the viewer's attention from being diverted towards detecting missing elements or rectifying perceived issues, and instead allowing focus on the conveyed message or instruction.


Figure/Ground:

In designs using the Golden Ratio, the ratio can help to create a balance between the figure (the main element or focus of the design) and the ground (the background or less important elements), enhancing the distinction between the two.


Great? Great.


Knowledge is power.


Until next time, Rockstar,


Michael and Nathan


65 views0 comments
Golden Ratio, Divine Proportion, Design System, UI kit, Figma, Figma Design System,

The Golden Ratio

Design System + Plugins

bottom of page