Brutalist Design: Is it for you?

Touted as one of the web design trends of 2018, Brutalism has been growing in popularity. So what is Brutalism and where did it come from?

What is Brutalist design?

The word “Brutalism” comes from the French word béton brut which translates to “raw”. ‘Brutalism web design has its roots in architectural design. In the 40s and 50s, post World War II, much of Europe was rebuilding after the great destruction that rampaged the cities. These new buildings rather than being lavish and expensive, were simplistic, practical, cost-effective and much quicker to build. Architects designed to meet the purpose. These buildings were characterised by the following:

• Repeated geometric patterns
• Grid designs
• Concrete brick materials
• Exposed inner support systems
• Focus on practicality and purpose
• Somber colours
• Rigid lines

Unité d’Habitation, Marseille Le Corbusier, Completed in 1952

This design thinking was then borrowed from post World War II architecture to web design.

Brutalism in Web Design

While the world seems to be striving for fancy fonts, pleasing palletes and perfect placement, Brutalist design goes against the grain and sticks out like a sore thumb. This style makes it memorable and more importantly, functional sans the frills. So let’s give Brutalism a chance. Take a look at this example below:

This is the Balenciaga website which to me at first glance gives off the impression that images are yet to load but that’s just it — the website is complete. The absence of distractions and absolutely clear navigation works perfectly to serve the purpose of the website.

Next, take a look at craigslist.org.

The website is far from glamorous. The blue font and grayish white background doesn’t even qualify for a decent looking website but that’s the thing — it doesn’t have to be pretty. Function over form.

What characterizes Brutalist websites?

Brutalist websites as we’ve already established are raw, odd, awkward and even borderline (or outright) ugly. You can spot a Brutalist site if it has one (or more) of these features:

• Excess of hover effects
• A mix of bright-coloured system fonts (think 90’s websites) or monospace typography which is clear and steady
• Pop-culture icons
• Awkward transition effects
• Images appearing and disappearing at random
• Images in unexpected places
• Black & white colour scheme or colours similar to “raw material” like concrete
• Grid-based design borrowed from 50’s architecture — great for responsive design
• Oversized font in the middle — similar to oversized buildings designed during the age of Brutalism
• Visible baseline grids & elements “behind a website” like visible beams & infrastructure of the Post World War II architecture

For more examples, check out this awwwards page. Look out for the 90’s cursor throughout the page too.

Let’s face it — Brutalist designs are not for everyone. You may even risk being second-guessed by your client for an “ugly” design as they may not understand the appeal.

Who is Brutalism for?

Let’s start with who Brutalism is not for:

The prim & proper: Brutalism is definitely not for organisations wanting to appear modern & professional. If the aim is professionalism, opt for something sleek with pleasing colours & typography.

The warm, inviting type: For websites that want to appear warm & inviting like perhaps a website for spa bookings or therapy session bookings, Brutalism can really work against you with its glaring colours & odd transition effects.

Small e-commerce websites: For small e-commerce brands, Brutalist designs can actually be mistaken for low-budget or novice, therefore conveying inexperience & unreliability. For small, budding businesses, who are striving to be on par with big players, it is better to opt for a professional-looking website.

Websites that have conversion goals: Websites that are conversion driven most likely will have the need for live chats, pop-ups & possibly more complex coding that Brutalism would allow.

So, who is Brutalism for?

Slow loading websites: For websites that suffer from slow load speeds and are in need of a redesign, Brutalist designs work well to combat this issue with simple elements that do not require complex codes.

Newbies: For novice web designers looking to get a hang of html, Brutalism can teach a good couple of things and challenge their strengths and weaknesses.

Text-heavy sites: Brutalism works well for text-heavy sites who want to focus attention on the reading experience

Those with an audience Brutalism might appeal to: For those sites that have an audience that understand and appreciate this trend, Brutalism works well. You can in fact, make quite a statement & an impression on such an audience.

Conclusion

Simplified usability, improved efficiency, great transparency, easy loading, easy navigation, fewer choices, less distractions are some of the benefits of Brutalist sites that make it work. Brutalism offers a striped-down version of a website so purpose is clear. In conclusion, here’s underscoring Brutalism’s mantra — Function over form.