How can I design in the Neo Brutalism style?
TL;DR: There is a one-page cheat sheet at the end! I did a Live video on this topic you can find the link at the end!
So I’ve been seeing Neo — Brutalism designs everywhere for a while, I read a couple of articles and saw multiple examples, and videos to learn some basics. This article is a summary of what I’ve learned during this process. Hope you find it useful!
I also did a Live Video on it you can find the link to the replay here:
We are also having a challenge to design our own personal websites using these principles you can join it here.
What is Neo-Brutalism (Neubrutalism) style?
Neo-Brutalism in design uses simple, raw elements to show the basic structure of a website or app. It has special colors and typography. It is a modern take on the Brutalist architecture movement of the mid-20th century. It emphasizes rough, block-like designs.
What is the difference between Neo-Brutalism, Brutalism, and Minimalism?
Brutalism
Brutalism is like a big, flat building made of plain concrete. It doesn’t have any fancy decorations or details, just the basic structure.
Neo-Brutalism
Neo-Brutalism is like Brutalism, but with more interesting and unique parts added to it. It still keeps the plain look, but has some extra things going on.
Minimalism
Minimalism is like a simple and clean room with only the bare essentials. It’s easy to use and everything is in its place. There’s not a lot of clutter or extras, just what’s needed.
Ok, enough terminology. Tell me how you designed one.
How to design in Neo-brutalism style?
So I saw multiple examples and they all have some features in common. I categorize them into 3 groups, color, components, and typography.
Don’t forget that you are the designer and you might decide to change things there is no rule written in stone!
Color
- Black: In Neo-brutalism, we use pitch black with no fear! The two most important use cases of black are strokes and dark shadows.
- Background color: In Neubrutalism, we can use multiple colors (other than white and light gray on light mode and dark colors on the dark theme) for the background color! We can use very vibrant colors, and vintage and muted colors.
- Vibrant colors: You can use colors with high saturation.
- Vintage and muted colors: You can imagine you are designing an old magazine or poster and you can use all those colors too.
- No gradient: As far as I saw there are no examples of using gradient in this style. Colors are distinct and don’t have different tones and gradients.
Components
- Raw, unrefined shapes like circles, rectangles, stars, and polygons with strokes. (Basically, these are shapes from Microsoft Paint!)
- Spaces are defined with lines and cards and cards have strokes and black shadows.
- Drop shadows have both X and Y, no blur, and the color is black with the 100% opacity.
- Decorative components like moving banners, images with background and stroke, and illustrations.
Typography
- Sans-serif is still more popular in this style.
- Large font sizes for headings.
- Experiment with line height and letter spacing.
- Typography is a decorative element, especially on websites
- Here are some example fonts: Lexend Mega, Public Sans, Mabry Pro, Archivo Black, Bebas Kai
Ok, I learned the theory give me an example!
Example
Let’s redesign the Instagram profile page using some of these rules.
By the way, I don’t suggest Instagram changes its design at all, I explained my reasons in the next sections. It is just a fun example!
- Ok first let’s add some strokes and black shadows!
- Now let’s change the colors!
- And change the typography!
We are done!
Here are some other alternatives, in which I added some raw components and I changed the other elements a little bit.
Now that I learned it, can I use it on all of my designs?
Considerations
In Neo-brutalism, elements are very brutal and there are many hard shadows and so many strokes. In my opinion, it’s not always the best choice for many situations. Some things to consider:
1. Is the app or software going to have a lot of information and data?
In Huge systems with high amounts of data and complicated information architecture (IA). Using this style can create so much noise and increases the cognitive load and it is not simplistic.
2. Who is the target audience?
If the app or software is meant for a lot of different people, this style might not be the best fit.
If the app or software is for kids, older people, or people with disabilities, the style might be too harsh and not friendly enough.
3. How new is the product?
If people are already used to a certain look and feel for the app or software, changing it to the Neo-brutalist style might upset them.
OK, where can I use this style?
Possible use cases of Neo-Brutalism
- Some websites: It can be used in websites as a small touch and make them different from other similar websites. It can help them stand out.
- Creative portfolios: People in creative fields like design, photography, and art may choose to use a Neo-brutalist design style for their portfolios to showcase their work in a unique and eye-catching way.
- Experimental software: Startups or tech companies creating new software may use a Neo-brutalist design to convey a sense of innovation and cutting-edge technology. when the product wants to attract people’s attention if it looks different it can do it. We should keep in mind that it is not suitable for complicated software products because they have a lot of components themselves and this style will add a lot of noise to it.
Give me some real-world examples!
Working examples of Neo-Brutalism
FigChallenge
This is a web app for designers to join and create design challenges. It has a list of challenges and designers gain points and achievements for completing different activities in the app.
Bestsized (Design Subscription Company)
You’ve got to visit the whole landing page. It has the vibes of the old menus. The use of neo brutalism style here is just right. The copy and the concepts are amazing as well.
This is exactly what I talked about earlier, design related startup landing page is the exact niche to use this style.
MongoDB (NoSQL database that is open source)
Their product (Atlas[1]) is still in minimalist style and they didn’t change that at all. But on their website, they added some elements and illustrations in Neubrutalism. You can see the previous version and the new one here.
Figma (Cloud base collaborative design tool)
As you all know the actual product is still in minimalist style, but the website and blog have elements and illustrations in Neubrutalism.
Gumroad (e-commerce platform for selling digital products, memberships, and more.)
This website is completely in Neo-brutalism style! Pay atention to the colors and Typography and other elemnts. You can also see it’s previus versions below.
You should keep in mind that these use cases are eighter subtle or their users are likely in the design field or related areas.
Personal Website for a Abhishek Choudhury
Abhishek is a developer who used this article to design his personal website using neobrutalims style. You can see the screenshots below.
Live Replay
Summary
Here’s the cheat sheet that I promised!
If you liked this article, please give it a clap.👏🏼
Feel free to share it with anyone. Comment below if you have any questions or suggestions for future articles. You can follow and subscribe to my email list to get notified when the next article is out.
Resources & references
[1] MongoDB Atlas is a fully-managed cloud database that handles all the complexity of deploying, managing, and healing your deployments on the cloud service provider of your choice (AWS , Azure, and GCP). MongoDB Atlas is the best way to deploy, run, and scale MongoDB in the cloud.
Lexend Mega
Public Sans
Mabry Pro
Archivo Black
Bebas Kai
