Since the material design revolution, we have been stuck with various versions of the modern-minimal style. Nice, rounded edges on everything, soft, colorful shadows and subtle, pretty gradients. That candy-like style almost appears to give out a bit of a glow. 

People get bored with how their apps and websites look after six to seven years.

How design styles changed over the years

Every seven years, however, the pendulum swings back between full-on skeuomorphism and complete minimalism, landing at a slightly different approach each time. 

People simply get bored with how their apps and websites look after six to seven years. They need a change. 

Neumorphism (left) / Glassmorphism (right)

While Neumorphism, and to some extent Glassmorphism tried to steer the UI’s of the future into some new directions, none of those styles succeeded in overtaking the king.

The style I want to talk about today, is not going to win the popularity contest either. Neubrutalism, or Neobrutalism as some people call it, is a mix of regular brutalism in web design and more modern typography, illustration and animation standards.

Tthe fact that it exists makes me happy, because we do need alternatives — otherwise our UI’s will get boring and repetitive and I don’t want to see another Material design taking over everything.

Why Brutalism?

Brutalism is a 1950’s architectural trend that was abandoning all decorations, and creating brutally simple buildings made from concrete. They often weren’t even painted to emphasize their brutal nature. So big, brutal blocks of concrete. 

It was the architects showing they were bored with the status-quo and trying something different. That feels very similar to the current search for the UI trend to take over design.

But how does that transfer to the web?

Some forms of brutalism have existed in graphics design before, but they often broke most of the typical layout rules, with huge text blocks often getting out of view. It was mostly popular in poster-design / graphics-design but some attempts to use it on the web existed as early as the late 90's.

Neo brutalism ditches most of that and merges traditional layout concepts with super-high contrast, solid, often purposefully clashing colors and simpler, yet quirky typography.

Brutalism examples by Yan Ageenko / Mitya Andrievskiy

Neubrutalism

Contrast

Let’s start with super high contrast. Neo brutalism is not afraid of merging pure black (#000000) with other colors. That is a practice most other design styles try to avoid, because while keeping accessible contrast, we don’t want to create eye-strain in our users. 

In most current UI styles it is popular to “infuse” black with a bit of the accent color — like a little bit of red in the example above. It helps the color to connect with other hues better, while avoiding too high contrast and eye-strain.

Shadows

The main rule of neubrutalist shadows is to avoid using blur on them. We want them as sharp as possible, looking as if there’s simply another, darker rectangle underneath our main card or button.

We can use a pure black shadow (example A), or a -20 Brightness of the same color our element uses (example B). We can also combine it with an outline (example C).

Instead of soft shadows, it goes for hard, black rectangles under the cards. Instead of typical barely visible borders, it goes for thick, dark and defined outlines.

While this is quite good for accessibility, it also adds some more objects for our brain to process. I have yet to test this on some users, but I believe those designs are straining our brains a bit more.

One thing I also noticed is that most of the shadows or fake-3d objects use an isometric view. It’s practically always some form of a 45° angle.

Modern minimal vs Neubrutalist card — typical shadows

Colors

The colors are going in directions that most other styles would dismiss as ugly or clashing, like mixing shades of red with blue or green. The main difference, however, is that now these colors are also desaturated. They are “in your face” without being over the top with contrast. 

Colors rarely exceed 80% saturation

There’s a primary color in each case — which serves as a brand color, and often dozens of secondary or accent colors. They often accompany specific sections of the website or app — like color coding categories.

Windows

One thing that’s also really popular, is the use of the computer-window pattern - either emulating the Windows or Mac with minimize, maximize and close buttons being placed on specifically differentiated title bar.

Of course, the windows don’t have to directly copy the OS trends, they can create their own little icons, or completely drop them from the top bar.

I believe, this is often done as a way to showcase how a SaaS product operates - because obviously it has windows inside and that approach helps make them more visual and easier to showcase.

It’s showing how things are “happening in our app” which makes the feature easier to remember afterwards.

It’s important, however, to only use that concept if it fits the product category. It does work for Software, but will definitely not work for most physical products or consumer facing services. The methaphor is not going to work when the product in question doesn’t actually use any “windows”.

Two main innovators

I’m going to talk about two main examples of this style: Figma and Gumroad, because they take some interesting approaches that are definitely worth exploring.

Their popularity also led to other companies and solo designers exploring neubrutalism which adds more depth and ideas to the style. It’s good when recognized brands try something new like that, because it allows for the style to mature AND gain new perspectives at the same time. 

Ugly on purpose

Neo brutalism is also quite democratic. It often uses shapes styled in a default presentation software way — like you can see in this Figma example.

There are three cards visible on this screen and they’re purposefuly inconsistent. What’s more striking, is that the most typical looking card also has the button slightly misaligned. The text in the Post button is too far to the left, and the button itself is also placed at a different distance from the right, than it is from the top.

The left (original) vs how it should be aligned (right)

The rest of the cards look like template shapes from PowerPoint.

That way of styling normalizes the ugly and makes it easier to approach for beginners — they’d be thinking “I could do that myself!” and I believe this is the exact reasons some brands went with this style. It’s non threatening and anyone could do it.

People think: I can do this myself!

Typography

Typography plays a very important role in this style, but it behaves in a lot more conservative ways. While the fonts in both our examples are a little quirky, or funky and not as minimalist as typical “cool” fonts of modern minimal, they’re presented in a way pushing for maximum readability.

There’s enough whitespace, and the fonts are generally quite thick, which matches the overall typography trends. The same rules you’ve been using in Modern Minimal also apply here.

Sometimes, like in this figma example (above), the figure to background contrast can look quite bad, or annoying, but it may be due to a shock approach after scrolling through a couple of sections already — seeing something like that, something unexpected can make you stop for a second and pay attention — especially if you’re a designer.

The landing page sections — a hard contrast may be necessary to regain user’s attention.

Illustrations

Illustrations in this style usually combine colors that wouldn’t really work in modern minimal — often ones that don’t work that well together like red and blue, or red and green. The colors are also quite vibrant, with high contrasts and defined edges.

There seem to be no rules here — some lines are thick, some are thinner, and all looks seemingly random — adding to that “I could do it myself too” attitude.

The graphics on top of photos move independently on scroll (slower or faster) to create the parallax effect.

Gumroad also merges various illustration styles with photography, fake-3d and some nice parallax scrolling effects.

Those effect, especially the parallax, act as a counter balance to the generally low-fidelity of the images themselves. Without animation, the appeal of these websites would be a lot lower.

Summary

Initially, I wasn’t really a fan of this style because of it’s very high contrast. But the more I explored it, the more I realised that it has huge potential to be a good counter-balance to the current design styles.

This is definitely a start of a new design direction and I can’t wait to see how other companies and brands will push it further. There’s a lot more potential here for creative uses of animation, 3d or fake 3d and some better font and color combinations.

The style works especially well for brands or products designed for creatives. Both Figma, and Gumroad are primarily targetting that category as well. Because of very relaxed rules regarding composition, shapes, colors and more, it allows to showcase each creator in a way specific to them. 

Even if the line-thickness and corner-roundness are not consistent throughout the project. 

I’m excited to see more of that style and how designers will explore and push it further!

Video

You can also watch a video I made on this style to explore it further:

Liked the article? Share it!