Written on by Randy A. Brown
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.
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.
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.
Pros | |
It will stand out from the crowd. It won’t look like the sites that are following current trends and it will have a unique design. | It’s often not visually appealing. Brutalist designs can look ugly, which could turn some visitors away. |
It can still look appealing if the designer knows how to approach brutalist design. | UX can suffer. If the proper colors and fonts aren’t chosen, the site can be difficult to read. For maximum readability, the design may need to move away from strict brutalist design principles. |
The simpler design will improve UX. Users won’t be confused about what they can click, and elements won’t get lost on a crowded page. | It’s not evergreen. The design doesn’t follow any trends, so it always looks out of place. |
It will load faster. It won’t have lots of CSS and JavaScript elements that slow down the page loading speed. | It can be difficult to appeal to the target audience. Web design works to inform the audience of the genre and professionalism of the site. This is difficult to do without using colors, fonts, and other style elements that appeal to that audience. |
The faster page speed will improve SEO. Google prefers sites that load fast. Since there are no elements to get in the way of loading, Google can rank the site better. | It doesn’t work for every genre. Certain genres, such as financial, health, childcare, and many others, don’t work well for brutalist design. Using this type of design where it doesn’t work can harm your business. |
Brutalist websites can be cheaper to build. There aren’t a lot of design elements or bells and whistles to create. | It can be difficult to make the site look like it’s designed on purpose. There can be a fine line between the site looking amateurish and professional. The design should look like it’s broken the rules, but the designer knows which rules to break. |
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.
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.
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.
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.
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.
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 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.
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.
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 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.
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.
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.
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 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 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.
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 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 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.
One of the most important things when creating a website for your art is the design. Even though your pieces of art might be amazing, people will leave if your site is hard to navigate. This is why it’s important that the site is easy on the eyes and easy to navigate.
When using a CMS, designing your website will be quick and easy. You can add a template you’ve created or pick one of the pre-made templates that the CMS features in its library.
When you’re a beginner, don’t go crazy with the design of the site. The most important thing is to have a site that looks professional, easy to read, and fast.
One of the easiest ways to build a website is with a website builder. Using a website builder doesn't require any programming and coding skills.
