Brutalism is an architectural style that emerged in the mid-1920s, although its rise came a little later, in the 1950s and 1960s. It was characterized by being a simple and sincere style. In brutalism, form follows function.
Brutalist buildings are usually constructed with repetitive modular elements forming masses representing specific functional zones, distinctly articulated and grouped together into a unified whole. Concrete is used for its raw and unpretentious honesty, thus contrasting dramatically with the highly refined and ornamented buildings constructed in the elite Beaux-Arts style.
Cool, right? But you might be wondering why we’re talking about architecture if this blog is about technology and WordPress. Well, the reason is simple: brutalism is a design trend that we can also apply to the web world…
The Origin of The Web and Its Graphic Evolution
For our younger readers, the web seems something it’s always been around, but nothing further from reality. The first web page in history was published “recently”, in 1991 ? and, as you can see, it was very simple:
The first web pages were simply texts with hyperlinks. But as technology progressed, the number of resources one could add increased and the possibilities for innovation expanded quickly.
In those early days of the Internet, nobody knew exactly what a “good design” was (despite all the baggage we had from the world of print), and the first webmasters did “what they could” to create effective page layouts to showcase the content. Remember the early-90s designs, all based on tables?
Sure, these designs more or less “worked” at a visual level, but were an absolute disaster internally. The HTML structure only focused on the final looks of the page and completely ignored the content itself, so the result wasn’t accessible at all. But we were all learning how to “build the web…”
Color palettes, flat or realistic icons, animations… all the finer details that, when combined, become a “design trend” come and go. But there’s a trend that seems a constant today: simplicity, which Ruth discussed a couple of days ago when she looked at Apple and its design principles.
But the reality is more complex than all this. Not all websites follow the same trends. There are people who move away from global trends and explore other paths. They break the mold. Perhaps they even create the next trend…
Brutalism on the Web
The term brutalism comes from the French “Béton brut,” or “raw concrete.” So, if we’re talking about brutalism on the web, it’s clear that we’re not talking about “concrete,” but “rawness.” Brutalist architecture wants to be true to the materials it uses as its building blocks, and that’s what we, as web developers, should also strive for. At least, if we want to create brutalist websites.
This begs the question: what are the “materials” we use to build a web? You might think these are HTML and CSS, but notice HTML and CSS are to the web what a concrete mixer or a crane is to construction: they are the tools we use to “build” our project. Therefore, the “raw material” we work with on the web is the content. And that should not surprise you, because we’ve talked about it at great length on this website every time we mentioned content is king.
Brutalism is truthful to its materials, so as web developers and designers we also have to be honest with our work and know what a website is and what it isn’t. Webs are not magazines. They’re not apps. They’re not billboards. So why should they resemble any of these?
Nelio Content
I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.
Panozk
Brutalist Design Principles on the Web
Here you have some basic principles that you should keep in mind when designing a brutalist website:
1 – Content Should Work Everywhere
If you create a web page without any CSS style, and strive to structure it correctly using HTML tags solely, you know that this website will work perfectly in all browsers in the world. It won’t be the most beautiful website, but it will work. It will even work in screenless browsers (yes, I’m talking about accessibility). And, if the content is king, that’s awesome!
The Content has to work and make sense in a world without CSS. Styling a web page can definitely help you have your own branding, but it can also break it and move you away from brutalist principles.
2 – User Interactions with the Web are Limited and Well-Defined by HTML
With CSS and JavaScript, we can create websites that look like native apps, with interactions that previously seemed impossible, outstanding animations and breathtaking transitions. But all this has absolutely nothing to do with the content… So how do we design useful interfaces on a brutalist website?
By default, users can only interact with your website via buttons, links, and forms. And only links and buttons can be “clicked.” That’s why it’s important to show them raw:
Since the beginning of the web, hyperlinks have followed a clear pattern. They are like regular text, but their color is blue and their style is underlined. When the hyperlink has been visited, its color changes to purple so that the visitor knows they’ve already visited it. Should we really move away from this pureness?
Buttons, on the other hand, depict an element that exists in real life: a button. A button is something we can push both in real life and the web, and so we expect that they behave similarly. Make sure your buttons look like buttons and their appearance changes when we interact with them. Also, use them when you need to use them: next to a form, for example, they promise the user that the info they typed in will be sent to the server and then they’ll be taken to another page with a response.
3 – Websites Exist in Web Browsers, so Let Your Users “Browse” Your Website
Did you know that browsers have buttons to go back and forward? I know you do, because we’re all used to this pattern…. and yet, some websites are breaking this pattern today! Single Page Applications (SPA) use JS to load content dynamically, and some of them do so ignoring there’s an option in the browser to go back to a previous stage. A brutalist design remains true to the web and never breaks the patterns and the rules a user is used to.
4 – Users Can Scroll Content Vertically
A website is not a magazine or book, so there is no need (in principle) to paginate the content. The only reason why many websites do so is to increase visits artificially, since, to read an article, the reader is forced to visit multiple pages. Don’t do this!
In a brutalist website, the content is presented at once and the reader is allowed to consume it at their own pace, scrolling as it suits them. There is no need to disturb the user with unnecessary interactions to view and use what really matters: the content.
What do you think?
I like brutalist principles. If you’re not a designer, applying these principles is quite easy: just leave things the way they look by default (or tweak them slightly). But what do you think? Do you like it? Do you think it’s ugly and outdated? Let us know in the comment section below!
Featured image by berenice melis on Unsplash.
Leave a Reply