Neubrutalism vs. Glassmorphism - Your Step-by-Step Guide with How-Tos

This article is 100% actionable!

Check out the actionable steps and the cheat sheet at the?end!

In this article, just like I promised we are going to compare the 2 popular UI design styles, Neobrutalism style with glassmorphism. Previously I did a training on Neubrutalism you can find it here.

During this article, I compared these two popular styles in different aspects such as Trends, Cards, Colors, Strokes, Shadows, Typography, Gradients, Effects (like background blur, object blur, and glow), Shapes and objects, Use cases, and Future Predictions.

I provided a step-by-step process for designing a business card in both styles. You can easily follow along and have yours ready by the end!

When your card is ready, I will tell you about the next fun step??

Throughout this article, you can see the step-by-step changes that I'm making in the photos.

If you want to have access to the design file to see the exact numbers, effects, colors, etc. just comment the word "glass".

Trends

Neubrutalism is a trend in 2023 and I’m pretty sure that we are going to have it in 2024 as well.

Glassmorphism was more popular in 2020–2021 and in 2023 after the release of Apple Vision Pro, it got the attention of the designers again. In the use case section of this article, I’m going to explain where we will see these trends.

Cards

Cards are similar in shape in both styles. And yes we can round the corners in neo brutalism as well. The only differences between the cards are the strokes, shadows, and background blur.

Step #1: We will start by creating 2 similar cards in both sections. We will round the corners by 30.

Colors

On neo-brutalism, we use vintage colors and sometimes bright colors. You can find the color palettes in this article.

We can experiment with Complementary or Split complementary combinations and Triadic or Tetradic color combinations!

On glassmorphism we have bright colors and a lot of gradients. Many designs in this style are Monochromatic, Analogous combinations, and sometimes complementary.[1] For example, we might use purple, pink, and blue shades sometimes.

Step #2: In our neo-brutal style card I chose the yellow color (I did a poll for it and yellow won!) for the card and pink color for the background. On the glassmorphism, I chose the white color for the card to create the glass effect. And a white color for the title. In future sections, we will add more colors.

Strokes

In neo-brutalism, we usually have one-color strokes around different shapes. That is usually black in light mode and white in dark mode. (we can experiment with other colors as well as long as we know what we are doing??)

In glassmorphism, we have strokes around cards but it’s not visible as a “stroke”. It is mostly a tool to help us replicate the edges of the glass.

The strokes usually have a light gradient. We talk about it later.

Step #3: In our neo-brutal style card, we will add a black inside stroke with a thickness of 6. In our glassmorphism style card, we will add an inside stroke with a thickness of 2 and we give it a white color. We will apply the gradient in the future!

Shadows

On neu brutalism, Drop shadows have both X and Y, no blur, and the color is usually black with 100% opacity.

On glassmorphism, similar to minimalism we have drop shadows with transparency and a lot of blur. The color of the shadow depends on the background so it can be dark colors or light colors.

Step #4: In our neo-brutal style card we will add a drop shadow with the X=10, Y=16, Blur=0, Spread=0, Color=black, opacity = 100%. In our glassmorphism card, we will add a drop shadow with the X=18, Y=25, Blur=26, Spread=0, Color=#121212, opacity = 5%.

Typography

In Neo brutalism, we mostly use Sans-serif fonts in large sizes for the headings. We might experiment with line height and letter spacing. Typography is a decorative element, especially on websites. If you want to see the examples.

In glassmorphism, we use Sans-serfs as well and the fonts are similar to minimalist designs. The focus is not on huge fonts and typography unless we want to recreate the glass effect inside some letters but it's not a common theme.

Step #5: In our neo-brutal style we will add our texts to the cards using Lexend Mega font. In our glassmorphism style we will add the text using Montserrat font. We also changed the fonts of the titles. We will also increase the letter spacing for the glassmorphism style.

Gradients

Usually, there are no gradients and color blends in Neo-Brutalism.

On glassmorphism we have a lot of gradients and blends and these graduations help a lot in showcasing the glass effect.

As I mentioned before strokes have gradients.

You need to play with it a little to make it right. If you feel stuck see more examples and try to find out what they have done. I'll give you this file as well, just DM me or comment and I will give it to you.

One thing that helps is imagining that you have a source of light on the top and it shines with an angle on your card. On the left edges, we have more light so it means it’s brighter.

How to create that? We will create a gradient that has white (or a light color) on that side and on the other side we reduce the opacity of it to show that the light is fading.

Step #6: In our neo-brutal style we don't have gradients Yeay! On our glassmorphism style, we will add a linear gradient to our card and it's texts. (first photo) Then we add a background gradient and a linear gradient to our card stroke stroke. (second photo)

To see the exact gradient of the stroke -> 

comment the word "glass" under this post        

Background Blur

We don’t have any background blur on neu-brutalism.

In glassmorphism, the main feature that helps in creating the glass effect is the background blur feature. We have background blur with various blur numbers in glass morphism. What this effect does is that it blends and blurs the colors of the shapes that are behind the object that we are applying this effect on.

To create this effect in Figma,

1. We draw our shape
2. On the fill property of that shape, we reduce the opacity
3. We go to effects -> background blur and choose a number. You can’t see the glass effect if there is only one shape on the screen.
4. To see it you need to add another object behind it. (As I mentioned previously this effect applies to the object behind your shape so when there is no object behind it you can’t see the effect)
5. Then you can play with the numbers until you find the number that creates the effect to the point that you like.

Step #7: In our neo-brutal style we don't have background blur! On or glassmorphism style we will add a background blur effect to the card (43) and reduce the opacity of the fill to 73%. Pay attention that the effect is not visible now we will see it in the next step.

Shapes and?Objects

On neo-brutalism, we use Raw, unrefined shapes like circles, rectangles, stars, and polygons with strokes. (Basically, these are shapes from Microsoft Paint!) You can see the examples here.

Shapes on glassmorphism we have more use of curves and fewer pointy objects. We can have blobs or other curvy lines and mostly circles with gradients or object blur effects.

Step #8: In our neo-brutal style we will add a star shape on top of the card, increase the edge counts by 10, give it a blue color (#8EEBFF) and we will add strokes inside it (5), and round the corners by 12. We will also add a rectangle around our text. In our glass morphism design, we will add 2 circles, give them a radial gradient, draw a curve with the pen tool, and give that a linear gradient. Now that we added our circles you will see the background blur effect.

Object Blur

There aren’t any use cases of object blur in Neo-Brutalism.

In glassmorphism besides background blur, we use another effect to blend colors. The name of this effect is object blur.

So this effect blurs the colors of the shape that we are applying his effect on. As you remember on background blur the effect applies to the background object.

Why do we use this?

This effect is super useful to create this Aurora background and all the pretty colorful backgrounds that you see in glass morphisms.

If you want to go deep into practicing this specific effect check out this design challenge on FigChallenge.

Step #9: We don't touch or neo-brutal design. On our glass one we will add 6 circles with different colors (#FC74FF, #FFE7AA, #7EE8FF) we play with their opacity and blur. In this example, I gave 3 the Blur=91 and one is 73 one is 125.

If you want access to this file to see the exact numbers and colors

comment the word "glass" below.        

Glow Effect

We don’t have such a thing in neubrutalism.

But in glass morphism in some examples we have it. It is similar to the neon-style design[2]

What does it do?

It creates the vibe that things are illuminating and they have a light within them and sometimes it can create the sense of a 3rd dimension.

How do we create it?

Yes, the Object blur!

1. Duplicate the shape
2. Add a light color to it
3. Blur the object behind

Step #10: Let the neo-brutal design relax. On the glass one: First, we will duplicate our card, remove the fill, add an inside stroke of 3, make it white, and then add a layer blur of 20 and align it on our card. This will give our card a sense of a dimension. Second, we will add 2 nice loops around our circles. With the inside stroke of 4. We make the stroke white and then we blur those loops up to 15. Third, we duplicate the word "Glassmorphism" and we give it a nice pink color (#F2D5FF) Then we give it a layer blur up to 6. Make sure to put the blurred one on the back and align them perfectly. In the last step, we add extra touches by creating these small lights on our line. Create 2 circles one small one a little bigger. Give both of them a white color. Put the blur on 4 for the inside one, and put it on 12 for the outside one. We have our decorative light glow! Now we duplicate it and we put it on 2 parts of the line.

Noise and Patterns

We can add small touches to our designs by adding noise or patterns.

On neu-brutalism we add simple patterns like dots, lines, stripes, plaid, etc.

On glassmorphism we can add a small noise as a photo to our design to increase the glass feel. There is a plugin on Figma that can help generate these noises and I think you can generate up to 3 noises for free.

Step #11: We will add an angled stripe to our neobrutalism card. We will add a combination of 3 different noises to our glass card we reduce the opacity of these photos to make them more natural.

If you want access to this file to use it in your designs 
comment the word "glass" below.        

Use Cases

As I mentioned background blur feature is the primary factor in glass morphism. Unfortunately as of now in 2023 this feature takes a lot of time to load in real-time on the web and even with the fast internet they can cause many loading lags. Website loading time is so important. It has a huge effect on the user experience. That’s a long story itself maybe we will go deep into it if you are interested.[3]

you can use glassmorphism

• If you want to impress people[4] with your creativity and design skills
• If your design won’t be implemented on a website or an actual interactive digital product
• If you want to export your design and use it as PNG [5] on a website
• If you want to design a poster or a video animation

To sum up → use it when things are static and prerendered and they don’t need any real-time computing power.

Future Predictions

I predict that we will see more neu brutalism, especially on personal websites or different landing pages because:

1. It’s pretty new and grabs people’s attention (That’s the purpose of a landing page)
2. It’s so easy to implement for developers.
3. It’s pretty easy for designers to design in this style because it is so similar to minimalism and only has a few add-ons and changes.
4. I see more and more designers and businesses adapting this style on their landing pages this means that it will stay at least for 1 more year.

For glassmorphism, I don’t think that we will see more examples of it on the web at least for now because:

1. It is pretty slow to load on websites and it’s heavy.
2. It’s not that easy and fast to create that exact glass effect. Just like this example, there were many more steps on the glass side than in the neo-brutal style.
3. Most importantly most developers don’t like to go through the pain of implementing something that slows down the whole project. That completely makes sense.
4. The VR still hasn’t been ubiquitous but as soon as it becomes more versatile maybe in a couple of years we will see the rise of this style again next to bento grid style.[6]

Cheat Sheet

In general, the Neobrutalism style is easier to create especially if you used to design a lot in minimalist style. Creating the neat glass effect is a little trickier but if you follow these steps you’ll be able to recreate the exact same thing.

Actionable Step

Now you learned everything it’s time to do it yourself to learn it better!

I told you that there is an “actionable step” at the end, well that’s the fancy word for Home Work ??

For your Home Work:

1. Follow these steps and create a business card for yourself
2. Submit your design here
3. We will feature the best designs in this newsletter
4. Complete your profile and add your socials on FigChallenge to get the maximum exposure when you get featured??

If you are an absolute nerd and you want to go deeper into this join THIS CHALLENGE and submit your designs. We will feature the best designs in this newsletter.

If you enjoyed this please share this??

And do a reaction??

Believe it or not, that stuff actually helps other people find this article easier!

This Week's Featured?Designs

From now on this newsletter will have a "Featured Designs" section. We will choose some of the design submissions on FigChallenge and we will give the designers a shoutout. Make sure to support them and connect with them.

This week’s shoutout goes to Sussie Manovapillai , Zainab Wahab , ShravanKumar P S ??????

You can see their designs below????????????

ShravanKumar P S you can see the animated version here

Sussie Manovapillai was the first person to submit her design and she asked for feedback twice and implemented the feedback.

Zainab Wahab

Continue designing for this challenge and we would love to see your designs in the featured section.

Footnotes

[1] If you want to read more about color theory check out this.

[2] If you want me to write about this style let me know by commenting.

[3] Comment about that sentence if you want me to write about it!

[4] Especially non-designers, and your friends and family who have no idea what you actually do??

[5] webp is actually faster in website loading but we don’t go down that rabbit hole for now

[6] If you want me to write about the bento grid style comment below and tell me!

See you on the FigChallenge community ????

Join us now