The golden ratio—often symbolized as the Greek letter Phi (Φ)—is a mathematical constant approximately equal to 1.618033987. It exists in nature, architecture, art and design. It is a factor in producing aesthetically pleasing and balanced forms. Designers apply it to create harmonious screen compositions that draw users’ attention and evoke positive emotions.
The golden ratio is also known as the “golden mean” and “golden rectangle.” It is an irrational number that comes from the Fibonacci sequence of numbers. There, each number after the first two is the sum of the two preceding ones (0, 1, 1, 2, 3, 5, 8, 13, 21, 34, and so on). The golden ratio reflects the ratio of two consecutive Fibonacci numbers calculated as the sequence progresses towards infinity. So, 34 + 55 = 89 and 89/55 = 1.618, and 1.168 is the result for 144/89 (the next in line in the sequence: 34, 55, 89, 144).
The golden ratio comes from a unique formula.
© Creatopy, Fair Use
The golden ratio has another unique characteristic. The ratio of the sum of the quantities to the larger quantity is the same as the ratio of the larger quantity to the smaller one. This simple yet fascinating relationship creates a unique sense of balance and proportion. It’s also aesthetically pleasing to the human eye. This visual phenomenon comes from the “golden” proportions of 1.618 to 1, or 1 to 0.618, approximately. So, a screen with these respective lengths makes a “golden rectangle.”
The Golden Ratio's classic proportions.
© Nielsen Norman Group, Fair Use
Another quirk of this unique visual relationship is that designers also apply it in slightly more complex ways. A common technique is to use it as a logarithmic spiral, or “golden spiral.” For example, designers can take a length of 55 units as a starting point. Then, they can draw inwards to reach a length of 34 units when they pass that starting point. As they continue inwards with lengths of 21, 13, 8, 5, 3, 2 and then 1, a “golden spiral” appears. Such a spiral is more interesting to look at than an equally spaced one. However, the phenomenon includes something else. Research has shown that the human eye also processes images constructed with the ratio more quickly.
Golden ratio rectangles, showing the properties of the golden proportions, including the golden spiral (bottom right).
© Company Folders, Fair use
Examples of the golden ratio exist in nature and many other parts of the physical or real world. Living things that exhibit it include pine cones, with their patterns, and nautilus shells’ spirals. Proportions of the human body can also show the ratio. These idealized forms often appear in art.
Signs of the golden ratio abound in nature. In this flower example, the golden spiral is evident.
© Amalia Madalina Pop, Fair Use
The golden ratio has featured in design and design elements for millennia. The Great Pyramids of Giza are among the earliest structures with proportions that reflect the golden ratio. Certainly, the ancient Greeks recognized its aesthetic appeal. They called it the "divine proportion," and applied it in classical structures such as the Parthenon. As a principle, the ratio was familiar to philosophers and mathematicians such as Pythagoras and Euclid. Around 300 BCE, Euclid mentioned this principle in his Elements.
In the case of the Great Pyramid, the ratio of the slant height to half the base length is 1.6804, very close to the golden ratio.
© Prof. L. Kaliambos, Fair Use
The Renaissance saw a resurgence in the use of the golden ratio, with mathematician Luca Pacioli at the forefront. Perhaps most notably, Leonardo da Vinci employed it to create balanced and harmonious works of art, as is evident in the Mona Lisa. Da Vinci referred to the golden ratio as the "sectio aurea" or the “golden section.”
The Parthenon and Mona Lisa – two very different expressions of art and culture emerging from different civilizations and eras, but both make use of the golden ratio.
© Cubet, Fair Use
The golden ratio remains one of the most fundamental principles of art. Vincent van Gogh and Salvador Dali were among the legions of artists to use it since da Vinci. However, it has a proven track record in creating a sense of visual harmony for all types of viewers far beyond art galleries. Moreover, it continues to influence a wide range of fields outside of painting and sculpture. These include architecture, photography, and design. Indeed, the golden ratio is synonymous with good design and the design industry in general. Among the many design areas where the ratio features (including gardening) are graphic design and user interface (UI) design.
The field of user experience (UX) design reflects the world around the human viewers who live in it. For users to enjoy intuitive experiences with digital products, designers must mirror the patterns and dynamics which the people who use their products find familiar. That is, they must match the users’ mental models. Among the design principles they apply, the golden ratio stands out with its inherent sense of balance and harmony. For web design and other user experience design aspects, it offers a time-tested formula. Designers leverage it to help create intuitive, engaging and visually appealing interfaces.
However, these designs are more than technically well-formed with their well-proportioned, balanced compositions that maximize usability. When designers and web developers use the ratio well, they can draw viewers’ attention and instill positive, warm emotions in them. So, brands that feature such harmonious designs can cause these to resonate deeply with their users. This can happen on a uniquely subconscious level that earns trust while it pleases and helps users achieve their goals.
A vital part of visual design, the golden ratio is a particularly helpful design aid in the “mobile first” era. More users access digital products on mobile devices than on desktops, and the trend continues. Especially when the screen real estate is small, the ratio provides a needed framework for guidance. With it, design professionals can create balanced and harmonious layouts, typography and images even on the smallest screens. Together, these visual elements work to enhance the overall user experience and keep users on board. Moreover, a layout with such “pleasant” proportions can go a long way to keeping users calm when they’re distracted. Even when they’re in potentially stressful conditions, users can appreciate the sense of order such designs give them.
The golden ratio at work in a mobile design; note the application of the golden spiral.
© Mariya Tereshkova, Fair Use
Designers can make the best of their designs particularly when they strive to:
One of the key principles of the golden ratio is balance. When they follow the ratio's proportions, designers can ensure that their designs are visually balanced. They set elements out in a way that feels natural and harmonious. This balance creates a sense of order and coherence for users. It makes it easier for them to navigate and understand the interface, even at a glance.
Visual hierarchy is an essential part of guiding users' attention and helping them prioritize information. A design can stand, or fall, on its information architecture. Designers use the golden ratio to help them establish visual hierarchies within the web pages and app screens they create. They do it from determining the relative sizes and positions of different elements. For example, for typography, designers use the ratio to create a clear distinction between headers, subheadings, and body text. This makes it easier for users to scan and understand the content.
This web template shows the golden spiral at work.
© Tubik UX, Fair Use
Aesthetics play a crucial role in user experience. Users are more likely to engage with a visually appealing interface. This phenomenon refers to the aesthetic usability effect. The effect states that users will typically perceive visuals that are well-structured as being more usable, no matter what. People like pretty things, which the golden ratio can help achieve. As they apply the ratio to the layout, typography, and imagery, designers can cast a certain “magic.” This aesthetic appeal not only attracts users but also enhances their overall experience with the product or service. Plus, it can be a lasting part of their pleasurable memory of it, prompting them to return time and again to a clean, alluring digital product.
Co-founder of Hype4.com Michal Malewicz explains the aesthetic usability effect:
The golden ratio is a part of the human experience that goes back through many centuries. As a result, it has become an ingrained part of how people perceive beauty and harmony. As they incorporate the golden ratio into their design work, UX designers tap into this sense of familiarity. They can make an interface feel more natural and intuitive to users. Therefore, users can feel more comfortable and confident when they interact with it. That speaks to trust on a level that is deep-rooted. It serves as a strong foundation for design teams to build towards compelling calls-to-action, easier conversions, and long-term customer loyalty.
Google’s familiar look is a golden one, even if it is multicolored.
© Golden Number, Fair Use
Logos and icons are integral parts of a brand's identity. Their design often involves the golden ratio. When they design logos or icons, designers should consider using the golden ratio to establish the proportions and shapes. If they ensure that elements of the logo or icon are in harmony, they can create winning, memorable designs. This can help welcome and maximize user interactivity and promote iconic status.
Famous brand images often show the golden ratio at work in their iconic simplicity.
Geogebra.org, Fair Use
Key parts of using the golden ratio to enhance the overall user experience include:
This determines an interface’s overall structure and organization. The golden ratio helps make better compositions overall and interfaces that are pleasant, calming, and easy to navigate.
One common approach is to divide the layout into sections using the ratio. For example, a designer can divide a web page layout into a main content area and a sidebar. The main content area will be 1.618 times larger than the sidebar. This proportion creates a visually pleasing and balanced layout that guides users' attention to the most important content.
A simple approach to applying the golden ratio: to divide a layout width of 960 pixels by 1.168, gives 593 pixels – note the square (left section) making up the main part of the screen as a result.
© Cubet, Fair Use
Brands tend to establish their signature use of design principles. For example, National Geographic’s web designs incorporate unique applications of the golden ratio.
Another example of National Geographic’s use of the principle.
© Apiumhub, Fair Use
Good typography plays a crucial role in UX design. Wise choices help to create visual hierarchy and improve readability. Designers can establish harmonious proportions between different typographic elements when they use this ratio. They can create a typographic hierarchy that’s balanced and pleasing to the eye. This hierarchy lets users easily distinguish different levels of information and notice important copy more easily.
For instance, imagine the body text has a setting of 10pt. Then, to apply the golden ratio (i.e., to multiply by 1.618), a designer would have a header text size of approximately 16pt. This creates a visually pleasant contrast and hierarchy between the header and body text.
The differences between text according to the principle and text without. Note the improved readability in the former.
© Nielsen Norman Group, Fair Use
The golden ratio can help maintain the balance and focus of the composition when designers crop an image. As they use the ratio to determine the proportions of the cropped image, they can ensure that the result works best as an image.
How to crop according to the golden ratio.
© Nielsen Norman Group, Fair Use
To create visually appealing and balanced compositions, designers can overlay the golden spiral on an image. They can then determine the most effective cropping strategy to maintain balance and focus on the image's key elements. The goal is to align the focal point or main subject of the image with the spiral's center. Designers can then create a composition that feels balanced and grabs the viewer.
This is a vital part of any design. It helps to create balance and harmony between different elements on a page. It also gives much-needed “breathing space.” When a designer applies the golden ratio, it makes it easier to determine the ideal white space proportions for a design. For example, if one element is 8px (pixels), then the white space around it should be 13px (8 x 1.618). This ensures that there’s enough space between elements. The result is a strong sense of balance and unity in the overall design.
White space, another essential UI design ingredient, at work in this Digital Agency landing page.
© Tubik, Fair Use
Many online tools are available. These programs and services can help calculate the proportions and generate templates. They can also provide visual feedback to ensure that designers apply the golden ratio quickly and optimally. Moreover, they allow the input of measurements for elements like fonts, images and white space. Also, they will tell the exact proportions needed for each element to ensure the design looks balanced and pleasant.
The following software examples are among popular choices that help achieve good-looking designs that can win users over time and again:
PhiMatrix: This software provides customizable grids and templates that designers can overlay on designs to ensure accurate application of the golden ratio.
PhiMatrix is a popular and effective choice for applying the golden ratio.
© PhiMatrix, Fair Use
Adobe Illustrator: A popular vector graphics editor, it allows users to create designs and illustrations while providing tools to calculate and apply the golden ratio.
Sketch: This digital design tool provides plugins and features that enable designers to leverage the golden ratio in their design work. It provides a free Sketch file that includes the golden spiral to use as a guide for image and layout composition.
Figma: This collaborative interface design tool offers plugins and features that let designers calculate and apply the golden ratio in their design projects.
Golden Ratio Typography Calculator: This tool helps designers determine the ideal typography sizes based on the golden ratio.
Golden Ratio Typography Calculator is another popular solution for applying the principle.
© Golden Ratio Typography Calculator, Fair Use
Overall, the golden ratio resonates with the human eye because it’s such an integral and time-tested principle. Designers who apply it accurately can help themselves and their brands to enjoy success with user interfaces that look great and work well, whatever the user scenario. The key part is that these designs are engaging and resonate with users on a subconscious level that builds trust and helps secure conversions. In any case, it’s essential for designers to treat the golden ratio wisely—as a tool in their design process, not a set-in-stone rule to follow regardless.
Take our Visual Design: The Ultimate Guide course.
Read our piece on The Golden Ratio – Principles of form and layout.
See many examples and further insights in The Golden Ration in Design | Summer ye.
Find additional in-depth information in Golden Ratio in UX Design – Why it Matters for Brands? | Alka Jha.
Read this thought-provoking piece that examines the application of the golden ratio in animation: How To Apply The Golden Ration To Animation | Lesterbanks.
For more historical background and the intricate application of the ratio to a famous structure, read The Golden Ratios of the Parthenon | by Gary Meisner.
Critics argue that the golden ratio's effectiveness and universality in design are often overstated. They point out that its application can be forced or arbitrary, without any actual contribution to the user experience or functionality of the design. Also, some studies suggest that the preference for the golden ratio is not as universal as often claimed. This indicates that cultural and individual differences play a significant role in aesthetic preferences.
Nevertheless, many designers use the golden ratio as a tool in their work, appreciating its historical significance and the structure it can provide in user interface (UI) design for a digital product or service. However, it's essential to recognize that the golden ratio is not a one-size-fits-all visual design solution. Effective user experience (UX) design and interaction design require a balance between aesthetic principles and functionality. Designers need to consider the specific needs and preferences of the target audience. They also need to incorporate user research and user testing in product development to consider choices and their potential impact, such as in terms of accessibility.
The golden ratio and the rule of thirds are both compositional tools that professionals used in design and art to create visually pleasing and balanced layouts. While they share a similar purpose, they differ in their approach and mathematical basis.
Golden Ratio:
● Mathematical basis: The golden ratio is approximately 1.618:1. It is derived from the Fibonacci sequence and many people believe it is aesthetically pleasing due to its frequent occurrence in nature.
● Application: Designers create a golden rectangle, where the ratio of the longer side to the shorter side is 1.618. This rectangle can guide the overall layout of a design, and designers can proportion smaller elements according to the golden ratio.
● Versatility: The golden ratio applies to a wide range of design fields, including graphic design, UI/UX design, and architecture. It provides a harmonious and balanced structure to the design.
● Perception: It’s often considered more complex and mathematically driven. It appeals to designers who prefer precise and calculated composition methods.
Rule of Thirds:
● Mathematical basis: The rule of thirds involves dividing an image or design into nine equal parts with two equally spaced horizontal lines and two equally spaced vertical lines. Artists or designers place important compositional elements along these lines or their intersections.
● Application: It has common uses in photography, graphic design, and painting.
The golden ratio applies to responsive web design as it can help promote aesthetically pleasing and balanced layouts in web design and more.
When designers apply it to responsive web design, the golden ratio helps them to structure content and design elements in a way that’s both visually pleasing and functional across different screen sizes. Designers might use the ratio to determine the width of sidebars, the spacing between text blocks, or the size of images relative to the rest of the page. That way, they can ensure that these visual elements scale appropriately on different devices and optimize information architecture. This helps to make the best user experience (UX).
Moreover, the golden ratio can influence the overall structure of a web page and therefore aid in user interactions. For example, designers might position the most critical content or call-to-action buttons at a golden ratio point from the top of the page, as this is where users' attention naturally gravitates.
Watch CEO of Experience Dynamics, Frank Spillers explain 10 principles for web accessibility and mobile design, including points about responsive design:
Training AI to understand and apply the golden ratio in design projects presents several challenges for UX designers, UI designers and other interactive product designers. Here are some:
● Deciphering Aesthetic Judgment:
Designers face the challenge of deciphering aesthetic judgment. The subjective and varied nature of aesthetic judgment complicates their task of teaching AI to make design decisions based on the golden ratio. Designers must guide AI to navigate the intricate human perceptions of beauty and balance, which don’t have universal definitions.
● Balancing Design Principles:
Designers encounter the need to balance a broad spectrum of design principles, including the golden ratio, color theory and typography. They must carefully calibrate the process of teaching AI to harmonize the golden ratio with other critical design principles.
● Grasping Contextual Nuance:
Designers appreciate that successful design, as well as product development, goes beyond proportions and must understand the context and purpose it serves. They strive to teach AI how to apply the golden ratio in ways that support the overall design intent and enhance user experience goals. This demands a profound grasp of the specific design context.
● Overcoming Data Limitations:
Designers confront the challenge of overcoming data limitations. They recognize that quality datasets, especially those illustrating the successful application of the golden ratio in design, are essential for training AI. The scarcity or complexity of curating such datasets poses significant hurdles for them in effectively training AI.
● Adapting to User-Centered Design (UCD):
Designers prioritize adapting to user-centered design, knowing that design transcends aesthetics to prioritize usability and user experience. They aim to teach AI to employ the golden ratio in ways that prioritize and enhance user interaction. This calls for an intricate understanding of user behaviors, needs, and preferences.
For AI-related insights, take our Human-Centered Design for AI Master Class with Niwal Sheikh, Product Design Lead, Netflix.
Here are some popular good books on the golden ratio:
Amolendu, H. (2020). The Golden Ratio in UX Design: Enhancing User Experience Through Mathematical Harmony. Notion Press.
This collection of 12 articles offers practical insights into user experience design, drawing from the author's real-world expertise as a UX designer. It's not focused on theory or methodology but on the author's experiences creating widely-used digital products. Highlighting a striking statistic, the book emphasizes the extensive time people spend interacting with digital devices. It underscores the UX designer's role in making these interactions as natural and human-like as possible. The articles aim to enrich designers' understanding of UX principles, guiding them to design more intuitive and user-friendly digital experiences.
Livio, M. (2002). The Golden Ratio: The Story of Phi, the World's Most Astonishing Number. New York: Broadway Books.
This book has been influential due to its engaging narrative that explores the historical and cultural significance of the golden ratio. It offers a captivating account of the golden ratio's presence in art, architecture, and nature, making it an accessible and informative resource for designers and enthusiasts interested in the broader impact of the golden ratio on human creativity and aesthetic perception.
Meisner, G. B. (2018). The Golden Ratio: The Divine Beauty of Mathematics. Race Point Publishing.
Gary B. Meisner's 'The Golden Ratio: The Divine Beauty of Mathematics' captivatingly explores the golden ratio, a principle celebrated for its widespread presence in nature, art, and architecture. This book delves into the mathematical elegance and diverse applications of the golden ratio, shedding light on its historical importance and modern-day relevance. The principles it unfolds can significantly influence digital designers. It reveals how employing the golden ratio can enhance the aesthetic balance and visual appeal of designs, thereby improving the user experience in digital products. The combination of mathematical theory, historical insights, and practical implications in this book serves as an invaluable resource for designers eager to integrate the golden ratio into their creative work.
Here are some highly cited pieces of research on the golden ratio:
Kurniawan, A. (2024). The Impact of Golden Ratio Application on User Satisfaction: A Study on Horizontal Scrolling in User Interface (UI) Design. International Journal of Design Creativity, 14(1), 60-75. https://doi.org/10.1080/10447318.2023.2301254
The golden ratio is widely used to enhance aesthetic appeal and visual harmony in various design contexts. However, its application in user interface (UI) design, especially for mobile screen elements, has been less explored. This study aimed to investigate the impact of implementing the golden ratio in UI design and its influence on user satisfaction. The findings, based on a sample of 114 participants, revealed a 7.5% coefficient through simple linear regression analysis, indicating a positive relationship between the integration of the golden ratio and heightened user satisfaction. The study offers valuable insights for UI designers, particularly for designing mobile applications requiring expanded space, such as catalog apps. Nonetheless, further research is needed to explore the golden ratio's application in UI design for devices with smaller screens, like smartwatches or digital cameras.
Blom, L., & Stenbäck, J. (2015). The Golden Ratio - Still Golden? A Research of the Golden Ratio in Digital Formats. [Bachelor’s thesis, Linköping University]. Linköping University Electronic Press. https://www.diva-portal.org/smash/record.jsf?pid=diva2%3A858091&dswid=-8530
Blom and Stenbäck's thesis critically examines the application and perception of the Golden Ratio in the realm of digital media, focusing on web design. It scrutinizes whether this mathematical proportion, traditionally used in art and architecture for its visually pleasing qualities, still resonates with users in the digital age. Through semi-structured interviews, the study gauges users' reactions to web page layouts adhering to the Golden Ratio versus traditional designs. This research is influential as it bridges the gap between classic design principles and contemporary digital aesthetics, providing insights into user experience and design effectiveness in the digital landscape.
Read this piece for more information: Why is 1.618 An Ancient Aesthetic Principle in Modern UX & UI Design? | by Elvis Hsiao
Find further insights in this article: Rhythm your Design System with golden ratio and arithmetic | by Paul Amat
For more insights, read this piece: A guide to the Golden Ratio for designers | by Emily Esposito
Find further in-depth insights and details in Golden Ratio in Web Design | by Ekaterina Novoseltseva.
Yes, designers have a variety of alternatives to the golden ratio that they employ to achieve balance, harmony, and visual interest in their designs. Some of these alternatives include:
● Rule of Thirds
A widely used principle in photography and design, the rule of thirds involves dividing the composition into nine equal parts with two equally spaced horizontal lines and two equally spaced vertical lines. When designers place elements along these lines or their intersections, it creates a balanced and dynamic composition.
● Grid Systems
Grids provide a structural framework for designers. These offer a systematic way to lay out elements. Common grid systems include column grids, modular grids, and hierarchical grids. They help in organizing content, guiding the eye through the design, and maintaining consistency.
● Gestalt Principles
The Gestalt principles (such as similarity, proximity, continuation, and closure) describe how the human mind perceives visual elements as organized patterns or wholes. Designers use these principles to create cohesive, unified designs that are visually and psychologically satisfying.
Designers may choose one or a combination of these methods based on the project's requirements, the message they wish to convey, and their personal or brand style. The key is to use these principles not as strict rules but as tools to enhance the effectiveness and aesthetic quality of the visual design. It’s vital to conduct UX research and user testing in product development before releasing a product or service such as a mobile app. For example, mobile UI design has certain considerations, such as accessibility on smaller devices, that demands special focus.
Watch our video that explains the Gestalt principles.
Here’s a step-by-step, suggested guide that designers might find useful in applying the golden ratio in design work:
a. Understand the golden ratio: Become familiar with its properties and how it has featured in art, architecture, and design.
b. Calculate the golden ratio: Use the Golden Ratio to divide spaces or elements. For a given length A, the smaller part B should relate to A as A relates to the sum of A+B, which is approximately 1.618.
c. Create a golden rectangle: Design a rectangle where the ratio of the longer side to the shorter side is 1.618. This rectangle can guide the overall layout of the design.
d. Apply to layout components: Divide content areas, margins, or other elements using the golden ratio to ensure that each part of the design relates harmoniously to the others.
e. Use golden circles for logo design: If designing a logo or a similar element, use circles with diameters proportional to the Fibonacci sequence, which approximates the golden ratio, to create pleasing and dynamic compositions.
f. Implement the rule of thirds: Align key elements of a design along the lines that divide its layout into thirds, both horizontally and vertically. The intersecting points are strategic places to position the most important elements of the design.
g. Iterate and refine: Use the golden ratio as a starting point, but don't be afraid to adjust the design to better meet aesthetic or functional needs. The golden ratio should serve as a tool, not a strict rule.
For more insights, take our course Visual Design: The Ultimate Guide.
Here’s the entire UX literature on the Golden Ratio by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
