I browsed through 100+ brutalist websites; here’s what I learned
By: Malavika Doshi
Tags: UI, Visual Design, UX, Brutalism, Web Design

Over the last few months, I’ve spent a great deal of time browsing through awwwards collections, looking for inspiration to update my website(I finally did! If you want to check it out); And if there’s one thing I’ve understood from this meticulous browsing, it is that brutalism as a style is not as well defined as it should be, considering how often it makes the rounds in design trend lists.

I’d covered what brutalism in digital design is in an earlier article but here’s a refresher on its characteristics. They are loud, haphazard, and quite in your face. There’s large, sometimes displeasing text, loud colors, randomly placed elements that can sometimes even overlap.

So just for you to understand roughly the range we’re talking about, a brutal website can be anything from a basic HTML coded web page that doesn’t care enough to look good for you, like this:

to a webpage that has large text and loud colors. Like this:

Clearly, there is a wide range of websites that can be brutal. But what is good brutal? What is brutal just because it has the audacity? This lack of definition makes it difficult for people to be more receptive to the concept itself. Brutalism originally started as a reaction against web minimalism, and the websites that rose from this movement were ugly and irreverent to make a statement. That statement’s been made loud and clear. It is now time to define the style considering the potential that a good brutalist website has. This article is an attempt at getting closer to a definition.

It is important to note that the following views on a good brutalist website are based on my analysis of these characteristics within the context of good design.

Here are a bunch of features that I think would work well to contribute to your next brutalist website.

1. Large text: In a typical brutalist website, all text is a little larger than it needs to be. Be it menus, headings, subtext, anything. This helps in being loud of course but also brings with it the possibility of playing around with white space and other tools you would use to establish a sense of balance.

Relatively larger text is a common feature of brutalist websites.

If you want the text to be dramatically huge, use them strategically with the context of your website in mind. It may make sense for a portfolio website to have huge text that takes up multiple scrolls for one sentence, but this may not make sense for an e-commerce store.

2. Colors: A good website will have to make sure to not overwhelm the user. It’s just how functional websites are supposed to be. So when picking a palette, you don’t want to pick extremely saturated colors, making it really difficult for the user to read or to even look. However, you also want to stay true to the brutalist style so you can be loud, so long you don’t hurt the usability. Also, brutalist websites were originally deliberately stripped off the character, which meant some also usually lacked color. A black and white website with some accent also works well.

3. Images: How the images of a brutalist website are and their behavior depends a lot on the purpose of your website. They can be large, have funny/smooth transitions, can burn the color of the text that is on it, be black and white, or even overlap (seamlessly) with other elements. Here’s an example.

4. Transitions/animations: A rather important feature, the elements of the website were originally animated in different directions to throw off the user’s navigation, but now we see more functional websites use this only to an extent, The animations either make the elements glide incredibly smoothly, or have different elements move gently in different directions, making the user go woohoo as they scroll. The page transitions are also super smooth and usually have elements/colors gliding into the screen, sometimes from the opposite direction. In some websites, scrolling from top to down causes a right to left movement on the screen. Another rather cool feature is to have text constantly moving across the screen, sort of like a news flash.

5. Fonts: I could write a whole article just about the range of fonts that you can find on brutalist websites. Sometimes, custom fonts are even made just for the website. Essentially, your font choice really will depend on your website. I’ve seen fonts that have a higher width or are ‘broader’(Like Micro Extend) being used quite a bit.

Display serif fonts are also widely used. Sometimes, mono fonts are paired with either of these to help give off a raw look. Here’s a list of fonts (of all kinds) that I think would generally work for brutalist websites.

Agrandir Grand B

GT America

Chivo

Franklin Gothic

Barlow

Cormorant Garamond

Cooper Hewitt

Mono

Neue Machina

Here’s also a link to a website that’s listed typical brutalist fonts.

6. Cursors: Some websites have custom cursors that are either a small solid circle, an emoji, or sometimes even a symbol. This can be cool as long as the size or character of the cursor does not come in the way of smooth navigation.

7. Some other additional features include:

Hovers/ tools for micro-interaction: A rather cool feature, these tools enable users to interact around the screen by hovering over elements or by simply moving the cursor. As a result images pop up, shapes move, or small animated elements are set off.

Storytelling: Certain websites unfurl a story as the user scrolls to navigate. This helps create an immersive experience for the user. Check out this OnePlus website which serves as a perfect example.

Switching between light and dark mode: Though not so common, to maintain the raw, audacious feel, you can switch between dark and light modes like in the example above. Although, I’d suggest using such features for portfolio websites or websites where the audience would not find this back and forth switch a botheration/are aware of the intentions behind the switch.

Exposed grids: A lot of websites, especially e-commerce stores or blogs usually have their grids exposed. This can help bring a little order to your measured chaos, and also helps really set in the stripped-down look. You can always animate the grids if you want to.

Retro computer aesthetic: We’ve all seen the Windows XP aesthetic make a comeback. Retro computer graphics and fonts are also commonly used in portfolio websites and e-commerce stores with relevant branding.

There are obviously a lot of other features that contribute to brutalism and what we know about it today. The idea is to get closer to a more viable style for brutalist websites. It is a powerful tool that may have the potential to help overthrow the rather overused minimalism you see on the internet and actually help capture user attention in unique ways. This article was an attempt at doing the same. We’ve made our statement. Now let’s improvise and actually put these fearless web design skills to some good use.