Brutal03: a redesign using brutalist web design principles
It’s that time of the year when I rework the website for no other reason than I can. While the previous design with its cartoonish characters was closer to the playful side of my personality, this is better suited for my professional work.
This iteration of the design is called “Brutal03” and based loosely on the principles of Brutalist web design. If you’re not familiar with it, Brutalism is an architectural style that emerged in the UK in the 1050s. It’s in the popular imagination as concrete structures, but underneath this is a minimalist approach that appreciates the materials used in construction and avoids hiding them behind facades and renders.
Brutalist web design
Just as Brutalist architecture emerged as a counter to the beautified, nostalgia infused architecture of the 40s, so Brutalist Web Design is the antithesis to the over-engineered sites that seem to dominate the web today.
Instead of trying to take control of the user’s web browser with ever more complex JavaScript, a brutalist website embraces the underlying browser’s behaviour. HTML is used to structure content, with CSS adding texture to this raw material. JavaScript is rarely used, if ever.
I’ve interpreted these principles within the Brutal03 design in the following ways:
- The site works consistently within browsers and devices. I don’t do anything with Javascript that makes a link, field or image work differently to how you would expect.
- The post structure is exposed. I have deliberately left borders in place on key elements to show the structure of the underlying HTML. As well as providing a pleasing appearance, it also acts as a signpost for sections and
- Links are underlined. There are two exceptions. The first is the footer, where underlines were removed to avoid visual clutter. The second are “cards” that link to other content in the site on index pages and footers. For these the header was left with a single bottom border.
- Content is accessed by scrolling down. There are no pop-overs or hidden menus. The exception to this is image galleries, which uses a Javascript component to reveal images after clicking on their thumbnail.
- A consistent colour scheme has been applied to backgrounds and construction lines. Work related content is green, play content is pink and design is blue. Other colours may be added later.
- The site is designed from the ground-up for performance. It was this that prompted me to include a Javascript based gallery design.
The environmental benefit
This minimalist approach to design also reduces the carbon footprint of the site. I chose a host whose servers are run on sustainable energy, but there’s more to it than just feeling good about where the electrons come from. There’s also how many are used.
A lightweight site uses less power. Both on the server where the code comes from, and in the visitor’s browser as it tries to put everything together. Put simply, every byte of data takes energy to move around the Internet, process and present in the browser. Custom fonts, Javascript, excessive images all add to the amount of C02 used to serve, transfer and display a site. A brutalist design with its minimal approach to design and build, reduces these impacts. Checking this redesign on WebsiteCarbon.com showed not only does my site rate in the top 10% for carbon emissions, it’s also quite a bit better than the last iteration – and substantially better than the 1950s mid-century modern inspired version before that.
Yet for all our talk of carbon footprints and reducing the impact of our activities, NEVER featured in any discussion I’ve had about website design. That’s something I have to change.
Brutalism as an antidote to lazy web design?
Web design has become lazy over the years as computing power increased and technology let us do more. Drag-and-drop builders create sites which can be so full of JavaScript they trip cooling fans as browsers struggle to cope.
It’s time to go back to basics. Good, clean code that lets a web browser be a web browser and lowers our collective carbon footprint. As well as aesthetic and functional factors in our design choices, we should add environmental.
It’s something I’ll start factoring into my thinking in the months and years ahead.
My name is Ross Hori
I'm a freelance writer, designer and photographer. By day I create articles, features and reports. At night I take photos and write fiction. Find out more.
Follow Me:
Subscribe to my weekly(ish) email for notes from my ongoing research, photos and more. Just pop your email address in the box below.
