event.preventDeault();
Another view on designing websites

Maximilian Kiepe
2019

Part 1
Introduction

You go online, you visit a website. Your fingers pet the trackpad. You tap, swipe, click and scroll. The movements are familiar. Intuitive. And so is the interface. Smooth, flat, predictable. But something does not feel right.

In 2019 a majority of websites look and feel generic, identical, interchangeable and impersonal, despite a few exceptions. By analyzing the 30 year old history of web design and the status quo of what web design has become in 2019, this work focuses on the causes of this trend, takes a look at the counterculture and presents other, not so common, but important, aspects of web design.

Design in the hypertext context

Frieder Nake, pioneer of computer art and professor at the University of the Arts Bremen, once jokingly said in a lecture that I attended in 2018: ‘The Internet is just a collection of hyperlinks1’, certainly knowing that in just 30 years the Internet became much more than that. It became people’s newspaper, library, cinema, archive, community and workplace. The majority of people who use the Internet access it through a browser and then navigate to a website. Tim Berners-Lee invented the first browser called World Wide Web in November 1990 and created the first website one month later in December 1990 (Kovář, 2019). But what is a website?

The Mozilla Foundation describes it as ‘a collection of web pages which are grouped together and usually connected together in various ways’ (MDN Web Docs, 2019). Furthermore, they characterize a web page as ‘a document which can be displayed in a web browser’ (Ibid.). Designer and lecturer Laurel Schwulst defines a website as ‘a file or bundle of files living on a server somewhere’ (Schwulst, 2018). Moreover, she believes that a website can be more than this as she argues that ‘there are endless possibilities as to what a website could be’. She asks: ‘What kind of room is a website? Or is a website more like a house? A boat? A cloud? A garden? A puddle?’. ‘A website can be anything’, she answers (Ibid.).

From 1994 on, when David Bohnett and John Rezner founded the web hosting company GeoCities, the few Internet users that were already online found a place where they experiment on what a website could be. During that time it was a platform for academics’ CVs (→ fig. 1), an advent calendar (→ fig. 2) or even a place for your dog’s daily diary (→ fig. 3).

fig. 1: people.math.ethz.ch/~embrecht
fig. 2: blog.geocities.institute/page/2
fig. 3: dogs.geocities.institute

This development was possible because users of the platform could set up a webspace and download huge amounts of images and gifs2 for free. As a consequence, GeoCities became one of the most popular and inhabited places of the World Wide Web and with that the web landscape became visual, animated and personal. During that time, theoretically anyone could set up, design and publish their own website (Kovář, 2019). Due to financial problems, amongst others, Yahoo! shut down GeoCities in 2009. Shortly before its deletion Dragan Espenschied and Olia Liliana saved two terabytes of websites from this era, that was later referred to as the Early Web. They archived many websites and are still studying them as well as sharing their research in their project One Terabyte of Kilobyte Age (Liliana and Espenscheid, n. d.). A well known website from this Early Web Era is the website for the movie Space Jam (→ fig. 4).

fig. 4: spacejam.com

It is probably not the most sophisticated website of that time but an important one because it is still on the World Wide Web and showcases the challenges web design was faced with during that time. This website gives an impression on how web designers had to deal with technical limitations. These restrictions, however, evoked creative solutions. The landing page of the Space Jam website offers a menu with planets positioned seemingly free around the logo. This layout required knowledge about the underlying technology of a table layout based structure and a creative mind to rethink how to misuse that structure to achieve this layout. Hereby the Space Jam website introduced a new style of visual interface (Ford, 2019, p.28).

When Macromedia Flash3 went mainstream in 1998 technical limitations for web designers seemed overdue. Flash allowed designers that were limited in developing to be creatively free in creating interactive web applications (Ibid., p.46). The use of Flash was a key component that paved the way for websites like the one for the movie Requiem for a Dream by design studio Hi-ReS! (→ fig. 5).

fig. 5: archive.hi-res.net/requiem

This website, which was published in the year 2000, ‘marked a new standard for movie websites that demonstrated how the very atmosphere and emotional range of a movie could be translated online’ (Ibid., p.104). Contrary to design solutions like this, another movement emerged during that time. In May 1995 Donald Norman, Jim Miller and Austin Henderson, who were working for Apple, introduced the term User Experience Design, which described all aspects of a person’s experience interacting with a product. Four years later, in 1999, Donald Norman’s colleague Jakob Nielsen published one of the first books about Web Usability called Designing Web Usability (Kovář, 2019). One year later Steve Krug published the book Don’t make me think (Ibid.). Both publications became definite guides for web designers and developers on how to design a usable and user-friendly interface. On the 9th of January 2007 the iPhone was introduced by Apple, whereby computers became mobile. From then on websites needed to adapt to smaller screens (Ibid.). In 2010 web designer Ethan Marcotte coined the term Responsive Web Design for this design approach (Ibid.). One year later the first version of the Twitter Bootstrap framework 4 was released and made it easy for web designers to create responsive websites out-of-the-box (Ibid.). From 2014 on Google Material Design established and set visual and interactive guidelines on how to design interfaces and Flat Design5 went mainstream (Ibid.). Today interface design and by that web design advanced to a very important discipline for the web. A broader range of people go online everyday and they need to understand how to navigate through the World Wide Web. Consequently usability became key in designing websites. This usability focused design is clearly the main goal of today’s web design. However, websites like Space Jam or Requiem for a Dream still amaze with other qualities, even after decades. In the following chapter I will describe and criticize the status quo of today’s web design and will demonstrate some of the other qualities that it has to offer (→ Part 2: Analysis). These outlines will be followed by a chapter with examples that successfully applied these other qualities (→ Part 3: Under construction).

Part 2
Analysis

Generic template design

Petr Kovář, founder of the the webdesigmuseum.org, mentioned in the Eye on Design Interview in 2018:

‘In 2002, the SpaceX web design was much more distinctive than the current version of the site, which rather resembles a generic template6 now’
(Morley, 2018)

The choice of using a Generic template seems especially ironic for a company that ‘[...] manufactures and launches advanced rockets and spacecraft [...] to revolutionize space technology, with the ultimate goal of enabling people to live on other planets’ (SpaceX, 2019). Generic templates – predesigned websites that the author can fill with content – and Generic template designs – designs that look like it is a template but in fact are, at least to a certain extent, custom made – are widespread across the Internet in 2019 and years before. An unknown number, but probably a majority of web designs these days, can be categorized as Generic template designs. In 2016 the technologist Jon Gold sarcastically asked via twitter: ‘Which one of the two possible websites are you currently designing?’ (Gold, 2016) and attached the following image (→ fig. 6).

fig. 6: twitter.com/jongold/status/694591217523363840

4.000 retweets and 6.700 likes. The many reactions this tweet received shows the significance of the topic. Thus, what happened to the web that was once ‘blunt (...), bright, rich, personal, slow and under construction’ (Liliana, 2005), where the ‘pages were built on the edge of tomorrow, full of hope for a faster connection and a more powerful computer’ (Ibid.)?

I conjecture that this development in web design is caused by the following aspects:

1   A design that is too much focused on usability guidelines and search engine optimization as well as the ongoing evaluation of it. In short: too much usability. In an attempt of finding best usability practices, designers and developers got stuck in a positive feedback loop of user expectations and learned behaviors. The web artist Rafaël Rozendaal compares this development in web design to the wind tunnel effect of the car industry where the aerodynamic tests have standardized the design of modern automobiles (Rozendaal and Bailey, 2019).

2   Using templates (e. g. Wordpress, Squarespace, Wix), which get installed in an unreflected manner and show the content but do not convey it. In these templates websites are downgraded to a generic, predictable and impersonal shell with a user experience that focuses only on an efficient way to perceive information rather than communicating an individual experience. As Jay David Bolter and Diane Gromala put it in the 2003 published book Windows and Mirrors: ‘UX needs to be an experience not only a simple way to perceive information’ (Bolter and Gromala, 2003, p.24).

3   A Design that is depending on frontend frameworks like Twitter bootstrap. According to Andy Pressman Twitter bootstrap is mainly responsible for the development of Generic template designs. He states that, when there was a shift from desktop websites to mobile devices, the out of hand responsive behavior from Twitter bootstrap made it easy and efficient for designers and developers to build their websites on top of this framework (Pressman, 2016). The medium became the message, the tool shaped the design, and in consequence websites build on top of these frameworks naturally behaved and looked identical.

4   Due to the complexity of technology, that only a few web designers comprehend and thus are able to think ahead the technical limitations, the majority of the web designers reproduce the seen and proven. If the designer is limited in her/his thinking of what is possible regarding the medium, she/he is not able to think beyond the limits of what the medium seems to be able to offer. ‘Nowadays, we tend to notice the similarities between websites. Design looks like it is driven by technological constraints rather than by contents and aesthetics’, criticizes web designer Yehwan Song in her Anti user friendly design manifest (Song, 2019).

5   Misunderstanding technology and code as a tool for production rather than a way of creative expression. In her publication Turing complete user Olia Liliana writes about an early Dreamweaver7 commercial: ‘The message from Adobe is clear. The less you think about source code, scripts, links and the web itself, the more creative you are as a web designer. What a lie. I liked to show it to fresh design students as an example of misunderstanding the core of the profession’ (Liliana, 2012). Douglas Rushkoff shares the same opinion: ‘We see actual coding as some boring chore, a working class skill like bricklaying, which may as well be outsourced to some poor nation while our kids play and even design video games. We look at developing the plots and characters for a game as the interesting part, and the programming as the rote task better offloaded to people somewhere else’ (Rushkoff, 2010).

6   The complexity of the design and development disciplines. In the Early web era, that is described by Olia Liliana as blunt, bright, rich and personal (Liliana, 2005), there was a webmaster who designed, developed, uploaded and maintained the website. Today the complexity of technologies, the complex knowledge about web design as well as marketing, search engines and Human Computer Interaction split the webmasters discipline into usability and SEO8 experts, user experience and interaction designer, graphic and user interface designer, frontend and backend developer etc. As a consequence this splitting makes it complicated to think about web design coherently, e. g. a mainly usability trained worker is probably not well trained, focused or interested in the graphic design field and will therefore not find alternative usability solutions that may be solved with pure graphic design solutions.

7   The belief that the goal of interface design is efficiency. Evan Selinger writes in his article The efficiency delusion: ‘We believe that if technology can make some aspect of our lives more efficient, we’ll get back free time to do the things we actually find meaningful’ (Selinger, 2019). This is a widespread opinion amongst programmers. Even Paul Ford, author of the Bloomberg Businessweek’s best seller What is code? names this as his main purpose of being a developer in the Scratching the surface podcast (Fuller, 2018). It is easy to fall for this thinking. It is convenient and comfortable to let designers and developers believe they can change the world for the better by making a product efficient. Efficiency can be important in many web designs and should be kept in mind as an attribute contributing to a satisfying product, it is however rarely the only goal. Selinger emphasizes that ‘the lack of efficiency is a feature of the system, not a bug’ (Selinger, 2019). In line with this argument, I also agree with Andy Pressman, who pointed out in his talk at the Design Portland conference 2016 that ‘friction makes memory and meaning. Friction makes the user process an experience rather than just to consume it’ (Pressman, 2016), and ‘that ease of use as only criteria is diminishing the medium’ (Ibid.).

8   Major corporations owning most of the commonly used services and couple the visual appearance of the Internet to their brand image. E. g. Google’s strategy with Material Design is to define a visual and interactive language that is clearly connected to the brand. ‘When we make use of Material Design as an aesthetic for our interface designs, we are not just making a cosmetic choice. It’s also a political choice. We are representing Google, whatever that might mean’, writes João Ribeiro in his article called Material Design is a political choice (Ribeiro, 2018). If a designer uses Google Material Design, the interface will look and behave like a Google Service. It may not be Google but it makes people connect your product to it.

In general, social media platforms like Google, Facebook/Instagram, , Yandex or WeChat are the peak of a templated web design. It is very comfortable for the author to set up a page in the already familiar environment of the service the author is already using. To set up a Facebook page about your restaurant for example can be done in a few minutes and shared with the world immediately. One interface for your homepage, your business, the news and the calendar. These services try to centralize the Internet’s diverse landscape into one product.

‘The web is called the web because its vitality depends on just that – an interconnected web of individual nodes breathing life into a vast network. This web needs to actually work for people instead of being powered by a small handful of big corporations – like Facebook/Instagram, Twitter, and Google’
(Schwulst, 2018).

Social media platforms are an example of how ultimate efficiency in digital product design makes the user lazy and addicted. ‘Huge corporations such as YouTube or Instagram [...] manipulate users and expose them to a massive amount of data, some of which is heavily biased. As a result, devices and interfaces become faster, more frenetic, and more addictive’, states Song (Song, 2019). Gromala and Bolter emphasize in their book Windows and Mirrors: ‘Good Digital Designs do not addict. They invite us to participate, to act and react. To design a digital artifact is to choreograph the experience that the user will have’ (Bolter and Gromala, 2003, p.22). With persuasive design methods like endless scrolling, pull to refresh, artificial intelligence suggested content (Harris, 2019) or the addictive use of numbers and likes (Grosser, 2014), these platforms and services are designed to keep the user continuously engaged with their product. Tim Berners-Lee warned in an open letter on the 29th birthday of the web: ‘The web that many connected to years ago is not what new users will find today. What was once a rich selection of blogs and websites has been compressed under the powerful weight of a few dominant platforms. This concentration of power creates a new set of gatekeepers, allowing a handful of platforms to control which ideas and opinions are seen and shared’ (Berners-Lee, 2018). And Schwulst concludes: ‘Today more than ever, we need individuals rather than corporations to guide the web’s future’ (Schwulst, 2018).

If everything is so smooth,
why am I so sad?

User Agent: If everything is so smooth‚ why am I so sad? actually is a book by Anastasia Kubrak about urban digitality (Kubrak, 2018). Anyway, the title best represents the feeling many websites cause that get awarded and featured in the most prominent web design blogs like awwwards.com, thefwa.com or siteinspire.com. Even though the majority of the websites showcased in these blogs may not be templates or have a Generic template design, the websites look and feel generic.

They may not have a huge banner image with a quote in the center. They may not have a or button under a centered quote. They may not have the logo on the top left and the language switch on the top right. They may not have the search bar next to it. But what they do all have in common is that they provide the same interchangeable experience achieved by white space, smooth animations and seamless page transition. Instead of providing a memorable experience due to an individually created concept in interaction and animation, these websites cannot be distinguished from their competitors when it comes to how the websites feels.

Already in 2003 Gromala and Bolter criticized the thrive of a transparent interface. They wrote: ‘HCI specialists and some designers speak as if that were the only goal of interface design: to fashion a transparent window onto a world of information. There are times, however, when the user should be looking at the interface, not through it, in order to make it function’ (Bolter and Gromala, 2003, p.26). This unpopular but forward thinking was pointed out in 2003 but is still innovative and true nowadays. To that time, software designers, engineers and thinkers like Donald Norman were actually convincing software companies to clean up the interfaces and make them easy to use, hence making the interface transparent. They pushed this thinking and did a necessary job to raise awareness on how an usable interface should work. But times have changed. The desktop metaphor is mostly vanished (some rudiments might still be around) and new generations grow up with digital products and flat interfaces. João Ribeiro writes: ‘Our users are becoming smarter than ever, owning a vast digital culture. They are open and I would even say that they want interfaces that both challenge them and trigger curiosity’ (Ribeiro, 2018).

Unlike Donald Norman’s partner Jakob Nielsen, who still believes strongly in his self titled Jakob’s Law, which basically states that a designer should design a website like every website that is on World Wide Web (NNGroup, 2017), his partner Donald Norman changed his mind already in 2013. He said in an Interview with the german magazine Brand Eins: ‘I have been in this business for half a century. And the topic of usability is honestly done for me. [...] I ask: is it fun to use something? Can I build a positive emotional bond?’ (Heuer, 2013).

Today Norman is interested in other qualities of experience design and no longer in pure usability. ‘Good UX9 is commonly associated with clarity and ease of use, but it also contributes to a homogenization of design and experience’, writes Pressman (Pressman, 2016). He continues: ‘An alternate approach to user experience treats design as a way to communicate ideas through form, rather than as merely a tool for conversion’ (Ibid.). Schwulst follows the same thoughts: ‘However, clarity is one of many possible intentions for a website. There are other legitimate states of mind capable of communication – a surprising, memorable, monumental, soothing, shocking, unpredictable, radically boring, bizarre, mind-blowing, very quiet and subtle, and/or amazing website could work. You also need not limit yourself to only one website – as perhaps you’d like to confuse or surprise with multiple’ (Schwulst, 2018). In an Eye on Design article called What does it mean to take the “form follows function” dictum to the extreme? graphic designer Medeina Musteikyte points out how invisible interfaces are perceived: ‘Standardizing this experience makes it impersonal and predictable, and intuitive interfaces often just end up with thoughtless clicking and scrolling’ (Morley, 2018).

What these designers criticize is that so called professionals just see the web as an invisible container (Pressman, 2016). Bolter and Gromala emphasized already in 2003 that digital design should not try to be invisible (Bolter and Gromala, 2003, p.26). They wrote: ‘If we only look through the interface, we cannot appreciate the ways in which it shapes our experience. We should be able to enjoy the illusion of the interface as it presents us with a digital world’ (Ibid., p.27).

The overall critic about this branch of web design is that it is superficially homogenized and impersonal. The rich media a website can offer is basically ignored. Websites have no fundamental concept in interaction and animation design. Web design concepts are purely based on smoothness and transparency in interaction; blending in and fading out, page transition – left to right, rollovers and slight zoom ins. Olia Liliana puts it in a nutshell: ‘Interface design is a very powerful profession and occupation, a field where a lot of decisions are made, gently and silently. Not always with bad intentions, very often without any intention at all. [...] It is important for designers and builders of computer applications to understand the history of transparency, so that they can understand that they have a choice’ (Liliana, 2018).

The brutalist and the
handmade web

Over the last years a counterculture to the aforementioned web designs began to rise, called Brutalist web design. Pascal Deville, namesake and founder of the brutalist websites blog brutalistwebsites.com, defines Brutalist web design as following: ‘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’ (Deville, 2016).

The name Brutalist websites has its origin in the modernist architecture movement of Brutalism and describes quite literally the raw style of an HTML site architecture with little CSS and Javascript. The first websites Deville posted on his blog like Pokey the Penguin (→ fig. 7), the portfolio of Ryder Ripps (→ fig. 8), txti (→ fig. 9), or even Sir Tim Berners-Lee very own website (→ fig. 10) have many positive attributes.

fig. 7: yellow5.com/pokey
fig. 8: ryder-ripps.com
fig. 9: txti.es
fig. 10: www.w3.org/People/Berners-Lee
fig. 11: motherfuckingwebsite.com

They are environmentally friendly, social, user friendly and responsive by default, because they are low in data size, load fast and are rendered equally on every browser and device. That is because they rely mainly on the W3C Web Standards10. But like the Generic template designs these sites have a generic style and provide an impersonal and interchangeable experience. From 2017 on, Pascal Deville seemed to expand his view on what a Brutalist website is and showcased websites that may be categorized to Post-modernism rather than Modernism. Curious about this change of definition, I contacted Deville via mail. Below you can read the short chat we had via e-mail:

MK   You coined the term brutalist websites. For me the term made perfect sense seeing what sites you featured in the beginning. Sites like Pokey the Penguin, the portfolio of Ryder Ripps or txti were designed like the Motherfucking website (→ fig. 11); just brutal HTML site architecture with as little as possible CSS and no Javascript. Over time the works that got featured became more designed and interactive. The reference to brutalist architecture – became at least for me – more unclear. Was the change of direction intentionally?

PD    When I started to collect websites in 2014 I had a very strict view on what web brutalism should look and behave like. As the site became popular and people started to submit their work, my view expanded, too. I didn’t want Web Brutalism to become a visual style (like Material and such), but a movement with different sub genres and sub philosophies.

MK   Your definition of brutalist websites is: ‘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.’ Did your definition of what a brutalist website is change over time or was it always the same to you?

PD    First of all, the definition is a plain rip-off from Wikipedia’s article about brutalist architecture. I just changed the last part from ‘architecture’ to ‘web design’. But I still like the definition, because it doesn’t really defines a specific style or technology.

Pascal Deville underlined in this short chat we had via e-mail that a Brutalist website is not a visual style but an alternative position in web design. Over the years Brutalist websites became the name for websites that question aesthetics and conventions. Form as function. They are focused on an individual experience rather than standard usability. These are websites that challenge user expectations, conformity and uniformity. ‘For me, the Brutalist web design thing is more about seeing through the website and seeing who’s behind it’, says web designer Jon Lucas in an Eye on Design portrait about his work (Li, 2018). ‘While he isn’t a fan of the broad term, he likes the honesty and directness that’s associated with it. The raw style, because of its openness and simplicity, gestures to the human hand behind a platform’s creation’ (Ibid.). Lucas argues that a brutalist web design approach is more human and therefore has more character in difference to templated designs. A few years ago, back in 2015, J. R. Carpenter ‘[...] evoke[d] the term handmade web to refer to web pages coded by hand rather than by software; web pages made and maintained by individuals rather than by businesses or corporations; web pages which are provisional, temporary, or one-of-a-kind; web pages which challenge conventions of reading, writing, design, ownership, privacy, security, or identity’ (Carpenter, 2015).

Amongst these positive attributes of Brutalist and Handmade web designs, there is also legitimate critique. A point of critique is that these sites can only succeed in the arts and culture area because of their lack in usability and accessibility, hence are too frustrating for the conventional user (Moran, 2017).

Another point of critic is similar to the web designs described in the chapter If everything is so smooth, why am I so sad?. Although Brutalist websites provide a more human, non-generic and exciting experience, they often lack in consistency. Like there is too much smoothness and white space in the websites I described in the previous chapter, the opposite is the case for Brutalist web design. The concept of interaction and animation is focused on boldness, newness and trendiness rather than a consistent concept for interactivity, animation and style. Brutalist websites are exciting, because they set a counterpart in aesthetics to the rather boring websites we use to visit. However, in general they do not serve the user a consistent, thoughtful, detailed environment. They often seem more like experiments in style, interaction or technology. This is often at the expense of usability and is therefore not easy to learn and not easy to use.

Part 3
Under construction

In the Early web era the sign ‘Always Under Construction didn’t mean the site would never work but actually the opposite. It informed users that there was somebody who was always taking care of the site so it would be interesting to return again and again’ (Liliana, 2005). In the figurative sense, this part is meant to show examples of how to construct websites taking the analyzed results into account.

Efficiency is a choice

Restrictions and limitations in web design, due to what can be called too much usability, will end up in stagnation and homogeneity. This in turn ignores the benefits, potential and development of the medium. Unlike usability experts as Jakob Nielsen, who are convinced that a designer should only design websites to ensure a frictionless, efficient user experience (→ If everything is so smooth, why am I so sad?), I am convinced that the user is willing and even enjoys experiencing, exploring and learning interesting new interfaces. Of course this depends on the context and goals of the given website. Certainly, using templates or designing websites with given and proven usability rules is efficient. However, it is important to be aware that efficiency is a choice. There are other, often more desirable goals and intentions to visit and experience a website.

fig. 12: bo-en.info

Musician bo-en’s goal for his website for example is not only to promote his appearances on various social media channels, but also to transport a feeling of his artistic practice and personality (→ fig. 12). The design studio Bong Intl. designed a little interactive game for him that keeps the user engaged in the website, always one click on another link away to leave the website for a social media platform. The user experience is designed as following: The user sees a stroke with a dot. The stroke moves up and down on the y-axis in eight octaves by moving the cursor vertically. The dot moves left and right along the stroke on the x-axis on a horizontal cursor interaction. With a click on the blank website the dot transforms to either parts of the artists name, or links to the social media services he uses. The dot then functions as a junction. With every click the user places a new set of stroke and junction. They connect to several vector paths on every additional click. Little figures infinitely move along the bezier curve paths form left to right. Sounds corresponding to the frequencies of the curve path are being generated corresponding to the figures movement.

This website is designed to deal with the artists personality, music and aesthetics without hearing an actual song from him. Contrary to conventional websites, this one does not need a navigation. The interaction is just click based and therefore easy-to-learn. However these clicks provide a narrative structure that engages the user in a personal way. The user becomes the artist. This website therefore represents the artist in a personal, memorable, distinctive and interactively outstanding representation corresponding to the medium. Bong Intl. worked out the strength of the medium and left the presentation of videos, photos and sound to other platforms.

fig. 13: art.yale.edu

Another example of other goals than efficiency in web design is the website for the Yale School of Art form the design studio Linked by Air from 2012 (→ fig. 13). The design studio states that the ‘goal was to give the School of Art a website that would change every day, with no staff to do this. To attract prospective students, an art school’s website should have just as much vitality as the art school itself. And for current students, faculty, and staff, an art school’s website should be as much a part of their shared lives as the school’s physical building is’ (Linked by Air, n. D.). For this reason they built a wiki that can be edited by everyone involved in the school. This system allows a ‘consistent identity’ (Ibid.) and ‘endless permutation and subversion of that identity’(Ibid.).

It can be a thin line between user frustration and enjoyment to introduce an unconventional new interface. The difficult task for the designer is to choreograph this balancing act. I would argue that a user is willing to forgive probable losses of learned usability conventions if the experience offers other qualities than efficiency. Bolter and Gromala state that ‘no digital design can achieve pure transparency or pure reflectivity. Each design is a combination of these two strategies – perhaps with more elements of one or another’ (Bolter and Gromala, 2003, p.67).

Form follows content

In order to design an individual experience it is important to communicate ideas through form (Pressman, 2016). The website is an extension of the content, not just a placeholder. The experience as well as the form ideally follows a design system built upon a content aware concept. Such a concept in interaction design, animation and aesthetics most likely result in memorable, mindful and reasonable interactivity.

fig. 14: arroyo.jon-kyle.com

The narrative navigation concept and structure Jon-Kyle Mohr is using for his documentation of a trip along the Los Angeles river serves here as an example (→ fig. 14). In this case the websites navigation is the route of his tour, centered in the screen. By scrolling, which symbolically resembles the walking, the user navigates from one mark on the route to the next. Contemporaneous, the user scrolls through mobile phone photos of the trip and his written thoughts. Aesthetically edited and ajar to a smartphones messaging app interface – which is engaging and slightly immersive – this has the effect as if the author is in direct contact to the user.

fig. 15: gillesdebrock.nl

Another example for a content aware web design approach is a feature of the portfolio website of Gilles de Brock (→ fig. 15). De Brock’s website uses an image loading animation that aesthetically represents the color compositions, the image manipulation and the arrangements of his artworks. Beware of his own content he presents it in a coherent and suiting manner.

fig. 16: modell-und-ruine.werkleitz.de

Yet another example comes from the design studio Knoth & Renner who designed and developed a website that conveys the content in a unique way for the Werkleitz Festival 2019 in Dessau (→ fig. 16). Based on the materiality and structures of ordinary ruins, the graphics, interaction and animation in this website are brought together in a holistic and content aware concept playing with the tactile materiality of stone as well as the evanescence of the ruins. In a figurative sense the user interactively scrolls through time which is symbolically presented by the growing ivy plants. On every scroll more ivy covers the surface of the website. The content here is not just presented but literally becomes the surface the user operates upon in a poetic way.

fig. 17: volksbuehne.berlin

A content aware approach to web design may also be achieved by building a web design concept around the features that are most important to the website like Manuel Bürger, Till Wiedeck and Systemantics impressively demonstrated with the website for Berlin’s Volksbühne theater (→ fig. 17). Despite conventional theater websites, which mostly work with huge images of their current plays on the landing page and therefore only present the content, the Volksbühne brings the functionality of the timetable to the fore and therefore deals with the content in a way that focuses more on the diversity and quantity of the content rather than to be an visually aesthetic choice. The diverse program of the Volksbühne is placed prominently on the landing page directly under the news section. By scrolling, the user navigates through the left aligned timeline with the daily program. On the right a color marked indicator serves for user orientation on a calendar that points out the day the user scrolled to.

This design approach is content aware in the sense that it literally knows its content, is able to deal with the diversity and quantity of it and moreover manages to handle the content in a highly functional but still aesthetically sensitive way.

The coexistence of code and design

The user deserves an individual and distinctive experience, a diverse web landscape as well as meaningful interactions. Using frameworks most likely hamper the creative thinking of the designer. When coding is understood as a creative tool the ability to code enlightens a free thinking in design possibilities and thus stimulates the design. Naturally, it then most likely is part of the creative process as well. In order to design and develop a coherent system, it is fortunate if the designer is also able to develop, or at least has a deep understanding and knowledge about how to design the system he creates. Simon Sweeney from Bong Intl. said in an interview: ‘In a more traditional sense, imagine the possibilities if the standard graphic designer also built the book. If we manage the production of the end product, we can make decisions that just designers maybe can’t’ (Melita, 2017). Simon Sweeneys practice Bong Intl., which he runs together with Ben West, realized many corresponding websites to this thought like the previously mentioned website for the musician bo-en.

fig. 18: ilarilaamanen.com

Another website that has a feature, a designer without coding skills could barely come up with, is the website for curator Ilari Laamanen (→ fig. 18), which was designed and developed through the collaboration of Johanna Lundberg and Nate van der Ende. The feature is an unconventional slideshow that is aesthetically unique, functional and suits the curators selection of artworks. The presented image is centered in the screen. If the user moves the cursor to the left or right, either the previous or next image thumbnail of the slideshow is displayed as a preview on the cursor. In the background the previous or next image is displayed in a stretched way that represents the aesthetics of the curators projects in a content aware manner but also simply indicates a change status.

fig. 19: departmentofnewrealities.com

Last but not least, the work of Bureau Cool underlines once more the great potential that lies in the beauty of being able to not only design but also code a website. For Wieden + Kennedy’s future forward division called Department of new realities (→ fig. 19) design studio Bureau Cool managed to create a very unique and psychedelic experience by experimenting with 3D objects in the web. Here the landing page showcases 3D shapes floating around a checkerboard landscape. By triggering a click a twisted black hole opens up. The interactive sound effects support the immersive experience. With this website Bureau Cool accomplishes to represent the company’s future forward work with a tech savvy aesthetic and interaction that was only thinkable and feasible by a designer that is deeply familiar with the development process and technology.

The human, the machine and
what’s in between

Like Donald Norman recently said he is more interested in an emotional bond between the user and the machine (→ Generic template design). I too believe in the necessity for what web designer Jon Lucas refers to as a human web design. A content aware, handmade web makes the user feel a deeper connection to the content that is represented. Designed in a conscious manner, a website can be personal and individual; it can convey the content in a meaningful way and thus transport a more human feeling. Likewise Jon Lucas’ position towards web design, designing with humor and fun can be a way to achieve a more human web. A website could be regarded as a mirror and can deal with the user in many emotional ways and is thus much more than a guidance through a thoughtless process.

fig. 20: bloomberg.com/features/2016-hormel-spam

Examples that seem to achieve this more human like experience are the feature websites of Bloomberg Businessweek. As a representative serves the article about Hormel’s Spam11 from 2016 (→ fig. 20). Here the human feel is achieved with a humorous trick. The scroll length of the article is featured by cubed meat coming out of the Spam package in the length of the scrolled pixels.

fig. 21: marsano-berlin.de/produkt/seasonal-exotic-twist

Another example of combining humorous interaction in a meaningful way is the micro interaction of the flower shop Marsano in Berlin (→ fig. 21) created by design studio Hello.me. In this content aware micro interaction the user can select on a timeline what the flowers will look like a few days after they were bought. By clicking through the passed days the images of the flowers merge from one to another in a carefully animated fading transition, which gives the impression of time passing by. In a poetic way design studio Hello.me does not whitewash the transience of the flower and handles this characteristic more like a feature than a bug.

Consistency is key

According to Bolter and Gromala ‘graphics are not merely cosmetic. When they are clear and consistent, they contribute greatly to the ease of learning, communication and understanding’ (Bolter and Gromala, 2003, p.48). Moreover, they point out why visual consistency is important in an interface that is not only built upon conventions and standards: ‘The purpose of visual consistency is to construct a believable environment for the users … Simple design is good design. Simple designs are easy to learn and to use, and they give the interface a consistent look’ (Ibid.). On top of the visual consistency component I would add another aspect which seems to be relevant: interactivity. Interaction design and animation is not just an add-on for a smooth and flat experience. In fact interaction design and animation concepts contribute greatly to the clarity and orientation of a system. They transport feelings, meanings, narration and spatial logic. As a consequence, in order to create a credible web environment it seems to be necessary to work out a detailed interaction and animation design concept.

fig. 22: hgb-leipzig.de

The website for the Academy of Fine Arts Leipzig designed by Knoth & Renner in collaboration with Lamm & Kirch impresses with the use of a rather unconventional web design and visual consistency (→ fig. 22). The complexity of an institution like an art academy calls for a detailed consistent visual system to understand the deep layers and site structure packed in a graphic design that best represents the diverse content that is mostly produced by the art students themselves. To achieve this, the designers worked with strokes for mental separation as well as multiple stroke weights and font sizes for showcasing hierarchy, still leaving enough space for the content to unfold.

fig. 23: remybriere.fr

A rather simple example for interactive and especially spatial interaction consistency is the website for the artist Rémy Briere by web designer Tristan Bagot (→ fig. 23). On the first look this website example looks like a standard generic artists portfolio template done with e. g. the indexhibit CMS12 but convinces with consistent spatial logic in animation. By clicking on a menus project title, the other list elements of the menu slide left out of the screen while the clicked element positions on top. In the same manner the images of the selected work slide from the right out of the screen to the center. This feature makes the portfolio unique and memorable.

Conclusion

In Javascript ‘the preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur’ (W3schools, 2019). The description of this method can be carried forward to a wider extent and another view on designing websites in general: To prevent the future of web design to become default and by that impersonal and interchangeable, the Internet needs web design to be bright, rich, diverse and personal. But unlike the Brutalist web design counterculture, this other view on designing websites needs a content aware approach as well as a consistent concept and easy-to-understand and easy-to-learn visual and interactive design. However, too much usability restricts the possibilities of the medium and diminishes it. The full potential of the medium can only be reached by a broad knowledge on design and code. As a consequence, designers need to deal with programming and development in order to not be dependent on frameworks, templates and guidelines, thus be free in thinking beyond technical limitations and the obvious design solutions. Coding should be embraced as a creative expression. Being able to code as a designer contributes to a more coherent and profound understanding of the project and thus enables a more diverse, unrestricted and free process in developing websites. As a result, it allows the designer to have more possibilities, freedom and control over the production and outcome. To avoid web design disappearing in too much smoothness, unnecessary interaction and white space, a more individual, memorable, distinctive and human experience for the user is what seems to be important to reach for goals beyond pure efficiency and to achieve overall diversity in the landscape of the World Wide Web.





event.preventDefault();
Another on designing websites

Author: Maximilian Kiepe
Publ. offline: 26.11.2019
Publ. online: 13.01.2020

Research: www.are.na

Thanks to:
Andrea Sick, Are.na, David Liebermann, Fabian Kiepe, Jana Etmann, Jana Reddemann, Niklas Kiepe, Pascal Deville, Ralf Baecker 💖


Maximilian Kiepe is a webdesigner and developer based in Hamburg, Germany. He is the co-founder of the Digital Design Studio Liebermann Kiepe Reddemann, which he founded together with David Liebermann in 2014 and united with Jana Reddemann in 2019. The studio got featured in many renowned design and webdesign blogs such as Hoverstat.es, It's nice that or Brutalist websites. Amongst others, the studio exhibited their work @ Graphic Design Festival Scotland and @ Typomania Festival Moscow. They gave lectures @ Typomania Festival Moscow and @ HGB Leipzig and gave several workshops i.e. @ HFBK Hamburg, @ Burg Halle, @ HCU Hamburg or @ HGB Leipzig. In 2019 they were web residents @ Urbane Künste Ruhr Festival.