Brutalist Web Design
Readers of khalilstemmler.com either love or hate the design of the site. When I was designing the site, I knew that I wanted to draw a little bit of inspiration from brutalist web design. The challenge is that most brutalist work can be very polarizing.
What is brutalism?
The term brutalism is derived from the French béton brut, meaning “raw concrete”.
Concrete brutalist buildings often reflect back upon the forms used to make them.
Take the following image of the Ministry of Education in Lima, Peru. It's a Jenga-looking building that is unmistakeably hard to not realize is built out of several blocks of concrete.
Not a lot of architecture, artwork or any finished product for that matter, sets out to draw blaring attention to the tools used to create it.
Here's another one in my neighboring city of Toronto. Most people don't mind working in brutalist office, but to see a home that looks like the architectural planning could have been an avid Minecraft player, is pretty unique. Personally, I love it. I'd love to live here.
Last one, City Hall in my hometown, Brantford, Ontario. I remember skateboarding around here as a kid. From a young age, something drew me to this area with those interlocking rectangular shapes made from concrete, though I never quite knew why.
Most brutalist buildings are made from raw concrete, so it's interesting to see how raw-ness applies to the web. 1
What is brutalist web design?
In it's 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. - brutalistwebsites.com
In some ways, the recent trend of implementing brutalism in design stems back to the early days of the web. Back then, websites were brutal because they had to be. In present times, going brutal is more of a way to stand out and rebel against the squeaky-clean designs that cover the web today.
You know when you're looking at a brutalist website. Here are a few examples from brutalistwebsites.com.
Brutalist works reflect back upon the forms used to make them
Brutalism vs. convention
If there's anything we've noticed so far about the brutalist architecture and web design, it's that brutalist works often challenge the popular conventions.
Let's talk about landing pages.
Landing page design
Effective landing page design can make or save a company lots of money. My favourite author on the internet, Julian Shapiro has written extensive handbooks on the formula behind landing page design.
Here's his diagram illustrating the formula to high-converting landing pages (used by Stripe and other big-name YC startup companies).
This is pretty much what we've grown accustomed to looking at for homepages of businesses on the internet in 2019. Stripe's landing page is exemplary.
In order to make money on the internet, landing page design, copywriting, and conversion rate optization are topics you could spend a lot of time trying to master. It's also what companies in the business of making money invest a lot of capital on.
Brutalist websites however, trade in attention to today's popular conventions (such as flat-design, 3x3 cards, and minimal or geometrically pleasing backgrounds) for raw and memorable web experiences.
While it may not be the optimal design for those attempting to selling something, because users might be less familiar with how your site handles navigation and other standard web conventions, it can either be refreshing (because it enables users to just go along for the ride) or completely aggravating.
Portfolio websites and interactive experiences
True brutalist websites seem to work better when they serve as porfolios for artists and designers or homepages for musicians. I think that works well because the transaction of first impression is more important and has potential to leave an impact deeper and more valuable than any monetary or business transaction. Guess it depends on who's asking.
Here are a few interesting ones.
Rules of Brutalist Web Design
The Guidelines for Brutalist Web Design by David Bryant Copeland state that:
- Content is readable on all reasonable screens and devices.
- Only hyperlinks and buttons respond to clicks.
- Hyperlinks are underlined and buttons look like buttons.
- The back button works as expected.
- View content by scrolling.
- Decoration when needed and no unrelated content.
- Performance is a feature.
Brutalism in art and music
I've always been attracted to raw-ness in art, design, and music.
Personally, I'm borderline obsessed with music of the late-1970s / early-80s with ties to the avante-garde no wave scene in New York. And I'm equally obsessed with the novel recording techniques and expressionist vocalisms of several English and Australian post-punk groups.
In a similar vein to brutalism, my all-time favourite bands come from a lineage of blatant disregard for the popularly agreed-upon constructs of what music should sound like. It's the type of music that reflects back upon the instruments used to create it.
The Pop Group
For me, it starts with The Pop Group, an English band formed in the peak era of post-punk.
The ironically named Pop Group is a discordant band writing songs where almost every instrument is independently fighting for attention, and it reflects back towards the listener.
In popular music (take Madonna's "Lucky Star", for example), a lot of effort is focused towards making all the instruments compliment each other. In other words, a good pop song is one you can dance to, is free of awkward silences, and nothing quite sticks out at you awkwardly.
On "Lucky Star", there are several instruments in the mix strategically placed and equalized to sweeten the resulting pop song. Sure, there's a lot going on, but none of it is discordant.
"[Madonna] was [initially] unhappy with the whole [album], so I went in and sweetened up a lot of music for her, adding some guitars to 'Lucky Star', some voices, some magic... I just wanted to do the best job I could do for her. When we would playback 'Holiday' or 'Lucky Star', you could see that she was overwhelmed by how great it all sounded." — John Benitez, producer of Madonna's first album, talking about Madonna and the album. 2
Now take a song like "Snowgirl", off of The Pop Group's debut album, Y, who Stylus Magazine wrote that the "political punk tunes are deconstructed so that only the skeleton remains, and weaving between those bare bones are some of the nastiest sounds ever made." 3
Pitchfork said, "unlike most of the late-70s' no-wave types (and perennial imitators), The Pop Group were less concerned with eschewing convention than with vehemently eviscerating it."
The album has had a lasting impact, with artists such as the Sonic Youth and Nick Cave citing the album as an influence on their work.
Watch Sonic Youth perform "The Burning Spear" live below. Guitarist, Thurson Moore wedges a drumstick inbetween the fret and strings of his guitar and uses another drumstick to get some novel sounds out of the instrument.
The Pop Group might not be where discordant music started, but for what I spend most of my time listening to, it very well might as well be.
Here's another interesting one from James Chance and the Contortions, no-wave band of the 70s that I describe as a mix between James Brown and The Pop Group.
Finally, my favourite band of all time, before Nick Cave went Americana, he was in the influential Birthday Party, which wouldn't exist without The Pop Group.
Sweetening things for public consumption
Unless you're specifically passionate about architecture and aesthetic, it's easy to never notice any of the craftsmanship on the structures that we move between everyday. Although, if you take a walk around the UofT campus in Toronto, you'll have a hard time not noticing the John P. Robarts Research Library.
With respect to web design, the best design is invisible. The principle states that good design is not something the average user looks at and says “wow, that’s a great design!” Good design is something that is easy to use, read and interact with. 4
Sometimes when things are overly sweet, they tend to alienate us.
My "Brutalist" Junk Jazz playlist
If you're into discordant music, check out one of my playlists titled "Junk Jazz" on Spotify.
Rooksby, Rikky (2004). The Complete Guide to the Music of Madonna. Omnibus Press. ISBN 0-7119-9883-3.↩
Howard, Ed (March 22, 2004). "Top 101-200 Albums Favorite Albums Ever". Stylus Magazine. Retrieved September 11, 2014.↩
DesignShack ("10 Reasons Why the Best Design Is Invisible")↩
Liked this? Sing it loud and proud 👨🎤.
Stay in touch!
Enjoying so far? Join 15000+ Software Essentialists getting my posts delivered straight to your inbox each week. I won't spam ya. 🖖
View more in Web Design
You may also enjoy...
A few more related articles
Want to be notified when new content comes out?
Join 15000+ other Software Essentialists learning how to master The Essentials of software design and architecture.
Commenting has been disabled for now. To ask questions and discuss this post, join the community.
Am I the only one reading this? Taking some elements (and maybe avoiding others, or using them in certain context only) of Brutalist Web Design, if used right, may lead to a very nice front-end for a website. I really like how site like Futurism, Inverse applied the brutal design technique. Can sites like DeepMind, Spotify, Miro, SuperHi also be considered to have brutal design interfaces? I think we can say that in regards to colors mostly (and perhaps fonts in some cases), but not sure, because they seem to have very nicely aligned components. Also, if I look at Balenciaga, I see the website more like having a minimalist design with some elements of brutalism design (like the green color, but it's visible on rare occasions only, I believe as the Add Product to Cart button, and perhaps red as error indicator in some forms).
I think you're right, Pavel. I also think of it this way. Most websites are designed to make money, right? So, it only makes sense that we put components in places where people are accustomed to utilizing them. It also makes sense, from a business perspective, to design experiences that foster trust and reliability by tapping into the experiences of trust and reliability on other sites. It's hard to justify the business value for brutalist web design. SuperHi and Spotify are really beautiful, but they still feel conventional. Balenciaga is out there. But that's one memorable web experience, for sure. This is tricky ground to tread on.
What we're really discussing here is the philosophy of aesthetics, and I think modern web design is predominantly about function, and secondarily about sensation.
I'm glad you commented on this page because I think authenticity is paramount, and this is yet another example of the challenge of authenticity in an inauthentic world.
I like how Balenciaga and Bloomberg implemented brutalist web design. Although their websites are also containing good structured and aligned elements, it turned out pretty good overall. Really cool article.