Trends

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

And how you can recreate the look using our hand-picked WordPress themes and patterns.

Share on FacebookTweet about this on TwitterPin on PinterestShare on RedditShare on LinkedIn

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.

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

From left: Bloomberg, Quartz, and The Verge.
From left: Bloomberg, Quartz, and The Verge.

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.

brutalist-websites-01

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.

brutalist-websites-02

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.

brutalist-websites-04

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

brutalist-websites-05

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

brutalist-websites-06

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

brutalist-websites-07

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

brutalist-websites-08

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

brutalist-websites-09

Bright Mosaic Backgrounds

brutalist-websites-10

Abstract Polygon Mosaic Backgrounds

brutalist-websites-11

Tinted Rugged Backgrounds

brutalist-websites-12

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

black-orange-layer-design-736

Urban Backgrounds Pack 1

brutalist-websites-13

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.

 

The video at the top of this article was created using After Effects template ‘Dynamic Intro‘, with music by PONYMUSIC, and video creation by Envato Studio freelancer doru.


About the Author Eric Karkovack

Eric Karkovack is a web designer with well over a decade of experience. You can visit his business site here. In July 2013, Eric released his first eBook: Your Guide to Becoming a Freelance Web Designer. You can follow his rants on Twitter @karks88.