Over the last 2 years, I found various interesting articles regarding brutalism in web design. Even though they do not necessarily considered themselves talking about that topic.
If you don’t know what Brutal web design is, then let me quote one of the said articles to sum it up quickly:
Originated in post-World War II Europe, Brutalism in design and architecture was marked by raw, unpolished aesthetics that made it easier to inexpensively rebuild cities and venues.
(Quote from uxbrutalism.com)
This concept just got applied to websites. This idea appealed to me, but I never came around using it in an actual project. Now FINALLY I came around making my own website in a brutal way. You might’ve guessed it; it’s this exact blog you are reading right now.
And all I can say is that it was a blast! Mainly because it’s just so simple. At least when you choose a more minimalistic form of brutalism. There are some other examples that I would describe as maximalism, that definitely where a lot of crazy hard work. However, I didn’t want that. And with just around 100 lines of CSS code I turned my bare HTML output to some sexy brutalist website that does focus on its content alone. And that’s all that matters. I also finally came around using CSS Grid. That was nice too.
So after getting inspired by many different Articles and websites, I present you my compilation of helpful and/or interesting links. A starter pack so to speak:
First, let’s start with the most simple and funniest reads on this list. It’s a saga teaching you the why and how of brutalism:
- https://motherfuckingwebsite.com/ Describes why Brutalist Web Design exists in the first place
- http://bettermotherfuckingwebsite.com/ Adds the design fundamentals to the above sites arguments
- https://bestmotherfucking.website/ Part 3 of these motherfuckers adds performance and optimization
Some more articles, a bit more boring but still worth it:
- https://brutalist-web.design/ further describes the design
- http://idlewords.com/talks/website_obesity.htm another reason to be brutal
- https://www.uxbrutalism.com/ some more design tips
Last but not least:
- http://brutalistwebsites.com/ AWESOME Collection of Brutal Websites for inspiration. I hope to see this blog up there soon
Especially that last link is worth it. Using some JS magic I found the exact number of websites featured there of the time writing that article:
> document.getElementsByClassName('screenshot').length
< 13911391 Websites most of them unique in their presentation and definitely worth checking out. Many of them include Easter eggs or very cool CSS / JS effects that might even be worth it for normal modern websites.
That’s it for that article. Stay brutal!