If you’ve been to any hip photographer’s website, Balenciaga’s online store, or Adult Swim’s page, you’ve probably found the big menus, disproportionate borders, jarring fonts, and custom cursors unsettling. It’s a complete 180 from the flat and easy to navigate design most websites had since 2011. The chaotic designs we have today is called “brutalism.” And while this concept isn’t entirely new, it’s certainly another step further from the realistic backgrounds and buttons that minimalism squashed back then.
Here’s how this visceral design trend came to be.
What is Brutalism?
Brutalism is a trend that started in architecture. According to the Tate Museum, the term was coined by a critic named Reyner Banham to describe building styles that made use of massive blocks of raw concrete and steel in the 50s and 60s. This style, according to a course on brutalist architecture on educational resource site Study.com, is a statement that structures should embrace their function first and get rid of any distracting decorative facades.
Examples of these structures include the Boston City Hall, which looks like it was built from the roof down and the builders stopped midway. The result is a building filled with asymmetrical window arches that will definitely make you look twice.
The web design version is surprisingly the opposite from its architectural counterpart. It creates a visceral feeling by moving away from the flat visuals and straightforward function of minimalism and using loud colors and harsh contrasts instead.
But What About Functionality?
That’s the exact same question that web design scholars are seeking to answer. A position piece called “On Web Brutalism and Contemporary Web Design” says that web brutalism is an outright rejection of cookie-cutter designs that stifle their creativity. However, the same paper also pointed out that brutalist designers often get lost in creating a rebellious design that they forget functionality.
Their second point was that some designers may have forgotten to consider the repercussions of having plenty of elements and animations on the site, as they may be difficult to access for users with low internet bandwidth. As such, the authors recommend that people blend their wild ideas with usability for web design to “evolve positively.”
How Can I Apply It Without Alienating My Audience?
To understand how you can create a beautifully jarring yet functional website, you and your outsourced web developers need to take a look at the sites and companies that have done a great job with striking the balance.
- Navigation and Function: Frans Hals Museum – This site features soft color blocks and a huge header to greet their future viewers. But what makes it great is its navigation features. Since their website is also a way for people to book tickets and view their calendar, they have a navigation bar that’s easily identifiable and use. It has simple icons and fluid animations that are satisfying to hover on and click.
- Content: Adult Swim – the site is a way for fans of the channel to stream exclusive content. As such, its header is an embedded version of their free live stream, with a marquee of their shows and a vertical menu at the bottom. Developers have been saying “content is king” for years now, so Adult Swim gave theirs a comfortable seat at the top of their site.
What’s great about these websites is that they go big or go home on their home pages and it pays off. They show so much of their identity on it through larger than life pieces of content and animations that they don’t even need an “about us” page. Try to add brutalist elements to your website gradually to see if they actually work. It’s all about creating controlled chaos.