Carl Barenbrug

Product design, creative direction

Brutalist Web Design

I recently read an article by Tom MacWright on fancy software tools. Although tools such as Webflow, Squarespace, Semplice, and Notion are impressive in their own right and all fulfil specific needs, they are also needlessly complex (in a way). We have entered an era of design where everything is expected to move, be soft, be comfortable, be sensitive. And where everything must appear as though a designer has spent many hours crafting a portfolio with purposeful animation, well-researched typography, and stylised vectors, all in the hope of being subsequently recognised by design peers.

Webflow has buttons to add effects. It's easy to add effects. Effects will be added because there's a button to add them. Everything for the next few years will slowly fade in as you scroll. I don't know why. Stripe did it.

Fancy tools aren't bad. Professional authors use Microsoft Word and have absolute courage, phenomenal self-control to never fiddle with fonts. I, however, don't. Give me iA Writer to save me from myself.

You see, the complexity of these tools isn't in the ability to use them—they exist to allow web creation to be more accessible to non-coders. Instead, it is in the resulting designs that the tools encourage. Convenience can be a trap. So with this in mind, I think the web needs less fancy and more brutalism.

I'm not saying you need to hand-code a website using Notepad++ in its entirety. I'm saying that we should look to avoid being sucked in by fancy tools that silently set expectations that you should make fancy websites applied in precisely the same manner as their exemplary showcased sites have previously.

Brutalism: noun; a stark style of functionalist architecture characterised by the use of steel and concrete in massive blocks.

Let's then consider web design as architecture. Malte Müller wrote about this very topic, which I would strongly encourage you to read, but allow me to share a few extracts that stood out to me.

Websites are places. They provide services and social environments. Like architecture, they distribute access and atmospheric context to these resources: Watching a video on Nowness is different from watching a video on YouTube.

Websites are constructed. Websites may use new technologies or existing technology to new effect. They may employ new ways of construction or cite old ways of construction. Similarly, material and construction are defining characteristics of architectural work.

Websites age. As buildings, some get better with age. Some decay. Others get renovated or re-purposed.

Websites are made by individuals, by collectives or by large-scale project groups, decisively influencing their aims, design quality, and building process. Similar differences exist between private construction and large-scale urban projects. There is value in each scale.

Considering these points as a foundational construct for web design can naturally shape our creative thinking—that's not necessarily a positive thing, though. We see some atrocious architecture just as much as we see exceptional architecture. But I do love the concept regardless.

So what is it about brutalism that is so appealing? Brutalist architecture not only reduces construction to its basic materials, but it also finds beauty in that simplicity. And that can be translated to the web quite easily.

Web Brutalism can pretty much evoke the same emotions that Architecture Brutalism can. They garner curiosity from people. They break the norm of modern websites. And kites fly highest against the wind, don't they?

Brutalist web design shouldn't be applied in all instances, of course—it largely depends on your audience. It also does not imply an absence of usability, accessibility, or readability. Even if these foundations may be present, they might not be so apparent to users. One of the most vital assets of a brutalist website should be its performance. Brutalism is honest and often brings together overlapping and sometimes competing influences such as essentialism, minimalism, and utilitarianism, therefore removing stuff that is far from necessary. This consequently should improve loading times. There is a bit of a rebellious or reactive attitude to this design approach. It is no-nonsense, bold, unforgiving, and raw. Yet not without taste; probably just an acquired one.

Pascal Deville, who founded the Brutalist Websites directory after coining the term in 2014, thinks the style has splintered into three micro-stylistics:

  1. Purists
  2. UX Minimalists
  3. Anti-ists (or artists)

The purists reference strongly to the architectural characteristics of Web Brutalism, such as the concept of 'truth to materials' and the use of the purest markup elements available. The UX minimalists, in contrast, see efficiency and performance as the main driver of Web Brutalism and even believe that the radical limitation of possibilities can boost conversions. The 'anti-ists' or artists see web design as an undervalued form of art and don't show much respect to the status quo and mostly get bad press.

There is no such thing as a definitive brutalist website. Much like there is no such thing as a definitive minimalist one. It is about applying certain principles or code of practice to a design to find a purposeful solution.

If you're a web designer or front-end developer, I will help save you from yourself. To help you put fancy to one side. I am going to offer you a brutalism code of practice:

  1. Don't be influenced by tools
  2. Use a system font and only one
  3. Write clean code
  4. Write your own CSS
  5. Don't use Javascript (if you can avoid it)
  6. Don't hack the scrollbar
  7. Don't create custom cursors
  8. Don't use an effect just because you can (especially fade effects)
  9. Have as little design as possible
  10. Make navigation obvious or not at all
  11. Be practical rather than pretty
  12. Don't use gradients or shadows
  13. Use high contrast colours
Open the archive