Brutalist Web Design: Where Did It Come From and Why Is It Back?
It’s the start of a new year, which means everyone is making predictions on which new web design trends we’ll see pop up on WordPress sites this year. One of the predictions I’ve seen a lot of and originally was not too thrilled about is brutalist web design.
Here’s the thing: I don’t want to write off brutalism if there are valid reasons for its use in web design. After all, maybe it’s great for increasing conversions or in generating interest over a competitor’s site that takes a more traditional route to web design. Maybe.
Today, I want to reflect on this new web design trend that many predict will take a firmer hold of WordPress sites this year. I’m going to review:
- What is brutalist web design?
- Where did it come from?
- Why should you stop confusing brutalist design for antidesign?
- How can WordPress sites use brutalism correctly?
- Are there any benefits to be gained from it?
What Is Brutalist Web Design?
While working on another article, I ended up on the Balenciaga website as I dug around for examples. My first thought was, “Uh-oh. Someone broke something.” Once I started clicking through the links, my second thought was, “Oh no. Whose brilliant idea was it to design the site this way?”
At first glance, this looks like a very basic wireframe, right? If you click through the links though (which takes too long, in my opinion), you’ll find that this is indeed their web design and not a rudimentary wireframe. Once you get to the end of the site’s “navigation”, you’ll encounter one of their many lookbooks or campaigns full of raw-looking photos and minimal descriptions.
I was really confused. I thought maybe the site was incomplete or in progress and that they must have been in the midst of filling in the missing images. However, upon looking into the Internet Archive Wayback Machine, it appears that this has been their design for about a year now.
If this is your first time seeing a website like this, this is an example of brutalist web design. And it’s not alone.
Where Did Brutalist Design Come From?
Brutalism’s origins come from architectural design, which, when you think about it, makes a lot of sense. A website is basically just a digital structure for a business to set up shop, so why wouldn’t its principles be based on real-world design techniques?
The term “brutalism” comes from a few different sources in Sweden, Britain, and France. Basically, it stems from the French béton brut, which translates to “raw”. And that’s exactly what brutalist design–in architecture and on the web–is at its core.
When you look at why brutalism came to be in the 1940s and 1950s, there was a very clear reason for it. This was post-World War II when much of Europe was rebuilding after the highly destructive war that ravaged its cities. Rather than spend months or years designing and building lavish residences and public buildings to replace what had been lost, architects went with a more simplistic, practical, and cost-effective style.
This is what it consisted of:
- Repeating geometric patterns
- Highly modularized grid designs
- Concrete and brick materials
- Exposed inner support systems
- Greater focus on practicality and purpose instead of ornamental design
As time wore on and the continent recovered, brutalist architecture became a symbol of that war recovery effort. That said, this wasn’t always a positive thing as it was often associated with poverty, destruction, and depression. The somber colors and rigid lines of the structures didn’t help the cause much either. And then there was the fact that brutalism was closely tied to Communism, a steadily rising force at the time. By the 1970s, this style of architecture had faded.
Why Should You Stop Confusing Brutalist Web Design for Antidesign?
Flash forward to the present and it appears that brutalism is making a comeback. There’s a major problem with this though and it’s because many people confuse brutalist web design with antidesign.
In my research on this subject, I wasn’t able to find much statistical proof regarding the pros and cons of brutalist web design. That may be because it’s still fairly brand new or it may be because UX researchers don’t believe it has any staying power. What I did find, however, is this explanation from the Nielsen Norman Group about the differences between brutalist web design and antidesign.
“Brutalist designers want to break away from the stale, cookie-cutter, premade-template sites that dominate the web today. They want the web to be true to itself, to feel honest and not contrived.”
“Rather than just focusing on stripped-down UIs with raw or nonexistent styling, some designers interpret brutalism to mean rebelling against oversimplified design by intentionally creating ugly, disorienting, or complex interfaces… Some use harsh colors, disorienting patterns, weird cursors, and unnecessary distracting animations. The overall effect feels like bad 1990s’ designs on steroids.”
Now, raise your hand if, before today, you believed that nostalgic and super ugly 90s’ designs were brutalism in action. (If you can’t tell, I’m raising my hand here.)
I think there’s been a lot of confusion over what exactly brutalism means, which is why there’s often such a huge backlash against it. When you look at the origins of brutalism in architecture, the definition laid out by NNG makes much more sense. I just don’t know if many web designers were or are aware of where all this sprung from in the first place.
Part of the problem is that these web design trend or brutalism roundups–like this one from Awwwards–is harmful to the cause.
While I don’t believe that brutalist web design will be right for mostWordPress sites, I do believe there are certain uses for it that will work. We just have to stay away from antidesign. The only statement it’s making is that you want to anger everyone and adhere to no smart design principles.
How Can WordPress Sites Use Brutalist Web Design Correctly?
Supposing that the NNG is correct and that the ugly antidesign websites are not brutalist, let’s take a look at some real examples of brutalist web design on the web. While you might not find these to be attractive, creative, or impressive by any stretch of the imagination, just focus on the underlying principles that they’ve executed well. If you want to truly understand what the appeal is behind brutalism, you’ll find it in these examples.
First and foremost, brutalist web design seeks to strip a website down to its very core. Usually, this means removing any unnecessary bits of flare so that the purpose is as clear as day.
Wavy is a creative studio that focuses on providing clients with visual content. There’s absolutely nothing special about this site as it’s mostly a bunch of white space and very trimmed-back messaging, but that’s the point, isn’t it? They’re image masters, not wordsmiths or web designers.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
One of the most common things you’ll find in brutalist web design is a black-and-white color scheme, which I think this exemplifies well. While this site may be unimpressive at first glance, it’s quite logical in nature. For users that don’t click on the “Who’s JP?” (which leads to a trippy and colorful portfolio), they can instead visit the links at the bottom that go to the web designer’s work–which is the ultimate goal for a designer, right?
For web designers that want to adhere closely to the original principles of brutalism, they can use colors synonymous with the raw materials used in the architectural style; namely, concrete.
Another way in which designers can adapt the principles of brutalism for the web is by using modular bricks. With grid-based design currently in fashion, and with it playing so well with responsive design, it’s likely to be the one part of brutalism we can all agree is worth adopting.
This example goes back to the idea that brutalist design leans heavily on the use of “raw” materials. That’s why you’ll see many of these designs use monospace type. It might not provide for the most exciting read or do too much to invigorate your web design, but this kind of typography is reliable and steady.
This is actually a spoof website created by UX Design Collective. It claims to provide designers with a brutalism framework while, in reality, it’s just providing reasons why you shouldn’t use it. That aside, this site provides a good example of how simple the structure of these sites are. There is just one call-to-action on the entire single-page website, unlike most websites today that include one with each new step a visitor takes.
There are a number of brutalist elements highlighted here. There’s the concrete-like background color. There’s the simplified and non-hierarchical font. And there’s also the oversized text in the center of it all, which is similar to the oversized buildings often designed during the age of brutalism.
One of the other key elements of brutalist architecture is how exposed their buildings felt. Usually, you could see the beams and infrastructure responsible for holding the building together. In web design, this is typically something we go to great pains to hide. We don’t need people seeing the baseline grid and elements behind a website, but that is indeed what we have here.
Let’s go back to my first encounter with Balenciaga, shall we? Once I realized this had been their web design for a good year or so, I couldn’t help but wonder how a luxury fashion brand could get away with such a confusing and unattractive design. Using one of my favorite WordPress SEO tools SEMrush, I did a quick search on their traffic numbers:
That’s not a terrible number for a luxury brand. Hermès has over 130,000 in monthly traffic and Gucci has over 240,000.
I also ran a page speed test to see if this design was trying to compensate for the weight of a media-rich website:
As you can see, the page loading speed for Balenciaga isn’t that great either.
So, what’s going on here? What motivated this web design choice? Does the novelty of having a brutalist web design outweigh the unimpressive traffic numbers and slow loading times? And what about their conversion rates? Unfortunately, this information isn’t readily available for Balenciaga. But what I can surmise about brutalist web design in general is this:
Brutalist web design is not good for:
- Corporations and other entities that want to appear professional and modern.
- Anyone that wants to make their website a warm and welcoming environment.
- Websites that are complex in nature and require conversion features like mega menus, pop-ups and live chat to support their goals.
- Anyone nervous that anything but a modern design would confuse their audience and prevent them from converting in the end.
Brutalist web design (at least some of the elements) may be good for:
- Brand new web designers trying to get the hang of HTML.
- Anyone who wants to shock their audience or make a social statement.
- Websites suffering from slow page speeds or overly complex conversion funnels that want to experiment with a total redesign.
- Text-heavy websites that want more focus on the reading experience and less on distractions.
- Small e-commerce sites that want more focus on inventory and less on flashy promotional bars and overweight designs.
- Websites that have an audience that this type of nostalgia might appeal to (e.g. other web designers, developers, gamers, etc).
Here’s the thing: if brutalist web design really is going to be a modern trend, then there must be something good about it. While it may be harsh at first sight, you might find that the simplified usability, improved efficiency (not just for visitors navigating the site, but the time you spend building it), and greater transparency are beneficial for your WordPress site.
Realistically, as simple as these websites are, they should be faster to load, easier to navigate, and present fewer choices to work through… which should increase conversion rates. However, if you experiment with this and find that’s not the outcome, then the safer choice is to merge elements of brutalism with your otherwise modernly designed WordPress site.