Interface & Interaction Design
On the visual weariness of the web
Why is current web design so bad?
17. September 2018
The visual blandness of the world wide web is disheartening. Everything looks the same. Generic fonts, no layout to speak of, interchangeable pages, no expressive visual language, even micro-typography is a mess. The current design of “cyberspace” is drab and dreary.
Right now, the design of web pages seems to be driven by technical and ideological constraints – and not by creativity and ideas. Every page consists of containers in containers in containers. Sometimes containers contain text — sometimes containers contain images. Nothing is truly designed — only assumed and pretended.
Ironically, current web technologies have enormous capabilities. On a visual level, almost every idea and every layout can be implemented. State of the art web design could be radical, surprising and evocative. It is possible to combine experimental typography with generative images and interactive experiences.
And yet – even design web sites are based on containers in containers in containers. The most popular portals for creatives on the web — dribbble and behance — are so fundamentally boring that they are basically interchangeable. Just look at this. Can you tell which one is which?
How did this happen? I believe there are several reasons. Technological frameworks like Content Management Systems (CMS) and blogging platforms like WordPress are based on the idea of templates. Pages from these frameworks are not individually crafted and designed but are generated on the fly by sticking together different media types like images, headlines, body text or videos. Templates are not designs but rules for combining related data types. Beyond the template structure there is usually no way to influence the visual appearance of the page. What you see is what you poured into the template. Templates are content agnostic. And that is a problem.
One of the fundamental principles of design is to establish a deep and meaningful relationship between form and content. This connection works in both ways. The form both reflects and shapes the content. Separating them breaks this principle and creates generic content containers. In a design-sense, templates are meaningless. The form adds nothing to the content.
But I suspect there is also a creative and intellectual laziness when it comes to web design. In the age of mobile-first, generic framework-driven-development, nobody seems to bother with the visual and contextual integrity of a web page.
So how can we tackle this challenge? How can expressive and avant-garde web sites look like today? In order to answer this question, I suggest to look back. Sometimes, if you want to design the future, you have to rediscover the past.
I did my first web site about 23 years ago — at the research and development group coinn at the University of the Arts in Bremen. Obviously, creating web pages was a really hot thing at that time. The web was very young and it sparked our imagination.
In the mid-nineties, we were struggling with the constraints of HTML. We could only use “web save fonts” like Arial, Times or Verdana. We had to use table layouts, monospaced fonts or GIFs in order to do exciting stuff. As HTML initially was purely content-driven, we had to work against the technology in order to do design a page.
While we tinkered with the early web, the graphic design world exploded. Experimental typography happened throughout the 20th century. From Tschichold’s Neue Typografie in the 20s to the computer driven layouts by April Greiman in the 80s, designers challenged the status quo and tried to find a visual language that represented the ideas and revolutions of their time. But in the nineties, an unusual combination of technological advancements and zeitgeist allowed for a very radical breed of graphic design. Irma Boom, David Carson, Paula Scheer, Neville Brody and many others literally turned the old graphic design world on its head.
Compared to the visual explosion of the graphic design world in the nineties, the early web pages were fairly lame. The Web Design Museum documents this very well. However, we desperately tried to translate the new visual style to the web. We did not get very far — but at least we were trying to push the technology to its limits in order to create expressive visual ideas.
In his book Towards a Philosophy of Photography, Vilém Flusser points out that “Freedom is playing against the camera”. This statement is clearly transferable to all forms of technical image production. And in the sense of this quote, we had a lot of freedom.
We wanted to do graphic design in the browser. Nobody knew how it was done or what mistakes you could make. There were no expectations on how a web page should look like. There were no standards, no CMS, (almost) no CSS, no JS, no video, no animation. You get the idea.
Today, the problem of web design is not the limits of the technology but the limits of our imagination and our obedience to visual conformity, economic viability and assumed expectations.
But every crisis creates an opportunity. Now is a good time to challenge the visual conformity of the web. Alas, I am too old and too bourgeois to come up with a radical, experimental and state-of-the-art approach to web design.
But I can ask my students to do it.
In 2017, I did a web design class at the Interface Design programme in Potsdam. Every team was asked to come up with a redesign for an existing web site. The assignment was very clear: treat the browser window as a blank canvas and create expressive and imaginative visual experiences. Use the technological potential of current web technologies as a channel for your creativity. Do not be constrained by questions of usability, legibility and flexibility. Have an attitude. Disregard Erwartungskonformität.
I am very happy with the outcome of the class. You can find the results on this overview page. However, I would like to present four projects in more detail. Not because they are necessarily the best projects but because they represent different approaches to the challenge.
Frederic Haase and Jonas Köpfer
Frederic and Jonas picked the web site of the Zentrum für Kunst und Medien (ZKM) as a starting point for their experiments and explorations. A very fitting choice as the ZKM is one of the most prominent exhibition spaces for media art in Germany. The web site of the ZKM is fairly conventional. It works – but it lacks the avant-garde assertion that is conveyed by the art work in the exhibitions.
The aim of Frederic an Jonas was to design a concept, a visual language and a technical setup for the ZKM site that represents the progressive approach of the museum. At the core of their concept is a generative layout engine. Every time a page loads, a new visual appearance is created. Thus, a re-load is also a re-design.
Daria Thies, Bela Kurek and Lucas Vogel
Streem is an art and street magazine. It is both a stage for upcoming artists and and a platform for social issues. Streem includes work from illustration, painting, photography, design, writing or journalism. It is very open and diverse.
Daria, Bela and Lucas have combined these different influences and based their designs on a conceptual city structure. For their prototype, they have created four different “neighbourhoods” that each represent a section of the original magazine. Their approach was to combine strong illustrative styles with spatial typography in order to create a legible city.
Amelie Kirchmeyer and Fabian Schultz
Amelie and Fabian took a very structural approach. Instead of finding an adequate form for a specific content, their aim was to dissolve a web page and break it down to semantic, syntactical and statistical properties. Their idea was to demonstrate the fluidity and inherent malleability of HTML. They deconstructed Medium postings and created an environment that allows the readers to break down long texts into an experimental typographic space.
Hacker News redesign
Fabian Dinklage and Florian Zia
Fabian and Florian turned Hacker News into an interactive visualisation. The social media site is a news aggregator focusing on computer science and information technology. Its design is bare-bones, but it has a complex system for voting and discussions. Fabian and Florian have taken this structure and turned it into a typographic space of timelines and networks. The visual presentation of the individual sections is based on the sequence and connections of news and comments. They connected their design to the api of Hacker News, so you can actually use their design to read the current news.
David Carson once said: “don’t confuse communication with legibility”. This quote can be applied to the current state of web design. Legibility, usability, responsiveness and especially accessibility are essential qualities of the modern web. But they should not define and limit the visual repertoire of web design. If you equate stereotypes with usability you have understood neither visual design nor human centred design.
I for one would like to see more radical, generative, evocative, thoughtful, adequate, content-specific and intelligent web design. I would like to rediscover the web as a space for design experiments. I would like to be surprised more often.
I don’t know how the web will look like in 24 years. But I certainly hope it doesn’t look like the web today.
Continue reading: Type Casting; or, The Comic Sans of Errors