What is Brutalism in Web Design?
Brutalism: A design style originating from architecture, emphasizing raw, rough, and anti-traditional aesthetics. It prioritizes functionality over decoration, often using bold typography, asymmetrical layouts, and stark contrasting colors.
The term “Brutalism” derives from the French phrase béton brut, meaning “raw concrete” or “exposed concrete,” referring to unadorned, bare concrete surfaces. This term was initially used to describe an architectural style that emerged in the UK from the late 1940s to the early 1950s. Brutalist architecture is characterized by exposed concrete structures, austere geometric forms, and an emphasis on the inherent texture of building materials. This style spread globally between the 1950s and 1970s.
Audit Committee Tribunal de Contas / Aflalo y Gasperini, São Paulo, 1971
Brutalism is a raw, minimalist design style that values function over form and aesthetics. It is often characterized by an extremely simple, almost minimalist approach to layout and UI design. It represents a bold, counterintuitive interpretation of raw, striking visual design—and is hard to define because it inherently seeks to challenge definitions.
Like the rise of most trends, Brutalism emerged as a reaction to preceding styles: a desire to reject the overly complex and indescribable ornate designs of earlier periods.
Banco de Londres y Sudamérica / Clorindo Testa, Buenos Aires, 1966
Why Has Brutalism Emerged in Web Design?
Early web iterations focused on raw functionality and content: clunky HTML-coded websites and bold 90s design themes conceptually aligned with the rugged, exposed-structure defining traits of architectural Brutalism. This was, in itself, a matter of practicality. Over time, web design evolved into what we see today (for the most part)—well-structured layouts, user experience-focused designs, and an emphasis on aesthetics and color theory.
Thoughts, cultures, aesthetics, and needs are diverse, as are the pursuits for web design. While mainstream web design chases sophisticated beauty and perfect experiences, it has also created fertile ground for Brutalism to develop.
Some believe that the polished aesthetics and experiences of mainstream web design create a beautiful illusion, causing people to subconsciously overlook potentially unethical or malicious intentions hidden behind the surface. The rise of Brutalist web design may also reflect a desire for greater transparency and directness on the internet. People want a website’s underlying logic and true intentions to be as clear as Brutalist architecture displays its raw materials and social ideologies.
Characteristics of Brutalist Web Design
Unconventional Color Schemes
In architecture, Brutalism often heavily utilizes cold-toned palettes like gray, black, and brown to create a stark atmosphere. In web design, however, Brutalism tends to employ jarring, conflicting color combinations, going against mainstream web aesthetics and color theories. “We don’t need everything that meets the eye to be perfect.”
Website: kaskadproject.com
Non-Standard Navigation and Information Hierarchy
Typically, UX/UI designers adhere to user experience principles and logical information hierarchies to reduce cognitive load and improve navigation ease. Brutalism, in contrast, favors non-standard navigation and rugged information presentation.
Website: namespace.studio
Raw and Rough Design Philosophy
From layout and typography to color schemes, Brutalist websites intentionally create a raw, unpolished environment. This draws inspiration from mid-20th-century architecture, where, influenced by the era’s context and atmosphere, buildings emphasized raw, rough appearances, showcasing the authentic texture of concrete without excessive embellishment.
This evokes the early internet era, where websites lacked design polish and beautification. It’s a design philosophy that runs counter to current mainstream web culture, abandoning beautification and decoration to reveal a raw, unrefined essence.
Website: wikipedia.org
Repetitive, Unique Shapes and Patterns
Brutalist web design often incorporates repetitive shapes or patterns, or unique 2D and 3D graphics, maintaining a distinctive visual experience. It frequently draws elements and inspiration from the geometric features of mid-20th-century Brutalist architecture, continuing and mimicking those principles.
Visual Impact and Oppression
Brutalist architecture, with its massive, unadorned exposed concrete and austere geometric structures, evokes a sense of oppression akin to a rugged beast. This visual experience carries over to Brutalist web design, where it is applied with even greater boldness and freedom. Especially when contrasted with mainstream culture’s pursuit of refined experiences and beauty, Brutalist web design stands out as rebellious and alienating.
Website: src.plus
Inspiration for Brutalist-Style Websites
Brutalist Websites
brutalistwebsites.com - As direct as its name, this site collects examples of Brutalist-style web designs. Its content is minimal, with just a short introduction and case studies.
“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.” — Brutalist Websites
Website: brutalistwebsites.com
Awwwards Collections: Brutalism
Awwwards is a renowned platform for web design inspiration and awards. This collection specifically curates Brutalist-style web designs for designers to draw inspiration from. The designs in this collection excel in design sensibility and interactive animations.
Website: Brutalism Web Collection
Conclusion
Brutalist web design doesn’t mean abandoning design altogether; rather, it exposes the “skeleton” of a website, using the most basic typography, buttons, and links without unnecessary decoration. The goal is to allow users to see the structure and intent of a website at a glance, reducing deception and hidden agendas, and putting everything “out in the open.” It refocuses attention on content and functionality, making it easier for users to find the information they need.
The “roughness” of Brutalism is, in fact, an attitude—a unique temperament and rebellious spirit conveyed through the website. It challenges mainstream aesthetics, unafraid of “looking imperfect,” and instead uses this “rawness” to express authenticity and individuality.
Design is cyclical. From its inception to today, Brutalism has ebbed and flowed like the tides, blending with the characteristics and cultural ideologies of each era to create new design flavors. For instance, styles like Neo-Brutalism, Postmodern Brutalism, Industrial Brutalism, and Cyber Brutalism are products of the fusion of contemporary pursuits and retro nostalgia. These styles stem from Brutalism’s raw power and functional core but evolve into diverse sub-genres through integration with other aesthetic or functional needs.
