Web Brutalism: Key Features and 5 Creative Examples
September 12, 2024
Inha Tolochenko, Volodymyr Balytskyi
6 min
.webp)
Brutalism is a design style inspired by architecture and the practical websites of the 90s and early 2000s. It has a punk attitude and a rebellious spirit. In this article, we will explore brutalism's key features and analyze its versatility and relevance today for businesses.
Brutalism is a design style that draws inspiration from the practical websites of the 90s and early 2000s. It has a punk attitude and a rebellious spirit. Started as a rebellious movement against perfect user-centered designs, brutalism broke down established approaches.
This style has sparked a wide range of opinions. The functionality embodiment. Primitive and rough. Provocative, but focusing on essence.
In this article, we will explore brutalism's key features and analyze its versatility and relevance today for businesses.
Brutalism in UI design draws inspiration from the brutalist architecture movement popular after World War II.
Brutalist architects rejected decoration but favored raw materials, exposed concrete, and repetitive modular elements. Buildings were monolithic, ascetic, and monumental. This architectural style met the contemporary needs and public demand for affordable, not expensive but reliable buildings.
The phrase "brutalism" originated from the French expression béton brut, meaning "raw concrete." Le Corbusier used raw concrete material to emphasize the natural textures, reflecting the rejection of decorative elements in architecture.
Web brutalism adopted the general logic and certain approaches from architecture. This style spread in digital in the 2010s as a rebellion against sleek, polished websites. The main focus is essence. As well as brutal buildings, websites have a rough layout with a lack of decoration or complete absence.
Just as architects appreciated simplicity in brutalist buildings, web designers aimed for the same qualities in their designs. Product designer Justin Jackson wrote an essay in 2016 called “I’m a Fucking Webmaster.” In the essay, he reflected on the beauty web pages in the early days of the Internet. In this way, the author determined brutalism’s core values: simplicity and function prioritization over form.
First, there is a fundamental difference between a poorly designed website and a brutalist one. Do not confuse. The brutalist website is raw on purpose. A poorly designed website is the result of carelessness or a lack of attention to detail.
To help guide you, we’ve collected some key features of web brutalism for better understanding.
– Lack of symmetry and a visual grid
– Designs have visual errors
– Monochrome or irregular color palettes, often with acidic colors
– No clear hierarchy
– Overlapping elements
– Absence of shadows and gradients
– Non-standard typography, a variety of fonts
– Simulated CSS errors
– Imitated HTML effects
– Simple navigation
The features we have listed still do not give a complete understanding of the brutalist web design. This is because brutalism is a field of experimentation. Sites designed in this style often do not fit into a single framework.
Pascal Deville, founder of the Brutalist Websites directory, divided three micro-stylistics.
The purists. They are the most conservative. Purist values adhere to straightforward designs often limited to basic HTML markup, blue links, and unadorned text.
The UX minimalists. This group centers on functionality and performance but doesn’t entirely reject minimal visual styling. Their designs may include images, clean fonts, and interesting grids. UX minimalists prioritize usability and efficiency while designing experiences that align with user behavior and encourage conversions.
The artists see web brutalism in web design as a form of self-expression. They neglect established rules and use brutalism principles as they want. This approach is common among graphic designers, creative agencies, and musicians. Artistic brutalism doesn’t follow HTML conventions or usability; instead, it embraces experimental techniques, animations, interactions, and hover effects to convey mood and character.
Neo brutalism has emerged as a separate design style in recent years. It incorporates brutalism principles while integrating contemporary and retro design elements, including typefaces, popular colors, and patterns. Neo brutalist designs feature aesthetic and functional typography, a varied color palette, and greater attention to balance and proportion. The core philosophy of straightforwardness and functionality influences web brutalism, neo brutalism refines these principles for contemporary standards.
If brutalism primarily evoked memories of early internet sites in the 2010s, today it is a distinct aesthetic. Time has passed, and the brutalism design style has become mainstream. Brands showed that brutalism can be successful in business.
Balenciaga's website vividly demonstrates how brutalism can emphasize the brand aesthetics and the product itself. When the buyer visits the site, he concentrates on the main thing - clothes. Nothing distracts him from the purchase.
Another example is Bloomberg. The design of its news portal draws inspiration from brutalist principles. The geometric grid, monochrome colors, and intentional simplicity do not overwhelm the reader. This allows readers to focus on the news without unnecessary distractions.
If you decide to apply a brutalist aesthetic to your design project, refer to our recommendations.
When considering web brutalism for your design project, align the design with:
– your product
– target audience
– business objectives
– tone of voice
– brand character and values
Its raw and unpolished aesthetic may not be a good fit for brands seeking to convey elegance or conservatism. This style works best for companies that want to emphasize individuality, creativity, or non-conformity. If your audience expects a sleek, user-friendly experience, brutalism may distance them. Always assess whether this bold design choice supports your brand's message and image.
You can borrow certain visual techniques of brutalism to make the website stand out. Combine reimagined brutalist design elements with modern animations and technologies. Search for inspiration to analyze best practices for use in your projects.
Creative industries quite often used brutalism in their projects. You can also find brutalist elements in news portals and e-commerce. If you are still not sure how your audience will react, we recommend choosing safer neo-brutalism.
Don’t be afraid to experiment, mix styles, and choose what works best for your design product.
Let’s explore some brands and their websites designed in the brutalist style.
A vivid example of the use of brutalism in e-commerce. Clean structure, simple navigation, simple descriptions and photos. A deliberately raw visual style successfully emphasizes the anti-systematic creative brand vibe.
The site of a creative company engaged in branding and design. It seems as if the designers forgot to finish the site. The catalog grid creates the impression of raw simplicity. This site takes us back to the UX minimalists and their commitment to usability and light visual effects.
Another site of a creative agency. Geometric shapes and a strict grid concentrate on usability. The layout has clear lines, large elements and the absence of unnecessary decorations. Colors are limited to shades of gray and black, and simple elegant typography. All these create a kind of strict functional aesthetics.
The website of the exhibition space. The vibrant brutal style emphasizes the modern creative direction of the project.
Large typography, contrasting colors focusing on text and painting. The website appears awkward or unfinished, which encourages viewer interaction. Such an experimental aesthetic can be an interactive means of engaging audiences and sparking interest.
This website for a Ukrainian arts and crafts school clearly showcases brutalism through its bold, solid block text layout. The slideshow featuring the most basic transitions enhances the sense of roughness.
Brutalist website design remains a relevant and impactful design style. From a niche movement, it evolved into a new style embraced by designers and developers worldwide. Its bold simplicity sparks curiosity, encouraging deeper engagement with the content. At the same time, brutalism is not a one-size-fits-all solution. Considering whether it aligns with your values, meets customer expectations, and supports your business goals is crucial.
If you're ready to elevate your business's digital presence, contact us to discuss how we can bring your project to life. Explore our work to see how our expertise delivers outstanding results.
.svg)
.webp)
