The Brutalist Web Design Trend

By on Mar 23, 2018 in Design Trends
The Brutalist Web Design Trend

The brutalist web design trend comes from a school of design that is at once fascinating and very bare bones. If you’ve seen more of these shockingly stripped-down, brutalist websites lately, it’s no accident: Brutalist design is enjoying a renaissance of sorts.

Where Brutalist Design Comes From

This design trend doesn’t come out of the blue, however. In some ways, brutalism has been with us for many decades already. Its latest web-based popularity is just the newest way in which it’s leaving an impression on the world.

In reality, brutalist web design’s origins trace back to the mid-20th century architectural movement of the same name. When we consider its roots, it’s truly interesting to witness this morphing of this school of design from blueprints and the physical world into the world of the Internet.

Because of design trends like minimalism, flat, and Google’s Material design, we’ve been conditioned to associate web design with all things clean and harmonious to the eye. If you haven’t seen what brutalist sites have to offer yet, then brace yourself: you’re truly in for a jarring ride that’ll challenge your notions of what’s acceptable and pleasing in the world of web design.

Defining Brutalist Web Design

To help you understand what brutalism means in regard to web design, we need to clearly define what it looks like on the Internet.

Whenever you navigate the web today, the types of sites you’ll land on—especially if they’re from reputable brands or brands with a tech-savvy background—are usually cleanly designed and err on the side of minimalism. As a result, you’re mostly looking at beautiful sites with high usability, which equals a great user experience or UX.

Here’s a rundown of the various, popular designs that are responsible for many of the nice-looking sites you see and navigate:

  • Minimalism – This web-design approach relies on clean lines, the use of white space, simple typography, and vibrant colors to guide a user’s experience.
  • Flat Design – Flat, an offshoot of minimalism, is a design technique that rejects 3D elements like gradients and drop shadows in favor of stark color contrast and strong lines to create web affordances.
  • Material Design – This is Google’s baby, a design approach that espouses the metaphorical simplicity of tactile paper and ink as the basis for its whole philosophy.

Pin It

Now that we’ve recounted what design techniques are responsible for much of the beautiful web that you see and experience each day, let's take a close look at brutalism in web design. You see, brutalism is exactly the opposite of all these clean approaches to web design. It’s not ugly, per se, but it’s an extremist approach to minimalism, so that all the beauty and concern for aesthetics is actually eliminated from web design.

Going off of that, we can then define the brutalist web design trend as characterized by the following:

  • Excessive white or negative space
  • Loud, jarring colors that clash instead of harmonious contrast
  • The presence of darker neutral colors like black
  • No respect for the content organization seen in conventional web-design approaches, such as the grid layout
  • Illegible and/or unreadable typography
  • A lack of regard for balance
  • A complex, often confusing user experience

If you land on a site that satisfies many of the abovementioned traits, then it’s a safe bet to say that you’re enjoying brutalist web design in all its rough, raw, and uncomfortable glory.

Don’t believe that this approach to web design is really this stark and promotes the absence of all the usual comforts and beauty of web design that we’ve gotten used to in the last several years? Check out brutalism on the web for yourself by visiting the web’s premier showcase of brutalist sites, the perfectly named Brutalist Websites. Here, you’ll be able to peruse dozens and dozens of these extremely unpolished sites to your heart’s content, all in the celebration of brutalism.

Noteworthy Brutalist Websites

Some extremely popular and highly trafficked sites are designed in the brutalist frame of mind. Paradoxically, their rough design has not stopped many visitors from flocking to them on a monthly basis.

The Drudge Report

One of the most popular political sites of the last couple of decades, reporter Matt Drudge’s Drudge Report is an example of how an exceptionally bare-bones site without the presence of conventional usability and hard-to-read typography is still very successful.

Pin It

Note the small, not-so-clear images, the really small typography in the links, and the lack of color besides the neutral black-and-white color scheme.

Craigslist

Another huge site that many people flock to, this classified-ads site has been extremely popular since it first launched more than a decade ago. In spite of it being an ultra-minimalist site without the comforts of aesthetics, that hasn’t stopped people from placing and answering a plethora of ads.

Pin It

Note the overwhelming amount of white space, the hard-to-read and almost illegible typography, and the very plain and dull color scheme.

Y Combinator’s Hacker News

A social-news site for all things technological entrepreneurship and computer science, Hacker News is as stripped-down as you can get. Devoid of any pictures, links are presented in horizontal line entries and in bullet-style fashion.

Pin It

Note the site’s use of neutral gray, the little negative space between the lines of news items, and its very small font sizes.

The Purpose of Brutalist Web Design

It’s called rebellion.

If you perused the Brutalist Websites showcase above, you’ll notice that there’s a definite pattern and intent behind the brutalist design aesthetic. Make no mistake about it: for all its absence of splendor, it still definitely is a design aesthetic because it follows specific rules and patterns to convey a certain message. And that’s on purpose.

Just like there was a web rebellion several years ago when flat replaced skeuomorphism as the Internet’s favorite design darling, brutalism on the web is a rejection of all the adornment in design that puts a big premium on aesthetics. This is commonly what you see with design trends like minimalism, flat, and Google’s Material Design.

Pin It

Of course, this rebellion is nowhere near as widespread as when much of the web switched from skeuomorphism to flat, encouraged by both Microsoft’s and Apple’s rejection of skeuomorphs. No big brands are obviously going to associate their design language with the bare-bones extremism of brutalism.

Nonetheless, brutalism in web design is meant to challenge the aesthetic conventions that are popular today, which is that all web design should be light, highly detailed and, allegedly, somewhat frivolous.

The History of Brutalism

Brutalist web design’s roots aren’t actually in web design. Web designers didn’t just conspire one day to start creating the most unpolished-looking sites the Internet had ever seen. Brutalism’s history is actually found in architecture, making this design trend one with a long and storied history.

Brutalism first made its mark on the world in the mid-20th century, in the aftermath of World War II. A descendant of the modernist architectural school of design from the early part of the 20th century, the very word “brutalism” comes to us from the French for “raw,” making it extremely apt to describe brutalist creations as things with no concern for beauty or comfort.

One of the first uses of brutalism to actually describe a building was in 1949, when Swedish architect Hans Asplund gave his impression of the Villa Goth, a very utilitarian house in the Swedish city of Uppsala.

As a phrase, “brutalism” was coined in the 1950s by architects Peter and Alison Smithson, but it entered more widespread use after the 1966 publication of The New Brutalism: Ethic or Aesthetic, a book by Reyner Banham, a British architectural critic. In the book, “brutalism” was first used to identify this raw, rugged and coarse architectural approach.

Pin It

Curiously, just as brutalist web design today is a reaction by younger web designers to challenge the conventional, neat-and-tidy beauty of minimalist and aesthetic web design, brutalist architecture back in the day was a rebellion by architects against the lightness, retrospective nostalgia, and optimism of architectural styles in the early and mid 20th century.

From the 1950s to the 1970s, the heyday of brutalist architecture, brutalist buildings became quite popular with government as well as large institutions, where no-nonsense and often stoic designs were valued. This love affair with brutalism would sweep many English-speaking countries like America, Canada and the UK, as well as Western European countries like France, Germany and Italy. However, even eastern European countries like Bulgaria and Asian countries like Japan and the Philippines couldn’t resist the architectural straightforwardness of brutalism.

Characteristics of Brutalist Architecture

When you look at buildings built in the brutalist philosophy, you’ll quickly see a similarity with sites that have been created according to the brutalist trend. In general, brutalist architecture promotes the following traits:

  • The use of concrete to create raw and stark exteriors
  • A massive character in the structure, even when the building isn’t particularly huge
  • Being fortress or castle-like
  • Consistent modular elements that form groups representing specific functional areas
  • The use of additional rough materials like brick, glass, rough-hewn stone, gabions, and steel
  • The revelation of a structure’s purpose (such as its services for human use and functions) predominantly shown in the building’s exterior
  • A socialist-utopian ideology as the underpinning of its design philosophy

Here are some images from our marketplace to give you more of an idea of what brutalism in buildings looks like:

Famous Works of Brutalist Architecture

Although brutalism’s heyday in building construction has come and gone, it has nonetheless left a mark on many structures that still stand and are in use today.

Marseille’s Unite d’habitation

French for “housing unit,” this massive structure built between 1947 and 1952 in Marseille is the seminal brutalist construction that arguably was the first, prominent building designed in this style. A UNESCO (United Nations Educational, Scientific, and Cultural Organization) World Heritage Site, it’s a modernist residential housing structure that’s built with rough-cast concrete.

Pin It

Gazing at this structure, it’s easy to see how and where brutalist web design gets its obsession with raw and rough appearances. It features 337 apartments across 12 stories, all of which are suspended on a huge piloti or pier. This brutalist building is so huge that it also holds various shops, a hotel, a gastronomic eatery, and educational facilities, and a rooftop gallery.

Boston City Hall

Boston’s municipal seat of power is a testament to the influence of brutalist design. City Hall was constructed in 1968 and is still home today to the mayor and the Boston city council. It’s immediately noticeable thanks to its brick-faced base (also partly built right into a hillside), cantilevered designs, and stoic, standardized window patterns.

Pin It

Because of its stark and somewhat cold design, the structure has attracted a lot of criticism with regular calls for it to be torn down due to its brutalist appearance. However, it’s generally well-regarded by architects, with one poll even going so far as to recognize Boston City Hall as one of the proudest achievements in U.S. architectural history.

Trellick Tower

London’s Trellick Tower has been displaying the brutalist style since opening in 1972. It is the work of renowned architect Erno Goldfinger, who’s famous for being part of the modernist architectural school and designing a number of residential towers. Trellick Tower has been featured in numerous TV shows and films.

Pin It

It was intended to be a high point of brutalist architecture since it was completed just around the time that brutalism was falling out of favor. However, it became a center of local crime, prostitution, drug use, and vandalism. Today, it contains mainly subsidized public housing, although demand for its private flats has substantially increased in the past couple of decades.

Its design is immediately memorable and unique, due to the protruding plant room on its service tower. Its thin and long profile, which features large balconies with large windows to allow as much sunlight as possible to enter, is distinct against the London skyline.

Habitat 67

Habitat 67, designed by Canadian-Israeli architect Moshe Safdie, was constructed as a pavilion for Expo 67, which was the World’s Fair held between April to October 1967. For a piece of brutalist architecture, this structure has been remarkably well-received, with it being regarded as a landmark and Canada Post even issuing a commemorative stamp for the structure last year, which was its 50th anniversary.

Pin It

What makes this building stand out is its prefabricated and insulating concrete forms that are arranged in different combinations, some stacked on top of each other and others protruding out from the main body of the building. A total of 12 stories in height, the entire complex today boasts some 146 apartments, which are now privately owned.

Western City Gate

Otherwise known as the Genex Tower after private corporation the Genex Group, Western City Gate sits in Belgrade Serbia. Designed back in 1977, the building is a 35-story skyscraper that grabs your attention thanks to its two, tall, slim towers that are joined by a two-story bridge. There’s also a revolving restaurant at the very top.

Pin It

The intent of its design is to imitate a high-rise gate that greets folks as they make their way into the city. The building’s two towers have distinct purposes: the slightly smaller tower is residential in nature, while the taller one is geared toward businesses.

Cultural Center of the Philippines

Known for its austere brutalist style against the tropical and idyllic panorama of the Philippines coastline, the Cultural Center of the Philippines or the CCP was founded in 1966. The Center is home to different exhibition and performance venues for both local and international productions. Its various artistic programs focus on spearheading outreach, cultural research and preservation, festivals, exhibitions and performances of all shapes and sizes.

Pin It

Buffalo City Court Building

This 10-story courthouse in Buffalo that dates to 1974 reaches for the sky with its dedication to traditional and classic brutalist design. Precast concrete panels on its exterior provide a hard-to-miss focal point that draws the attention of passersby. The only windows on the entire façade are narrow ones that dot its sides.

Pin It

Philosophically, the limited number of windows was intended to keep the courthouse’s workers—namely judges and juries—from being distracted by the outside world. Still in use today, the courthouse is located in Niagara Square and right next to Buffalo City Hall.

Brutalist Web Design and Its Roots in Architecture

It may be somewhat surprising to realize that the brutalist web design trend stems from architectural design. On the surface, it seems that there’s nothing in common between the two disciplines because one exists in cyberspace and the other occupies physical land.

Yet as you begin to study brutalism in both web design and architecture, you begin to see that overlaps and similarities between the two. Whether on the web or in the real world, brutalism is harsh, stark, and almost unforgiving in its dedication to a bare-bones aesthetic that takes the concept of minimalism to the extreme.

While not necessarily ugly by any means, brutalism is definitely an acquired taste. Whereas it’s fallen out of favor in building construction over the last several decades, it’s making a notable resurgence on the web in all its unrefined glory.


Products Seen In This Post:

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

4 Comments

  1. Personally I doubt very much the Drudge Report is doing "Brutalist Web Design Trend" on purpose. I think they're probably as clueless as to trendy web design as they are to everything else.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →