What is Brutalist Web Design

When we talk about web design, we often think of websites that are pretty. Of course, they have to be functional, but we also expect websites to look appealing to the eye.

Brutalism is a web design approach that breaks the rules. The term itself can refer to two different types of design. In this post, we’ll examine brutalist web design and help you decide if it’s the right design direction for your website.

The image above is from Brutalist Websites.

Brutalism comes from the French word brut, meaning raw. The design style started in the UK with architectural design from the 1950s that prioritized function over form. It was practical and low-cost and mostly built with concrete. Brutalism strips design down to the raw basics. It’s practical and can be ugly, but it’s always functional. It came to web design in the 1990s and can be difficult to define, but the point of brutalism in web design is visual impact.

Brutalist web design doesn’t follow the current trends or play by the rules. It doesn’t fit the design directions everyone else is following. It stands out and is often crude in its design. Brutalism is often simple in its design and favors function over form and minimalism over fancy visuals. It’s utilitarian.

There is a lot of variation and interpretation in brutalist design. Two very different design directions qualify as brutalist web design. The first leans toward minimalism while the second leans toward maximalism. Brutalism can fall somewhere between the two. It can be pure brutalism or functional brutalism, or anywhere in between. This is why it can be hard to define.

Focus on Muted – Functional Brutalism

Brutalist design focuses on content first and often uses the raw building blocks to create websites. It doesn’t focus on CSS. Instead, it almost lacks style. It uses lots of monochrome, solid backgrounds, simple fonts, underlined text for hyperlinks, simple shapes, dividing lines to separate sections, tables, simple images with no borders or overlays, simple buttons, open navigation, no animations, etc.

Of course, a brutalist website can deviate from all of this, but it will have this simple feel. This design direction has similarities to minimal design. It also includes good UI, so it’s easy to use.

Focus on High Contrast – Pure Brutalism

This second definition includes designs that are intentionally broken in their aesthetics. They lean into the “brutal” part of the title rather than the “raw” underlying meaning. This seems like the opposite of raw design. They use colors and high contrast that pop the reader in the eyes, lots of strange images in odd places, large cursors, and excessive hover effects. It’s ugly on purpose.

This is part of a larger design trend known as maximalism, which is often loud and chaotic. If the design has too much chaos, it will be thought of as maximalism that includes brutalism in its design direction.

Brutalism is not bad design. It uses brutalist techniques on purpose.

Brutalism is not anti-design. Anti-design started in architecture in the 1960s in Italy. It was disorienting, garish, and exaggerated. It stands out as odd and weird and is often ugly on purpose. This came to web design in the 1990s.

Brutalism is not a minimalist design. Minimalistic web design started in the early 2000s. Both do take a simple design approach, but the minimalistic design doesn’t remove styling. It includes both form and function. Minimalist design doesn’t use basic fonts and colors. It uses styling and includes animations, but they’re simplified. It uses fewer colors, lots of space, fewer buttons, etc. Minimalistic designs are evergreen.

Like any web design, there are a few pros and cons for brutalist web design. Here are the most prominent pros and cons to consider when making a website with a brutalist design.

The image above is from Webflow.

Brutalism can be difficult to execute. It has to fit the brand and it still needs to be usable. It would demonstrate bad UX (user experience) while maintaining good UI (user interface). If done incorrectly, it can push the brand in the wrong direction. If done correctly, it will attract the right audience. It can be difficult to adhere completely to brutalist web design. Here are a few things to consider when using brutalism in your web design.

Minimize the Design Elements

Brutalism does follow a minimalistic design approach, but differently than minimalist design. In other words, use only the elements you need. Use only the default colors, fonts, shapes, and settings. Remove distractions and any content that isn’t required.

Don’t Focus on Visuals

For a functional approach, the goal isn’t to make a page that looks good. Just focus on the raw design and use the basic elements to create a design that’s simple and functional. Remove anything that looks flashy, fancy, or wasteful. It should look primitive and industrial. Use basic natural colors such as black, gray, white, brown, etc. Use hard edges without fancy borders. For a high contrast, pure brutalist approach, focus on a few colors that stand out.

Focus on Practicality

Everything on the page should be needed and serve a purpose. Make efficient use of the space. Use basic interfaces for navigation, links, and buttons.

Typography

Common types of text used in brutalism include system fonts, monotype fonts, badly formatted text, oversized fonts, and text placed in perspective. They don’t use elegant fonts or include shadows, outlines, or other effects.

Color

Brutalism that follows the brutal approach often uses bold and obtrusive colors including harsh contrasts, bright colors, and harsh gradients. Unfortunately, this can hurt usability, but that can be the point of the design. The raw approach usually uses gray or white backgrounds with black text.

Images and Shapes

Images and blocks of color are usually plain, so they blend with the background for the raw approach or include garish colors that stand out for the brutal approach. They don’t include borders, rounded corners, or other shapes.

Awkward Proportions

The elements within the page layouts are usually out of proportion to each other to create an awkward visual feel. Some elements are overly large while others are overly small, making the sizes inconsistent.

Here are a few examples of websites that use brutalist web design. You’ll see lots of common design elements, such as white backgrounds and blue links, but they all have unique layouts, so they stand apart. This is a common design direction for news sites, encyclopedias, forums, and marketplaces.

Some follow the brutalist web design ideas closer than others. I’ll show where they strongly conform to brutalist web design and where they deviate from it.

Bloomberg

Although it has added more color over the years, Bloomberg is considered a brutalist design. It utilizes a plain white background with mostly black text with only a few simple images. Red and blue are used to highlight certain page elements, but it’s kept to a minimum. This one isn’t as strict as brutalist web design. It includes a mega menu, but it’s difficult to tell the menu from the site, which I’ve included in this image.

Craigslist

Craigslist is about as simple as it gets. It has a white background with links under categories and a few elements with gray backgrounds. It does include headers for the categories, but even those are simple. Even the calendar just looks like a table. It’s perhaps the best example of brutalist web design of all the popular websites.

Drudge Report

The Drudge Report follows raw brutalism completely. It includes lots of whitespace, system fonts, very few images, monochrome images, etc. The text is nothing but links. This is easily one of the best examples of brutalist web design.

New York Times

The New York Times includes brutalist web design ideas in its layout. It includes basic text with different types of headers and simple images. The header is slightly more complex than most brutalist designs, though.

Washington Post

The Washington Post closely follows brutalist web design. It includes a white background with black text, images with sharp corners, and not much styling. It does add a CTA with hover effects in the header.

Wikipedia

Wikipedia includes blue links surrounding the logo over a search box with more links stacked within columns in the footer. The links in the footer include labels. The footer also includes two descriptions. All of this is placed over a white background.

Here are a few examples of brutalist websites that focus on bold and brutal design concepts. These sites were designed to be brutal on purpose.

Lings Cars

Lings Cars is a car leasing website that smacks visitors in the eye with color. This site has appeared in many articles over the years as the pinnacle of harsh brutalist design. It also includes animations but uses only a few frames, so they’re simplified.

Little Business

Staying true to the concept that artists are more likely to create a brutal design, Little Business is a website from a web design consultant. It uses bold gradients in a sporadic pattern with a yellow banner across the bottom of the page. Each section of the site displays a different background color with simple but bold elements.

Toiletpaper Magazine

Toiletpaper Magazine includes all the bold colors that hit you in the eyes and follows this with eye-popping animations. Some of the graphics seem random and out of place. Brutal is the best way to describe this website.

JB10X

JB10X includes bold colors in high contrast with large blocks of animated color. Fortunately, the eye-popping animation stops once the page is loaded. The same three colors are used throughout the site, but for different elements.

That’s our look at brutalist web design. The simplest version of this design concept is clean and easy to use. The other end of the spectrum, however, can hurt your eyes in a hurry. Brutalism is not for everyone. Done wrong, it can send your visitor far away to never return. Done right, your site can stand out from the crowd.

Brutalist web design is a great way to express the personality of a website, and can help draw attention to a product. With the right hosting service, you can create a website that truly showcases its unique style.

We want to hear from you. Do you use brutalist web design? Let us know in the comments.