Asymmetric Web Design and Layouts

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Asymmetric Web Design & Layouts Overview

Most modern website designs are based on generic, off-the-shelf templates featuring conventional symmetry. Exceptions occur with news sites such as the BBC, where above-the-fold asymmetry is used to emphasize fresh or featured content. But even with the BBC, designs typically switch to a symmetrical format as users scroll down the page.

While symmetrical templates have several advantages (they're usually quick and easy to set up, for example), asymmetric layouts offer greater potential for a "look and feel" that's unique, immersive, and finely tuned to meet the needs of the website's audience. Asymmetric designs can also be very effective at guiding the user's eye to strategically important parts of the page, such as updates and alerts, and calls to action.

Asymmetric Web Design & Layouts Aesthetics

Asymmetric websites should adhere to at least some of the standard principles of design. These include a strong focus on white space, balance, adventurous typography, and a sense of movement.

White Space

White space (also referred to as negative or empty space) is always a key consideration in website design and is particularly so when creating asymmetric layouts. Text, media, artwork and structural elements need space to breathe. Few things are worse than complex or unorthodox designs that are cramped and struggling for air. White space can also be thought of as a design element, deserving as much attention as "tangible" elements such as text and shapes.

Balance

Asymmetric balance describes the harmony that exists when design elements cohere to form a unified, visually appealing whole. This means no design element or elements should dominate others to the extent that they're dwarfed or redundant, or appear to have been thrown in at random or added as afterthoughts. As far as website design is concerned, the foundations of asymmetric balance can be developed by experimenting wih techniques such as:

• Creating distance between disparate elements.
• Varying the use of form.
• Contrasting elements in terms of weight (ie, size and color).

The layouts below articulate the concept of asymmetric balance through combinations of form, weight, and distance.

Typography

In its most obvious form, typographical variation might consist of pairing a serif header with sans-serif body text. But there's much more to typography than selecting a typeface, and with asymmetric websites it pays to explore the unexplored and be as bold and adventurous as design constraints allow. As a very general rule, I've found that contrasting font weights and text justification (whether in headers or website body text) can be a quick, simple, and effective way to create asymmetry and add a bit of extra impact.

To achieve typographical variation, designers have access to CSS style properties that control:

• Font Color

• Font Size

• Line Height

• Word & Letter Spacing

• Font Weight

• Text Decoration

• Text stroke

• Normal vs. Italic Text

• Lowercase vs. Uppercase

• Justification

• Text Wrapping Options

• Writing Mode

Movement

Movement often features in asymmetric web design, print media, and paintings. In the context of web design, the term refers to the illusion of flow and dynamism that guides the user's eye towards calls to action, enroll or subscribe buttons, and discounts or special offers. The illusion can be created by positioning design elements in a specific way or by using color and/or emphasis.

Asymmetric Web Design & Layouts Best Practices

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.