Strategy Four: Digital Tailoring

Interview with Dan Michaelson

18 Jul 2015

Dan Michaelson is a co-partner in Linked by Air and lecturer in graphic design at Yale University. Linked by Air is an award-winning graphic design studio based in New York City, specializing in the creation of design systems and technological platforms that grow with institutions. They work with major cultural and educational organizations, charities, artists, architects and corporations.

Tell us a bit about how you became involved into designing digital platforms.

I started Linked by Air with my partner Tamara Maletic around 2005. We met in graduate school at Yale. She had a parallel set of experiences as a student of maths and humanities. Both of us have always been interested in systems that are networks and in how people or users find their own ways through space and how they change that space.

We often talk about our work as being one that is interested in the design of public spaces, that is when we are working on an exhibition or a game or thinking about a website or an app. I think the way we see these projects is through the lens of lots of different people using and sharing these spaces.

What are some of the important shifts that have happened in your field since you began?

The importance of mobile is a big change in the last ten years. It’s exciting because that’s an area that really connects users that are moving in real space with technology.

Additionally, in the start up industry graphic design is more important than it’s ever been, in particular in the practices of many different tech companies. But, in another way, that design can be very homogenous. So it puts design firms like us, that are starting from a graphic design perspective rather than from a product perspective, in an interesting place. And it puts schools like Ecal in an interesting place too. On the one hand, you’re working in a field that is really important to the current culture. On the other hand, you are coming at it from the perspective of the surface, the aesthetics, the design, the graphic design, rather than coming at it from the perspective of the product. In a sense, you have these two cultures talking about design, but talking past each other.

It seems that the aesthetics of your work differ according to each project’s requirements. What are your thoughts on having a house style for digital design and how do you adapt your own vision to specific projects?

Whitney Museum website by Linked by Air

First of all, we are very focused on functionality and on the user experience. By users, I mean the end users of the site and the content authors, who are often staff at the institutions or clients that we work for. So, in a sense, a lot of our conversations with our clients actually start with functionality and our designs sort of flow from that. In our interactions with our clients, the visual language or colour or the choice of font can be a relatively minor part of these conversations. It is this inevitable thing that derives from the functionality or from the requirements of this system that is shaping out.

We do have a kind of ongoing agenda or story that we are telling, which manifests itself in our visual designs and in the set of functionalities that we propose to clients. It is largely coming from our clients’ needs, but of course, it is also coming from our own personal ideas about functionality systems in the world in relation to the requirements of that project.

But I guess we don’t have a house style. Still, we do have a way of looking at the world or at a set of things we think are beautiful, in particular in relation to the problems that are entrusted to us. There are visual ideas that recur and repeat and also things that we think work well and feel like us. Then again, there is also a great variety in our projects, which is a reflection of the different voices of the designers we have in the studio.

You work on the creation of design systems and technological platforms that grow with institutions. Do you need a particular mindset to get these systems to expand and evolve?

I think it’s really important to understand programming and not just front end technologies like CSS. Designers also need to understand back end structures like databases and servers. They need to think of a database as a dynamic structure devised into tables of data, each of which has its own unique structure. They need to grasp how it is mapped onto a visual design and again how that is mapped onto a user experience or flow through the site and the ways users change the site. I do think that it is really essential to be able to conceptualise a design and the way that design can live in the world and be shaped by content authors and users over time. On the front end, I also think that designers need to understand CSS and I think designers who ignore the web are confining themselves to an increasingly small niche of relatively marginal design.

That said, I do believe in a separation of roles as an option. I don’t think that designers need to be programming their own work, but they need to understand the systems and be able to work intuitively and very closely with programmers. When you develop a design, you develop that intention with a really deep knowledge of what is possible from a programming point of view, the way the world works, the way these systems work and grow and what is going to be efficient or economical to implement.

Tell us about the brief you created for the workshop at ECAL and its outcome.

The website created during the workshop with Dan

I got some inspiration from a project we had done for the Yale School of Art and I asked each student to invent a module from scratch. That module could have any functionality and any design and the only limitation would have to do with a grid that would bring these modules into a spatial relation with one another on a page. Moreover, this brief had to include the students’ experience in New York, as they had recently visited the city and each of them had developed a set of photographic essays about themes they had uncovered around the five boroughs of New York. In other words, each student had to develop a unique module, a unique way of presenting their approach to New York and what they had uncovered about the city through their photography.

That module would be a sort of a filter, a way of presenting content but it could potentially accept any content. For instance, if one student thought their photography was about looking down on the ground, then this would become a module uniquely suited for presenting downward looking imagery or the idea of ground, although it would not necessarily present that student’s photographs. It could be something that could be further populated in the future. This ground module could be very appropriate for presenting grounds or floors but it could also be used to talk about New York City as well as other cities or other things.

All of the modules then came together into this diverse set of types in a way, onto this one page with all of these different types of content and imagery. It became a nice metaphor for a city that is as unplanned as New York where, although you have a grid system encompassing residences, businesses and pedestrians, what actually grows on that grid is up to individual entrepreneurs. That was the structure of the workshop. I think it’s a good structure, not just for a workshop about New York, but also for a design in general. It is a structure that we have often employed in the studio, in various different ways.

How did students do in this workshop?

I like that fact that they worked together. In a way, they were working autonomously, each working on their own module but then again, they were working collaboratively, thinking about the synthesis of all those modules into one whole website.

One thing I also wanted to mention is that there was a range in how students looked at the city and how much they wanted to generalise those observations or translate them into a totally different domain, which is the domain of interaction design, the domain of thinking about the user experience. And there was often a sort of push and pull in the workshop between interaction design and a website, this last option being more a sort of crystal goblet representing their imagery of New York rather than an interaction that was a set of metaphors for their experiences of New York. Maybe not a surprising conversation but definitely a pretty interesting one and it made the workshop quite challenging in the best kind of way.

Still using the workshop as background, can you illustrate the relationship between the designer, author and user in a system engineered to grow and evolve over time.

“Pick 3” module

One of the students in the workshop developed a module called a “Pick 3” module. She invented something like twenty-four key words or tags that she observed in her photography of New York. As a user, you then click on three tags, each of which giving you an image. After the selection of the three tags has been made, they go away and you are presented with a dynamically generated photo. Each photo that is shown to you is a photo that has at least two of those tags. You click through those tags and once you get through the whole essay, it starts over again showing these twenty-four tags to choose from. It’s a simple game board that she invented. She also designed what that interaction looks like in the shape of that module. That’s hers as a designer, as an author.

Then again, other people can populate content in that module. Another author can come along and edit the page or make a copy of it and choose a different set of twenty-four tags. She is the one who uploaded this database of images that the users are going to see, but another author can come along and edit the page or make a new page and load different images or he can put more than one of these modules on the page. This is in the functionality that we built. So you can have one “Pick 3” module with her images and another “Pick 3” module with a different author’s images and tags. In other words, she created the system, she created the interaction design and the interaction flow. She decided what the interface looks like and feels like and she put in the initial content. But another author can come along and put in a different content.

And finally, she left it up to the user to choose what tags they are interested in. Of course, you get thousands of different outcomes depending on what choice an end user makes when clicking on these tags. She did not plan all of these outcomes out, but she has a sense for what these outcomes might be like. That is an example of a relationship between a designer, a content author and an end user. It is a triangle that you can kind of predict the contours of but, as a designer, you are also going to be surprised by the different outcomes that might be generated and the different ways people are using it.

How do you teach the relation between the content management system and the front end of a website?

In this workshop, it was neat because it was the content management system that was the brief, in a way. That was the given structure, which was a functioning code base.

In my class at Yale, called “Networks and Transactions”, we explore the creation of databases and server side software and the billions of transactions that occur every day between web browsers and other devices and servers around the world. Students start to get their head around that flow of information and original transactions, how content can change over time and how it is structured to think about how users move through the system from moment to moment, day to day, year to year.

We think about databases and digital networks as being an essential medium that you need to know about. So we are working hands on, literally monitoring networks and sending information across networks. We are reading about the politics of the development of the internet protocols and reading history and science fiction and criticism in order to give students a foundation in that domain.

We also learn to programme the front end and back end and we think up design projects so that the students are creating websites or inventing and programming a content management system that is optimised to store the content of their choice. Really, it is a design class, where students are evaluated based on the designs that they make, on the things that they produce and that we can use and test. It has a triangle of three parts.

In your opinion, what are the skills or attitude that will be essential to have as a designer in the future?

You are constantly faced with different options from new technologies, whether it is a new printing technology or the invention of the Macintosh. I think designers today probably are better equiped to adapt to change than previous generations of designers, because the idea of technological change is now such a prominent aspect of our culture, rather than this kind of thing that hits you from behind. I think you need to use the stuff that is in the world. Use the web, get a smartphone and pay attention to the things you are using and that you like and don’t like.

Latest Resources

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.

Google Design
design.google.com

Google Design is a cooperative effort led by a group of designers, developers, writers, and UX advocates at Google whose goal is to capture and share their work and ideas with the user.

Color Library
colorlibrary.ch

“Color Library” is a database of color profiles for artists, designers and printers who are looking for a novel yet professional color management solution. These new tools can convert images for printing devices using two, three, four or five spot colors. It offers a large variety of combinations, from basic colors to metallics, neons and pastels.

Abstract Browsing
itsnicethat.com

Digital artist Rafaël Rozendaal is turning the internet inside out with an exhibition at Steve Turner Los Angeles.

Writing Space: Computers, Hypertext, and the Remediation of Print

Reflecting the dynamic changes in electronic technology since the first edition, this revision incorporates the Web and other current standards of electronic writing. By J. David Bolter.

As We May Think
theatlantic.com

As Director of the Office of Scientific Research and Development, Dr. Vannevar Bush has coordinated the activities of some six thousand leading American scientists in the application of science to warfare.

The Web Time Forgot
nytimes.com

In 1934, Paut Otlet sketched out plans for a global network of computers (called “electric telescopes”) where “anyone in his armchair would be able to contemplate the whole of creation”, By Alex Wright

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.