Lobster long-read #2: Digital Mannerism

Architectural history and the future of interfaces

Hello!

This week I’ve written a longer essay that makes connections between architectural history and present day trends in interface design. It’s prompted by a comment that I made in Design Lobster #41 that digital design seems poised to enter a more Baroque phase. I’ve been wondering if that architectural analogy was correct and what follows is an exploration of my thinking. Enjoy!

Ben 🦞

---

Take a look at the icons below – do you notice a subtle difference between each one? Taken from successive generations of Apple software releases, between 2019 and 2020 the message bubble seems to have inflated and lifted slightly from the surface of the icon. It’s a curious shift in how the interface is being envisioned.

To understand why this might be happening, we first need to wind back a bit further, to the summer of 2013.

iOS 14 vs MacOS Big Sur. A bubblier kind of bubble.

Death of the skeuomorph

In June of that year, after much anticipation, Apple released iOS 7 – which made some major visual changes to the interface of its mobile devices. The textures and gloss of previous versions had referenced the world of objects outside each screen. Notes were written on yellow lined paper with pseudo-leather bindings and books were laid out on blond-wood shelves. When you turned the pages of those books, the leaves curled as if they were actually made of paper.

This type of design is known as skeuomorphism from the Greek for skeuos, meaning container or tool, and morphḗ, meaning shape. Skeumorphs mimic the shape or attributes of earlier designs, sometimes for aesthetic reasons but normally to help communicate something about how they should be approached or used. In the comparison below you can see the deeply skeuomorphic iOS 6 on the right. Some of you may have fond memories of those practically lickable buttons. Some of you may not 😬.

From glossy to flat.

But in the summer of 2013, iOS 7 (shown above right) banished skeumorphs. Those button-like icons were flattened and their gloss stripped away. Photo-realistic textures were toned down or eliminated and real-world metaphors were made much more abstract. Typefaces like Marker Felt that had alluded to writing with physical pens were replaced with Helvetica Neue. Jony Ive, the designer who had lead the work at Apple on this new approach, gives an insight below into what had brought about this change of philosophy.

“We understood that people had already become comfortable with touching glass, they didn’t need physical buttons, they understood the benefits. So there was an incredible liberty in not having to reference the physical world so literally. We were trying to create an environment that was less specific.”

– Jony Ive, during this interview.

Jony characterises the skeuomorphism of earlier software as necessary education to help people understand this new type of touch-screen device. As the category was maturing (in 2013 Apple sold 150 million iPhones) this was no longer needed. Simply put, people had learned how to use them. This changed context called for a new approach, where the real-world metaphors of the past were replaced with purely digital ones.

To be true to this purely digital world, icons and interface elements needed to be as flat as the screens that they existed on. And iOS 7 also stripped back the palette of interactions to just sliding panes of variable translucency. On-screen objects would no longer curl or crumple – as digital objects they could only slide on and off the screen, appear or vanish.

If all this seems very familiar that’s because its the world we have been living in ever since. Flat panels, bold sans serif typography, layered cards - this is the hegemonic design language of our digital spaces. This universal style, untethered from a basis in physical objects and employing a simple set of rules about how things should look and behave has provided a foundation for subsequent improvements in usability. In turn helping digital technology permeate every corner of our lives.

The “Swiss Style”

Now, Apple’s choice to use Helvetica in iOS 7 revealed something telling about the history they were drawing on with their revised approach to interface design in 2013. This typeface, originally called Neue Haas Grotesk, was devised by two Swiss designers called Max Miedinger and Edouard Hoffman in the mid 20th century. These designers were key members of a graphic design movement called the International Typographic Style, also known colloquially as the “Swiss Style” due to its origins in that country.

A poster by Armin Hofmann, an important exponent of the International Typographic Style.

This movement began to appear in the 1910s in the work of Ernst Keller and reached its peak in the 1950s in the work of Josef Müller-Brockmann and Armin Hofmann – a poster of the latter designer is shown above. Posters and book covers in this style are characterised by their use of bold sans-serif typefaces such as Helvetica, by simple geometric shapes and blocks of right-justified, ragged-edged text. Compositions were always organised around rigid grids and there was a tendency to use photography instead of illustration.

“…the solution to the design problem should emerge from its content.”

– Ernst Keller

The movement was a reaction to what it perceived as the ornamental excesses of turn-of-the-century graphic design. They believed design should not decorate or persuade but remain as neutral as possible. The crisp typography, grids and photography were ways of presenting information more objectively. These aesthetic choices also spoke of a return to the basics of a graphic designer’s materials, chiefly type and layout. This characteristic and its sheer universality, which made it easy for it to cross borders in Europe and America, gave the International Typographic Style its name.

Helvetica Neue is the smoking gun, but beyond this choice of typeface it’s not difficult to detect the traces of International Typographic Style thinking in 2013’s iOS 7. Those sliding panes and flat shapes are a reaction to the ornaments of skeuomorphism just as Swiss designers in the 20th century reacted to fussily decorative posters. And just as those earlier designers tried to stay true to type, flat design is an attempt to stay truer to a digital designer’s primary material – the screen.

---

Flat Design as 21st century Modernism

Before we return to the present day, I would like to pull these historical threads a little further. The development of the International Typographic Style in Switzerland was linked to parallel developments in other disciplines across Europe. Just a year after Ernst Keller had founded the influential graphic design course at the Kunstgewerbeschule Zürich in 1918, German architect Walter Gropius had founded the Bauhaus School of Art and Design. Slightly earlier, in 1907, another German architect, Peter Behrens had founded the Deutscher Werkbund. The work of the Swiss designers was but one flowering of an international phenonemon that became known as Modernism.

The various movements that fell under this umbrella were linked by a desire to break free from historical example and reimagine architecture, the arts and design by exploring the possibilities of new industrial processes and technologies. They were also marked by a desire to return to something essential and even primitive. Besides factories and industrial goods, the French architect Le Corbusier – probably the most famous Modernist architect – also liked to refer to the purity and rationality of Mediterranean vernacular architecture as his inspiration.

The 1928 Villa Savoye by Le Corbusier - an iconic example of Modernist architecture.

In this way, I see digital Flat design as the inheritor of a Modernist strand of thinking that goes back to these developments in the early 20th century. Le Corbusier sought to refocus architecture on its fundamentals by exploring what had become possible with the new materials of steel and reinforced concrete. Members of the International Typographic Style aimed to return graphic art to its sources with their intense focus on type and layout. Flat Design in the 21st century has been a similar project, to cut away the cruft of skeumorphism and focus on the possibilities that a purely digital medium offers.

A return to the past?

So what does it mean that in 2020 Apple has seemingly reversed course in their latest release for MacOS? A lot of criticism on the internet about Apple’s new approach seems to take the view that this is a step backwards. A return to the skeuomorphic textures and shadows of yesteryear. But if we look more closely I think its clear that this is not merely an act of nostalgia for a glossier time.

An evolving visual language - in section and elevation.

Take the messages icon that was my original example. As the sections above show, in 2020 this is not a rerun of 2007’s physical button skeuomorph. A third dimension has returned in 2020, but in the form of a digital 3D bubble that has fully detached from its flat backdrop. There are no textures on it to imply anything overtly IRL, but the richer lighting of a three-dimensional universe is back.

Apple is not the first to start rethinking its interfaces along these lines. The Big Sur icons are examples of a visual trend in digital design that emerged in 2019 has been coined neumorphism - a contraction of neo-skeumorphism. Neumorphic designs are characterised by a renewed interest in the behaviour of light on surfaces, but in the context of the purely digital space established by Flat Design. On Dribbble there are now thousands of examples of this kind of interface, many of which seem to be sculpted out of a kind of digital clay. At this early stage, these designs are still quite rhetorical and their white on white elements have been justifiably criticised on accessibility grounds. Nevertheless I think they are a sign of things to come.

Digital light - neumorphic interface elements from Dribbble.

Complexity and Contradiction in Architecture

To see where we might be heading in the next few years I’d like to revisit architectural history for some clues. After all, architecture did not end with Modernism. In 1964 Robert Venturi and Denise Scott-Brown wrote a book called Complexity and Contradiction in Architecture that was a response to the previous thirty-odd years of Modernism. This 'gentle manifesto’ as they called it is a celebration of all things rich and ambiguous in architectural design. Elliptical baroque floorplans, ‘messy' facades and oversized or awkward architectural elements. They sought to escape the moral strictures of high Modernism and recover some of the expressive range of architectural periods such as Italian Mannerism and the English Baroque. This quote, from one of the opening paragraphs give a sense of their point of view.

Architects can no longer afford to be intimidated by the puritanically moral language of orthodox Modern architecture. I like elements which are hybrid rather than "pure," compromising rather than "clear," distorted rather than "straightforward."... I am for messy vitality over obvious unity. I include the non sequitur and proclaim the duality.

Robert Venturi & Denise Scott-Brown, Complexity and Contradiction in Architecture, 1964

A house they designed for Robert’s mother in the same year further demonstrates what they mean. This small 2-bedroom house was given a grand scale from one angle by the witty organisation of the facade that somewhat recalls a classical pediment. From others however it appears small, and from wherever you look its true structural system is obscured. Inside, elements such as cupboards, the chimney and staircase wrap around each other such that it is not clear where one begins and the other ends.

The Vanna Venturi House - 1964.

Though the building is made of all the same materials and components as a Modernist house, including Le Corbusier’s famous long horizontal windows, the end result is decidedly stranger and richer.

Venturi and Scott-Brown mark the beginning of architectural Post-modernism and much of their later and more famous work became more quotational and obviously ironic. In this early work however they are trying to remix the components of modern architecture to make it more expressive and allusive. And that’s where I think we are heading again now.

Digital Mannerism

When I look at present-day neumorphism I see it as a modern-day inheritor of the Mannerism of Venturi and Scott-Brown. Like them, it seems digital designers working today have felt their expression limited by the fixed rules of Flat Design and so have begun to test its limits. Fleshing out those sheets of glass into 3D surfaces, pulling elements off them and blowing them up into sculptural forms.

Neumorphism exists in an uneasy but expressive tension between the flat world of the screen and the more sensuously lit 3D world that its shadows imply. It plays games with our sense of where the surface is just as Venturi’s Mannerism played with our sense of scale. Like his architecture, it is a little irrational, favouring expressive force over purity or clarity. Though it is not nostalgic for IRL like skeuomorphism, it nevertheless seems to wink in acknowledgment at it.

Perhaps the advent of full blown 3-dimensional interfaces experienced through a pair of Apple-designed augmented-reality goggles will release this tension into a full-blown Digital Baroque. For the foreseeable I suspect we will inhabit this Mannerist hall of mirrors where we see the familiar language of Flat Design being distorted in ever more inventive ways.

For, as things stand, the effects of this new style have been limited to the purely visual. MacOS Big Sur hasn’t (yet) tried to employ this new expressive capacity to make usability improvements. Dragging a window is still to slide around a beautifully frosted but utterly familiar pane of glass. That Mannerist reimagining of a window is yet to come.

---

Enjoyed this long-read? Sign up for the weekly email below. 👇