A brutal trio: 3 websites to inspire your next web design

Brutalism is a design philosophy that is bold and stark. Very rough around the edges, it’s quite the opposite of many of the more smooth and subtle design elements we often see on the modern web.

A brutal trio: 3 websites to inspire your next web design

In some ways, this style harkens back to the web of yesteryear (think of the mid-1990s). Back then the roughness of web design was more a result of a lack of tools, technology and standards than it was a fashion statement. In our current time, brutalism is more about standing out and, in some ways, simplifying the web.

A Brutal Trio

A brutal trio: 3 websites to inspire your next web design

Let’s dig a little deeper into three websites who, to some degree, use elements of a brutalist design. We’ll discover just what makes their punch-in-the-gut style work. Then, we’ll show you how you can turn your WordPress website into a brutalist buffet through the use of unique themes and design elements.

The Verge

Founded in 2011, The Verge is an online magazine that focuses on technology and how it affects our lives. You’ll also find a large dose of pop culture and some outstanding longform writing.

A brutal trio: 3 websites to inspire your next web design

The site’s take on brutalism hits you right from the start. A grungy, purple-to-pink background pattern (vaguely reminiscent of David Lee Roth’s pants) sets the stage for an extra-bold white text logo. It’s bright, it’s loud and it leaves you with no doubts about where you dare to browse.

Just below is a grid of top stories that is bold – but in a different sort of way. Each story gets a photo, headline and author. It’s dead simple and, through use of large white text on a black background, is right in your face.

Quartz

Quartz began in 2012 with an eye towards covering the “new” economy. Here you’ll find business headlines from around the world along with a mix of politics and culture.

A brutal trio: 3 websites to inspire your next web design

Earlier, I mentioned brutalism as kind of a throwback to the 1990s. Quartz’s home page really seems to be in that category. The top headline is set in huge black text (hovering over it provides an awesome surprise). Underneath are four, somewhat staggered columns of other features (again with thick black text headlines).

Further in, individual stories feature a very stark layout consisting of a bold headline, full-screen photo and a very simple content layout below.

Quartz stands out as a true brutalist website through and through.

Bloomberg

You probably wouldn’t expect an institution the likes of Bloomberg to use elements of brutalist design on their website. Yet, one look at their website – and in particular, the Asia Edition – shows that even this large, pre-web media company (founded in 1981) isn’t afraid to make a bit of a design statement.

A brutal trio: 3 websites to inspire your next web design

True, this isn’t an all-out brutal design. But their implementation of bold headlines that envelope a good portion of rainbow-tinged photos and a plethora of sharp edges lend Bloomberg some real street cred. After all, big business can be brutal.

Bloomberg’s straightforward design choices provide for an excellent UI. Each article in the grid listing has its own moment to shine and is very easy to read. This site is a great example of how even more traditionally buttoned-down organizations can benefit from taking a few design risks.

What you need to get the design right

We’ve found some well-known websites that use elements of brutalism in their design. Now, let’s check out some WordPress themes and other artistic elements you can use to bring a similar style to your own site.

WordPress Themes

Da

A brutal trio: 3 websites to inspire your next web design

Da is a WordPress theme that has an interesting mix of brutalism and minimalism, which sort of go hand-in-hand. It features a very plain color palette (mostly black and white), oversized header text and just enough rough edges to provide a bold, sophisticated look.

Calafate

A brutal trio: 3 websites to inspire your next web design

Calafate makes use of a grid portfolio on the home page that allows images to stand out nicely against a black background. Top-to-bottom, the theme’s layout is simple. Secondary pages, like the staff member bio shown above, are quite bold. There are a few smooth scroll effects here and there, but overall the look is anything but over-styled.

Textual

A brutal trio: 3 websites to inspire your next web design

Fancy graphics? You’re not going to find them here. Textual is a WordPress theme that brings the focus to the stuff that matters – the words. The layout harkens back to a time when the web really was text-centric (probably because we had underpowered computers and really slow connections). Just think about how fast it’s going to load on that new-fangled broadband connection.

Min

A brutal trio: 3 websites to inspire your next web design

This single-column page from the Min theme isn’t there to make anyone say “wow”. It’s there to get you the information you need without any fuss. The theme moves things a bit forward from the 90s to a time when WordPress first arrived on the scene. Back when you wanted just a simple blog and weren’t worried about gigantic slideshows or CSS3 special effects.

Images and backgrounds

While the themes reviewed above offer basic style and layout, adding the right graphical elements can really lend to the style of sites like The Verge, Quartz and Bloomberg’s Asia Edition. Here are a few examples of images that you can use to build your brutal online empire.

Bright Halftone Backgrounds

A brutal trio: 3 websites to inspire your next web design

Bright Mosaic Backgrounds

A brutal trio: 3 websites to inspire your next web design

Abstract Polygon Mosaic Backgrounds

A brutal trio: 3 websites to inspire your next web design

Tinted Rugged Backgrounds

A brutal trio: 3 websites to inspire your next web design

Pro tip: for added impact, overlay gradients and bright patterns with abstract black designs on top, like this orange gradient background and this black and white abstract geometric pattern

A brutal trio: 3 websites to inspire your next web design

Urban Backgrounds Pack 1

A brutal trio: 3 websites to inspire your next web design

Make It Your Own

In an age where websites are expected to be pretty and fit together seamlessly, a bit of a design rebellion is healthy. The sites reviewed above are proof that you can use bold, bright and even loud design elements to great effect. While going full-on brutalist may not be the ideal choice for every type of website, using bits and pieces of it can be a welcome addition.

This style is actually about more than just making things look rough and unpolished. There is a simplicity in brutalism that can lead to websites that are easier to use and more accessible. In that way, maybe we can all use a bit of brutalism in our designs.