> perfectn0ir's site

look at my memory. a red dragon falls from the heavens...



brutalist web design

2022-04-28_0

According to the Cambridge Dictionary, "brutalism" means "a building style in which buildings are large and heavy-looking, and often made from concrete". Some famous bulildings that follow this style are: the Royal National Theatre in London, Habitat 67 in Montreal, Unité d'Habitation de Marseille in Marseille, and my favourite, the Nakagin Capsule Tower in Tokyo (technically this last example is part of the Metabolism movement, but it has some brutalist characteristics). Brutalist buidlings are looming, unfiltered, monolithic. Brutalism to me is a sort of "maximalist minimalism"; it is minimal in the sense that it only retains what is essential and it is maximal in the sense that it is audacious and uncompromising.

In the last few years, brutalism has seen a revival. Not in architecture, but in web design. Although websites cannot be made of concrete, web designers are taking a similar approach to brutalist architects. Instead of exposed tubing, default web colors are used. Instead of monolithic structures, text sizes are increased.

My website's CSS used to be deeply rooted in minimalism. I wanted to create a cozy space for my online presence. I selected beige tones, small letters, and large margins to create a comfortable place in the web. However, as I started writing for the website, I realized that my content did not match the visual style of the website. Thus, I decided to scrap the old CSS and attempted to follow a brutalist approach to web design.

This blog post will release along with the new design. So, if you are reading this, chances are you are looking at the new brutalist stylesheet in action. The first change is the colour scheme. The new colour scheme is quite similar to a default HTML render. The entire website only uses seven colours: "White", "Black", "Blue", "Red", "LightGrey", "Grey", and "DarkGrey". The second change is the new font sizes. All font sizes have been increased substantially. Finally, I changed the <h1> font from MS PMincho to Space-Grotesk.

I am very pleased with these new changes. If you are interested in brutalist architecture or web design, have a look at the links below.

Appendix:

https://brutalistwebsites.com/ - collection of brutalist websites
https://brutalist-web.design/ - guidelines for brutalist web design
https://en.wikipedia.org/wiki/Brutalist_architecture - wikipedia page for brutalist architecture
https://www.youtube.com/watch?v=6SwvtBxxp2w - video about the Nakagin Capsule Tower (what a cool building, seriously)