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.
What Brutalism Web Design is Not
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.
Pros and Cons of Brutalist Web Design
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 can still look appealing if the designer knows how to approach brutalist design.
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 will load faster. It won’t have lots of CSS and JavaScript elements that slow down the page loading speed.
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.
Brutalist websites can be cheaper to build. There aren’t a lot of design elements or bells and whistles to create.
Cons
It’s often not visually appealing. Brutalist designs can look ugly, which could turn some visitors away.
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.
It’s not evergreen. The design doesn’t follow any trends, so it always looks out of place.
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.
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.
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.
How to Use Brutalism in Your Web Design