January 20, 2023 7 minutes read
Neo Brutalism or Neubrutalism has been a hot topic on Dribbble lately, and it's easy to see why. If you're daring enough to try something totally different, this UI design trend is a great option. It won't let you slip away unnoticed; this aesthetic is bold, wild, and sure to stand out.
Whilst Neumorphism may have had its moment in the spotlight, this UI design style is quickly becoming the go-to choice for those who are looking to revamp their website or start a new digital product, because it is very easy to implement. Take a look at Gumroad, Figma, or Code Academy, to make an idea.
The name “Brutalism” originates from the French word “brut,” which simply translates to “raw” or “uncultivated”. This architectural style was first seen in the middle of the twentieth century and became popular in the late 50s and early 60s.
It features sharp edges, jagged shapes, rough textures, aged surfaces, asymmetrical natural shapes, and metallic hues. The materials used in this style of architecture are generally concrete, steel, glass, bronze, and iron.
It represents a UI design trend mimics the architectural style transferred to UI design through bold and huge typography, vibrant colors, strong contrasts with distinct edges, and solid background textures or patterns. That depicts a modern and distinctive output that promotes a better user experience.
I think it’s an easy mistake to make, and only experienced designers feel the difference. It is possible for an interface to be quite minimal, yet still include the typical UI components of a new brutalism style.
Minimalism design involves incorporating as few elements as possible into a composition, such as a single accent color or no color at all, and no extravagant patterns or shapes. The overall effect is one of sophisticated and very uncluttered beauty. It is usually used for beauty websites, portfolios, or magazine websites.
We created a Figma web layout from scratch in order to accurately represent brutalism design aesthetics. We would like to demonstrate to you the progression of each element and its significance.
We have been accustomed to the conventional soft shadows for many years, however, what we’re dealing with in this particular case is different; these shadows have full color, no blurring, and are positioned on both the x and y axes. You can apply them to buttons, cards, and ornamental elements.
Whether they be thick or thin strokes, the materials are all arranged neatly and the structure is organized correctly. Even with various separators, the entire look is still pleasing to the gaze.
It is evident that large titles can have a significant impact. They can be both unique and practical, and there will be no difficulty in writing CSS to incorporate them.
I know many people are not big fans of vivid contrasts through crazy colors, because of its lack of accessibility or readability, however, you can take this into consideration and even if you use pure black, it’s okay if you perform some tests.
If you want to challenge a traditional UI design you can count on these for sure. You don’t have to create anything fancy, just a few circles, triangles, rhombuses, and diamonds. If you look carefully it seems that these shapes are floating around.
Are you tired of spending countless hours struggling with complicated design layouts and cluttered magazine templates? Creating a publishing website is hard we know, BUT WE’RE HERE TO HELP YOU. The main issue people face with traditional magazine templates is their overwhelming complexity and lack of visual impact.
I hope this mini tutorial was useful for you guys! Now, we’ve got over 10 neo-brutalism web design examples that’ll give you a supercharge of creative motivation! We will keep this compilation refreshed on a monthly basis, so make sure to review it regularly. Have fun!
Let’s kick off this list with the inspired hero section of Vladimir Gruev’s designs. He is a massive admirer of the Neobrutalism style and has some great web design pieces. Make sure to check out his stunning work!
The huge typography, prominent separators, and unique angles all added up to make this artwork. It’s impossible to not take note of the extraordinary Ukrainian design squad at Halo Lab.
In November 2021, the renowned platform for innovators was given a facelift and the Neo-Brutalism design was a smart decision to make. It is clear how the bright crazy colors and unusual shapes combine harmoniously.
It’s no surprise that the all-time favorite UI/UX design tool, Figma, has a presentation website that expresses the feeling of Neo-brutalism through big typography and playful shapes, outlines, and creative ornamentals.
Vibrant colors, cheerful expressions, humorous typography, in a nutshell, top-notch design! You can see how everything meshes well with each other, it really exudes a jovial atmosphere.
If you take a peek at the upper right corner, you’ll observe a trendsetting red shadow and an outline border, which is part of our UI styling. This website also has an attractive cartoonish look because of the lighting design and the unconventional arrangement of the typeface.
Even if it’s just an exploration we cannot disregard this fantastic design by Rayfan Tio Saputro from Dribbble. It is straightforward and tidy, yet out of the ordinary – the blue headline, the three-dimensional shadow, and the delicate radial gradient make it ideal.
This layout is strong due to its large typeface, which is essential to the design. It is straightforward and clear, with a well-defined visual hierarchy. Additionally, the main image does not have extra spacing along the sides, which adds to the overall look. It’s fantastic!
This website is incredible and I don’t usually say that. It stands out for its distinctive dividers, stylish font styling, and plenty of illustrations. It’s essentially a layout with photos and amusing mouse-over effects. It has a fun, stylish vibe, yet is simple to set up. This really brings to mind music festivals. Respect to the designers.
Okay, guys, I hope this comes in handy for you. Even though we have arrived in 2024, individuals are still fed up with the standard website designs. My advice is to try something new; Neo-brutalism could be an ideal solution for this. Ultimately, this approach will enable you to attain a higher level of creative aptitude as a UI designer.
This Neo brutalism web design template is specifically designed to be compatible with Figma and is perfect for blog news publications. Through this freebie, users can quickly and easily construct webpages for publications that enable readers to locate content according to their preferences.
