Web Design Trend #14 • Asymmetric and
Broken Layouts

Zazzle Media, by Jamie Leeson

If 2016’s real emergence in grid exploration was anything to go by, we’re pretty confident that the coming year will see big developments in both asymmetrical and unconventional ‘broken’ layouts. Although brands and services which are heavily content-led may continue using card UIs and more traditional grid based structures to help efficiently organize and display their content, we anticipate an increase in the use of experimental layouts across the web as brands seek to create unique experiences which set them apart.

Broken layouts (or grids, to some) are typically an approach to web design which places on-screen content outside of a standard 8, 10, 12 or 15 (etc…) column grid. What exactly constitutes as a ‘broken layout’ will vary by designer and project, but they generally involve organizing elements and content to a loose underlying baseline grid which acts as a starting point to move and manipulate content for the desired effect.

They’re very much a love-it-or-hate-it application within the web design sphere, and although some may question the impact they have on UX and responsive design, what they do offer is much greater freedom for designers. With these unconventional layouts, designers can overlay typography, imagery, and other content to create unique juxtapositions and layouts which draw attention and generate interest.

They work fantastically with parallax and scrolling mechanics; building up dynamic layers of moving content, helping give a sense of depth and to guide the user through the experience.

www.veintidosgrados.com_ (1)

Creative agency Veintidos Grados is a great example of a properly executed broken layout. They use a loose underlying grid to structure the content, then proceed to ‘break’ the typography out to create a layered aesthetic. This then translates into a parallax scroller, where all elements move at different speeds to further build on the sense of depth and dynamism.

Asymmetrical layouts are also similar in many ways. Asymmetric design (as the name suggests) is the process of creating solutions which aren’t symmetrical in their appearance. However, this isn’t to imply that asymmetrical designs are unbalanced or chaotic. Smart designers will employ clever use of space, scale and color to create layouts where elements work in harmony to compliment one another.

Asymmetrical design is great for drawing attention to particular parts of the page, or on-page elements themselves. The same principles here also help designers build strong on-screen hierarchies; using size, space, and color to develop clever solutions which frames the screen in a particular way to draw the eye and guide the user throughout.

sirinlabs (1)

Sirin Labs’ product promo site is a great example of asymmetric design which illustrates the points above. Although not symmetrical, the whole design balances perfectly, using the split typography to frame the page and draw your eye to the most important part – their product in the center.

Our prediction: Both of the above principles can be tricky to implement and will require plenty of careful thought and attention. But, if implemented properly, they’re great at creating both original and compelling experiences which really enhance your content and show your brand at its best. It’s for these reasons we anticipate more brands and designers embracing these principles and building further on the experimentation seen last year.

WordPress Video Lightbox