Rough around the edges. Stubborn as steel. Raw, crude, and plain.
There are some ways to describe brutalism in web design, but perhaps short-lived is the most appropriate. While design trends are generally fickle by nature, none more so than brutalist web design.
It comes and goes, attracts a lot of attention at its peak, and then sizzles out to exist as a niche web design style appropriate only for a handful online.
Why is it so? What is so inherently temperamental about brutalist web design? How can I know if this is the right style for my website?
We answer this and more questions in this guide below. As brutalism leaves its corner of the web and comes into the mainstream, we are excited to see what it can do. Use this guide to understand what is brutalism, how is it applied in web design, what are its limitations, and how can you make it work for you.
Brutalist web design is simple, plain, and non-ornamental. It’s very function-oriented and has no time to charm you, nor any wish to appeal to you to engage with it. It’s there — and if you want to come over and visit, that’s fine, but if not, no harm done.
It’s content over aesthetics and function over form.
Brutalist web designs prize usability above everything. Monospaced text, exposed user interface, blue hyperlinks, and plainly laid-out buttons are all there to ensure users can find their way around a website easily. No flashy graphics distract you on a brutalist website and since only the most necessary elements are there, you know each can be trusted to help you find what you need quickly and easily.
Image Source: iStock/Hanna Siamashka – Brutalism in website design embraces a raw, bold approach, offering a stark contrast to the sleek and refined nature of minimalism.
For this very reason, brutalist websites aren’t for everyone. They promote quick decisions and aren’t suited for extended site visits.
Disruptive ventures that want to challenge the status quo can find their home in brutalist web architecture. But if you sell homemade shoes and want people to learn more about your products on the website, find a design style other than brutalism.
Brutalism originated in European architecture in the 1950s. Rooted in function, resource efficiency, and rejection of empty aesthetics, it helped Europe rebuild quickly after World War II. Brutalist buildings were characterized by large and looming structures, exposed concrete, and grey color palettes.
While not pretty, these buildings were functional. They ensured Europe’s quick revival after the war and assisted its social, governmental, and educational infrastructure to resume working. Across countries that had participated in the war, brutalism gained momentum as an honest and resource-efficient form of design. It helped avert several housing crises in those countries and became a popular architectural style in the 1960s and 70s.
Image Source: austinsmithlord.com – Park Hill State, London. An example of brutalist housing.
While brutalism was mostly applied to build necessary buildings resource-efficiently, architects and designers worldover fell in love with its honest lack of ornamentation. It became wildly popular in North America and even became a cutting-edge and innovative form of architecture in the West.
Whitney Museum in New York City and Hayward Gallery in London are prominent examples of brutalist architecture created with love and passion.
Image Source: wikipedia.org – Built in 1966, this building as home to the Whitney Museum till 2104. The museum has since moved to a downtown location in the West Village.
Image Source: architectuul.com – Hayward Gallery, London. Built in 1968
But then it started dying out. Several reasons are possible, including:
Brutalism in web design has seen a similar trajectory. It comes and goes every few years, often resurfacing in reaction to garish and flashy visuals that offer no usability or functional advantages.
Human beings are visual beings and we like things that look pleasing. While brutalism serves much-needed information quickly and easily, there’s a limit to how many stark and bare sites we can consume before feeling restless.
Neo brutalism is a modern approach to brutalism where we take the brutalist philosophy of function-over-form but we infuse it with a large amount of character and personality. These web designs are delightful, lively, and provocative.
It is also highly usable and easy to navigate.
Neo-Brutalism Style Landing page by Joseph Gift/Behance
Some common features of a neo-brutalist website include:
Neo Brutalism exists at the intersection of minimalism and brutalism. It offers the best of both worlds and is the perfect way to break through the despairing sameness of minimalist design. Brands with a creative and adventurous audience must explore neo-brutalism as a potential way to announce their arrival with a bang.
Brutalist web design is identifiable via some distinct traits that can be grouped under 3 categories:
Let’s discuss each.
Similar to minimalism, color has immense power in neo-brutalism. Since the material to work with is already less, the gap is filled by maximizing what the existing elements can do. How does it manifest in color scheme treatments on neo-brutalist websites?
Neo-Brutalist Color Palette
Neo-brutalist sites have a distinct and lively color palette with more saturation and less tint.
Neo-Brutalist Design with vivid teal and orange-yellow accents by Diana Keplin/Behance
Personal portfolio web page with muted colors with bold black accents by Shalev Aviv/Behance
Neo-brutalist websites have an unmistakable visual style. Unadorned navigation bars, raw images, effective photography, and an overall chaotic feel are hallmarks of this style.
Neo-Brutalist Icons and Visuals
Some others include:
Designers walk a tight line when creating visuals for neo-brutalist websites. The images must look attention-grabbing without trying too hard and untreated but not abandoned.
Bold and edgy visuals in a neo-brutalist mobile app design UI by Praveen Kumar/Behance
Quirky graphics for a neo-brutalist organic food website by Tejash Modi and Mihir Vaghani/Behance
Neo-brutalist websites, with their dark colors and chaotic visuals, do not make for the best reading experiences. So, what role does typography play here? Fonts are used to complement the brand’s visual style and to display the information as simply and instantly as possible.
Neo-Brutalist Fonts
While typography serves only as a function in brutalist web design (example: Drudge Report), the neo approach injects humanity and flair into the practice and creates more engaging user experiences.
Bold typography in streetwear web design by Cathy McClure and Lotus Designs/Behance
Enough theory. How does neo-brutalism look in actual web design? Here are some of the best brutalist websites making it look good online.
With page-wide grid systems, clear dividers, and open navigation, this site is as neo-brutalist as they come.
The Balenciaga website is more brutalist than neo-brutalist. With a spartan architecture and mono-spaced visuals, the site is clean, muted, and very industrial.
Secession displays its content in clean tables and columns. It promotes easy navigation with very little cognitive load, even with those constant-moving visuals.
Alicia Keys features a parallax scrolling website which isn’t a popular fixture of neo-brutalism but aligns with its maximalist approach perfectly.
The website contains almost no graphics but short pops of animations make a welcome surprise in an otherwise font-filled canvas.
This is one of the most provocative neo-brutalist websites on our list. It’s evocative, daring, and not for the faint of heart brands.
Remember we told you color gradients seldom appear on neo-brutalist sites? This is one of the rare occasions where subtle gradients do make an appearance and steal the show.
Brutalism web design isn’t for everyone and can be tricky to handle. To make sure it works for you, here are some web design guiding principles to keep in mind.
Whether you are leading with brutalism or neo-brutalism, the web design style is power-packed with personality and principles. From the naked structure of brutalism to the in-the-face aesthetics of its modern sibling, the style has a niche audience.
It’s ideally suited for designers, artists, entertainers, and other creative professionals. It can also work for startups that intend to make a lot of noise and want to create a reputation as disruptors and challengers.
A regular SMB with traditional audiences may struggle to connect with its customer base with something as divisive as a brutalist website.
Brutalism embraces stark, open, and bare spaces. It’s very similar to minimalism in that sense. But where minimalism looks pristine and pretty, brutalism considers aesthetics unnecessary and dishonest. Do you have a business where these principles of function over form tie naturally to your core offer?
If so, lean confidently into the brutalist sphere with your content ready to take center stage. While nice visuals can join you on the journey, they must stay in the background and commit to serving your primary product or service.
Customers continue to favor brands that offer transparent management and operational practices. Sustainability has moved beyond environmental action. Customers expect brands to be upfront about their products and services, labor practices, financial involvements, user data, and much more.
A brand that makes a conscious effort to reject pleasant graphics in favor of stark truths automatically stands out.
When most websites in your market try to attract customers with extravagant visuals, your brutalist website with its open UI, straightforward text, and unfiltered essential graphics can instantly gain attention and interest.
Brutalism is rooted in purpose, function, and honesty. Everything available is laid out in the open, no holds barred, and that creates trusting relationships between brands and audiences. People know they can trust you because you are not holding anything back.
But if you are doing it because everyone else is doing it or because you’re bored or because you think it’s a quick way to gain distinction and distinguishment, think again.
Any branding move you make for reasons other than your brand’s genuine need for it will not live for long and even that short life will be profitless. Customers will be able to see through it, the switch from your current visual style to the stark rawness will be intense, and thus open to suspicion.
Brutalism can be a harsh design choice if you already have a website and people are familiar with it. As we said, the switch can feel too much and too quick. If you truly feel Brutalism serves your brand message more effectively than other web design styles, ease into it steadily.
Instead of going from colorful to stark, explore the different ways neo-brutalism can help.
Neo-brutalism is much closer to other forms of web design without sacrificing its commitment to function. It makes more sense to move your website from a retro design or minimal design to neo-brutalism and enhance its appeal than suddenly give up everything and jump onto the brutalist bandwagon.
Brutalism in web design is an extreme form of style. Think raw, rough, and plain. It isn’t suitable for everyone and not all brands should embrace brutalism without considerable thought. Below are three ideal scenarios for using brutalism in web design:
So, ready to create your first brutalist web design? Experiment with our AI web builder with tons of unique styles to choose from. It’s free to try and offers easy customization.
Everyone’s favorite chocolate-covered wafers have undergone a quiet brand identity change. In August of this…
As iconic symbols go, very few have the warmth and positivity power of the classic…
As they say, "Style never goes out of fashion." This phrase resonates deeply within the…
If you think wedding monograms are a 20th-century fad, think again. Monograms trace their roots…
Presentation is key to food business success. Even more so when you create a culinary…
Social media has always been a visual space but that insight alone has become irrelevant.…