BRUTALISM IN WEB DESIGN
“In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today’s web design,” says Pascal Deville about the design trend — Brutalism.
The Washington Post fairly attributes the new design trend to Deville, founder of brutalistwebsites.com, and his eye for the “brutalist” aesthetic.
Brutalism is an architectural style which emerged in Europe after World War II and reached its prime in the 1950s and 60s. In particular, institutional or civic buildings adopted this style. Among the many reasons for its popularity, the main one is associated with World War 2. The war caused massive destruction, there was a urgent need to rebuild schools, churches, offices and other important buildings as soon as possible. The war caused cheap concrete and steel to be abundant. These are the primary materials used to build brutalist buildings. Brutalism gradually became popular in the big cities of the world as it was affordable and practical. In particular, it became most popular in UK and Eastern European Communist countries. The quality of construction materials and the structural elements that are used in these buildings set them aside from other buildings.
Brutalism is derived from the French word “béton brut” which means raw concrete — the expression perfectly complements the ideas and characteristics of Brutalism. This style is known for its industrial, raw look and usage of simple geometric shapes. Brutalism leaves a strong impression on the observer and also communicates directly with them.
Brutalism always elicits a reaction, for better or worse. That’s why if one wants to adopt it for their own design purposes, they should be aware of the consequences.
The reason why brutalism has been able to jump between such wildly different design disciplines is that it tends to describe more of a mindset than visual characteristics. By exposing materials of construction, brutalism does not hide anything. Lofty ideals of beauty for the cold, hard truth are traded by Brutalism.
However, brutalism does not only offer pure functionality. It also provides us with very enjoyable aesthetic experiences. This quality is recognized in many creative fields, including web design.
WHAT IS BRUTALISM IN WEB DESIGN?
Brutalist web design in short is rough, unconcerned with comfort and aesthetics, and reactionary , but it keeps evolving as designers clash with conventional tactics in order to stand out.
By Deville’s definition, brutalism in web design is a response to click-and-drag design templates that is made popular and easier to access by website builders like Squarespace and Wix. Brutalist web designers often build their website frameworks using hand-coded HTML and bad ‘90s-era graphics as a reaction.
That said, there’s something utilitarian and practical about avoiding popular design aesthetics. There’s an honesty and practicality lied in brutalist web design that is found refreshing by designers and users. When one combines visceral elements like out-of-place text or gaudy graphics with a transparency in thought process, it catches attention of the users.
In fact, some companies prosper using the brutalism aesthetic. Deville points that Craigslist is a good example of a long-running brutalist website which is simple, ugly in the modern design sense, but also successful.
Matt Stewart of the Creative Momentum has put together a comprehensive list of features of brutalist web site.
· Black or white backgrounds
· No gradients or shadows
· Overlapping elements
· Lack of symmetry
· Crowded design
· No distinct hierarchy
· Monospaced typography
· One font used throughout
· Contrasting color palette
· Lack of animation
· Sparse imagery
· Simple or non-existent navigation
· Single-page website design
WHEN & WHERE TO USE BRUTALIST DESIGN?
To leverage the brutalist style, it should be kept limited to visual design. Visual hierarchy, navigation, or interaction design should not be broken just for the sake of novelty.
Scacca (2018) believes that brutalism can be used for some contexts. She sums up the good and bad qualities of brutalism as follows.
Brutalist web design may be good for:
• Brand new designers who are trying to get the hang of HTML.
• Anyone willing to shock their audience or make a social statement.
• Websites that are suffering from slow page speeds or overly complex conversion funnels that want to experiment with a total redesign.
• Text-heavy websites that want more focus on the reading experience and less on distractions.
• Small e-commerce sites that want more focus on inventory and less on flashy promotional bars and overweight designs.
• Websites that have an audience that this type of nostalgia might appeal to (e.g. other web designers, developers, gamers, etc).
Brutalist web design may not be a good choice when:
• Corporations and other entities willing to appear professional and modern.
• Anyone willing to make their website a warm and welcoming environment.
• Websites that are complex in nature and require conversion features like mega menus, pop-ups and live chat to support their goals.
• Anyone who is nervous that anything but a modern design would confuse their audience and prevent them from converting in the end.
Scacca (2018) believes that in many cases, it is safer to incorporate brutalist elements with an otherwise modern website.
Moran (2017) argues that a brutalist style works for some websites. She recommends limiting the brutalist style to the visual design and avoiding breaking visual hierarchy, navigation or interaction design.
BRUTALIST WEB DESIGN AND CONVERSION RATES
What brutalist web design lacks in attractive UI may make up for with increased conversion rates. Mark Sheneker for WebdesignerDepot argues that brutalism in design can directly impact website performance and simplify the user experience. Conversion rates in Brutalist design are higher than others. He attributes this to the brutalism design trend’s minimalist, bare-bones approach:
While brutalism may not win very much aesthetic appreciations, its ultra-minimalist design choices can prove beneficial to raising conversion rates.
Brutalist websites have:
· Fewer distractions
· Easy navigation
· Quicker page load times
Sheneker goes on to say that by stripping away the elements that define traditional web design — high resolution images and video, taxing content management software, JavaScript and CSS — what’s left is a super-fast website with no excess fat. Both he and marketing expert Neil Patel cites a Kissmetrics infographic to help stress the importance of trimming design fat to speed up your website.
The longer it takes a page to load, the higher the abandonment rate becomes:
· 47% of consumers expect a web page to load in 2 seconds or less.
· A one-second delay in page speed can cause a 7% drop in a site’s conversions.
· If an e-commerce site is making $100,000 per day, a 1-second page delay could cost you $2.5 million in lost sales every year.
The distractions, both on screen and on the backend of the website are taken away by Brutalist web design. Naturally, the site’s performance speed is increased by this. Brutalism also eliminates complexities in navigation, which are most often responsible for bad usability, and users are given a clear path to conversion.
It’s important to understand as much as possible about the design trend if brutalism sounds like the solution to your performance woes.
The aspect(s) of brutalist web design that make it so appealing also make it tough to nail down as a design strategy. The underlying concept is to not be predictable. With that in mind, there are some broad strokes that can be made if brutalism is one’s web design choice.
SUGGESTIONS FOR BRUTALIST WEB DESIGNERS
Understand your audience: As in case of every other design, brutalist web designers need to assess target audience. Some brands are suited for brutalism over others. You may not want to opt for a brutalist design if the payoff is distancing your audience.
Unbalance your white space: Balancing a website’s white space is key to creating a pleasing aesthetic, but pleasing isn’t the first priority when aiming for brutalism. It is needed to unbalance the (not necessarily white) white space and use big, bold blocks of colors that don’t always complement each other.
Straight — to the point : Apart from creative spite for cookie-cutter design trends, most brutalist websites are designed to serve a specific purpose above all else. The fancy bells and whistles used by traditional designers are avoided in order to aim users directly at an end goal — a conversion — and in that sense, brutalism is perfect for streamlining the user experience.
Experiment with shapes and sizes : Brutalist web design is commonly associated with mid-20th century architecture trends. Unique, abstract shapes draped in clean, unassuming colors were in fashion for being unfashionable, and the same is true of shapes and sizes in brutalist web design. Try mismatching different shapes and enlarging or shrinking different text elements (but do not overdo !!).
BRUTALISM vs. ANTI-DESIGN
Web brutalism is beginning to take on a new meaning, quite different from the spirit of the architectural movement. Rather than just focusing on stripped-down UIs with raw or non-existent styling, brutalism is interpreted by some designers to mean rebelling against oversimplified design by intentionally creating ugly, disorienting, or complex interfaces.
Though some lump this trend in with brutalism, it doesn’t fit with the original architectural sense of the word. A complete lack of visual hierarchy is often featured in anti-design sites. Some use harsh colors, disorienting patterns, weird cursors, and unnecessary distracting animations.
BRUTALISM vs. MINIMALISM
Although brutalism and minimalism have similarities in general philosophy, they have key differences as well. Minimalism also takes a less-is-more approach, reducing design to its essential elements. At the same time, it usually doesn’t go as far as stripping a design down to bareness unlike that of brutalism.
For example, a minimalist website may still pay attention to considerations like colour scheme and typography choice whereas a brutalist website can appear to throw out front-end styling altogether, using plain white backgrounds and default computer fonts like Times New Roman.
60 BEST EXAMPLES OF BRUTALISM IN WEB DESIGN
BRUTALLY HONEST
Brutalism is considered as a way to make the web “true to itself” and honest. Brutalist web design serves as a valid reminder that there are more possibilities in how to design for the web than with simple, conventional interfaces and stock photos. According to Wilshere (2017), another important aspect of Brutalism is that in today’s political climate, there is a widespread suspicion of corporate interests — in particular, the data about users that is being collected by big tech and social media companies. The brutalist web design trend he believes, may express a desire for increased online transparency, reflected in the baring of the underlying structure. Wilshere (2017) argues that his is yet a reminder of brutalist architecture, which not only exposed its raw materials but also its social vision.
Brutalist web design is bold and comfortable and Impactful. There are benefits and pitfalls of brutalist design, just like most design tactics and strategies. The trick is choosing the right web design aesthetic for your brand, business, or industry.
References
Awwwards, www.awwwards.com (2017) Brutalism: Brutal Websites For Modern Day Webmasters. (Acc. 2019–02–23)
Bradley, S. (2014) Why Understanding Design History Will Make You A Better Designer Today. Vanseo Design www.vanseodesign.com (Acc. 26 January 2019). Chen, W., Crandall, DJ., and Su, NM. (2017) Understanding the Aesthetic Evolution of Websites: Towards a Notion of Design Periods. ACM. ISBN: 978–1–4503–4655–9.
Craig, W. (2009) How to Create a Clean Web 2.0 Style Web Design in Photoshop. Web FX, www.webfx.com (Acc. 2019–03–03).
Craig, W. (2009) The Evolution of Web Design. Web FX, www.webfx.com (Acc. 2019- 03–02).
Craig, W. (2014) Terrible Web Design Trends. Web FX, www.webfx.com (Acc. 2019- 03–03).
Domingo, M. (2019) Build a common language by referring to design movements. The Interaction Design Foundation, www.interaction-design.org (Acc. 14 March 2019).
A short introductory article to the “Design in a Nutshell” initiative: http://www.openculture.com/2013/06/bauhaus_modernism_other_design_movements_explained_by_new_animated_video_series_.html
The original Design in a Nutshell: http://www.open.edu/openlearn/science-maths-technology/engineering-and-technology/design-and-innovation/design/design-nutshell
https://www.nngroup.com/articles/brutalism-antidesign/
https://www.thecreativemomentum.com/blog/what-is-brutalism-in-web-design
https://brutalistwebsites.com/
https://99designs.com/blog/design-history-movements/brutalism/
https://www.awwwards.com/inspiration/ux-brutalism-a-brutalist-framework
On Web Brutalism and Contemporary Web Design Aaron Ganci1 and Bruno Ribeiro2 1. Indiana University Herron School of Art and Design (IUPUI), Indianapolis, Indiana, USA 2. California Polytechnic State University, San Luis Obispo, California, US
Beautiful interfaces. From user experience to user interface design Letizia Bollini To cite this article: Letizia Bollini (2017) Beautiful interfaces. From user experience to user interface design, The Design Journal, 20:sup1, S89-S101, DOI: 10.1080/14606925.2017.1352649 To link to this article: https://doi.org/10.1080/14606925.2017.1352649
The rise of brutalism and antidesign And their implications on web design history PAPER WITHIN Informatics AUTHOR: Ellen Brage TUTOR: Martin Lindh JÖNKÖPING UNIVERSITY March 2019
