The Curious Case of Web Brutalism
State of Digital | Industry Savvy

The Curious Case of Web Brutalism

on / by Robyn Collinge

When it comes to web design, we’ve certainly seen our fair share of one-page scrolls, with their minimalist icons and fleeting microinteractions, that seem to have taken over today’s world wide web. No idea what we’re talking about? Take a quick peek here to get up to speed.

However, with every design movement comes a reaction, and this time the response has proved quite a sore for not only the design-trained eye. In fact, it’s built upon the desire for intentionally ugly and difficult web pages. Introducing the weird and wonderful trend of ‘Web Brutalism’: an evocative combination of hand-coded HTML and 90s motifs, and the latest aesthetic reaction to the overload of clean-cut and design-orientated user experiences.

Web brutalism 1

The What

Originating from the French word for ‘raw’ (brut), Brutalism was first coined by Hans Asplund referring to architecture that made no effort to complement its surroundings. Seen as a reaction from the younger generation to the frivolity of the ornamental Beaux-Arts style of 1930s and 1940s architecture, Brutalism sought to expose the construction of a building with a return to basic materials. This philosophy resonates in the Brutalist web movement, only this time spanning from a generation who grew up with Microsoft WordArt and customizable MySpace pages.

The trend exploded onto the radar after Creative Director at Freundliche Grüsse, Pascal Deville’s, website – http://brutalistwebsites.com – appeared on Hacker News last month and quickly went viral. The site showcases a selection of websites that Deville considers to have a Brutalist aesthetic, that is, marked by a “ruggedness and lack of concern to look comfortable or easy”.

web brutalism 4

The How

The majority of examples showcased by Deville’s platform offer an ironic statement or provocative backlash to the expectations of contemporary design. As Nathaniel Smith of tilde.town explains, “I designed a brutalist website to show that we can still do wonderful things together on the web without so-called ‘best practices.”

Many of the sites offer a simple service such as Weather is Happening or act as a cultural platform for projects, like The Enthusiast and Days Without Net. A popular use of Brutalism that we’ve noticed is actually in design portfolios and agency websites, presenting skill sets in a no-nonsense and somewhat ironic fashion.

web brutalism 2

However, it’s not all about aesthetics, take a look at Craigslist for example. Arguably not the internet’s finest work, each page offers an indeterminate cluster of hyperlinks against an intrusive white background – it’s literally a public whiteboard. The design has barely evolved in 15 years yet, as Deville describes, it remains the pinnacle of user friendliness. And that’s exactly what makes it brilliant. Fast Company even notes that Instagram’s much-discussed new logo has a Brutalist element because of its gradient – the product of one of the most basic tools in Microsoft Paint.

Functionality aside, many of the Brutalist sites we stumbled across are purely designed as fun and games. Sites such as Is It Time For a Nap? (spoiler alert: it is) and The Endless Horse certainly put a smile on our face with their genius simplicity.

brutalism 5

The Why

It’s easy to write off Web Brutalism as a middle finger to best practices and the way a design focus on usability has turned UX into a product, disputably killing the potential for creativity.

However, the basic appeal of this movement ensures it requires no expensive Content Management Software and no complicated CSS and Javascript – just a basic understanding of HTML and a text editor. This simplicity in the back-end results in quick loading times and easy to read code, adhering to Pinboard’s philosophy that “your website should not exceed in file size the major works of Russian literature. Anna Karenina, for example, is 1.8 MB”. Brutalist websites also tend to appear the same across different browsers and platforms which is a common frustration within contemporary design and development.

web brutalism 3

When it comes to the potential impact of the Brutalist trend on UX and usability, the jury is still out. These sites may be quick loading and simple to use, however the aesthetically frustrating graphics and 90s style gifs can make pages incredibly difficult to navigate. What we can say is the bold and unapologetic style of Brutalism certainly adds character to a website, and whether that be in the form of a countdown to 6pm on a Friday or a colour clash-induced headache – visitors certainly won’t forget their experience.

What do you think? No fuss, hand-coded HTML and simple usability or intentionally frustrating aesthetics that leave users tearing at their hair? Let us know in the comments or send us a tweet @usabilla.



UXDesigner_Usabilla

Article by

Robyn Collinge

As Usabilla's Copywriter, Robyn brings nice words together - like peanut butter, napping, and Sunday brunch.

Share your thoughts

  • Judit

    Great article, it was equally fun and insightful to read, well done! I didn’t know that web brutalism was a thing but now I am full of new ideas too :)

    • Robyn Collinge

      Thanks Judit, really glad you enjoyed it!

  • I’ve always been morbidly fascinated by brutalist monoliths. Born well after their construction, I found them horribly seductive. Like an unexplained congenital illness from the past.

  • I love the benefits of Brutalism in web design. I have put together some codepens about it and how we can get back to that aesthetic: http://codepen.io/collection/XoLmqP/

    I think that we can create a neo-Brutalism that connects with the movement while still using modern code and patterns. I don’t believe the Brutalists didn’t use modern building materials and processes. What set the movement apart were the building materials they used and a lack of “polish”; a lack of slick design aesthetic. They exposed what was underneath instead of covering over it.

    In web design we do a lot of glossing over for the sake of aesthetic. An example is the removal of bullets and padding on unordered lists so that we can use those lists for navigation. Functionally, there is no reason to do that. We do it to get a bar of links. This design choice actually makes it more difficult to scan the links. A bulleted list is generally easier to read than a stylized bar of links.

    I’d love to see a neo-Brutalism in web design. All it takes is a lot of leople choosing to branch out and do something new.

  • Rasmus

    Here they make pro design and developement… http://international.osixstuudio.eu/ https://uploads.disquscdn.com/images/189db8adc004fac04f955613278dbaae37d68d2098853e4c73ef50d8f7e6e515.png Good!

    buy

    Osix Stuudios own design looks hard and new but they make the quality work. prices start at 2700 usd.

Pin It on Pinterest