brutalistwebsites.com_

brutalism

by Luke Farrugia • 25 August 2020

For years now, brutalist web designs have been demanding attention. From what felt like a trend, Brutalism on the web has proven that it is here to stay as it gains increasing popularity among designers. In the beginning, we saw the rise of brutalist techniques show through zine-like presentations of designer portfolios, digital agency sites and art and museum sites. Now we can see a movement of designers advocating for the inclusion of these anti-design patterns in our everyday digital products.

bloomberg

An example of Brusalism in the mainstream: https://www.bloomberg.com/asia

When thinking about the origin of Brutalism, what we know it as today descends from an earlier architectural movement in the 1950s. Brutalist buildings generally have a heavy and rough appearance, using raw materials. The term brutalism comes from the French phrase béton brut, meaning, raw concrete, with the keyword raw to note when thinking about digital brutalist design. 

Swiss-Medical-Research-Foundation-Jack-Vicajee-Bertoli-Geneva-Switzerland-1976

Swiss Medical Research Foundation, Jack Vicajee Bertoli, Geneva, Switzerland, 1976

Rozzol-Melara-Carlo-Celli-Trieste-Italy-1982

Rozzol Melara, Carlo Celli, Trieste, Italy, 1982

Milwaukee-County-War-Memorial-Eero-Saarinen-Milwaukee-Wisconsin-USA-1957

Milwaukee County War Memorial, Eero Saarinen, Milwaukee, Wisconsin, USA, 1957

Brutalism in digital design is a method that intentionally uses raw design elements to convey its message in a haphazard or unadorned way. These patterns are leveraged by designers aiming to break the usability norms, rejecting the standard design trends and flipping them on their head. Sometimes violating the user experience to add mystery and expression into a webpage, rather than utilise a smooth and seamless experience. Adding friction for the users' enjoyment, or sometimes maybe, to mess with the user. Often you can pick out a brutalist site from the bare-bones appearance, those almost naked HTML pages that proudly boast electric blue text links and monospaced text. 

To help put words to the visuals, here are some commonly used patterns or anti-patterns that form a brutalist website:

  • Content is readable on all reasonable screens and devices.
  • Only hyperlinks and buttons respond to clicks.
  • Hyperlinks are underlined, and buttons look like buttons.
  • Content is viewed by basic browser behaviours, by scrolling, clicking and dragging.
  • Decorate when needed, with no unrelated content.

All being said, to set the tone for this immersive collection of brutalist sites. When this resource "brutalistwebsites.com" hit the duel of doves space, it came with a mixed reaction, some hate it, and some love it. Here are a few of our favourites. 

See the full collection here: https://brutalistwebsites.com/

bigsean

https://56.digital/project/bigsean

dappboi.com_

https://dappboi.com/

en

https://www.purho.it/en/

ss2018

https://kostasmurkudis.org/ss2018

x20xx.com_

https://x20xx.com/

design.byform.co_

http://design.byform.co/

www.99percentoffsale.com_

https://www.99percentoffsale.com/

escolalateral.com_

http://escolalateral.com/

www.studio-job.com_

https://www.studio-job.com/

LONDON-PACK

https://pleunverhoofstad.com/LONDON-PACK

studio-otto.com_

https://studio-otto.com/

stu-b-io.com_

https://stu-b-io.com/

tp-quarantine

https://typical-organization.com/portfolio/tp-quarantine/

join us

duel of doves is a curated community, created to encourage thought-provoking discussions through connecting and collaborating with like-minded people. A professional online home away from home, sans the office politics, where we can be ourselves and get sh*t done.

subscribe

Get the duel of dove’s wrap-up sent directly to your inbox.

Follow us on instagram