You landed on a website and it felt like someone punched you in the face. The typography was a chaotic mess, the navigation seemed utterly lost, and the colour palette was aggressively disturbing. It felt less like a user interface and more like the design had grabbed your heart in a fist and started squeezing. Welcome to the world of brutalism in web design.
While the term might be new to the web, its roots are in mid-20th-century architecture. Brutalism emerged in the 1950s in the UK. A world healing from the wounds of World War II needed to rebuild its cities in the fastest and cheapest way possible. From this need, a powerful aesthetic was born.
The architectural trend eventually fell out of favour by the 80s, but its spirit was reborn online in the mid-2010s. In 2016, designers began coining the term "Web Brutalism," drawing a direct line back to those core architectural concepts.
The Core Tenets of Architectural Brutalism
To understand web brutalism, we first need to understand what defined its architectural predecessor:
- Honesty: Materials and structures are not hidden. In brutalism, you show the building as it is being created, celebrating raw concrete, steel, and the marks of their construction.
- Minimalism: There is no superfluous decoration. Every element in a building must have a functional reason for existing.
- Long-lasting: Concrete was supposed to be an eternal material. While we now know it has its own maintenance challenges, the intent was to build for perpetuity.
- Community-oriented: Brutalist buildings often served a communal purpose—the first attributed building was a school. Even residential complexes were designed with internal walkways and shared spaces to foster human connection.
Translating Brutalism to the Web
Translating these principles to web design creates a surprisingly natural—and jarringly honest—set of aesthetics:
- Untouched HTML elements: Embrace default browser styles for headings, lists, and links. It's a form of "material honesty."
- Unconventional colour palettes: Think clashing neons, harsh contrasts, and colours that feel deliberately uncomfortable.
- Rule-breaking layouts: Forget the symmetrical grid. Elements can overlap, stack in unexpected ways, or float in whitespace.
- Deliberately misaligned text: Feel free to set
padding: 0on a<div>and let the text butt right up against the edge of its container.
Why We Need Brutalism in Web Design
The simple answer is that every website is starting to look the same. Hero section with a call-to-action (CTA), a features grid, customer reviews at the bottom. And if possible, never clearly explain what the company actually does. Generative AI, with its tendency to amplify the most common patterns, is only accelerating this trend toward a homogenous, "safe" digital landscape.
Brutalism, like any good artistic movement, acts as a much-needed shock to the system. It forces us out of our comfort zones and challenges our assumptions about what a website should be. It prioritises raw content and unique expression over polished, predictable templates.
And just like its architectural cousin, web brutalism has its own set of representative projects. Here are a few Joomla templates that capture its diverse spirit.
Brutalism in Action: Joomla Templates
Phoca Spectrum
This template is a masterclass in brutalist honesty. The distinct blocks of the layout are clearly defined, with no rounded corners or soft gradients to blend them together. It reflects the raw essence of HTML when you stop trying to hide its fundamental building blocks.
JoomShaper Maestro
Maestro embraces the message with a minimalist focus. By stripping away distractions, it forces the user's attention squarely onto the content. The bold colour palette, accented by strong, dark borders, creates a functional and visually arresting brutalist aesthetic.
JoomShaper Delacroy
Brutalism doesn't have to be grey and dull. Delacroy is a perfect counter-argument. With its vibrant, clashing colour palette and non-standard information hierarchy, it proves that brutalist design can be playful and energetic while still prioritizing bold, impactful communication.
JoomShaper Devnox
Devnox captures the spirit of raw, honest typography. The navigation feels intentionally disconnected, almost as if it doesn't belong—a deliberate choice that puts the focus back on the raw, unpolished power of the message itself.
This article would not have been possible without the incredible TemplateJoomla.com, which also provided the screenshots for the Joomla Templates.
Have you built (or come across) any brutalist websites with Joomla! recently? We'd love to see them - please share your links and experiences in the comments below!