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.
Show Hide video transcript
Show Hide video transcript
- Transcript loading…
Why is The Golden Ratio so Important?
The golden ratio is also known as the “golden mean” and “golden rectangle.” It's an irrational number—and it 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 on and on 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 of 34, 55, 89, 144).
However, 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—relationshipcreates 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.”
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 instance, 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 and inwards with lengths of 21, 13, 8, 5, 3, 2 and then 1, a “golden spiral” is what appears. Such a spiral is more interesting to look at than one that's equally spaced. Yet, the phenomenon includes something else. Research has shown that the human eye also processes images constructed with the ratio more quickly.
The Golden Ratio in Nature, History, Art and Culture
Examples of the golden ratio exist in nature, and they turn up in 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, and these idealized forms often appear in art.
The golden ratio has been featuring 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 and showed their appreciation of it. 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—Pythagoras and Euclid, for example. Around 300 BCE, Euclid mentioned this principle in his Elements.
The Renaissance saw a resurgence in the use of the golden ratio—mathematician Luca Pacioli was at the forefront. Perhaps most notably, Leonardo da Vinci employed it to create balanced and harmonious works of art. This is evident in theMona Lisa, for instance. Da Vinci referred to the golden ratio as the "sectio aurea" or the “golden section.”
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 put it to use since da Vinci. Nonetheless, it has a proven track record in creating a sense of visual harmony for all types of viewers far beyond art galleries. What's more, it continues to influence a wide range of fields outside of painting and sculpture. These include architecture, photography—and, indeed, design. The golden ratio is synonymous with good design and the design industry in general. Among the many design areas where the ratio does feature (including gardening) are graphic design and user interface (UI) design.
How The Golden Ratio Features in User Interface 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's to say, 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. Indeed, for web design and other user experience design aspects, it offers a time-tested formula. Designers apply it to help them create interfaces that are intuitive and engaging—and visually appealing.
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—one that earns trust while it pleases and helps users achieve their goals.
As 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. On top of that, 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.
Designers can make the best of their designs particularly when they strive to:
Achieve Balance and Harmony
One of the key principles of the golden ratio isbalance. When they follow the ratio's proportions, designers can ensure that their designs are indeed visually balanced. They set elements out in a way that feels natural and harmonious. This balance creates asense of orderand coherence for users. It makes it easier for them to navigate and understand the interface—even at a glance.
Create Visual Hierarchy
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 instance, 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.
Enhance Aesthetic Appeal
Aesthetics play a crucial role in user experience—by nature. 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 doesn't just attract users; it enhances their overall experience with the product or service as well. Plus, it can be a lasting part of their pleasurable memory of it—something that prompts them to return time and again to a clean, alluring digital product.
Co-founder of Hype4.com Michal Malewicz explains the aesthetic usability effect:
Show Hide video transcript
Show Hide video transcript
- Transcript loading…
Foster a Sense of Familiarity
The golden ratio is a part of the human experience that goes back through many centuries. As a result, it's 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 their users. So, users can feel more comfortable and confident when they're interacting with it. That speaks to trust on a level that's deep-rooted. It serves as a strong foundation for design teams to build towards compelling calls-to-action, easier conversions and—vitally—long-term customer loyalty.
Optimize Logo and Icon Design
Logos and icons are integral parts of a brand's identity, and 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 make sure 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.
How to Apply the Golden Ratio in Design
Key parts of using the golden ratio to enhance the overall user experience include:
Layout design
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 for users 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.
Brands tend to establish their signature use of design principles. For example, National Geographic’s web designs incorporate unique applications of the golden ratio.
Typography
Good typography plays a crucial role in UX design. Wise choices help 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.
Image Resizing and Cropping
The golden ratio can help maintain the balance and focus of the composition whenever 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.
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 keep 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 make a composition that feels balanced—and grabs the viewer.
White Space
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.
Tools to Apply the Golden Ratio
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 in the best way for them. What's more, they permit the input of measurements for elements like fonts, images and white space. As well as this, they'll 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 designers achieve good-looking designs that can win their products' users over time and again:
PhiMatrix: This software provides customizable grids and templates that designers can overlay on designs to make sure they apply the golden ratio accurately.
Adobe Illustrator: A popular vector graphics editor—it lets users create designs and illustrations while it provides 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 to determine the ideal typography sizes based on the golden ratio.
Overall, the golden ratio resonates with the human eye since 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 may be. The key part is that these designs are engaging and resonate with users on a subconscious level—one 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.
Learn More about The Golden Ratio
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.
Questions related to Golden Ratio
Is there any criticism or controversy surrounding the use of the golden ratio in design?
Is there any criticism or controversy surrounding the use of the golden ratio in design?
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. Another thing is that some studies suggest that the preference for the golden ratio isn't as universal as often claimed. This indicates thatculturaland 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 plus the structure it can provide in user interface (UI) design for a digital product or service. Still, it's essential to recognize that the golden ratio isn't a one-size-fits-all visual design solution. Effectiveuser experience (UX) designand interaction design do require a balance between aesthetic principles and functionality. Designers need to consider the specific needs and preferences of the target audience. They also have to incorporateuser researchanduser testingin product development so they consider choices and their potential impact—such as in terms ofaccessibility.
How does the golden ratio compare to the rule of thirds in composition and design?
How does the golden ratio compare to the rule of thirds in composition and design?
The golden ratio andthe rule of thirdsare both compositional tools that professionals use in design and art to create visually pleasing and balanced layouts. While they share a similar purpose, they do differ in their approach and mathematical basis.
Golden Ratio:
● Mathematical basis: The golden ratio is approximately 1.618:1. It's derived from the Fibonacci sequence, and many people believe it's 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, and these include graphic design, UI/UX design and architecture. It does provide 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 is about 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.
How does the golden ratio apply to responsive web design?
How does the golden ratio apply to responsive web design?
The golden ratio applies toresponsive web designas it's something that 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 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 them make the best user experience (UX).
What's more, the golden ratio can influence the overall structure of a web page—and so 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:
Show Hide video transcript
Show Hide video transcript
- Transcript loading…
What challenges are involved in teaching AI to understand and apply the golden ratio in design projects?
What challenges are involved in teaching AI to understand and apply the golden ratio in design projects?
TrainingAIto understand and apply the golden ratio in design projects does present a few challenges for UX designers, UI designers and other interactive product designers. Here are some:
● Deciphering Aesthetic Judgment: Designers face the challenge of how to decipher 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 have to 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 vital things for training AI with. The scarcity or complexity of curating such datasets poses major hurdles for them in effectively training AI.
● Adapting to User-Centered Design (UCD): Designers prioritize adapting touser-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.
What are some highly regarded books about the golden ratio?
What are some highly regarded books about the golden ratio?
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 they can. The articles aim to enrich designers' understanding of UX principles, and so can guide 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—which makes it an accessible and informative resource for designers and enthusiasts who are 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, and it sheds light on its historical importance and modern-day relevance. The principles it unfolds can deeply influence digital designers. It reveals how employing the golden ratio can enhance the aesthetic balance and visual appeal of designs, and in so doing improve 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 who are eager to integrate the golden ratio into their creative work.
What are some highly cited scientific pieces of research about the golden ratio?
What are some highly cited scientific pieces of research about the golden ratio?
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.
The golden ratio is widely used to enhance aesthetic appeal and visual harmony in various design contexts. Nevertheless, its application in user interface (UI) design—especially for mobile screen elements—is something that's 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, which indicates 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.
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 seeing use 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, and so it provides insights into user experience and design effectiveness in the digital landscape.
Where can I learn more about the golden ratio?
Where can I learn more about the golden ratio?
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.
Are there alternatives to the golden ratio that designers also use in their design work?
Are there alternatives to the golden ratio that designers also use in their design work?
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 thirdsinvolves 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
Gridsprovide 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 both visually and psychologically satisfying.
Designers may choose one or a combination of these methods based on the project's requirements, the message they want to send, 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 thevisual design. It’s vital to conductUX researchanduser testingin product development before you release a product or service such as a mobile app. For example,mobile UI designhas certain considerations—such asaccessibilityon smaller devices—and that demands special focus.
Watch our video that explains the Gestalt principles.
Show Hide video transcript
Show Hide video transcript
- Transcript loading…
Can you provide a step-by-step guide to using the golden ratio in a design layout?
Can you provide a step-by-step guide to using the golden ratio in a design layout?
Here’s a step-by-step, suggested guide that designers might find useful if they want to apply the golden ratio in their design work:
a. Understand the golden ratio: Become familiar with its properties and how it's featured in art, architecture and design.
b. Calculate the golden ratio: Use the Golden Ratio to divide spaces or elements. For a given lengthA, the smaller partBshould relate toAasArelates to the sum ofA+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 by using the golden ratio to make sure that each part of the design relates harmoniously to the others.
e. Use golden circles for logo design: If you're designing a logo or a similar element, use circles with diameters proportional to the Fibonacci sequence—which approximates the golden ratio—to make pleasing and dynamic compositions.
f. Implement therule 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.
