A quick recap before we dive into Neobrutalism; Brutalism exists in antithesis to artificiality (or designs that indulge in fluff). It exists as a stripped down, unadorned version in an attempt to be ‘honest’. It can relate to the phrase ‘function over form’. It emerged as a trend in the early 1950s primarily in architecture; the buildings are massive, monolithic, geometric and made immense use of concrete.
The Cité Radieuse is arguably the most influential Brutalist building of all time
The word ‘neo’ is defined as ‘new or revived form of’ according to the dictionary. While Brutalist design made its name in architecture, Neobrutalism seems to be creating a mainstay in the world of interface design.
This design language is a stark contrast to another popular trend; Neumorphism. While Neumorphism indulged in deep shadows, rounded corners and a propensity to play with opacity to create the illusion of glass, Neobrutalism intentionally breaks decorum by combining colours and shapes that don’t mix well. The key ingredients being:
This purposeful disregard for established ‘design principles’ is what makes Neobrutalism… well… brutal. It immediately makes the end product distinct, memorable and stand out from the millions of other websites and applications around today. It’s ugly on purpose, but in a good way.
Figma's homepage
The only allowance in Neobrutalism- and the key ingredient indicative of the word ‘neo’- is typography. While chaos reigns in the form of shape and colours (when done tastefully; endearing it to funky or quirky adjectives), typography appears to be align with mainstream conventions. Designers striving for a neobrutalist look should adhere to good contrast between header and body fonts allow for legibility and clarity.
The font-scape, though, has its own distinct flavour that lends to the design language.
Unlike neumorphism which struggled to gain mainstream traction, Neobrutalism’s acceptance by large and popular brands like Figma and Gumroad may help the design language mature and see widespread use.
References:
https://hype4.academy/articles/design/neubrutalism-is-taking-over-web