The Split Personality Of Brutalist Web Development

No frills, or flashing neon frills with sprinklers attached? ‘Brutalist’ websites have flourished in recent years, but their guiding philosophy remains unclear.

Of all the design trends to hit the Internet in recent years, brutalism is surely the most eye-catching, and the most poorly defined. A variety of major brands have embraced ‘brutalist’ aesthetics online. There are even directories for those interested in seeing a selection of them in one place. The style has well and truly entered the mainstream.

Desktop homepage of Bloomber.com
Bloomberg.com’s stark, no-nonsense design went live in 2016 and was refined in 2018. It is often touted as a leading example of brutalism’s growth online. (Large preview)

Indeed, brutalist web design has grown so quickly that there does not seem to be a clear consensus on what the style actually is. To some it means practicality, to others audacity. Much like the architecture it takes its name from, brutalist web development has become two competing philosophies in one. Neither is necessarily ‘right’, but knowing the difference is important. It may even be sensible to start calling them different things.

A Brief(Ish) History Of Brutalism

Before we get ahead of ourselves, let’s recap the term ‘brutalist’ — where it came from and what it means. Brutalism is a style of architecture that took off after World War II, reaching its peak in the ‘50s and ‘60s. Championing simple, geometric designs and bared building materials, the trend was in large part a reaction against the ornate, over-designed structures of preceding decades.

The name comes from béton brut, which is French for raw or rough concrete. Concrete is a common material for brutalist structures, lending itself as it does to the style’s no-frills approach. Other materials can be and are used, but concrete is especially common. Whatever structures are made of, embellishments are deemed unnecessary. The form and the materials are enough.

The United Kingdom, with its fondness for grey, drab things, particularly took to the style. Notable examples of brutalist architecture here include the Royal National Theatre, the Barbican Estate, and Balfron Tower. It has proven especially popular for public buildings — libraries, theatres, universities, housing estates, and so on.

The Royal National Theatre in London
The National Theatre in London. Designed by Denys Lasdun and opened in 1976, it is a textbook example of brutalist architecture. It is both one of the most hated and most loved buildings in Britain. Photograph by Henry Hemming. (Large preview)

Although there is not a catch-all definition that everyone agrees on, deference is often paid to English architectural critic Rayner Barnam, whose 1955 essay ‘On the New Brutalism’ attempted to outline the core ideas of the style. In anticipation of those of you who would not read the whole thing, Barnham boiled the philosophy down to the following:

In the last resort what characterizes the New Brutalism in architecture as in painting is precisely its brutality, its je-m’ en-foutisme, its bloody-mindedness.

Loosely translated, je-m’ en-foutisme translates as ‘don’t give a damn attitude. To be sure, brutalist buildings are unconcerned about conventional standards of beauty. They are also rather divisive. Where some gush over their firm, utilitarian character, others decry ugliness, impersonality, and, well, brutality.

Love it or hate it, brutalist architecture celebrates rawness. Indeed, Barnam opened his essay with a quote by Swiss-French architect Le Corbusier: “Architecture is the establishing of moving relationships with raw materials.” Le Corbusier’s Unité d’habitation housing designs inspired a generation of brutalist architects.

Balconies at La Maison du Fada in Marseille
Balconies at La Maison du Fada in Marseille, France. Designed by Le Corbusier and completed in 1952, it was a pioneering example of brutalist residential design. Photograph by Jean-Pierre Dalbéra. (Large preview)

So in short, brutalist architecture not only reduces construction to its fundamental materials, it finds beauty in that simplicity. Critics say it’s a bit in your face, a bit impersonal, a bit totalitarian even. The dual meaning of ‘raw’ and ‘brutal’ has clouded the definition, but as a rule, the goal is rawness and the result is perceived by some as brutal.

The style has waned in popularity since its postwar heyday, but it endures as one of the most distinctive around. A good few have attained listed status, and I for one am glad they have. A city of brutalist buildings would be a bit much, but a city without any is poorer for it.

FURTHER READING

Practicality Or Audacity?

So what’s all this got to do with web development? The philosophy, mainly, and the way it has splintered. Brutalism has found new life online, especially in the last three or four years. A slew of sites have taken on the brutalist moniker, and with the trend’s rise have come accompanying aw(ww)ardsarticles, and directories.

Browsing through these things you may well get the impression that not everyone is talking about the same thing. That’s because they aren’t. In the world of web development, ‘brutalist’ has grown to encompass a variety of styles. It’s a disservice to designers to keep lumping together such different approaches. I have separated web brutalism into two types below, but as we shall see even that may not be enough.

TYPE ONE: L’INTERNET BRUT

The first type of brutalist web design has much more in common with its architectural forebears. Think of it as l’Internet brut, where the raw materials are HTML and, to a lesser extent, CSS. The backgrounds are light, the text is black, and the hyperlinks are blue. There’s some wriggle room, but that’s the gist of it. No faffing about. Short of displaying actual code you couldn’t get much rougher.

The first ever website
In the beginning was the Style, and the Style was with Brutalism, and the Style was Brutalism. (Large preview)

There are countless examples of this style, big and small. The first ever website is an inadvertent disciple, while more recently Brutalist Web Design by programmer David Bryant Copeland puts forward a lovely little manifesto for the style.

Going up in the world, other websites with strong brutalist streaks include:

Although the raw materials of these sites are very similar, they don’t all look the same. They are shaped around their content and purpose. Like their architectural cousins, there’s actually a huge variety in form.

Craigslist’s London homepage as it appears in 2020
A proper l’Internet brut website. It even has grey! (Large preview)

As you can see with the Craigslist homepage above, there is very little in the way of excess, and possibly even less in the way of style. It’s barely changed in 20(!) years, because it hasn’t needed to. Take a look at the code and even a novice like me can follow how the pages are put together. You don’t have to guess how it’s built because it’s all right there in front of you.

With sites like this you’ll often notice an overlap with the ‘publicly minded’ leaning on a lot of these websites — marketplaces, forums, encyclopedias. It’s oddly appropriate to see a site like Wikipedia take on the digital form of, say, Robin Hood Gardens. Bloomberg has plenty of company in the news space as well. Papers like The New York Times and The Washington Post have embraced similarly blunt, functional designs in recent years. News design has always had a strong brutalist streak.

Desktop homepage of The Washington Post website
The Washington Post’s revamped website rolled out in 2015. Newspaper designer Mario Garcia praised it at the time for ‘avoiding clutter and crowdedness.’ (Large preview)

It bears mentioning here that several of the sites used as examples here didn’t set out to be brutalist. Much like Villa Göth, which is widely considered the source of the term brutalism, they set out to be practical and simple. They were adopted, so to speak. Their success is what inspired (and continues to inspire) architects and developers alike. They’re so unconcerned about appearances that they became shining examples of brutalist design without even realizing it!

Sites in this vein don’t always scream beauty, but there is an elegance to their functionality. They are unconcerned and unpretentious, shaped for their purpose using the raw elements of the web. (Pun intended.)

TYPE TWO: L’INTERNET FOU

This is the split. Right here. Those of you with even a passing interest in web design trends will know what we’ve looked at so far fails to account for a huge number of ‘brutalist’ sites. As Vitaly Friedman noted in Smashing Book 6:

Brutalism in architecture is characterized by unconcerned aesthetics, not intentionally broken aesthetics. When applied to web design, this style often goes along with deliberately broken design conventions and guiding principles.

The rise of ‘brutalist’ design over the last few years has had a lot more to do with brutalness than with rawness. This is the madder world, at times bordering on anarchy. Here design conventions are subverted and usability is an afterthought — and that’s not when it’s being actively sabotaged. These are the sites that prompt articles titled ‘Style Over Substance’, and for The Washington Post to sum up the style as ‘intentionally ugly.’

Desktop homepage of art magazine Toiletpaper
The homepage of artists’ magazine Toiletpaper. (Large preview)
Desktop homepage of self-described brutalist website JI SOO EOM
JI SOO EOM, another site found in the Brutalist Websites directory. (Large preview)

In the suitably migraine-inducing article ‘Brutalism: BrutAl wEbsIteS for mOdern dAy webMAsTeRS’, Awwwards describes this second strain as follows:

Brutalism in web design laughs in the face of rationalism and functionality, in the world of design it can be defined as freestyle, ugly, irreverent, raw, and superficially decorative, etc.

I hope it isn’t controversial to say that this is an altogether different approach to type one. At a stretch, you might argue that this approach is more the domain of artists and graphic designers, and that art is, therefore, the rawest form their websites can take, but that would be a stretch. There’s no question brutalist architecture can drift into ‘statement’ territory, but that’s not its natural realm.

The Brutalist Websites directory suggests, ‘Brutalism [online] can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today’s web design.’ There are shades of the founding brutalist ethos in this, but it is more irreverent and subversive. They can be very beautiful in their own way, but also cut from a completely different cloth from the Craigslists of this world.

This Town Ain’t Big Enough For The Two Of Us

So there you have it. When brutalist web design isn’t going all in on rationalism and functionality, it’s laughing in the face of rationalism and functionality. All clear?

The term has grown to encompass approaches that are in many senses at odds with each other. Indeed, Pascal Deville, who founded the Brutalist Websites directory after coining the term in 2014, thinks the style has splintered into three micro-stylistics:

  1. Purists,
  2. UX minimalists,
  3. Anti-ists (or artists).

Having vetted hundreds of submissions over the years, he’d know better than just about anyone else. He says:

The purists reference strongly to the architectural characteristics of Web Brutalism, such as the concept of ‘truth to materials’ and the use of the purest markup elements available. The UX minimalists, in contrast, see efficiency and performance as the main driver of Web Brutalism and even believe that the radical limitation of possibilities can boost conversions. The ‘anti-ists’ or artists see web design as an (still) undervalued form of art and don’t show much respect the status quo and mostly get bad press.

What is a ‘proper’ brutalist website? To an extent, the answer depends on the context. If a website belongs to an artist then something brash may be more appropriate than something unconcerned. Generally speaking, though, it seems to me that the sensibilities of the ‘anti-ist’ type are actually much closer to something like Dadaism, with all its absurdity and mirth and mess, or the avant-garde leanings of Expressionism.

Small Dada Evening by Kurt Schwitters and Theo van Doesburg
Small Dada Evening by Kurt Schwitters and Theo van Doesburg. (Large preview)
Typical Vertical Mess as Depiction of the Dada Baargeld by Johannes Theodor Baargeld
Typical Vertical Mess as Depiction of the Dada Baargeld by Johannes Theodor Baargeld. Which branch of ‘brutalist’ web design do these look more like to you? (Large preview)

I don’t want this to come across as a game of semantics, where different styles are filed away neatly into little boxes. What I am more concerned with is highlighting different approaches so that each may be given the space needed to flourish. As Deville acknowledges, the creative potential of the web is still being explored. ‘It’s a new form of art and I’m very happy to experience first hand,’ he says. ‘It’s happening now.’

This has practical consequences as well. Whether you’re a developer talking to a client or a client talking to a developer, it pays to be clear which version of brutalist web design you’re on about. If you’re a real champ you’ll naturally refer them to this article. Otherwise, visual examples like the one below are likely your best bet for getting to the point.

Example to two different brutalist website styles
They’re both ‘brutalist’ so be sure what you’re asking for. The design on the left is a project by Constantin Grosnov. (Large preview)

Beyond that, maybe we should start giving different styles different names. I appreciate this would be rather inconvenient to a lot of people. Domains have been bought, awards awarded, and articles written, but going forward the label seems too restrictive. It can no longer contain so many approaches. If nothing else, the split personality of brutalist web development shows how much terrain remains to be explored in web design.

There are countless schools of art — Brutalism, Expressionism, Romanticism, Art Deco, Futurism, Dadaism, Impressionism, absurdism, modernism, minimalism, and on and on and on. They find form through paintings, buildings, literature… why not websites? As the links below show, I’m not alone in asking this. With every new development style, ‘anti-mainstream’ becomes less adequate for describing what designers are doing. They are starting to explore the philosophy of web design in ways that haven’t been done before.

The ‘Dadaist’ strain of brutalist web design has one thing absolutely right: the scope for what a website can be is far, far too narrow. The web is an infinite sandbox, and embracing the breadth of possibilities within it can only be a good thing. That starts with expanding our vocabulary.

Smashing Editorial (ra, yk, il)

Jony Ive Is Leaving Apple, but His Departure Started Long Ago

Design chief helped create some of the world’s best-known products, but grew distant as the company shifted focus under CEO Tim Cook

Mr. Cook, an industrial engineer who made his name perfecting Apple’s supply chain, sought to keep Mr. Ive happy over the years, in part with a pay package that far exceeds that of other top Apple executives, a point of friction with others on the executive team, people familiar with the matter say. Apple doesn’t disclose Mr. Ive’s pay. But people in the design studio rarely saw Mr. Cook, who they say showed little interest in the product development process—a fact that dispirited Mr. Ive.

.. Mr. Ive and Mr. Jobs often ate together, feeding off each other’s ideas. Mr. Ive could translate futuristic concepts into physical objects with simplicity and sophistication. Mr. Jobs was the inspiration and the editor needed to bring these ideas to life.

“Creative geniuses like Steve and Jony speak a mutual language, and they understand each other well,” said Millard Drexler, the former J.Crew Group Inc. CEO who served on Apple’s board from 1999 to 2015 and is now an investor and adviser to Alex Mill, a retail startup. “There was an enormous challenge that anyone would have had following Steve Jobs into that position.”

The four-letter code to selling anything | Derek Thompson | TEDxBinghamtonUniversity

Novelty: (new) vs Familiarity (exposure effect)

Is it possible to engineer a familiar surprise.

.. Raymond Loewy, the father of industrial design, had a theory. He was the all-star 20th-century designer of the Coca-Cola fountain and Lucky Strike pack; the modern sports car, locomotive, Greyhound bus and tractor; the interior of the first NASA spaceship; and the egg-shaped pencil sharpener.

.. His grand theory of popularity was called MAYA: Most advanced yet acceptable. He said humans are torn between two opposing forces: neophilia, a love of new things; and neophobia; a fear of anything that’s too new. Hits, he said, live at the perfect intersection of novelty and familiarity. They are familiar surprises. In this talk, I’ll explain how Loewy’s theory has been validated by hundreds of years of research — and how we can all use it to make hits.

The Spotify Weekly New Music found that it was helpful to include some familiar artists or songs.

Why do first names follow the same hype cycle that fashion follows.

Scaling Agile is not the Path to Business Agility

Back then, when we were in the engine room, we all knew that one of the by-products of misguided Agile software development was an increase in technical debt. That to deliver working software at speed, we traded off reuse and generated some level of fragmentation. This sort of waste was acceptable as we worked to prioritise responsiveness over efficiency.

We knew that we had to stop and clean up on an ongoing basis. The technical term for this technique is called refactoring

.. As we matured, we started differentiating between efficiency and effectiveness. We realised that our focus on velocity was killing agility, that technical discipline is necessary to enable and maintain responsiveness.

..There are attempts to aggregate initiatives into roadmaps, evolve the strategy based on insights, and enable better innovation accounting, but if you go through the literature available, the focus is on the process, not the customer.

Andrew Ng warns us that as we move from the Internet Era to the Artificial Intelligence Era, we will likely need to shift our approach radically. In the internet Era, we focused on AB testing, on short cycle times, and on pushing decision making to engineers and product managers. Sounds familiar? It should, these are all linchpins of Agile.

.. When it comes to codifying and envisioning what enterprise/business agility looks like, the Agile movement is falling short of expectations. In parallel, the digital agencies and consulting firms that are stepping into this white space, lack the independence to pull it off successfully no matter how many articles are published in the Harvard Business Review.

.. The companies that were once known for exceptional product design innovation, fail to recognise until it is too late that they are losing their most loyal customers because they neglect to design the experience ecosystem thoughtfully. I decided to use a hardware example to represent best the fragmented experiences customers endure when interacting with the Enterprise. Yes, I’m looking at you Apple, the dongle company.

.. The enterprise found itself owning a multitude of disconnected platforms, solutions, and products. Quality, security, and privacy suffered as the years of decentralised velocity at the edges generated a bloated, complicated, disconnected, and unmanageable digital ecosystem.

.. there was a well-intentioned and healthy tension between effectiveness and responsiveness. A tension we should not shy away from because, as Jim Highsmith framed it many years ago, adaptive leaders understand they must ride the paradox between these two forces.

.. This time, code refactoring wouldn’t save us, what we needed, spoiler alert, was customer-centred, organisational refactoring at scale. And refactoring did occur, in the form of backlash against fragmentation, waste and the following flavour of “agility”, “Why do I need to write a story and wait for a programmer to add some content on the website?”. Why indeed!

THE CUSTOMER EXPERIENCE ERA

.. The darlings of the Gartner Quadrants and Forrester Waves announced that we were now in the Age of Customer Experience

.. they witness velocity killing both agility and their work-life balance.

.. The CIO and the Agile and Lean communities shifted their attention from products to platforms. They refactored architectures to become evolutionary. The epicentre of this mammoth effort was still centred around APIs, technology and operations in service of the business strategy. The focus wasn’t on the customer’s experience.

THE CUSTOMER-CENTRED INTELLIGENCE ERA?

.. The commoditisation of technology and the digitisation of the world helped us to get closer to the customer; in some cases, with analytics and programmatic, we managed to get too close without ever considering their experience and trust. We managed to get close to the customer without being customer-oriented.

Frankly, it was not that astonishing when the news broke of the 87 million Facebook users affected by Cambridge analytica’s election meddling. Or was it election advertising? For some of us, it was an expected and inevitable outcome.

.. Perhaps, the current crisis in customer trust will finally propel us into a true experience age — Intelligent, personal, relentlessly relevant, connected, dynamic, and consensual experiences. What Prophet describes as living and breathing brand systems with the ability to learn and evolve at scale. The goal has always been to continuously respond to customer needs, right?

.. In Agile management, there is no such thing as an “internal customer.” The only purpose of work is the ultimate customer or end-user. Under the Law of the Customer, the original producers not only meet the needs the internal customers: they are given a clear line of sight as to what value is being provided for the ultimate customer. Satisfying so-called internal customers is merely feeding the bureaucratic beast. It is a pretend-version of Agile.

Act 15. How Do We Get There?

  1. Ask the right (human-centred) questions.
  2. Design Led. Agile Enabled.
  3. Transformational, Visionary Leadership.When companies get where they’re sort of living by so-called making the numbers, they do a lot of things that are really counter to the long-term interest of the business.
    -Warren Buffet

.. Business Agility is the ability to achieve sustained business growth by responding to customer needs. If you are not focused on gaining a deep understanding of your customer and on delivering exceptional experiences, you can’t be responsive, neither can you assure their privacy, security and safety. If you have all that but lack operating model agility you are not a responsive business.

.. Technology must no longer serve the business; the business must no longer serve the business. If we are shifting the focus of the Enterprise from looking inwards to the needs of their customers and hopefully also to the benefit of their ecosystem and society — if we accept that this is the formula for long-lasting Business growth and sustainability — then it’s time to look beyond Agile.

The Utopian UI Architect

An ex-Apple interface designer’s 40-year plan to redesign not just the way we use computers, but the way we think with them

When Victor designs a software interface, he doesn’t do it to deliver functionality — he does it to advance an argument, in much the same way that 20th-century utopian architectural designs were never really intended as functional building plans.

.. “the power to understand and predict the quantities of the world should not be restricted to those with a freakish knack for manipulating abstract symbols.”

.. “We have these things called computers, and we’re basically just using them as really fast paper emulators,”

.. Now we’re staring at computer screens and moving our hands on a keyboard, but it’s basically the same thing. We’re computer users thinking paper thoughts.”

 .. “The important thing isn’t thinking about computers or programming as they are today, but thinking about moving from a static medium like marks on paper to a dynamic medium with computational responsiveness infused into it, that can actually participate in the thinking process,”
.. “One of the big barriers with computers today is certainly the physical interface, but this isn’t a technology problem,” he says. “The bigger part of it is just in finding the right ways of thinking, finding the right representations of abstractions, so people can think thoughts that they couldn’t think before.
.. “The example I like to give is back in the days of Roman numerals, basic multiplication was considered this incredibly technical concept that only official mathematicians could handle,” he continues. “But then once Arabic numerals came around, you could actually do arithmetic on paper, and we found that 7-year-olds can understand multiplication. It’s not that multiplication itself was difficult. It was just that the representation of numbers — the interface — was wrong.”