8 Brutalist Websites for Your Design Inspiration
In this article the best brutalist websites and the history of brutalism; the raw, honest design style.
In our earlier article about the web design trends of 2019 we wrote about brutalism; cheeky websites that mess with design rules. Bright colors, billboard sized letters and busy animations scream for the user's attention. Brutalist design does not appeal to everyone, but you certainly attract attention with it.
In this article the best examples of websites that are designed according to brutalist design principles, but first a short introduction.
History of Brutalism
Brutalism is best known as a movement within architecture, which was especially popular between the 1950s and 1970s. The name comes from the French béton brut, which translates roughly to 'rough concrete'. Characteristic of the style were the many concrete that was used and the block-like, repeating forms.
Another characteristic of this design style was the return to the raw essence of architecture. The buildings had a powerful appearance, also because of the materials used. This gave the buildings an imperfect appeal.
And this is exactly how brutalist design works. Back to the essence of web design from the past, with a rough, cheeky look. No soft pastel colors, but bright colors that seem to have been put together randomly.
Web agency #00F (the hex color code of blue) uses a bright blue color in various shades and lots of white.
Small details, including the hover effects and text that's skewed after scrolling ensure that this website is incredibly fun to use.
Combine this with life-size letters (which are also animated) and you have a simple and eye-catching website.
Bright green is combined with white and black. As if this color combination is not screaming for enough attention, there are wild animations that play in the background.
Screen-filling letters and hover effects that magnify photos complete the picture.
The website of Tim Tijink looks almost minimalist compared to the other websites on this list.
The website uses white and black in combination with bright green. A green gradient can be seen in the background and the cursor also uses the same color. The unusual navigation is also very minimalist in design, and uses a simple icon.
The YRS TRULY website also uses white and black in combination with a bright accent color. Bright yellow is used in this case.
The website has nice interactive details, you can adjust the background (it can be made bright yellow or there is noise) and it seems like a desktop with faux windows that you can move or close.
The navigation is a bit more conventional here by putting the various menu items in a list on the left hand side of the website. A striking font was chosen with an outline.
No flickering GIFs or bizarre hover effects on this website, but an animated background (on scroll) and a cursing color palette.
Blue is combined with orange-red. The texts are put in for white and black.
For this website of this agency, a yellow-orange color was chosen with a huge font on top of it.
At a first glance, this website has an almost minimalist look, but the animated blob that also changes color does look a bit brutalist.
A hover effect, which shows a photo of the artists in the blob, adds to that.
Studio Job has the most striking website of this list. Animated backgrounds - with different, sweeping patterns - a marquee and a cursor that keeps changing; not everyone's cup of tea.
It certainly stands out. And after a small learning curve the navigation works quite easy.
This web agency from Leiden (the Netherlands) uses a black and white color palette and flickering GIFs. Throw an asymmetric grid and an ultramodern font into the mix and you have a brutal website.
The unconventional navigation, also contributes to the unique appearance. Animations, such as hovering, complete the whole thing.