Strategy Three: Bridging Conventions

Interview with Laurenz Brunner

20 Jul 2015

Laurenz Brunner is a graphic designer based in Berlin. He runs a design office specialising in editorial design, communication design, visual identities and custom typefaces, operating internationally within the cultural domain. He is a member of the Swiss type foundry Lineto which published Akkurat (2004) and Circular (2013). He teaches graphic design at the Gerrit Rietveld Academie in Amsterdam and has been guest critic at various art and design institutes.

Tell us how you started as a graphic designer and how you started to combine digital strategies in the course of your career.

I had a pretty classic print based education. Going through St Martins and Rietveld Academie, interactive was not really a subject in the curriculum. In the early days of my career as a graphic designer, when asked to make a visual identity for an institution, we would think a lot about the invitations, about the posters, the letterheads and business cards as part of our proposal. And then somehow, almost when that whole design range was approved, we would think: “Ok, now we also have to turn it into a website.” It was a kind of a retroactive consideration. And sometimes, we had to outsource it to web designers. I started to understand somehow the potential of web and how it should be more of a core element. In terms of what the visual identity constitutes and how the website could even actively work as a generator for print media, rather than the other way round. So we started thinking about the role of the website much more actively, while also realising that printed items, such as printed invitations or printed posters, would become more and more marginalised. Many clients I work with basically stopped producing printed invites. There was a natural shift to having to think about digital strategies and how to promote an event with social media rising. You realised that, when having a good online presence, you could reach a lot of people and make it an engaging experience.

Can you give us a specific example of this shift to digital that you were part of?

Offprint 2015 website

One of the key moments for me was when I was asked to brand or to conceptualize Offprint Paris, the art book publishing fair, about five year ago. It was a provocative idea; being a book fair all about books and objects, we somehow were interested in the potential for keeping the promotion for this book fair purely digital. So no posters, no invites, but somehow a purely online platform and a purely online communication strategy. That was a bit of a turning point for me as well, to realize the potential of a website as something which you can create visual identities with, which would remain dynamic and could evolve. For Offprint Paris, with each edition, we are coming up with a new visual identity. And we are introducing new behaviors within the website itself. We are thinking quite collaboratively, as well. We have invited artists, poets or people we collaborate with to come up with the campaign which renders through the mean of the website. So it’s a fascinating medium for us right now. It offers a lot of room for experimentation. It’s quite free. There are very few conventions established compared to how you are designing a book, for instance. When you are designing a book, you are always looking at a legacy of five hundred years of bookmaking and obviously the mechanism of a book has not changed. On the web, I feel totally free. It is such a young medium.

In your opinion, what makes web design more attractive than other graphic practices?

One of the things I really love about web is how quickly you can go from an idea to a live website, sometimes in a matter of days. We have developed websites and coded them within a few days and it was quite a satisfying experience. If you now look at architecture, we can say that it is quite comparable to graphic design in terms of the development of an idea and its conceptualisation. But this conceptualisation phase is proportionally very small compared to the execution or the building phase. You are spending maybe two months on the creative development and then three years or even longer on the execution. So there is an enormous disproportion between creative development and production. Graphic design already is a faster executed medium. It also has a shorter lifespan. You don’t want a poster to be around for too long. It has a time specific or a location specific purpose. After the event has taken place or so on, you are quite happy for the poster to be torn down or a new poster to be hung up at the same place. In a way, web is an even faster progression of that. You can develop something with little budget and you can almost instantly publish it, if you have the tools available to code. That’s definitely something quite exciting.

How do you develop your projects? Do you apply a particular method?

In general, we always take the content as a strong point of departure. We try to understand, identify and critically reflect on the content, and look for cues on how the design could be routed in that. I guess it’s a big part of our practice, just to try to understand and critically reflect on the substance. The better we understand the content, the more we can try to articulate a design solution which is highly specific to that type of content, and therefore enabling a visual solution which is unique to that content. Instead of continuously working on a style or a form of expressing, which is interchangeable in terms of content, we look for the other way round. We look for highly specific ways to convey content, in order to arrive at different solutions each time. I think that method goes across all media. The idea to find an original form of translating content into a book, laying things out and special ways of printing just translates the same way as our considerations on how certain types of content could be presented on the web. And of course, on the web, this element of interaction is a really exciting thing. We have transitions and animations. You can work with scale in a really interesting way. Nothing is static. Everything can grow. Of course, experimentation and application always goes back and forth. Sometimes, in the process of researching for a project, we stumble across a behaviour or an effect or an idea which we are quite excited about, but that we can’t apply directly to that particular project. So we collect these ideas for a new question, a new project. It’s an organic process.

How do you deal with the idea of form and function? Do you relate to those terms when you are working on a website?

Form and function always go hand in hand. I cannot arrive at a solution which is purely functional or purely formal. So, these things obviously depend on each other. How can design help the accessibility or the understanding of these contents in terms of functionality and functionality give access to this information? That does not necessarily lead to an interesting form of solution, but again we are just trying to isolate these different requirements. For example, giving easy access to information or helping the reader to understand what is being communicated in the text or through imagery can lead to an unexpected form, but it can go both ways. Let’s say that a text or the structure of a text could create a formal interest, maybe this set of imagery or video content could inspire to think about a narrative, which is not necessarily functional or accessible yet, but which then challenges to live up on the functional side of things to find an answer which allows easy accessibility. Sometimes, you don’t want things to be easily accessible. You want things to be the reading experience or the interactive experience. You want that experience to be difficult or complicated, because it creates a slower and therefore longer interaction, as opposed to an immediate delivery. In another project, this might be a complete failure. It really depends on the nature of the project, the nature of the content, the nature of the audience, all of which allow to shape that kind of narrative, sometimes coming from a more formal point of view, having to fulfil functionality, sometimes starting with a more functional consideration and making sure that the form is up to the same standards at the end.

How do you deal with the reading conventions on screen?

Offprint 2012 website

I think it’s interesting how, with each website, you have to subconsciously educate the user of the behaviour of the site, or the logic or structure of the site. Just as an example, the main navigation changes in terms of position and in terms of functionality. Simply said, sometimes the main nav is on the left side of the browser, sometimes it is at the top, sometimes you scroll, sometimes you have slide shows you click through. Someone who arrives at a website for the first time has to familiarise themselves with it over a very short time frame to be able to navigate satisfactorily this content. So, unlike a book, which you could assume everyone is going through in a linear way, with websites, there is no such thing as a beginning or an end. There is no such thing as a linear read. I think websites by nature are very hyperlinked. They are more like networks. And therefore, that produces a lot of grounds where you can experiment with unexpected behaviours, unexpected reading directions, as an attempt to maybe challenge certain conventions. With Offprint Paris, one of the things we did there was superimposing the conventions of a book to the nature of the browser window. Somehow, we believe that typography online is still better readable when it’s static, as opposed to scrolling constantly. With the Offprint website, the type is essentially static and the page is swiped, which means that the actual information you are reading is not moving, and therefore it becomes easier to read. We also did that as a way of challenging what has worked in books and testing how it translates to the web. We are continuously interested in how reading conventions can be reconsidered on the web. There are possibilities to overcome the constraints of line breaks for example, or the constraints of having to turn pages. This is going to be a really interesting development.

And what about the reading experiences?

People still like to think that reading in books is better than online, but they don’t realise that they are reading disproportionately more online than they are picking up books. I think it’s a slow transition, which has kind of shifted to an extreme. I think we will have to embrace the fact that we are going to read much more online than in print. And I think it will be up to us, designers, to consider ways to make that experience of reading the most comfortable. But obviously, the role of type and typography online is also becoming less and less important given that dynamic content, video content, is already showing to be more popular than static images. It will be interesting to see how that will shape consumption in exchange of continuous information online. You can really see that on Facebook.

Keeping in mind the observations you just made, do you have the feeling that you adopt another sensibility or another approach when you do print?

Absolutely. Every day that’s one of the strongest realisations I have. Looking at my recent work, I feel I have learnt so much from working online, and collaborating with people who can program. Once you start learning and understanding things in a fully dynamic and fully interactive environment, when you are back in a purely static print medium, you can become slightly frustrated about certain things; the rigidity of how type behaves in print medium, having to deal with line breaks, page breaks and moving foot notes around. On a website, everything is more dynamic and modular, simply by the fact that you can’t have a static layout. The layout has to change responsively from a portrait format to landscape format, depending if you are looking at it on a phone, or on a landscape screen. It has to work in different sizes, which is another interesting challenge compared to a book which you have to format to one dimension. On the web, someone might be looking at it on a large-scale screen or someone else might look at it on their Apple watch. So, you have to think about design in a more adaptive way, which again is something I have been trying to explore to some extent in print. Of course the staticness of a book is also an important aspect, the fact that it is archiving data information at a particular point in time, whereas online information is constantly updated. I am very interested in the relationship of on and off line media. A lot of the books that we have been making recently have been informed or inspired by interactive online content.

The idea of obsolescence was significant during the workshop you gave at ECAL, could you explain what was your intent?

We looked at a lot of evidence that things are disappearing in the material world, things which are surrounding us and have essentially passed their validity or passed their necessities, but are still floating and are maybe on the verge of disappearing: the phone booths being a very obvious example of that. Cityscapes are still dotted with these architectural marks that carry a lot of culture identity and have been part of that cultural history. You need to remember how these devices have been represented in films or have been important in movie narratives, but have essentially been rendered completely out of necessity and out of function, given that everyone carries a cellular phone around. We were interested in observing these islands, sometimes physical, sometimes intangible. We asked students to sharpen their observations towards the things around us which have already entered a space of non existence. To meaningfully speculate about the future is to look at any given point in the past and compare it to our future and somehow extrapolate from there to an extended trajectory of how certain things might develop. I think the workshop successfully allowed us to have a dialogue about what is around us, what is still meaningful or what has entered a kind of transcendence zone.

What kind of original models these observations can bring in terms of digital strategies?

The question was not just to identify those things like a phone book or handwriting or physical money, but to come up with interesting strategies to document, or collect evidence that these things are in the process of disappearing. And again, because of the different natures of these topics, diverse visual or textual strategies were developed to capture those phenomena. I believe that the variety of the answers create an important picture. We are very much hoping that this archive can grow and that other people can contribute to it beyond that initial workshop. That kept being the main goal for us, to create a platform, which people can meaningfully contribute to and where they can reflect on some of these phenomena and cultural developments around us, which are slowly disappearing.

Staying on the notion of archiving, you are taking part in the communication of the documenta 14. What are the challenges of archiving an event that generates such an important body of information?

One of the realisations I had in terms of physical archiving and digital archiving of information is that documenta has a very extensive archive and there is still a process of catching up on archiving the mass of information and the material that is inherited from the previous exhibitions and the previous artistic directors. But what has been quite interesting to see is that the last two documenta, which were created in the digital era of communication, taking place predominantly online through means of writing emails, pose an even greater problem in somehow meaningfully organising and archiving the information which has been produced in the course of the exchanges between artists and curators, for example. In the sixties, or seventies, the artists or invited participants of documenta potentially exchanged letters or construction plans, in the course of the development, with the artistic director or the co-curators. This would produce a series of letters, maybe a handful of them, with informational value and all of these letters together produced an art historical body of information, which is important for an archive like that to store. But now, since our artistic directors and co-curators email everyone involved including the artists, there are literally hundreds of emails, a lot of which have very little information value. This is the typical problem of every librarian and information scientist, in your contemporary settings, you should never make judgements over what might be relevant information in the future. I find that to be quite an interesting phenomenon, which is connected a lot to the way we are communicating and consuming online information today.

With this particular documenta, you are engaging in a really concrete situation of political decisions by organizing a part of the event in Greece.

Documenta is one of the largest art events in the world. The history and the origin of documenta were installed in a place of urgency at that time, in Kassel, Germany. For this documenta, Greece was identified, not as a kind of romantic and desperate place, but as a place where some of the most interesting contemporary art developments were happening in the shadow of this economic crisis. Athens is on the one hand in an extremely difficult economical gridlock with the negotiations with the Euro zone and the frustration with their crippled economy, and at the same time, a younger generation, a lot of them jobless, are approaching this dilemma with the kind of optimism and energy that express in an extremely thriving art scene. We are all very interested in the kind of ambivalence and ambiguity of these unstable conditions. The last thing we want to do is a colonial statement and arrive in Greece with a symbol of hope. It is much more like an attempt at learning from these modes of uncertainty and from a process of drifting, as opposed to aiming at a particular target. When you are learning, you are essentially the one receiving. You are listening. You are not talking. And for documenta, to be put in the position of listener, it is an extremely refreshing idea, given that the event has become one of the largest art events in the world.

Can you let us in on the current preparations for the communication of documenta 14?

Although the event will take place in 2017, we have already started working on a lot of the foundations of what ultimately will become the communication of the event. An initial website has been launched as a kind of signal towards Greece. In terms of visual identity, one of the main themes for us has come not only from the dual geography of this event, being in Germany and Greece simultaneously, but also from the variations in the three languages that we will use: Greek, English and German. English and German share the same script, but Greek doesn’t, so there has always been an ambition to somehow deal with that relationship in an original way, not just having to choose one or the other, and having everything juxtaposed, in this left, right scheme. We have experimented with a duality as a constructive rhetoric. We have also avoided producing a singular logotype, or a visual which can be quoted as the brand of documenta. As a matter of fact, different studios will take care of different project areas over the course of documenta. We just happen to be the first, but there are other studios that will work in Athens, on location, and other studios that will work in Kassel, on location. And someone else will make a book at a later point. There is also this idea of a non-corporate communication strategy, not even attempting a unified homogenous voice, but allowing for a multi-faceted communication strategy and using this as part of the identity of the event. With the visual identity, we have consciously introduced a couple of ingredients that can grow and be re-appropriated and lost again and picked up by other designers. So it’s not just a rigid branding template which everyone follows, but it is much more of a kind of play field, which we have already started working with. We are very interesting in seeing how others, the audience and the collaborators, will interact with it.

Latest Resources

✂ Copy and ? Paste Emoji ?
getemoji.com

No apps required.

Computer Virus Catalog
computerviruscatalog.com

They steal our files, corrupt our hard drives and destroy our lives. We scan. We block. Do everything we can to prevent infection. Computer viruses. We hate ’em. Nevertheless, we remain fascinated by their evil plots. This fascination led to a new kind of art collection – Computer Virus Catalog. The worst viruses in computer history interpreted by artists around the world.

Founded & curated by Bas van de Poel

Scrolling on the web: A primer
blogs.windows.com

Scrolling is one of the oldest interactions on the web. Long before we had pull-to-refresh or infinite-loading lists, the humble scrollbar solved the web’s original scaling problem: how can we interact with content that’s stretched beyond the available viewport?

Resilient web design
resilientwebdesign.com

Resilient Web Design, you might think that this is a handbook for designing robust websites. This is not a handbook. It’s more like a history book.

A Handmade Web
luckysoap.com

‘handmade web’ to refer to web pages coded by hand rather than by software…

Eloquent JavaScript
eloquentjavascript.net

This is a book about JavaScript, programming, and the wonders of the digital.

The Future of Browser History
medium.freecodecamp.com

About browsers history, and how we tend to browse nowadays.

Swiss in CSS
swissincss.com

Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement.

Automatically art-directed responsive images
cloudinary.com

by Eric Portis

WHAT IS CODE?
bloomberg.com

Businessweek, June 11, 2015
by Paul Ford

Interview with Tom Krcha, Adobe XD
subtraction.com

Adobe released the first public preview of what the company is now calling Adobe XD, its their major new UX/UI design and prototyping tool.

Typography for User Interfaces
viljamis.com

A recap of how far type in UI has come, where it’s going (VR) and what to look for when choosing a workhorse for your next interface. (via Atomic.io)

Typeface As Programme: Glossary
typotheque.com

A glossary of tools and technologies mentioned in Typeface As Programme.
by Jürg Lehni

Declarative Design Tools
jon.gold

Our brains and computers are fast; our hands, mice and keyboards are slow.

Roger That: Emoji Overdrive
ia.net

A font that turns the 2,000 most used English words into emoji.

Layout in Flipboard
engineering.flipboard.com

Flipboard Pages, a layout engine that turns web page articles into magazine pages for the iPad.

Use Your Interface
uyi.io

UYI, is a place documenting the uprising of motion based interface patterns.

Google Fonts
fonts.google.com

Google’s new site for Web fonts.

 

 

New Yorker cover comes to life
itsnicethat.com

Malika Favre’s illustration for this week’s New Yorker magazine has been brought to life by French animator Mathieu Maillefer.

Natural User Interface

In computing, a Natural User Interface (NUI) is the common parlance used by designers and developers of human-machine interfaces to refer to a user interface that is effectively invisible, and remains invisible as the user continuously learns increasingly complex interactions. The word natural is used because most computer interfaces use artificial control devices whose operation has to be learned.

Graphical user interface

In computing, a graphical user interface (GUI, sometimes pronounced “gooey” or “gee-you-eye”) is a type of interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, as opposed to text-based interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on the keyboard.

Parallax scrolling

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.
Web designers began incorporating parallax scrolling in 2011, using HTML5 and CSS3. Websites with parallax backgrounds are becoming an increasingly popular strategy, as advocates argue it is a simple way to embrace the fluidity of the Web.

WebGL

A Web Graphics Library (WebGL) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

Twitterbot

A Twitterbot is a program used to produce automated posts on the Twitter microblogging service, or to automatically follow Twitter users. Twitterbots come in various forms. For example, many serve as spam, enticing clicks on promotional links. Others post @replies or automatically “retweet” in response to tweets that include a certain word or phrase. These automatic tweets are often seen as fun or silly. Some Twitter users even program Twitterbots to assist themselves with scheduling or reminders.

UEM

User experience moment.

Usability

Usability refers to how easy it is for a visitor to your site to use your site in its intended manner. In other words, are navigation, content, images, and any interactive elements easy to use, functioning the way they were intended, and that your intended target visitor will not need any special training in order to use your site.

Permalink

Short for “permanent link.” Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post. Since most blogs have constantly-changing content, the permalink offers a way for readers to bookmark or link to specific posts even after those posts have moved off the home page or primary category page.

Pageview

A pageview is a request for an entire web page document from a server by a visitor’s browser. In other words, for each page view your site had, someone (or a search engine spider) looked at that page.

Meta data

Meta data is the data contained in the header that offers information about the web page that a visitor is currently on. The information contained in the meta data isn’t viewable on the web page (except in the source code). Meta data is contained within meta tags.

Hypertext

Hypertext is any computer-based text that includes hyperlinks. Hypertext can also include presentation devices like tables or images, in addition to plain text and links.

Hyperlink

A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way (text is often underlined or put in a different color or font weight). The inclusion of hyperlinks are the “hyper” part of “hypertext.”

Hit

Contrary to popular belief, a hit does not represent a single visitor to a website. A hit is actually a request for a single file from your web server. This means one page can actually generate multiple hits, as each page generally has more than one file (an html or other base file, a css file, multiple images, etc.) and each one is requested from the server whenever the page is loaded. Some marketing people like to quote hits to unknowing consumers as the number makes their site sound like it’s getting a whole lot more traffic than it actually is.

Focal Point

The focal point of a web site is the spot on a web page that they eye is naturally drawn to. This could be an image, a banner, text, Flash content, or just about anything else. You want to make sure that whatever is acting as your focal point is the most important part of your site.

Fixed Width Layout

A fixed width layout has a set width (generally defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers. Designers have more control over exactly how a site will appear across platforms with this type of layout.

Elastic Layout

An elastic layout is one that uses percentages and ems for widths paired with a max-width style to allow the site layout to stretch when font sizes are changed. It’s ability to flex to accommodate the browser width and reader’s font preferences are where it gets its name.

Cascading Style Sheets

Also referred to simply as CSS, Cascading Style Sheets are used to define the look and feel of a web site outside of the actual HTML file(s) of the site. In recent years, CSS has replaced tables and other HTML-based methods for formatting and laying out websites. The benefits to using CSS are many, but some of the most important are the simplification of a site’s HTML files (which can actually increase search engine rankings) and the ability to completely change the style of a site by changing just one file, without having to make changes to content.

Cache/chaching

Cached files are those that are saved or copied (downloaded) by a web browser so that the next time that user visits the site, the page loads faster.

Bounce rate

A website’s bounce rate is the percentage of people who leave the site from the same page they entered the site, without clicking through to any other pages. This can be a good indicator of how good a website’s navigation is, as well as an indicator of the quality of the site’s content (a very high bounce rate doesn’t bode well for either of those things).

AJAX

Stands for Asynchronous JavaScript and XML. AJAX is typically used for creating dynamic web applications and allows for asynchronous data retrieval without having to reload the page a visitor is on. The JavaScript on a given page handles most of the basic functions of the application, making it perform more like a desktop program instead of a web-based one.