Brutalism is a bold web design trend that seems to rise and fall with the same regularity as breathing.
In this article we'll take a look at what this trend is, where it came from, and where you can find examples of brutalist web design. Finally, we'll take a look at some tips for incorporating brutalism in your own web UX/UI design practice.
What is Brutalism in Web Design?
Brutalism is a raw, minimal, style of design that embraces functionality over form and aesthetics. It tends to be characterized by an extremely simplistic, almost minimalist approach to layout and UI design.
Brutalism is a bold, counterintuitive take on raw, eye-catching visual design—and can be difficult to pin down with a definition, since it essentially aims to defy definition.
However, some of the key features that it often includes are repetitive, geometrical patterns; honesty about materials; social vision; and integrity of function.
Where Did Brutalism Come From?
The word brutalism is derived from the French term béton brut, which means raw concrete. Originally, it was used to describe a style of raw, exposed architecture that emerged in the late 1940s and early 1950s.
At the time, Europe had just emerged from the most destructive war in history, with widespread devastation to housing stock, commercial buildings, and civic halls. In these circumstances, there was an attraction to architecture that could be designed and executed quickly and efficiently, with a minimum of unnecessary decoration. Brutalist structures could also rise high, minimizing costs and maximizing capacity.
But, like most trends, brutalism was a reaction to what came before: a desire to leave behind the heavy, indescribably ornate designs of earlier times.
Why Did Brutalism Emerge in Web Design?
While architectural brutalism declined in popularity after the 1970s, another, unexpected, source of Brutalist renaissance is in web design.
In 2016, the Washington Post reported that “the hottest trend in Web design is making intentionally ugly, difficult sites," an approach which they called “web brutalism."
Brutalist Websites also collects sites that fit this description, stating that “in its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design”.
But how did this trend make its way to the field of web design?
Quite easily, in fact, since early web iterations were focused on raw functionality and content: clunky HTML coded websites and bold 90s design motifs, were naturally similar in concept to the defining characteristics of architecture's blocky, exposed structures. In itself, this was a practicality. As the online world developed, it also became much more refined in appearance. Clashing colors and jarring designs gave way to the principles of color theory and clean layouts.
Years later, these early website iterations re-emerged (or were simply noticed) as brutalism, a trend that defied the growing list of UI design best practices.
Importantly, brutalism tends to make an emergence with websites or brands that trend towards suspicion of corporate interests, and particularly of how much data is being collected about us by tech and social media giants like Google and Facebook.
Some user groups—particularly younger ones—are wary of the high finish of mainstream commercial sites, fearing that it conceals less attractive inner workings, both ethically and aesthetically. The Brutalist web design trend may also express a desire for greater online transparency from the organizations that demand our personal information—for the underlying structure and motivations of websites to be made visible, just as Brutalist building exposed their own raw materials and social vision.
[MID_ARTICLE_CTA]
Key Features of Brutalist Web Design
Before we dive into some of the defining characteristics of brutalist web design, it's important to note two things: there are many design trends that share features with brutalism. Minimalism and antidesign are two of the most common that are often mistaken with brutalist websites.
Clashing Color Palette
Brutalism typically uses jarring, clashing color pairings to make a bold, shocking statements. Anything you think you learned about color theory in web design is now thrown out the window.
Minimal CSS
Styling, what’s that? Brutalist websites use very little CSS, giving off a much boxier HTML effect. This often gives off a more grid-like layout and text-focused design
Navigation & Information Hierarchy
Typically, UX/UI designers will utilize information architecture principles to reduce cognitive load and increase the ease of site navigation.
Brutalism, on the other hand, delights in using non-standard navigation and a lack of information hierarchy.
Raw and Unpolished Design Elements
From typography to a color palette (or lack thereof), a brutalist website intentionally creates an environment that feels raw and unpolished.
To achieve this, some designers might utilize a sans serif font, while others might bring in something even more jarring...like Comic Sans.
Repeating patterns
Brutalist web design often includes repeating shapes or patterns, used in a modular or grid-based way, channeling the characteristic geometry of Brutalist architecture.
Honesty and transparency
Another feature of Brutalist buildings is that they tend to bring their construction materials to the surface, rather than attempting to conceal or beautify them. Look closely at the concrete surfaces of many Brutalist buildings, and you’ll see the unique patterns left by the grain of the wood frames used to mold each concrete block.
Likewise, brutalist websites tend to be more focused on the functionality of what the website offers, rather than “distracting” the user with aesthetics or fancy visual interactions.
In this photo of the chapel at College House, Christchurch, New Zealand, the materials used are all visible: there is no plasterwork concealing the blockwork walls; there is no ceiling covering up the exposed wooden roof structure; and the exposed concrete blocks retain parallel lines from their wooden molds.
Likewise, brutalist websites trade the polished, cookie-cutter look with something more ... honest.
There are a number of sites that strive for a kind of honesty in their materials. In essence, a website is a vehicle for communication using text and images.
Bloomberg, for example, has stripped back to these basic elements of communication, foregrounding information and eschewing decoration. Their site also uses a combination of black, white and “hyperlink” blue, which evokes the early days of the web, and in this sense uses one of the web’s “raw” materials.
Where to Find Examples of Brutalism in Web Design
Since 2014, the site Brutalist Websites has been collecting examples of this bold yet mysterious design trend. As you peruse through the lists of websites (and short interview clips), you might notice that many of these web design examples are a mix of brutalism and other bold aesthetics, like postmodern, minimalist or grunge.
Allan Yu’s site: brutal, perhaps; grunge, maybe; but is it Brutalist?›
Internet: A Retrospective—postmodern, ironic, funny—that utilizes some brutalist elements like a jarring color palette and minimal styling and layout.
5 Things Today’s Designers Can Learn From Brutalism
1. Less is More
Like minimalism, brutalism embraces simplicity and the idea that less is more. But, whereas minimalism design tends to balance simplicity with beauty, brutalist design takes elimination to the next degree. While not every brutalist website needs to have a white background, you'll often see a reduced color palette, images, and other visuals.
2. The user’s needs come first
In architecture, brutalism sought to deliver functional structures with minimal costs and time investment.
Likewise, brutalist websites are often focused on functionality first, with visual aesthetics coming last (or not at all).
3. Beauty is found in unexpected places
Designing something that fulfills a function, but does not add color and joy to the experience, will inevitably divide opinion and drive away a lot of users. Humans have a hardwired attraction to curves and bright colors, and, as we saw in the examples above, many Brutalist buildings successfully incorporate both. Moreover, it was mainly low-end Brutalist structures—“concrete boxes”—that gave the movement a bad name, by failing to include these humanizing touches.
4. Simplicity often equals efficiency
Brutalist buildings met the need to rapidly and inexpensively rebuild after a devastating world war. Its principles of simplicity and functionality apply readily to web design and development. For example, a website formed of a single scrollable webpage with anchors is likely to be cheaper and easier to maintain and redesign than an elaborate multi-page site, and may even have usability benefits.
5. Strive to produce designs of integrity
A great strength of the Brutalist movement was its production of thought-through, holistic structures that were designed to meet specified core needs. They didn’t simply cover the basics, like plumbing, heating, and sewage, but also shaped blocks to foster community through shared spaces, both inside and outside the building structure.
Key Takeaways
Brutalism is a bold web design choice for brands that are looking for a raw, unforgettable aesthetic.
It can be a good option if you are looking for a way to stand out from the sea of landing pages, hero images, and highly stylized calls-to-action, in favor of something more honest and straightforward.
However, it’s important to remember that deviating from established design patterns can frustrate user expectations, and drive away business.
We hope you’ve enjoyed this brief look at some of the history of the Brutalist movement, and how it relates both to web design brutalism and to our practices as UX/UI designers today. What do you make of the Brutalist trend in web design?
Want to learn more about UX/UI design? Working 1-on-1 with an expert mentor, students receive feedback on a portfolio of UX projects through a dedicated online platform, community critique sessions, and video calls. Find out more!
.png)
