Brutalism: The Anti-User Experience

Finding Similarities in Brutalist Architecture and Web Design

I’m no designer, but I work around many talented ones every day. In a world revolving around creating a clear hierarchy through typography and color, a design trend that bucks usability by ignoring traditional UX patterns sounds both illogical and refreshing.

Brutalist web design, stemming from the controversial architectural movement, is gaining traction — and for good reason. A brutalist approach helps a site stand out from the light-contrast, minimalist elegance across the web.

Web design has been distilled to a formula. So much so, that companies like Wix and Square Space are churning out piles of objectively beautiful, but mostly unremarkable, templates. Brutalism works to counteract this trend by spinning up sites that are neither immediately usable nor “beautiful,” but entirely unique.

www.somethingraw.nl displays many elements of brutalist web design

The Roots of Brutalism

Brutalist architecture is characterized by massive concrete slabs, small windows, exposed supports, and asymmetry. The term was originally coined in the 1950’s by the British architects Peter and Alison Smithson, alongside architecture critic Reyner Banham. “Brutalism” finds its roots in the French term béton brut, or “raw concrete.” Brutalist buildings sprouted across London in the 1960’s and early 70’s, often in the form of government block-style housing. The style quickly gained a negative reputation because of its lack of decorative embellishments and traditionally displeasing elements. Recently, however, brutalist architecture has made a come-back. Many older buildings have earned funding for restoration including Paul Rudolph’s Yale Art and Architecture building, and new brutalist-inspired works have been erected. The beauty of a brutalist approach lies in its ability to conjure human emotion — often discomfort and frustration. Brutalist works are raw, imposing, and honest, designed not to please, but to engage.

Yale’s Paul Rudolph Hall (credit: www.archdaily.com)

Brutalism in Web design

Brutalist websites seek to draw off of this honesty. While the core of brutalist architecture lies in imposing concrete walls, brutalist websites are often built on clashing color schemes, disproportionate text sizes, excessive hover effects, and confusing navigation. These websites captivate the user precisely because they ignore his or her wants and needs.

We’ll explore several features that have been carried over from the architectural movement to Brutalist web design.

Nontraditional Navigation

Brutalism is playful first and foremost — often frustratingly so. Brutalist works tease their audience. One way to do this is by leading the end user through information or space in a non-straightforward way. Brutalist buildings do this through unique floor plans, disproportionate room sizes, and confusing paths. Take, for example, the SESC Pompéia in downtown São Paulo. The complex is a confusing maze of towers, famous for it’s zigzagging bridges.

The playful bridges of the SESC Pompéia (credit: www.archdaily.com)

Similarly, brutalist websites present information in a non-hierarchical manner. The idea is to surprise the user and challenge their navigational habits. Most websites present information directionally according to specificity. For example, a left-to-right navigation pattern may represent digging deeper into a specific topic or section. Brutalist sites ignore these patterns and send the user left, right, up, down, and through disappearing and reappearing links to find information.

Nontraditional navigation on www.ethicsfordesign.com

An Imposing First Impression

A hallmark of brutalist architecture is an imposing first impression. This is often achieved by tall, windowless concrete walls and raw, exposed structural supports near the entrance, as well as a large, asymmetrical silhouette. As a result, brutalist buildings are by no means warm or welcoming. The Whitney Museum of American Architecture in New York City is a great example of a brutalist structure that creates a strong first impression by towering over the street below. The lack of windows and inorganic shape add a sense of mystery.

The Whitney Museum of American Architecture in New York City (credit: www.archdaily.com)

Similarly, an imposing first impression is fundamental to brutalist web design. Large blocks of contrasting colors, disproportionate text, and harsh animations are used to entrance the viewer. Take, for example, interaction designer Marina Rachello’s personal site. The large text over a patchwork of web safe colors is not designed for usability, but rather to draw the user in.

Marina Rachello’s site offers a bold first impression (http://marinarachello.com/)

A Brutalist Approach is not for Every Site

Brutalism earneda bad reputation in the 1970s because it was used for housing projects — no one wants to live in an austere, confusing complex designed to put the occupant at unease! The style is simply not appropriate for residential projects.

Similarly, it is not a fit for every site. CNN would not be considered “edgy” or unique if it frustrated it’s users with confusing navigation and a conflicting color scheme — it would surely lose it’s audience.

In fact, a brutalist approach is often perfect for a personal or portfolio site. Brutalist designs are unique, playful, and present information in a novel way. Most of all, they are captivating! Many designers prefer a brutalist approach to their website to display their personality and stand out from the masses.

A Brutal Comeback

Brutalism is experiencing an interdisciplinary resurgence — and for good reason. It’s a counterintuitive take on designing for the user by completely ignoring his or her wants and needs. The result is both refreshing and engaging both in the physical world and on the web.