2020 Design Trend: Asymmetrical layouts in webpages

In late 2019, we started seeing an interesting design trend: Asymmetrical layouts. Unlike traditional webpages that fit nicely into columns & rows, this new style breaks elements outside of their grid and displays them in a far more artistic fashion.

This trend is not simply being done for the sake of being different. When everything online looks like it was created from a template, you eye starts to glaze over it all. Being able to create visually arresting content is increasingly important for brand awareness, brand value and simply just to stand out.

Stepping away from the the standards of UI design, breaking the mold a bit, gives power back to the designer to better create an artistic expression of what the message the web page is trying to convey. But while this idea can be embraced by truly creative designers that seek to stand out and create freely, it is easier said than done. Most cutting edge web tools still seek to reduce code or create no-code solutions but all are still working within the constrains of DIVs and CSS. These tools help setup projects faster but not always in a way that empowers creativity. Especially for asymmetrical design, it can be achieved in many ways, but fighting with code or no-code platforms to achieve such a look is taxing on both the designer or developer tasked with the execution.

Quest AI was created because we wanted to give that freedom back to the creative. We want to make it easy for anyone to get a webpage up and running in minutes instead of taking days training on the tool. We also seek to completely remove the idea of the code structure completely. Using Quest will not help you better understand how CSS works in anyway. It simply converts your visual vision from your design software that you’re already using. As such, there’s never been an easier way to create asymmetrical layouts because whatever is in the design, will be converted to code and served as a webpage without having to think about deconstructing the design and re-setting it up. The manual labor of positioning things outside of a grid is eliminated. Good riddance!

For some this might be scary to stare at a blank canvas. Modern apps and websites are generally designed around design systems or style guides. While gaining this freedom, we always encourage designers to refer to their brand guidelines but this allows them to bend and break some of the rules. It can easily become a mess and asymmetrical design opens the door to the possibility that you’re designing something bad. Essentially a tool like Quest really takes the guardrails off so it may not be for everyone. But that’s the point! Nothing limits deign more than hard rules that must be followed by all and when we’re all following those same hard rules, all our work looks exactly the same.

To learn more about Asymmetrical design with some amazing examples, visit this Dribble blog post here: