Thursday, May 19, 2022

What is the Neubrutalism Web Design Trend?

What is the Neubrutalism Web Design Trend?

Move aside brutalism, there’s a new web design trend in town. Welcome to the stage neubrutalism, which is a refreshing combination of the brutalist trend as well as the modern, minimalist trend that’s graced our screens for many years now. Read on for key features of this new design including what to look out for, real-world examples, plus a few neubrutalist-inspired web design templates from ThemeForest.

Okay, So What Actually Is Neubrutalism?

Friends (or foes) of the brutalism web design trend will know that it’s a style that earned its name due to its affinity to brutalism in architecture, i.e. it rejects decorative pomp and ceremony in favor of rough, unfinished surfaces, unusual shapes, solid materials, and contrasting small features. The concrete-heavy Barbican in London is a classic example of brutalist architecture. 

It certainly won’t be to everyone’s tastes, but brutalist web design can be seen as rejecting the more popular, softer web and instead adopting harsh, raw, or uncomfortable forms. To see more examples of brutalist websites, check out brutalistwebsites.com.

Neubrutalism takes recent website trends to the next level—it retains its edge while also combining the unusual style with more modern animation, illustration, and text standards. Although neubrutalism is an unofficial term right now, it’s already being talked about in the world of web design and it’s the sort of thing which sticks, so it's great to get ahead of the curve!

If you’re new to neubrutalism, here are a few traits to look out for: 

  • Ugly (ish): Whether you love or hate this style, it adds variety to the modern minimal style that has been popular for many years. Neubrutalism favors imagery that looks ‘a bit off’—whether through unusual color or design choices. Ultimately, it catches the eye by standing out from modern web design trends that have come before. 
  • Clashing colors: This is a website trend not afraid to stand out—colors are often clashing but muted. It certainly doesn’t follow the ‘less is more’ philosophy. 
  • No gradients: This has been a huge trend over the past years, but neubrutalism favors flat colors in an almost pop-art style. 
  • Modern typography: Although brutalism often opts for weird, stretched, or convoluted typography, neubrutalism tends to follow modern typography rules to allow for easier legibility. Think weird backgrounds and colors meet legible, geometric text. More on this in a moment.
  • Animations: Despite the style looking back to the past in its overall naivety, the addition of modern animations helps to once again modernize the look.

A Word on Neubrutalist Typography

When you scroll through the neubrutalist website examples below you’ll likely notice the typography used for the headings—they almost all use quirky grotesque typefaces.

example of figma’s typefaceexample of figma’s typefaceexample of figma’s typeface
Figma heading block
heading from readymagheading from readymagheading from readymag
From readymag.com

They’re often a bit beyond what we’d define as grotesque (or grotesk) and drift into the display font world, but however you define them they certainly make an impact. Get unlimited access to plenty of grotesque web fonts on Envato Elements right now!

A grotesque sans serif font lacks a serif, which is a little extra stroke commonly seen at the end of some typefaces. It has, instead, a more abrupt edge.” — Daisy Ein

Real-World Examples of Neubrutalism 

Read on for 10 examples of neubrutalist design hitting the web right now. Which is your favorite?

1. Gumroad

Check out the muted, clashing, gradient-free colors combined with thick black outlines. Typography is modern and easy to read, setting it apart from the often clunkier styles preferred within brutalist design. Animations also help to modernize brutalist design. 

2. Figma

One of the most famous examples of neubrutalist web design, Figma avoids shadows across all imagery, instead opting for sharper, darker black lines surrounding the shapes. Clashing hues such as orange and yellow also feel a little challenging on the eye which helps them to stand out. 

3. Goodkids Agency

As soon as you set a foot wrong on the Goodkids website, it’s impossible to miss the oversized 404 animations which unevenly pile on top of each other to fill the screen. Smiley emojis are in a similar tone to the website’s beige background, making them feel slightly jarring and therefore weirdly eye-catching. 

goodkidsgoodkidsgoodkids

4. Readymag

Channeling retro design trends, you’d be forgiven for thinking Readymag’s website comes straight out of the 90s. Subtle animations help to remind the user this is in fact a modern design choice! The flat grey navigation buttons are eye-catching in their simplicity. 

5. Pizza Pizza

Confident in its simplicity, Pizza Pizza opts for a flat red against black—it feels a little difficult on the eye, but you can’t help but carry on looking. The lack of imagery on the homepage also goes against most image-rich websites. 

Pizza Pizza homepagePizza Pizza homepagePizza Pizza homepage

6. Guiacirugiacardiaca.com

Flat, muted imagery against minimal and modern typography, the Cardiac Surgery Guide is a classic example of neubrutalist web design. Striking simplicity meets modern touches like the cursor when you scroll over content pieces and the logo that spins when the user scrolls. 

7. Christou 1910 Days

The bold white text against clashing colorful blocks is challenging to read—hence you pay extra attention! Modern animations like happy walking clouds fill this fun website, a great juxtaposition against the flat color scheme.  

8. Plus

Orange and lilac? Lemon yellow and royal blue? Daring combinations, but Plus’ website combines them all for an undeniably neubrutalist look. Bold animations and the novelty cursers almost gamify this edgy site. 

9. Mafanfa

As you scroll, fun animations burst into action within this neubrutalist website. A lot of thought has gone into how the user interacts with the site—when the mouse hovers over certain elements, many change color or move. To a certain extent, the user creates the website they’d like to see. 

MafanaMafanaMafana

10. Castor & Pollux

A text-heavy site, the Castor & Pollux is sprinkled with color as the user scrolls. Even the social sharing buttons avoid the classic iconography you might expect in favor of simple text signposting. 

Neubrutalism-Inspired Web Templates 

1. Remake - Minimal Theme

With 10+ premade skins to show off your work, Remake is a versatile web design theme. The Kyona theme, for example, uses a sprinkling of bright colors against more muted tones. The templates also come with single project and case study pages—perfect to display your work in style.

Remake WordPress Demo

Remake WordPress ThemeRemake WordPress ThemeRemake WordPress Theme

2. Trito - Personal Portfolio Website Figma Template

Flat colors meet modern imagery and contemporary illustrations within this neubrutalist web design template. A one-page personal portfolio template, this has been designed especially for developers or designers to showcase their skills. It comes with a light and dark mode, so you can edit your template according to your taste. Released in May 2022, it’s clear Trito has been designed with the latest web design trends in mind.

Trito Figma templateTrito Figma templateTrito Figma template

3. Orido – Personal Portfolio Website Figma Template

Also released in May this year, Orido comes with light and dark mode as well as free fonts and icons. The vibrant clashing yellow and purple color scheme and legible font choices are nods to the latest web design trend. 

Orido – Personal Portfolio Website Figma TemplateOrido – Personal Portfolio Website Figma TemplateOrido – Personal Portfolio Website Figma Template

4. Khulna - Colourful Minimal Digital Agency HTML Template

A simple and easy-to-follow web design template, check out the colors chosen within the portfolio section. This template comes with features including the Slider revolution to hero content quickly and easily, as well as a responsive layout design. The blog pages are also well-designed. 

Khulna - Colourful Minimal Digital Agency HTML TemplateKhulna - Colourful Minimal Digital Agency HTML TemplateKhulna - Colourful Minimal Digital Agency HTML Template

Over to You!

Now you’ve learnt all about the neubrutalism website trend and explored some of my top web themes and templates, it’s time to get creative! Either pick a theme from this post that works for you or head over to ThemeForest and find or create your own. Which website trends are your favorite right now?


No comments:

Post a Comment