Post navigation

What is Brutalism in Web Design?

What is Brutalism in Web Design

Intentionally “bad” web design might be just what you’re looking for to set your brand apart from the competition. Web design brutalism—design that avoids traditional tactics like intuitive user interfaces and instinctual layouts—is a fairly new web design trend, but it’s catching on in certain circles. Is brutalism right for you?

 

Web Design Brutalism Explained

What exactly is brutalism in web design? The Washington Post fairly attributes the new design trend to Pascal Deville, founder of brutalistwebsites.com, and his eye for the “brutalist” aesthetic. His website serves as a gallery of other sites that he thinks fit somewhere on the brutalism spectrum.

 

In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design,” Deville says of the design trend.

 

Rugged, unconcerned with comfort, and reactionary. That’s brutalist web design in a nutshell, but the practice continues to evolve as designers clash with conventional tactics in order to stand out.

 

Brutalist design isn’t a new notion. Designshack points out that brutalism was a popular style for posters and art in the ‘50s and ‘60s, and the reason it’s making a comeback is because we’re just not used to seeing it as much anymore. 

 

Why is Web Brutalism Suddenly So Popular?

By Deville’s definition, brutalism in web design is a response to click-and-drag design templates made popular and more accessible by website builders like Squarespace and Wix. As a reaction, and maybe even competitive, brutalist web designers often build their website frameworks using hand-coded HTML and bad ‘90s-era graphics.

 

That said, there’s something utilitarian and practical about eschewing popular design aesthetics. There’s an honesty and realism ingrained in brutalist web design that designers and users find refreshing. When visceral elements like out-of-place text or gaudy graphics are combined with a transparency in thought process, it catches users’ attention.

 

In fact, some companies thrive using the brutalism aesthetic. Deville points to Craigslist as a good example of a long-running brutalist website that’s simple, ugly in the modern design sense, but also successful.

 

Brutalist Web Design and Conversion Rates

What brutalist web design lacks in attractive UI it may make up for with increased conversion rates. Mark Sheneker for WebdesignerDepot argues that brutalism in design can directly impact website performance and simplify the user experience. As a result, conversion rates are higher. He attributes this to the brutalism design trend’s minimalist, bare-bones approach:

 

“Believe it or not, while brutalism certainly won’t win any aesthetic accolades any time soon, its ultra-minimalist design choices actually can prove beneficial to raising conversion rates.”

 

Brutalist websites have:

 

  • Fewer distractions
  • Easy navigation
  • Quicker page load times

 

Sheneker goes on to say that by stripping away the elements that define traditional web design—high resolution images and video, taxing content management software, Javascript and CSS—what’s left is a super-fast website with no excess fat. Both he and marketing expert Neil Patel cite a Kissmetrics infographic to help stress the importance of trimming design fat to speed up your website.

 

  • The longer it takes a page to load, the higher the abandonment rate will be
  • 47% of consumers expect a web page to load in 2 seconds or less. 
  • A one-second delay in page speed can cause a 7% drop in a site’s conversions.
  • If an e-commerce site is making $100,000 per day, a 1-second page delay could cost you $2.5 million in lost sales every year.

 

Brutalist web design takes away the distractions, both on screen and on the backend of your website. Naturally, this speeds up your site’s performance. Brutalism also eliminates complexities in navigation, which are most often responsible for bad usability, and gives users a clear path to conversion.

 

It’s important to understand as much as you can about the design trend if brutalism sounds like the solution to your performance woes.

Download our guide to learn how to improve your website UX.

 

Trying to Nail Down the Brutalism Web Design Aesthetic

The aspect(s) of brutalist web design that make it so appealing also make it tough to nail down as a design strategy. The underlying concept is to not be cookie-cutter and predictable. With that in mind, there are some broad strokes you can make if brutalism is your web design choice.

 

Tips for Brutalist Web Designers

 

Audience matters: The first hard rule—if brutalist web design had hard rules—would be to know your audience. Some brands are suited for brutalism over others. You may not want to opt for a brutalist design if the payoff is alienating your audience.

 

It’s important to understand why brutalism as a design strategy works. If it won’t work for your brand, your business goals, and your audience expectations, brutalism isn’t for you.

 

Unbalance your white space: You’ve learned that balancing a website’s white space is key to creating a pleasing aesthetic, but pleasing isn’t your first priority when aiming for brutalism. Unbalance your (not necessarily white) white space and use big, bold blocks of colors that don’t always complement each other.

 

Practical over pretty – Aside from creative spite for cookie-cutter design trends, most brutalist websites are designed to serve a specific purpose above all else. The fancy bells and whistles used by traditional designers are avoided in order to aim users directly at an end goal—a conversion—and in that sense, brutalism is perfect for streamlining the user experience.

 

Play with shapes and sizes – Brutalist web design is commonly associated with mid-20th century architecture trends. Unique, abstract shapes draped in clean, unassuming colors were in fashion for being unfashionable, and the same is true of shapes and sizes in brutalist web design. Try mismatching different shapes and enlarging or shrinking different text elements.

 

Common Brutalist Web Design Practices

 

  • Black or white backgrounds
  • No gradients or shadows
  • Overlapping elements
  • Lack of symmetry
  • Crowded design
  • No distinct hierarchy
  • Monospaced typography
  • One font used throughout
  • Contrasting color palette
  • Lack of animation
  • Sparse imagery
  • Simple or non-existent navigation
  • Single-page website design

 

Is Brutalism Just “Bad” Design?

The verdict is still out. One brand’s bad design is another’s secret sauce. For some brands, brutalism hits a nerve that works for their target audience. For others, it’s a design choice that they’d never make.

 

Brutalism in web design isn’t for everyone.

 

Brutalist web design is bold, in-your-face, and comfortable in its audacity. Impactful web design usually is. That doesn’t make it a bad design choice, but it also doesn’t make it the right one for you. There are benefits and pitfalls, just like most design tactics and strategies. The trick is choosing the right web design aesthetic for your brand, business, or industry.

 

If you’re not sure what that is, reach out to our team of web design experts so we can help you make a confident decision.

 

Want to improve your website UX?