New Brutalism and web accessibility: what you need to know
New Brutalism is a trend that has been growing in popularity over the past several years. A rejection of the sleek and modernist style of buildings that came out of the post-war era, Brutalism is more raw and unrefined. In its rejection of glamor, Brutalism creates an almost industrial aesthetic, often with exposed concrete and other materials reminiscent of factories or warehouses.
There are a lot of reasons why it's so popular with designers. It defies the trends of web design ubiquity. New Brutalism gives designers permission to have uninhibited creativity. This creativity is often expressed with characteristics like "asymmetry, broken hierarchy, broken grids, big bold typography…overlapping elements, geometric shapes, solid [and] bright colors" as described in "BRUTALIST WEB DESIGNS — The UGLIEST Design Trend of 2020"
With the rise of web accessibility as a key concern for usability professionals, it's no surprise that Brutalist design style has caught the attention of designers. Many of its principles directly align with accessible design while others are totally at odds with them.
Here's what you need to know about this trend and how to avoid creative pitfalls which break accessible design rules.
A brief history of New Brutalism
Brutalism is a specific architectural style, but it also has broader implications in design. The term "New Brutalism" can be traced to the 1950s and 1960s, although the architectural movement began in the years following World War II. It shares its name with the earlier Brutalism movement, but there are key differences between the two. The original Brutalism was more extreme, characterized by edifices of raw concrete with little regard for aesthetics. New Brutalism, by contrast, is more refined. Some of the guiding principles of New Brutalism include use of bold, simple shapes that serve as reminders of its industrial origins.
New Brutalism and Accessibility
A meaningful aspect of New Brutalism is its "iconic simplicity of its designs, and for its egalitarian emphasis on mass production and utility." A key part of creating a usable experience is to make sure that the information on your site and how it's presented is accessible to your visitors.
Website showcasing New Brutalism in web design
Typography
Perhaps the most dominant visual marker of a New Brutalist website is large bold and often outlined or highly stylized typography.
How are these sites inaccessible? For typography to meet WCAG standards it needs to be easily readable and comprehensible. It should also have clear headings and aria declarations.
Do these New Brutalist sites have clear, legible, readable typography? Are there contrast issues? Is vertical text accessible? Elements overlapping text and buttons?
Example A
Example B
There's even a bit of irony on the screenshot (Example B) of the design studio which reads "is a kind of creative studio that puts people at the center of our practice" while seemingly ignoring the people who cannot read or access services from their own website.
Color
Of all the aspects of accessibility, color and contrast are especially within designers' control. While a majority of accessible work is often done within the code of products themselves, color is arguably the easiest hurdle to clear in accessible design.
I enjoyed the nostalgia of this site. A kind of throwback to the geocities pages of yesteryear.
I chose this example because of its use of red and green. These two colors are the most common colors which cause visual confusion for people with various degrees and types of color blindness. We have some serious contrast problems here. Fun and playful, but problematic nonetheless.
Example C
Navigation
Navigation, like all accessible design, has both visual and invisible components to it. Under the hood, there are clear navigational declarations for assistive devices and there's the visual arrangement. Using conventional navigation placement and clear headings for menus.
This is a gorgeously designed site — a Basquiat-esque style of mixed media merged with New Brutalism. Layered parallax with playful discoverability. But unclear navigation, excessive motion and legibility issues challenge several accessibility rules.
Example D
Another example of creative, yet jarring hover states. Unclear navigable direction with without much context. Hyper creative, but breaking accessible rules.
Example C
Final thoughts
Should websites all look like bland cookie cutter templates with no artistic presentation? Of course not. Homogeneity in design isn't the goal here. Several of the examples discussed are designed by skilled and super creative designers. I bookmarked many of them for my own inspiration.
However, websites do not need to sacrifice creativity to be accessible and some sites will break accessibility standards intentionally at the cost of artistic vision. This is the choice of the designer. But it's important to remember that every decision we make as designers has a measurable impact to a potential customer.
Learn more about New Brutalism
Information about the history of New Brutalism and how it came to influence web design can be found all across the web. Here are a few sources I found helpful when putting together this article.
Brutalist architecture - Wikipedia
Brutalist architecture is an architectural style that emerged during the 1950s in the United Kingdom, among the…
en.wikipedia.org
Brutalist Architecture Movement Overview
Brutalism was a movement in modern architecture responsible for some of the most striking building designs of the…
www.theartstory.org
Brutalism in design: its history and evolution in modern websites - 99designs
Brutalism is known not only for the fascination it inspires but the controversy. That's why it is important to…
99designs.com
New Brutalist website examples
The examples I used in this post came from the video "Brutalist Web Designers" by Template Monster. However, examples of New Brutalism in web design can be found all over.
Accessibility tools
Resources to incorporate best accessibility practices into your websites and products.
How to Incorporate Accessibility in Your Website
Incorporating accessibility on your website is the right thing to do today. Why? Because 25% of adults in the U.S. live…
www.searchenginejournal.com
Accessibility Tutorial
Welcome to this introductory course in Accessibility. Accessibility is about making web pages accessible for everyone…
www.w3schools.com
Accessibility Checker - ADA & WCAG Compliance (Free Scan)
Legislation requires websites to be accessible to disabled users. A compliant website not only ensures a safe and…
www.accessibilitychecker.org
Content Performance Platform - Siteimprove
Skip to main content Video description: It is dark. A man is sitting, wearing headphones, in the back of a car. The…
www.siteimprove.com
--
82
More from UX Collective
Following
We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc · 451K followers
Read more from UX Collective
Resume Membership
Ryan Houk
561 Followers
Product designer of 15 years — I write about tech & design. Sharing knowledge from the strong growing community of designers and developers.
Follow
More from Medium
FlowMapp
Clean UI Guide: 15 White Space Design Tips
Ryan Ford
in
UX Collective
Design is not a formula, it's an odyssey: replacing the Double Diamond
Leon Zucchini
in
Curiosity
10 Hottest New Apps to Explore Immediately (September 2022 🏆)
UX Movement
How to Display Large Data Tables on Small Screens
Help
Status
Writers
Blog
Careers
Privacy
Terms
About
Knowable