Symmetry in UX/UI Design

Your constantly-updated definition of Symmetry in UX/UI Design and collection of videos and articles
84 shares

What is Symmetry in UX/UI Design?

Symmetry in user experience design (UX design) refers to a visual balance designers achieve by arranging elements to mirror each other or follow a consistent pattern. Designers align elements along a central axis to make interfaces more harmonious, intuitive and visually appealing. Symmetrical designs often give a sense of stability and organization, and help users navigate more effectively.  

Why is Symmetry Important in UX Design?

Symmetry is important in design largely because it’s so close to the human experience. It certainly abounds in nature and the human world. For example, the human body and elements like tree leaves and butterfly wings exhibit natural symmetry. They provide a balance that’s aesthetically pleasing and structurally efficient. In architecture, too, symmetrical designs appear well-constructed and reliably strong—the Parthenon is a classic, and classical, example. Symmetry has reassuring qualities, and this fact translates to graphic design and UX design as well.  

A key point about symmetry is how the human eye values order and seeks lines of symmetry to find balance in an image. The mind strives to make sense of what the viewer sees. People naturally tend to seek order in objects, and they typically understand that symmetrical elements are part of a unified group. This aspect comes from the Gestalt principles of psychology and design. In Gestalt terms, symmetry and order are sometimes known as the principle or law of Prägnanz (German for “good figure”)—the idea that individuals prefer simplicity and order in the forms they behold.  

Author and Associate Professor of Art Studio and Digital Design, University of Kentucky, Mia Cinelli explains the Gestalt principles—watch this video to learn more about them:  

Show Hide video transcript
  1. Transcript loading…
  

Why are the Types of Symmetry?

Symmetry as a design concept extends further than its Gestalt sense. In UX design, designers leverage symmetry to help users find websites and apps visually engaging and easy to navigate. Symmetry divides into several main types:  

  1. Reflectional symmetry, or bilateral symmetry: Designers achieve this when they reflect elements across a central axis, such as a website's header. This involves taking a single axis to make mirror images. This is typical in symmetrical logos.  

  1. Rotational symmetry, or radial symmetry: Designers arrange elements around a central point so that they keep their orientation when the user rotates them. What’s more, an object has axial symmetry if its appearance stays the same as the user rotates it. Circle symmetry designs such as circular logos are a good example of rotational symmetry.   

  1. Translational symmetry: Designers repeat elements at regular intervals. It’s common to find this in patterned backgrounds such as on-screen tiled arrangements.   

  1. Glide reflection symmetry: This combines reflection and translation. An example is footprints on the sand where each step mirrors and shifts from the last.  

It’s important to note that when digital product designers leverage symmetry, they seldom make perfectly symmetrical designs. Instead, they tend to apply it measuredly in symmetric balance so users can find elements more readily. Sometimes, designers will apply pseudo-symmetry—where two elements or sections aren’t perfectly symmetric but “close enough” for users to see as being symmetric.   

Full symmetric balance—or formal balance—is hard for designers to achieve in digital products. That’s because a perfect symmetry definition of elements in a design would constrain a designer to exceedingly simple and specific layouts. Google’s homepage, with its iconic, clean, lean and balanced look is pseudo-symmetric rather than symmetric. Users on Google’s main page tend to have one chief purpose—to look up keywords or subjects. Aside from the Doodles that celebrate and inform users on Google’s homepage, the latter offers a simple interface with much negative space so that users can get on with searching for the items and subjects they want.  

A screenshot of Google's home page.

Google’s homepage has a degree of symmetry that helps set a calm, reassuring stage on which users can put their search requests and terms—in all their rich variety.

© Google, Fair Use

Another important point is that designers can make an interface like a webpage balanced with or without symmetry. With symmetry—or approximate symmetry—design, they can include elements such as centralized images and text. Without symmetry, however, designers can still make it balanced if they use an imaginary central point and arrange different-sized elements in a way that’s unified. As long as a design isn’t out of harmony or lop-sided, users can flow in seamless experiences without caring to search for symmetry and lines of symmetry. Depending on the nature of the brand and their own goals and desires, users will tend to tacitly enjoy the balance they sense.      

What are the Benefits of Symmetry in UX Design?

When designers apply the balance that symmetry brings in their designs, they can:  

1. Boost the Visual Appeal

Symmetry in UX design goes a long way to boosting the visual appeal of digital designs. The sense of order and balance it gives tends to come across to users as both attractive and professional. More symmetrically designed websites and apps can therefore be more engaging—in a gently guiding way. They can encourage users to explore and interact with the content.  

2. Improve the User Experience

Symmetrical designs make for a better user experience as they make navigation simple, plus the content is easy to find and interact with. Symmetry is a tool to guide the user's eye in a natural flow across the interface. This will reduce the user’s cognitive load, so the interface feels more intuitive and user-friendly—important aspects especially in apps with users on the go. What’s more, a design with a symmetrical balance can draw users’ eyes to the middle of the screen—ideal to point them to the CTA and raise the likelihood that they’ll click on it. Design patterns can feature aspects of symmetry for such purposes. 

Learn more about design patterns in our video: 

Show Hide video transcript
  1. Transcript loading…

3. Raise Readability and Accessibility

The balanced distribution of design elements in designs that have symmetry axes makes content more readable. Users can understand and absorb information more easily. That’s a major benefit for users with disabilities, who can more quickly recognize and interact with the interface elements than they would otherwise.  

 See why accessibility is such a vital concern in design:  

Show Hide video transcript
  1. Transcript loading…
  

4. Improve the Mobile Experience 

Responsive design is an essential point to consider, especially in the mobile-first era where most users access digital products on handheld devices. Another main benefit of a more-or-less symmetrically designed website or app is that it can translate more easily across screen sizes with responsive design. Visual elements can appear on any screen as intended, which improves user interaction and the overall user experience.  

CEO of Experience Dynamics, Frank Spillers explains responsive design:  

Show Hide video transcript
  1. Transcript loading…
  

5. Strengthen Brand Identity

A consistent symmetrical design across a brand’s digital platforms can help it establish a strong, recognizable brand identity. A high level of symmetry in visual design carries messages of stability and reliability. Plus, it fosters user trust and loyalty. These aspects are crucial for a brand to enjoy success.  

A screenshot from a Maersk web page.

Maersk’s application of symmetry helps their users and customers—and logistics and transportation tend to demand a high degree of trust in a brand.

© Maersk, Fair Use

Best Practices to Use Symmetry in UX/UI Design

Designers can leverage symmetry in their digital designs when they:   

1. Leverage Rotational and Translational Symmetry

Designers apply rotational—or radial—symmetry when they rotate elements around a central point. They use it to create dynamic patterns that give a sense of movement and energy. Meanwhile, translational symmetry is what designers use when they repeat elements at regular intervals. That can create depth and a sense of continuous flow in a design. These types of balance and symmetry are helpful to make the most of the visual impact and user engagement in a digital product.   

2. Balance Symmetry with Asymmetry

Symmetry brings order and familiarity—and, from that, a sense of stability and peace. Designers can add interest and focus to a design, though, with some calculated asymmetry. If they do it strategically, they can use some asymmetrical arrangements to guide users' attention to key areas, like calls to action. So, some degree of balance between symmetry and asymmetry can help designs be both beautiful and practical.  

3. Use Symmetry to Guide User Attention

Symmetry isn’t just about aesthetics; it's a powerful tool to organize content and guide user attention. When designers align and distribute elements symmetrically, they can leverage the interplay of equal halves to create a natural flow and lead users’ eyes through the interface. For instance, to align text and images on a central axis or distribute icons evenly across a navigation bar can improve a website’s usability and make for a more cohesive experience overall.  

A screenshot of Pinterest's web site.

Pinterest’s use of symmetry naturally leads eyes to find what users’ want.

© Pinterest, Fair Use

4. Use Grids

One easy and popular technique that designers use to help with symmetry is to split a page into parts with a series of horizontal and vertical lines. Then, they put design elements in these sections to create a balanced and symmetrical layout. For instance, a 12-column grid for a web design layout can help designers place elements evenly across columns.  

5. Use Patterns

Designers can use repeating shapes or colors to establish order and balance. They might split a webpage into sections and leverage symmetry that way. Alternatively, they might create a background to do this, and make a webpage more appealing with an alluring pattern.   

6. Use Colors and Contrast

Designers can use a limited color palette to help create a sense of order and balance.  This can help a website look more harmonious and professional. Plus, designers can use colors to highlight important information and form a visual hierarchy so users’ eyes follow a helpful flow. It’s essential to get color balance and contrast right to maintain balance and help users, especially users with visual impairments like color blindness. For instance, if a designer puts a dark-colored element on one side of a page, they should balance it with a similarly dark element on the opposite side to achieve good symmetry.  

Watch as Arielle and Joann Eckstut, leading color consultants and authors—and among the most definitive authorities on color in the United States—give tips on how to choose colors: 

Show Hide video transcript
  1. Transcript loading…
    

7. Use Shapes

Simple shapes such as circles, squares and triangles are helpful tools for designers to leverage a sense of symmetry and balance. What’s more, they can use shapes to pique users’ interest and draw attention to important information. It’s important to use shapes—and sizes—of elements consistently. For example, an equilateral triangle can serve as a helpful Play or Proceed button element. Meanwhile, a button on either side with two triangles pointing to the right can serve as a Fast-forward button, and a button with two facing the other direction can indicate a Rewind button. This will also match users’ mental model for a media player.   

8. Remember the Purpose

It’s vital to consider the brand’s nature and message as a deciding factor between symmetry and asymmetry in a digital product. This could feature in a brand’s guidelines, so designers should refer to their client’s design brief as well. For a bank’s app, for example, a symmetrical design is more likely to instill a sense of trust in users. Meanwhile, a more asymmetrical design would be more in step with a brand in the entertainment industry—to bring its energy and dynamism to users.  

A screenshot from a Hubspot web page.

Cloud-based customer relationship management (CRM) platform, HubSpot show a neat grasp of symmetrical design that’s well-suited to their user base.

© HubSpot, Fair Use

9. Remember the Users

Aside from the brand—or maybe because of it as well—designers should always keep the users in mind when it comes to decisions about symmetry. Symmetrically designed digital products can convey a greater sense of sophistication and luxury. Meanwhile, less symmetry might appeal better to a younger audience, or one more interested in disruptive, unusual content.   

It’s also vital to consider the users’ culture in this respect. As symmetry and asymmetry are bound up in design principles that different cultures will appreciate in different ways, designers should align with these expectations.  

Author and Human-Computer Interaction Expert, Professor Alan Dix explains important points about how to design with culture in mind: 

Show Hide video transcript
  1. Transcript loading…
Video copyright info

Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons

Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg

Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg

Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg

 

10. Consider the Other Gestalt Principles

Effective design doesn’t revolve entirely around how to find an axis of symmetry. The Gestalt principles of design are valuable allies for designers. Designers can consider how other Gestalt principles—such as the laws of proximity and figure-ground—might help achieve even more striking looks and helpful features in their design work. 

A diagram illustrating the Gestalt rule of proximity with two sets of squares, one scattered set and one close together.

Proximity (above) is one particularly useful Gestalt principle, law or rule; figure-ground is another (below).

© Interaction Design Foundation, CC BY-SA 4.0

A diagram illustrating the Gestalt law of figure-ground, with Rubin's vase showing two perspectives of a vase and a pair of faces facing each other.

© Interaction Design Foundation, CC BY-SA 4.0

Risks and Considerations with Symmetry in Digital Designs

1. Potential for Monotony

Symmetry brings a sense of order and harmony to design, but too much of it can give a design a dull look and turn users off a brand. Perfect symmetry can come across as artificial. The predictable nature of symmetrical balance means there’s little room for flexibility. Compositions must be identical on both sides for that. If designers tie themselves to an axis of symmetry, the equation can result in designs that feel dry and unengaging.  

2. Challenges with Complex Layouts

Perfect symmetry may promote stability and consistency, but it can sometimes stifle the creative expression a designer needs for more complex layouts. Strictly bilateral symmetry may dull the visual impact of a design. It can depend on the brand and the brand’s message, but if users arrive expecting some excitement, adventure and a visual feast, they’ll have little to excite them if a design is too symmetrical.  

3. Balance Symmetry with Creativity

It’s more of an art than a science to achieve balance in design. That’s why designers are better off when they consider how much of a thoughtful blend of symmetrical and asymmetrical elements they can use. It’s that all-important balance between the order and predictability of symmetry—to guide users and make a design feel more familiar—and some degree of asymmetry—to insert some dynamism and focus in it.   

A screenshot of the Beanstalk website home page.

Beanstalk—from software company Wildbit—makes hosting code and managing deployments easier. Their use of symmetry helps to mirror this message in a highly user-friendly form, so teams can work on creating exceptional software instead.

© Wildbit, LLC., Fair Use

Overall, symmetry in the design of digital products is more about balance and order than perfect mirror-imaging. As with other design and art forms—like music—those who experience design work tend to have little patience for monotonous arrangements. It takes careful consideration to strike the perfect chord between predictability and engagement.  

The designers who reflect their brands’ values and users’ needs, desires and expectations well in this sense are those who leverage just the right amount of symmetry. So, rather than a game of calculating the equation of an axis of symmetry to find out how much “disorder” or “playfulness” a designer can get away with, it’s a question of balance. It’s about mirroring both client-brand and user demand in good-looking, user-friendly interfaces.  

Learn More about Symmetry in UX Design

Take our Visual Design: The Ultimate Guide course. 

Read our piece, Symmetry vs. Asymmetry - Recalling basic design principles

Consult Symmetrical and asymmetrical balance in web design by Eric Chung for more insights. 

Go to Guide: Understanding Symmetry and Asymmetry in UI Design by Leonardo Moreno for further details. 

See Benefits Of Symmetry In Web Design: What You Need To Know by BaseHost Team for additional insights and tips. 

Read The Magic of Symmetry in Design: Why It’s More Than Just a Pretty Face by Eduardo Feo for more information. 

Questions about Symmetry

How does symmetry affect user perception? 

Symmetry plays a crucial role in how users perceive design. It makes interfaces look balanced and harmonious. That goes a long way to making them more visually appealing and easier to navigate. When designers use symmetry correctly, they can help users feel more comfortable and confident with the product.  

In design, perfect symmetry means that elements on one side of an axis mirror those on the other side. In practical terms, though, it’s less about sticking to a strict axis of symmetry formula and more about achieving a high degree of symmetry—whatever’s appropriate for the brand and users. This balance helps users process information more easily, and lightens their cognitive load. For instance, symmetrical website layouts help users find information quickly.  

What’s more, symmetry suggests stability and reliability. Users often see symmetrical designs as being more professional and high-quality. This perception can boost their sense of trust and satisfaction with the product. For example, many corporate websites use symmetry to carry tones of credibility and authority to users.  

Try using symmetry to organize key elements and create a clear visual hierarchy. Align buttons, menus and content blocks symmetrically, so you guide users smoothly through the interface. However, mix in some asymmetrical elements—to keep the design interesting.  

Take our Visual Design: The Ultimate Guide course. 

Watch our video on visual hierarchy to understand more about this important subject: 

Show Hide video transcript
  1. Transcript loading…
 

What are the different types of symmetry?

Designers use various types of symmetry to create balanced and appealing designs. The main types of symmetry are:  

  1. Reflection symmetry: Also called mirror symmetry, this type occurs when one half of an object mirrors the other half. For example, a butterfly's wings show reflection symmetry.  

  1. Rotational or radial symmetry: This type appears when an object looks the same after you rotate it around a central point. A common example is a wheel or a starfish.  

  1. Translational symmetry: This type happens when an object repeats itself at regular intervals. Think of a wallpaper pattern where the design repeats across the surface.  

  1. Glide reflection symmetry: This combines reflection and translation. Imagine footprints on the sand where each step mirrors and shifts from the last.  

Each type of symmetry can enhance a design through a sense of order and harmony. However, consider what you want to achieve. Use reflection symmetry for formal, balanced designs. Rotational symmetry can create dynamic, engaging visuals. Translational symmetry works well for patterns and backgrounds. Radial symmetry draws attention to a central point. Glide reflection adds complexity and interest.  

Take our Visual Design: The Ultimate Guide course. 

How can symmetry improve accessibility in design?

Symmetry can improve accessibility in design since it makes interfaces easier to understand and get through. When designers use symmetry, they create a balanced and predictable layout—one that helps users process information more quickly. More specifically, designs that have more symmetry:  

  1. Simplify navigation: Symmetrical designs help users predict where elements are. For example, navigation menus that appear symmetrically at the top or sides of a page help users find them easily.  

  1. Enhance readability: Symmetry in text layout—like evenly spaced columns and balanced paragraphs—makes reading easier. Users with cognitive disabilities benefit from this clarity and structure.  

  1. Reduce cognitive load: A symmetrical design reduces the mental effort users need to understand and use an interface. They won’t need to spend extra time figuring out where things are or how to navigate.  

  1. Help users with visual impairments: High-contrast symmetrical layouts help users with low vision distinguish between different parts of the user interface (UI). Consistent patterns and balanced elements will also improve the overall usability of an interface.  

  1. Improve user confidence: Symmetry provides a sense of order and stability, so users feel more confident while they interact with an interface. That’s especially important for users with anxiety or those new to digital interfaces.  

Watch our video on accessibility to understand more about this essential design dimension: 

Show Hide video transcript
  1. Transcript loading…
  

How can I use symmetry to enhance user interface elements?

You can use symmetry to enhance your user interface (UI) elements by creating a balanced and visually appealing design. Symmetry helps users understand and navigate an interface more easily. Here are some practical ways to apply symmetry:  

  1. Align buttons and icons: Place buttons and icons symmetrically to make them easier to find and use. For example, arrange navigation buttons evenly across the top or bottom of your interface.  

  1. Balance text and images: Ensure that text and images align symmetrically. This creates a clean and organized look. For instance, place an image on one side; then balance it with text on the other side.  

  1. Use grids: Design your layout with a grid system to keep an effective balance of symmetry. This helps you align elements consistently. Plus, it’ll give users a calming sense of order.  

  1. Create consistent spacing: Use equal spacing between elements to make the most of symmetry. Consistent margins and padding can improve the overall balance of your design and make it more welcoming.  

  1. Design symmetrical forms: Make input forms symmetrical—align the labels and fields. This will help users to complete forms more easily and quickly.  

With the right amount of symmetry, you can create a UI that looks professional and feels intuitive to users. Symmetry will help them focus on important elements and not feel distracted. What’s more, you can leverage design patterns that take this and other user concerns well into account: 

Watch our video on design patterns: 

Show Hide video transcript
  1. Transcript loading…
 

Take our Visual Design: The Ultimate Guide course. 

What are the best practices for achieving symmetry in mobile app design?

To leverage symmetry in mobile app design, try these tips:  

  1. Use grid systems: This can help you get a consistent alignment of elements—and keep good symmetry across different screen sizes and resolutions.  

  1. Align elements evenly: Place buttons, icons and text boxes in symmetrical positions. For example, center-align headings and distribute navigation icons evenly over the bottom of the screen.  

  1. Keep spacing consistent: Keep equal spacing between elements; it’ll boost the sense of visual balance. Use consistent margins and padding to make a clean, more organized layout.  

  1. Balance text and images: Ensure that text and images align symmetrically. For instance, if you put an image on the left side, balance it with corresponding text on the right side.  

  1. Design symmetrical forms: Align labels and input fields symmetrically in forms. This helps users understand the structure and fill out forms more easily.  

  1. Use repetition: Repeat certain design elements—like buttons or icons. That can create a sense of rhythm and balance.  

  1. Focus on visual hierarchy: Arrange elements in a way that guides users' attention naturally. Symmetrical layouts can often help users find important information quickly.  

Remember, symmetry is more about balance and appropriate order than dictionary-definition symmetry or mirror-imaging elements precisely. Use your designer’s judgment to get the right balance. 

CEO of Experience Dynamics, Frank Spillers explains a human-centered mobile approach in this video: 

Show Hide video transcript
  1. Transcript loading…
  

How does symmetry impact the usability of a user interface?

Symmetry, done well, can create a balanced and organized layout that users will find easy to navigate. When designers use symmetry and create a proper balance, they can help users understand the structure of the interface quickly. More symmetrical designs can:  

  1. Enhance predictability: Users can find these layouts easier to predict regarding where elements are. For example, if navigation buttons follow a symmetrical placement, it can help users find them without effort.  

  1. Reduce cognitive load: Symmetry reduces the mental effort users need to process the interface. They won’t have to figure out where things are—something that makes the experience more intuitive.  

  1. Increase readability: Symmetrical text layouts improve how readable text is. Balanced columns and even spacing help with that. Users can read content far more easily when it shows in a well-structured format.  

  1. Boost visual appeal: Symmetry creates a visually pleasing interface—under the right circumstances and with the right amount of balance. Users are more likely to enjoy and engage with a design that looks orderly and harmonious if that’s what they expected to find to help them.  

  1. Support accessibility: High-contrast symmetrical layouts help users with visual impairments navigate more easily. Consistent patterns and balanced elements boost the overall usability.  

Remember, symmetry is a tool of balance. The right amount on the right brand interface can help users find what they need quickly and enjoy a smoother interaction with the design.  

 Take our Visual Design: The Ultimate Guide course. 

Watch our video on usability for more information about this important subject: 

Show Hide video transcript
  1. Transcript loading…
 

What are the challenges of maintaining symmetry in responsive design?

More symmetrical designs may translate well across various screen sizes, but that doesn’t guarantee a page will turn out perfectly everywhere. Several challenges arise, including:  

  1. Different screen sizes with different dimensions: For instance, a layout that looks balanced on a desktop may not translate as well to a mobile screen. Desktops and laptops are more landscape-oriented, while smartphones are more portrait-oriented. 

  1. Orientation changes: Users can switch between portrait and landscape modes. A design that’s more symmetrical in one orientation may lose it in the other.  

  1. Content reflow: Responsive designs adapt to fit different screens, which can cause content to shift and disrupt symmetry. For example, text and images might not align properly when the layout changes, making the design look uneven.  

  1. Complex layouts: Advanced layouts with multiple elements can make it harder to keep a good sense of symmetry. So, to ensure that all elements stay balanced across different screen sizes will complicate matters in the design process.  

To address such issues, designers should use flexible grid systems, test across multiple devices and prioritize a balance between symmetry and usability. It’s better to test earlier than later, too, and to consider a mobile-first approach from the start.  

CEO of Experience Dynamics, Frank Spillers explains responsive design:  

Show Hide video transcript
  1. Transcript loading…
 

How can symmetry affect the visual hierarchy in UI design?

Symmetry affects the visual hierarchy in UI design as it creates a clear and organized structure. This is to guide users' attention. So, when designers apply a higher degree of symmetry, they can make it easier for users to understand which elements are important and how to navigate the interface. Namely, symmetry can:  

  1. Direct attention: Symmetry helps highlight key elements. For example, if a button is central or a headline is in the middle of a symmetrical layout, it will draw users' focus immediately.  

  1. Create balance: A symmetrical design balances visual weight. So, no part of the interface will feel heavier or more cluttered. This balance can make the design more visually appealing and easier to follow.  

  1. Enhance readability: Symmetrical text and image arrangements improve readability. Users can scan and process information more efficiently when the layout is orderly for them.  

  1. Establish consistency: A consistent framework for placing elements means users can more easily predict where to find information.  

  1. Support navigation: Symmetrical navigation menus and buttons help users spot these elements fast. Users can then move through the interface without confusion keeping them back.  

Take our Visual Design: The Ultimate Guide course. 

Watch our video on visual hierarchy to understand more about this important subject: 

Show Hide video transcript
  1. Transcript loading…
 

Is it advisable to go for full or complete symmetry in a UI design?

It’s not advisable—except in circumstances that call for it. While symmetry creates balance and order, a design that features it exclusively can feel monotonous and predictable. Here are some points to consider:  

  1. Visual interest: Full symmetry can make a design look dull. To bring in some asymmetry will add visual interest and engage users. For example, you might balance symmetrical navigation with asymmetrical content areas.  

  1. Hierarchy and focus: Asymmetry can help highlight important elements. To put a key button or feature off-center will draw users’ attention to it. Meanwhile, complete symmetry might distribute focus evenly. If users have everything in front of them looking so similar, they’ll find it harder to spot the most important parts.  

  1. Adaptability: Asymmetrical elements allow for more flexibility in responsive design. They can adapt better to different screen sizes and orientations. 

  1. Natural design: Natural and intuitive designs often combine symmetry and asymmetry. This combination mimics the natural world, where perfect symmetry rarely occurs. So, those well-placed imperfections can be the perfect way to a more relatable and pleasing interface.  

Take our Visual Design: The Ultimate Guide course. 

Watch our video on visual hierarchy to understand more about this important subject: 

Show Hide video transcript
  1. Transcript loading…
 

How can I use symmetry to guide user navigation?

You can do this by creating a clear and intuitive layout that helps users find what they need quickly. Here are some effective strategies:  

  1. Align navigation elements: Put navigation menus and buttons in a symmetrical style. For example, place a horizontal menu at the top of the page with evenly spaced items. Users will quickly understand where to look for navigation options.  

  1. Create consistent layouts: Use symmetrical layouts for key sections. If the homepage and subsequent pages follow a similar structure, users will find it easier to navigate.  

  1. Balance the visual weight: Ensure that elements on one side of the page have corresponding elements on the other. This balance draws the user's eyes naturally from one section to another, so they can follow the interface more easily.  

  1. Highlight important features: You can use symmetry to make important features or calls to action stand out. Center-align a prominent button or feature so users’ eyes go right to it.  

  1. Design symmetrical forms: Place labels and input fields symmetrically in forms. This will help users complete forms faster—they’ll more easily predict where each field is.  

Watch our video on design patterns: 

Show Hide video transcript
  1. Transcript loading…
 

Take our Visual Design: The Ultimate Guide course. 

What are some highly cited scientific articles about symmetry?

1. Thimbleby, H. (2002). Symmetry for successful interactive systems. In Proceedings of the 4th Conference on Human-Computer Interaction (HCI'02), People and Computers XVI (pp. 1-9). Springer, London.  

This conference paper introduces the concept of symmetry as a guiding principle for designing successful interactive systems and user interfaces. The author argues that symmetry—both in its geometric and abstract forms—can make user interfaces easier to learn, use and program. So, their reliability increases. The paper explores how symmetry can explain the effectiveness of well-established HCI concepts like affordance and direct manipulation. It also discusses the potential pitfalls of abusing symmetry by designing only superficially symmetric systems that may appear visually appealing but lack true functional symmetry. That problem can result in deceptive and ineffective interfaces. The paper gives a framework for how to understand and apply symmetry in interactive system design. It highlights its role in addressing design trade-offs and creating coherent and intuitive user experiences.  

2. Leopold, C. (2019). Symmetry Concepts as Design Approach. Aesthetics Between Irregularity and Regularity. In B. Sriraman (Ed.), Handbook of the Mathematics of the Arts and Sciences (pp. 202-210). Springer, Cham.   

This paper explores the application of symmetry concepts from modern mathematics as a design methodology in the context of the Ulm School of Design. The author discusses how the symmetry concept—understood as transformations—was implemented in design teaching at the Ulm School. The paper introduces the idea of defining levels of symmetry. There, the similarity of figures is something that the respective transformation and its invariants determine. The aim is to bridge the mathematical understanding of symmetry as transformations with a more associative approach in design disciplines—following the systematics Kurd Alsleben developed based on the work of Wolf and Wolff. The paper relates this symmetry concept to the theory of information aesthetics. There, the interplay between redundancy and innovation is crucial to achieve an aesthetic state. Such a state is defined as a relation between order and disorder according to Max Bense. Transformations with many invariants are associated with repetitive redundancy. Meanwhile, those with few or no invariants represent innovative creations. However, innovation becomes recognizable only on the basis of redundancy. The paper illustrates the application of this theoretical concept as a design methodology through an example of the creation process of patterns in a student work.  

Answer a Short Quiz to Earn a Gift

Question 1

What is the main characteristic of symmetry in design?

1 point towards your gift

Question 2

Which type of symmetry involves elements being mirrored across a central axis?

1 point towards your gift

Question 3

What characterizes rotational symmetry in design?

1 point towards your gift

Question 4

How does asymmetry differ from symmetry in design?

1 point towards your gift

Question 5

Why do web designers use symmetry in layouts?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on Symmetry in UX/UI Design

Here’s the entire UX literature on Symmetry in UX/UI Design by the Interaction Design Foundation, collated in one place:

Learn more about Symmetry in UX/UI Design

Take a deep dive into Symmetry with our course Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs. 

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use. 

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers. 

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

All open-source articles on Symmetry in UX/UI Design

Please check the value and try again.

Open Access—Link to us!

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!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2024, June 18). What is Symmetry in UX/UI Design?. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
315,303 designers enjoy our newsletter—sure you don’t want to receive it?