How To Brutalize The Web

Examining the characteristics of Web Brutalism, why it can be effective, and what it takes to design a Brutalist website.

Brutalism was a movement in architecture between the 1950s and 1970s; consisting of structures that were raw, rugged, and exhibited a lack of concern to look comfortable or easy. Though it phased out by the late 1980s, it more recently found a resurgence.

It was a definition that inspired the name behind an unorthodox trend in web design, now known as “Web Brutalism”, which came about after the launch of brutalistwebsites.com in 2014. The term has since gained high exposure through Hacker News and subsequent high profile articles.

Hacker News

Some argue that these types of websites don’t exist, or had been around for up to a decade previously. There wasn’t really a word that encompassed these types of websites until Pascal Deville provided one to the mainstream—who himself has admitted that it’s probably not the perfect word to summarize all that the movement entails.

The general consensus has been that Brutalist sites are “ugly”, “unusable”, and essentially a reaction to the “lightness, optimism, and frivolity” of today’s web designs. But it can be described more succinctly than that.

Brutalist websites are an intentional or unintentional effort to be whatever a consumerist website isn’t.

The majority of the web is absorbed by consumerism, which means most websites are profit-driven and devoid of risks. Highly polished, responsive and accessible, they abide by popular design principles and UX rules. When done right, consumerist websites can be successful at achieving their goals.

justzine.com

While Brutalist sites don’t have a specific set of rules for aesthetics, they have a direction that varies from unpolished or reminiscent of the early days of the internet, to highly artistic and abstract modern art. They can also evoke a feeling of something that is hand-made and honest, but they often adopt approaches that break rules and best practices.

If Web Brutalism is about avoiding the typical standards and principles that make a website “successful”, it’s easy to see why the majority of people fail to see the appeal of it.

Why Brutalize The Web?

As the web design industry becomes more focused on UX and analytics, it leans more on popular, readily available research and data that has proven success; which is probably why we’re all drifting towards the same results. We’re leveraging the same common patterns and systems, and it’s made the web somewhat homogenized.

“If the internet is trending toward commercial consolidation and monopoly, it shouldn’t really surprise us that this would also mean a monopolization of its affect, its look and feel, too.” — Charles Thaxton

With systems in place for principles such as responsiveness and accessibility, certain criteria and rules have to be met. Combined with prominent trends, these systems which are also integrated into popular templates and frameworks can eventually lead to limitations in originality.

With such reliance on limiting variables, the choices a designer is able to make can eventually whittle down to a few. Websites can become less experimental, less memorable, and perhaps less impactful.

A unique journey and experience for the user is more memorable and engaging than the one they’ve seen countless times before. A Brutalist approach can provide the opportunity to create something that is unexpected—even chaotic.

“Let’s start again, ignore the rules and stop building websites that look the same. We should start tinkering and breaking rules.” — Owen Williams

For inspiration one can look back at how David Carson approached the highly influential magazine Ray Gun in the 1990s: no grid, formula or format. As Carson would put it, “chaos can attract and engage” when we invite the viewer to “participate by deciphering”.

Ray Gun (Magazine)

Web Brutalism is a niche practice and not for everyone, but it can also inspire and influence ideas within conventional sites. It has indeed touched the commercial and mainstream realms, with well-known websites such as Bloomberg Businessweek, Ffffound, Craigslist, and Drudge Report becoming synonymous with the movement. Usually a good place to experiment and explore its artistic possibilities are on personal side projects, where there is less pressure from stakeholders for success.


What It Takes To Design A Brutalist Website

While the definition has yet to be pinned down, a Brutalist website tends to have attributes that deviate from the prevailing design trends and habits of modern web design. Therefore it’s easier to focus on what it shouldn’t be.

1. Not Everything Has To Look Conventional

Making a website visually coarse and unconventional can be a freedom of expression. Like the architectural movement’s namesake, beauty can be found subjectively in its raw and ruthless logic. It carries a certain honesty over designing for the sake of beauty.

This could mean going abstract, incorporating clashing or vibrating colors, extreme typeface styles, awkward spacing and positioning, uncompromising and unwieldy imagery—anything that would feel out of place on a conventional website.

benjaminbaedorf.com
westernwideweb.com
vgrafiks.com

2. Not Everything Has To Be Readable

While obscuring text and hindering legibility would be considered poor UX under normal circumstances, the Brutalist position sees it as an opportunity for effects and layering to take precedence over readability; pushing the limits of what is legible.

Without worrying about what is and isn’t readable, this approach can produce unique aesthetics and user flows that would otherwise be unachievable with conventional practices. Typography can become an art form as appose to simply an object that communicates information. The user can be immersed in the deciphering process.

loicdupasquier.com
sallythurer.com
sitabellan.com

3. Not Everything Has To Be Intuitive

From a UX perspective, what we determine as intuitive is something that is immediately easy to understand or operate without explicit instruction. Normally, an intuitive UI will help the user execute the action or get the information they need much faster. Intuitiveness, however, is really derived from what users are used to; the hundreds of common patterns on the web that have been drilled into our subconscious on a daily basis.

What Brutalism allows is experimentation and exploration beyond the boundaries of preconceived intuitiveness. Unpredictability can provide an interesting or exciting experience in getting to the information, based on the learning curve required to do it.

tapeaarhus.dk
vasco.work
nowherefestival.it

4. Not Everything Has To Make Sense

The extent of creativity in abstract design is unmatched because it focuses on feelings instead of logic, and the reaction or emotion one may have prior to getting information. While there may have been intention from the artist, it’s generally left up to the viewer to interpret what it could mean and enjoy the process of it.

Brutalist sites are often in the realm of the abstract. They contain objects or words that are not relatable or discernible in any logical sense, but produce interesting one-off experiences. If it gets an emotional reaction such as humor or surprise, it’s probably worth it.

posthtml.org
endless.horse
secondaryart.ru

5. Not Everything Has To Align

Content is easier to interpret and has mathematical visual appeal when there is a system for alignment. It gives a sense of order to a composition and without it, a layout can quickly lose cohesion, consistency and organization. Most modern websites remain consistent with justification rules and use grid systems to help aid horizontal alignment.

Web Brutalism sees misalignment as an advantage—to make broad brush strokes and go with gut instinct on position and spacing. Objects can be optically positioned instead of being aided by grid and ruler. Layouts can feel hand-crafted instead of machine-made. It’s about misaligning objects on purpose without worrying about overlaps or awkward spaces. The content becomes engaging in the sense that it has abstract visual appeal.

asterisk.ee
propagate.online
bandofoutsiders.com

6. Not Everything Has To Be Designed

Some Brutalist sites are devoid of any design—just raw HTML with little to no style. They simply leave the system colors, fonts, and dimensions to the defaults of the browser. When we see this format we tend to think that the site is broken and can’t find the CSS file, or that it was designed in 1991. Some sites even make the most minimal of adjustments in style, such as the background color.

Despite it being perhaps the least inspiring aspect of Web Brutalism, what’s interesting about this approach is its honesty—how it strips everything down to a raw format; to the bare-bones of hierarchy and content. You can often tell how semantically well-structured the HTML of a site is when you disable the CSS. It’s about as brutal and raw as you can get on the internet.

blog.fefe.de
secretarydesktheband.com

Final Note

Brutalizing the web is controversial and risky. It often goes against most web design principles, but is an opportunity to break the rules and create unique experiences. It is a means to uncover new types of territory that would be hard to achieve through conventional practices.

Follow me on Twitter


Examples provided by brutalistwebsites.com

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.