Advertisement
  1. Web Design
  2. Inspiration
Webdesign

It’s Tough Out There: A Look at Brutalism in Web Design

by
Languages:
This post is part of a series called Weeks of Web Design Inspiration.
Designing Comments, Discussion, and Feedback For the Web
Creative Examples of Geometric Web Design Styles

Brutalist websites were thrust into the spotlight recently when Pascal Deville’s brutalistwebsites.com hit Hacker News and went viral. This collection showcases the less warm and fuzzy side of the web–let’s take a look and see if we can pull some inspiration from brutalism.

Brutal Buildings

“Brutalism” (or “New Brutalism”) is a term which has been rattling round architectural schools for over half a century. It refers to a raw form of architecture with characteristics such as rough unfinished surfaces, unusual shapes, solid materials (like concrete), massive forms, and contrasting small features.

Fuck Yeah Brutalism
From Fuck Yeah Brutalism
“…what characterises the New Brutalism…is precisely its brutality, its je-m’en-foutisme, its bloody-mindedness.” – Reyner Banham, 1955

Brutal Websites

Brutalist websites, like their architectural cousins, are an antidote to the more popular, softer web. We live in an age of emotional web design; where we as interface and experience designers climb over each other to offer users empathy and understanding. Where products entice customers in the friendliest, easiest ways possible. Colors are inviting, images are polished, type is smooth and crafted.

Looking at brutalist websites, adjectives such as these spring to mind:

  • harsh
  • rough
  • rugged
  • uncomfortable
  • raw
  • confrontational
  • cynical

It’s a school of thinking I like; you could argue my own website (which I haven’t changed in a while) has a touch of brutality:

So how do we actually define a brutalist website? Let’s examine some typical features.

Brutal Raw Code

First up, it’s worth mentioning that this isn’t a purely aesthetic thing. Brutalism is something which rises from the very core of a website: its code. Brutalist websites will tend to have crude, simple markup, inline styles, a lack of optimization, but also nothing complex to weigh things down. Check out the sum total of the document head for brutalistwebsites.com!

Raw code, like most aspects of brutalism, drags things back to a cruder form.

httplexicalfoobarsystems
lexical
httpvulfpeckcom
vulfpeck
“I wasn't attempting to design a "brutalist" website” – Seth Thompson

Brutal System Fonts

Speaking of dragging things back to a cruder form, there was once a time when vast catalogues of cosy web fonts weren’t available. Times New Roman and Arial worked just fine thank you.

httpnewyorkcraigslistorg
craigslist.org

Ffffound! has always let users’ input do the talking–letting the UI take a supporting role with simple colors and fonts.

httpffffoundcom
ffffound.com

Have to love a bit of font-family: Courier,monospace;

httpfictivekincom
fictivekin.com
“I wanted to create a site that couldn't be created using Squarespace.” – Andrew Herzog

Brutal Colors

System fonts go hand in hand with a system palette. The web was a simpler place when designers limited themselves to 216 glorious browser safe colors. A gray, a blue, a red. And maybe a beige, with some burgundy. And if they needed depth, bevels were there to save the day.

httplifeactionrevivalorg
lifeactionrevival.org
“My brutalism is a form of adversarial or uncooperative design: the internet suffers from an excess of orderliness” – Brandon Joyce
httppwrsite
pwr.site

More red:

httpandrewseidcom
andrewseid.com
httpwebsafe2k16com
websafe2k16.com

Mmm, purest green.

httplaurelschwulstcom
laurelschwulst.com

Brutal Images

Don’t panic, these aren’t actually brutal images, more like images which hark back to an era before Instagram and SnapChat filters.

httpundergroundergroundcomgif
undergrounderground.com/gif
httparngrennet
arngren.net
httpeatockcom
eatock.com
“I wouldn't call it Brutalist, I would just call it normal” – Laurel Schwulst

Brutal Language

I suppose crude content counts too, right?

httpwwwandreaperatocom
www.andreaperato.com
httpsjustinjacksoncawebmaster
justinjackson.ca/webmaster

Brutal Ending

Right, we’re done here.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.