Neubrutalism is a web design trend that has been gaining traction in recent years, with its distinctive elements still prevalent today. Read this article to explore the origins, emergence, and influence of neubrutalist web design, and to see a visual guide with examples that showcase this bold design style.

Table of Contents

  1. What is neubrutalism?
  2. How did neubrutalism emerge as a web design trend?
  3. How is neubrutalism related to brutalist design?
  4. What are the main characteristics of neubrutalism?
  5. The challenges of creating neubrutalist website design
  6. Examples to neubrutalism in website design
  7. Conclusion

What is neubrutalism?

Neubrutalism is a web design trend characterized by an extremely simplistic approach: using the raw building blocks of the web, relying more on HTML instead of CSS and JavaScript. It is a system of design thought that operates on the principles of strong impression and pure functionality, lacking any concern for comfort and completely ignoring traditional design layouts.

Its name is an unofficial term to the design style characterized by:

  • High contrasts
  • Powerful colors
  • Huge fonts
  • Strongly defined shapes

Neubrutalism is considered a true visual anarchy compared to minimalist design.

💡
Brutalism in website design seems to have influence on web engineering as well, leading to lightweight websites compatible across all devices.

These websites tend to have minimal styling and reject tools such as TypeScript or SASS. Due to less CPU usage, neubrutalism can be considered quite an environmentally friendly design trend.

How did neubrutalism emerge as a web design trend?

🔎
Neubrutalism as a web design trend emerged in the last years but an early version of brutalist website design existed back in the 90’s, inspired by poster design trends of that era.

Material Design system created in 2014 by Google set new standards for web design and defined every aspect of a user-centered, clear, and simple design both in apps and websites, leading to a modern minimal style. This approach has dominated web design trends for quite a long time, and many claim that it has started to become boring and overused. The need to find new alternatives led to neumorphism, glassmorphism, and skeuomorphism, which tried to break out but didn’t become real trends.

As Y2K mania has taken over pop culture, its influence started to show in web design aesthetics as well. The design community still has mixed feelings about those messy web graphics, sharp contrasts, and hard-to-implement designs, but this new wave has undoubtedly brought something new and exciting to the table. Namely, neubrutalism. This style seems to deliberately violate all the safe and clean layout rules and standards of modern minimal web design.

Motion Design Basics - Beginner’s Guide to Start Learning
Motion design made easy! Our beginner’s guide will teach you the fundamentals and help you master the power of animated storytelling & dynamic design.
Start learning about motion design!

Neubrutalism and brutalist design share a common foundation in their aesthetic principles, yet they differ in context and application. Neubrutalism can be seen as a modern evolution of brutalism, reinterpreting its core principles for contemporary design challenges and opportunities.

View of Marcel Breuer’s Pirelli building as an example of brutalist design
Marcel Breuer’s Pirelli building, Connecticut, CC BY-SA 3.0, via Wikimedia Commons

Brutalism has its roots in the 1950’s architectural style, which prioritizes function over form. It uses massive structures and showcases the bare building materials instead of any decorative design.

Brutalist buildings are commonly known to be unpainted and made of concrete and steel elements. Its name comes from the French term béton brut, which literally means “raw concrete,” and it was used mainly for institutional buildings.

🤔
Neubrutalism is a contemporary reinterpretation of brutalism. It maintains the original movement’s emphasis on raw, honest aesthetics but adapts them for a broader range of applications and often integrates modern technology and materials.

What are the main characteristics of neubrutalism?

We might say that there are two types of designers: those who claim that stunning illustrations and other decorative elements are a must, and those who believe in the brute force of basic design elements and minimalistic approach. Neubrutalism evidently belongs to the second category.

The main characteristics of neubrutalism in web design are:

  • Clashing colors
  • Contrasts
  • Strongly defined shapes and lines
  • Unique typography
  • Accented shadows
  • Animation effects
  • Focus on HTML
  • Function over form

Clashing Colors

Example of Colors in Neubrutalism
Neubrutalist Colors - Made by SVGator

Neubrutalism just couldn’t care less if your eyes are bleeding from a clashing color combination of red and blue or red and green. It winds up all the principles of the user-friendly interface design with aesthetically pleasing, web-safe colors, that has graced our screens for many years now.

🖼️
However, these colors are desaturated in most of the cases, so they rarely exceed 80% saturation. There is always a main color dominating the website or interface, accompanied by a set of secondary colors that accentuate certain ideas. The page or app is often structured into color-coded categories.

Contrasts

Example of Contrasts in Neubrutalism
Neubrutalist Contrasts - Made by SVGator

Brutalism web design isn’t afraid of high contrasts and pure black (#fff) or white (#000), which are often avoided in order to avoid eye strain. The mixing of black with contrasting colors is an especially widely used practice in brutalist UI design.

Strongly defined shapes and lines

Example of Strognly Defined Shapes and Lines in Neubrutalism
Neubrutalist Shapes and Lines - Made by SVGator

In contrast to minimalist design trends, neubrutalism uses purposefully inconsistent and strongly defined shapes. Stripped down to the bare essentials, it is inspired by early HTML1 web designs, like computer window patterns.

📊
Additionally, high-contrast and thick outlines are used with inconsistent thickness. There seems to be no consistency rules; some lines are thicker, others thinner or dotted.

Unique typography

Example of Typography in Neubrutalism
Neubrutalist Typography - Made by SVGator

Typography plays a very important role in neubrutalism. It behaves in a much more conservative way than in previous brutalist design styles, following the well-used typographic practices.

It has an excellent use of whitespace, often complimented by huge and bold fonts, pushing for maximum readability and moving away from minimalism’s softer approach. It is characterized by simple and unique fonts, and the text overflows other containers.

Accented shadows

Example of Accented shadows in Neubrutalism
Neubrutalist Accented Shadows - Made by SVGator

Neubrutalist shadows are sharp and black instead of having blur on them. Buttons seem to have another pure black rectangle underneath, providing that “in your face” contrast instead of a barely visible border.  It is also noticeable that most shadow or fake 3D objects use isometric views that are in a 45° angle.  

Animation effects

Example of Animation Effects in Neubrutalism
Neubrutalist Animation Effects - Made by SVGator

Neubrutalism favors animations that are as bold as its visual style. Movements are often sharp and pronounced, reflecting the strong geometric lines and heavy contrasts typical of neubrutalist design. This could manifest in sudden transitions, dramatic reveals, dynamic background changes.

👌
Neubrutalist animations are not merely decorative but serve to guide users, highlight important information, or improve navigation.

For example, a button might enlarge or change color when hovered over. Parallax movements, fake 3D effects and shadow play are used to create a sense of depth and dimension.

25 Cool Website Animation Examples and Effects for Inspiration
Check out 25 of the most popular web animation effects and examples that you can use to level up your website!
Check out our cool animation examples!

Focus on HTML

Made by Badrul Rupak
Made by Badrul Rupak

Neubrutalism favors a minimalistic approach, often using plain HTML instead of CSS and JavaScript. This functional aesthetic echoes the utilitarian nature of Brutalist architecture. Clear, semantic HTML directly presents content without hidden layers.

🌐
This design trend results in websites that load faster, are more accessible, and provide an honest representation of their content, as in the early days of the web where simplicity and directness were key.

The challenges of creating neubrutalist website design

From a design perspective, neubrutalism seems approachable to beginners due to its simplicity and basic forms, but finding the sweet spot in visual hierarchy might be a challenge even for seasoned professionals. If it is done incorrectly, it may lead to a chaotic, disturbing, and frustrating user experience.

The unconventional design solutions can cause difficulty to those visitors who are not tech-savvy, because CTA buttons and navigation aren’t always in the obvious place.

The questionable color choices and bold shadows require a bit of work for their brains to process.

📌
Neubrutalism is great for those brands who would like to stand out of the crowd and entertain their users.

It’s ideal for an audience interested in design, arts, and fashion, but it’s a bad choice for fields like finance, healthcare or banking, where clear navigation and structure are important.
You Need To Stop Doing These Graphic Design Mistakes
Read about the most common graphic design mistakes and learn how to solve them. Visual examples included!
Avoid these graphic design mistakes.

Examples to neubrutalism in website design

We’ve put together this list of examples of neubrutalism in order to show you the many different approaches, styles, and layouts associated with this trend.

Pattern Brutalist

Brutalist Architecture-Inspired Design made by Patternbrutal.ist
Made by Patternbrutal.ist

If you would like to learn more about the roots of the neubrutalist trend, check out this illustrated magazine inspired by brutalist architecture. Designer Sergey Lisovskiy created the illustrations of four Brutalist buildings from Russia, Germany, and Serbia, using animated GIFs, old photographs, and amazing graphic art.

Allcaps

Black and White Neubrutalist Design made by AllCaps
Made by AllCaps

Allcaps is an international typeface publishing collective. Their website uses black and white neubrutalist style and huge text blocks, which offers the perfect opportunity to have the typefaces in full spotlight without any distracting elements.

Budapest Park

Red and Blue Neubrutalist Style made by Budapest Park
Made by Budapest Park

The Hungarian capital’s most famous concert venue has a really cool brutalist website with clashing red and blue sections and basic geometric shapes. Dropdown sections have thick black borders and hard shadows, creating that infallible layout.

Alias

Example from Allias of using Pure Black Buttons and Huge Fonts Inspired by the Neubrutalist Trend
Made by Alias

The French concert producer’s website was inspired by the neubrutalist trend, using pure black buttons and huge fonts to be in line with the brand’s awesome urban look. The colorful hover animations add an extra dynamism to the user experience.

Cromier

Urbanc-chic allure neubrutalist design made by Cromier
Made by Cromier

The Italian sneakers brand describes its products as a “mix & match of colours and materials for a result that shouts urban-chic allure.” This is also reflected in their website design: glitch animation effects combined with asymmetrical and layout perfectly capture that laid-back attitude.

Megafauna

Minimalist web design made by Megafauna
Made by Megafauna

The digital agency is a sub-brand of Lattimore and Friends. It offers SEO, digital campaigns, hosting, and maintenance services. The minimalist design together with the catchy headline and short creative copy are doing a really good job at presenting the company’s vision and unique approach.

Sita Abellan

Unique Design Inspired by the 90's Windows Layout & Games made by Sita Abellanm
Made by sitabellan.com

The Spanish model, DJ, and designer is an eccentric Instagram sensation with an eclectic style and colorful outfits. Her unique apparel is reflected by her brutalist website inspired by 90’s Windows layout and games, where every page has its own unique style and interactions.

The annoying cursor, the clashing colors and eyestraining elements take the viewer on a challenging journey full of surprises. Open at your own risk!

The Great Lake Michigan

Engaging and Colorful Neubrutalist Website for The Great Lake Michigan
Made by The Great Lake Michigan

This nice neubrutalist website was created to share fun facts about Lake Michigan.

The animated and color-coded sections appear on scroll into view and do a really good job of keeping the viewers engaged. The stunning design elements, interesting photos, and huge fonts are continuously teasing you to go on till the end.

Gumroad

Unique Brutalist Style used by Gumroad on their Website
Made by Gumroad

When it comes to brutalism in web design, Gumroad is the first website that you might think of. Its interesting approach and unique style has become an example for those who would like to explore and try brutalist website design.

Muted, clashing colors, thick black outlines, modern typography, and mixing various illustration styles all contribute to Gumroad’s successful design.

Plus

Blue and Red Dominated Web Design made by Plus
Made by Plus

This special product calls for an outstanding website. The dissolvable body wash sheets are presented on a blue and red dominated page with nice animated elements. Similar to Gumroad, it merges different illustration styles, videos, and photos in order to achieve a powerful impression and entertain the visitors.

Badass35

Ugly on Purpose Neubrutalist Design made by Badass35
Made by Badass35

This website is a good example of the “ugly on purpose” idea embraced by brutalist UI design. The disturbing yellow background and the oversize fonts are spiced with scroll animations and artistic photos.

The website’s neubrutalist design is in accordance with the wedding photographer’s mission to capture what is “really happening instead of imposing any narrative.”

Conclusion

All in all, normalizing the ugly seems an interesting idea to explore and embrace. Even though neubrutalism fits only a couple brands, you can still  integrate some elements of it into your project and merge them together with other styles.

Are you ready to try this relatively new aesthetic? Tell us more on Facebook, Twitter, Instagram, or Reddit!