Printeractive: Making the Transition
Just recently at my grandfather’s 93rd birthday celebration, I was asked by some ol’ folks, “Hey there, you young whippersnapper, what exactly do you do at your work anyways?”(or something similar). My first attempt at answering this question seemed to fall short, so I simply said, “I make posters and put ‘em on the internet.” Though in my head I knew I was leaving out a bazillion nuances about interaction design, they seemed to understand what I meant. The simplicity of this explanation stuck with me. Why over complicate things when print and interaction design aren’t that different after all?
I learned a lot about the relationship between print and web design while in school and working at HQ. I would design posters at school in the morning and create websites at work in the afternoon. Here are some conclusions drawn from this experience:
Both require a fair amount of research, both use grids, both are restricted by the technology used to produce them, both require good type skills, both require smart use of icons and imagery, and possibly the most profound, both are experienced over time by a user or an audience.
My last point, “both are experienced over time by a user or an audience,” really opened a lot of doors for me and still informs the way I think about design today. This conclusion lead me to a very simple concept of information layering. In order to illustrate this concept, let’s think of how a student might experience a gig poster on a bulletin board at their university.
1. From about 30ft away, the audience, or user, will observe the eye-catching features of the poster: colors, large graphical elements or photographs in use.
2. If they walk closer to about 15 feet away, they begin to read the title, see subtle textures and better understand the feeling/message of the poster.
3. Now, if you still have their attention, they move in a little bit closer until they’re about 5 feet away and looking at the descriptive text (who, what, when, where of the gig). That is accompanied by the call to action, “Get Your Tickets Now.”
The success of “information layering” is hinged on basic visual hierarchy. The kind taught in design school. People can only take in so much information at a time. As designers we have to break down information into digestible bits for our audience to consume. The principle of visual hierarchy can be applied not only to website layouts, but to an interactive web experience overall.
Instead of an audience physically walking closer to a gig poster like our earlier example, let’s pretend our user is taking a look at the about page of a creative agency. The user of a website will be scanning and scrolling down the page to learn more or get started.
1. For example, when a user arrives at an “About” page, they are most likely greeted with a hero banner image and a concise mission statement. The photo, color and type choices give the users a lot of information about the owners of the website without a lot of work on the user’s part.
2. From there, the user scrolls down the page and gains a better understanding of who the company is, what they do and how they are different from their competition.
3. At the bottom of the page there is a call to action, just like the gig poster details, which tells you what they want you to do: “Get in Touch”, “Try A Demo” or “Buy on the App Store” all fit the bill.
Information layering seems to work again. Simply by understanding the goals of the medium and applying hierarchy throughout an interactive experience, a designer can successfully transition from print to interactive.
Even though print and interactive design are different animals, designers should know how to tame them. That’s a liberating notion for any of us. Understanding the principles of design gives you the power to expand your creative repertoire, as long as we understand the goals of each medium and how they relate to each other.
So there you have it. Feel liberated as a designer and avoid long winded explanations about your career at family parties. Just tell the ol’ folks you make internet posters. They’ll understand.