Design & Style

Asymmetrical Design: 4 Tips for Using Asymmetrical Design

Written by MasterClass

Last updated: Nov 21, 2022 • 4 min read

As the opposite of symmetrical design, asymmetrical design creates variation between the left and right side of a template. Learn about the characteristics of asymmetry and how to integrate them into your graphic and web designs.

Learn From the Best

What Is Asymmetrical Design?

Asymmetrical design is a type of symmetry that uses different color schemes, varying shapes, and irregular layouts to create inequality between the two halves of a design. Thus, an asymmetrical design has a lack of symmetry throughout the visual elements, creating an uneven display. You can incorporate asymmetrical design techniques to build a dynamic and unique arrangement. In graphic design, you can use asymmetry to develop captivating website layouts, brand logos, and advertisements.

There are five main design principles of asymmetry: balance, contrast, proportion, white space, and movement. When creating an asymmetrical design, consider these design elements and how you can incorporate them to create a visually engaging design. For example, you can create balance in your design through proportion by positioning a single, large object across from a group of small objects.

Tips for Using Asymmetrical Design

Asymmetrical design often reflects modernism with its unique use of space and color. The key to implementing asymmetry is to understand how to pair contrasting elements in a balanced and visually engaging way. Here are a few tips to consider:

  • Add focal points. Focal points are the areas within a design that capture the viewer’s gaze. You can create focal points by varying the color, texture, and size of different asymmetrical elements within your design. Adding these types of striking features to your design can differentiate the foreground and background for the viewer.
  • Create visual balance. Although asymmetrical layouts strive to create irregular and disproportionate outlines, they still emphasize balance. With a balanced design, the visual weight of the varying colors, objects, and textures is stable, allowing the viewer’s eye to take in the space without feeling overwhelmed. You can create balance by playing with color, counteracting a large object with blank space, changing typography, or expressing movement in the design. Consider also using a grid to determine whether your have a balanced digital design.
  • Integrate contrasting colors. Another aspect of asymmetrical balance is using contrasting colors to guide the viewer’s attention. Contrasting colors are colors positioned on opposite sides of the color wheel. Examples of these color pairings include red and green, blue and orange, and purple and yellow. In your asymmetrical design, incorporate light and dark colors to highlight certain areas of your design.
  • Use movement and white space. Incorporating movement into your design is another way to guide the human eye to a central point. For example, if you’re designing a homepage for a website, consider using movement in your design to influence user attention, encouraging visitors to click on additional links and pages. Playing with white space can also help structure the movement in your graphic or website design. Rather than using the traditional grid system for your UI design, incorporate negative space into your web pages to send users to key points. Balancing your design with white space is also a great way to improve the user experience, as it prevents site visitors from getting overwhelmed by extra links, boxes, and web pages.

Examples of Asymmetrical Design

Asymmetrical designs appear across artistic works, website layouts, and brand graphics. The below examples describe how you can apply asymmetry to different platforms:

  • Art: Artists often use asymmetry to establish visual weight in a painting or sculpture. For example, a painting may incorporate asymmetry by displaying a complex scene on the left side of a canvas and a subtle image on the opposing side. Famous works of art that use an asymmetrical layout include Vincent Van Gogh’s The Starry Night, Edgar Degas’s Dancers Practicing at the Barre, and Yinka Shonibare’s Dysfunctional Family.
  • Website Design: To stand out amongst competitors, businesses and blogs can use asymmetrical layouts for their web pages. A simple symmetrical layout with matching text blocks and images is less dynamic and visually appealing than an asymmetrical page with distinct colors and patterns. Playing with the web design of a site is also a great way to establish a clear brand identity.
  • Graphics: Promotional graphics, such as flyers, logos, stickers, and infographics, use asymmetrical design to capture the customer’s attention. Companies often incorporate asymmetry through contrasting colors and negative space to create bold advertisements and business cards. For instance, creating a business card with an enlarged brand font on top and a small-font description on the bottom is one example of asymmetry in key graphics. You can also incorporate contrasting colors to create balance between the background and typography.

Want to Learn More About Tapping Into Your Graphic Design Genius?

Get a MasterClass Annual Membership and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “art director of the era”—reveals his processes for going off the (design) grid, implementing typography in new and interesting ways, innovative uses of photography and collage, and so much more.