We’ve been trapped with different iterations of the modern-minimal aesthetic since the material design revolution. Everything has nice, rounded edges, soft, colorful shadows, and subtle, lovely gradients. That candy-like look nearly seems to have a light to it.
After six to seven years, people get dissatisfied with the appearance of their applications and websites.
However, every seven years, the pendulum swings back and forth between full-on skeuomorphism and total simplicity, arriving at a slightly different angle each time.
After six to seven years, people get dissatisfied with the appearance of their applications and websites. They need a change.
While Neumorphism and, to a lesser degree, Glassmorphism attempted to lead future UIs in new ways, none of those styles succeeded in dethroning the monarch.
The style we’re going to discuss today isn’t going to be popular either. Neobrutalism, also known as Neobrutalism, is a hybrid of traditional brutalism in online design with more current font, art, and animation standards.
Why Brutalism?
Brutalism is a 1950s architectural style that abandoned any ornamentation in favor of producing brutally basic concrete structures. They were frequently not even painted to accentuate their heinous character. So many massive, terrible concrete blocks.
It was the architects demonstrating their dissatisfaction with the existing quo and willingness to attempt something new. That sounds a lot like the present quest for the UI trend to take over the design.
But how does Neobrutalism transfer to the web?
Illustration by Mikołaj Gałęziowski
Some types of brutalism have existed in graphic design previously, but they frequently violated most of the standard layout guidelines, with large text blocks frequently falling out of view. It was most popular in poster and graphic design, although attempts to utilize it on the web date back to the late 1990s.
Most of it is abandoned in favor of combining standard layout elements with super-high contrast, solid, often purposely contrasting colors and simpler, yet quirky typography.
What is Neobrutalism?
A few distinct characteristics distinguish Neobrutalism. The strong clashing colors are immediately recognizable; enormous bold lettering in wacky typefaces quickly tells you where you are and what you can do there.
-
There are some peculiar animations and pictures.
-
Objects are surrounded by black strokes and have solid dark shadows with no blur.
-
There is a lot of space between everything.
Contrast
Let’s start with extreme contrast. The use of pure black (#000000) with other colors is not frowned upon in Neobrutalism. Most other design styles strive to avoid this technique since we don’t want to generate eye strain in our consumers while maintaining accessible contrast.
Most modern UI styles “infuse” black with a bit of the accent color, such as a small amount of red in the image above. It improves the color’s ability to link with other colors while avoiding excessive contrast and eye strain.
Shadows
Under the cards, instead of gentle shadows, it uses rigid, black rectangles. It opts for strong, black, and defined edges rather than conventional barely apparent boundaries.
While this is beneficial in terms of accessibility, it also adds some new items for our brain to analyze. I have yet to test this on several individuals, but I feel those designs are putting greater strain on our brains.
I also noticed that the majority of the shadows or fake-3D objects employ an isometric perspective. It’s almost usually some kind of 45° angle.
Colors
Colors are being used in ways that most other designs would deem as unattractive or discordant, such as combining tones of red with blue or green. The key change is that these hues are now additionally desaturated. They are “in your face” without being too contrasty.
In each scenario, there is a primary color that acts as the brand color, as well as dozens of secondary or accent colors. They frequently accompany certain areas of a website or app, such as color-coding categories.
Typography
Typography is quite essential in this design, yet it acts much more conservatively. While the fonts in both of our examples are a touch quirky or unique, and not as minimalist as usual “cool” typefaces of current minimalism, they are presented in a way that emphasizes readability.
There is sufficient whitespace, and the typefaces are often rather thick, which corresponds to the overall typographic trends. The same rules that you used in Modern Minimal apply here.
Illustrations
Colors that would not work well together in modern minimalism are commonly used in illustrations in this style, such as red and blue or red and green. Colors are also highly brilliant, with significant contrasts and clearly defined edges.
There appear to be no restrictions here – some lines are thicker, others thinner, and all appear to be random, contributing to the “I could do it myself” mentality.
. . .
If you’re new to new brutalism, here are a few characteristics to keep an eye out for:
-
Ugly (ish): Whether you like it or dislike it, this style gives variation to the modern minimal style that has been popular for many years. Neobrutalism encourages uncommon images, whether through unconventional color or design choices. Finally, it draws attention by deviating from previous current web design trends.
-
Clashing colors: This is a website trend that isn’t scared to stand out—colors are frequently clashing yet subdued. It clearly does not adhere to the “less is more” mentality.
-
No gradients: While this has been a popular trend in recent years, modern brutalism embraces flat colors in a pop-art manner.
-
Modern typography: While brutalism sometimes uses strange, stretched, or twisted font, new brutalism strives to adhere to modern typography conventions to improve legibility. Consider unusual backgrounds and colors combined with readable, geometric lettering. More on this shortly.
-
Animations: Despite the style’s general innocence, the incorporation of contemporary animations helps to update the aesthetic once again.
Conclusion
Trends pass us by. In recent years, we’ve seen numerous graphic design fads make a brief appearance on Dribbble before dissipating (Neumorphism, anyone?).
So, will Neobrutalism be present in the future? It is not a replacement for contemporary minimalism or Material Design since it is not applicable in all situations.
Not all user interfaces strive to be aesthetically appealing. However, as seen by the samples above, it has several advantages, such as maximum visibility and contrast, which are beneficial to readability and accessibility.
It’s also entertaining to look at.
User interfaces are not like buildings, which are more permanent in nature and cannot be readily modified once constructed.
Often architecture students are taught not to think in terms of trends or styles, but rather to focus on developing structures that would stand the test of time – timeless buildings that would not become outmoded and need to be updated as soon as the newest trend faded.
A user interface, on the other hand, can be changed far more rapidly and with much less work than a building. It is simpler to experiment and alter things when they are no longer serving the users as well as they should.
