Crossing the line

Getting from print to web

While you many not feel any more ready for interactive design than I am for some skinny jeans, there really is nothing to lose by trying. In fact, your design sensibilities for print will transfer nicely to the web. In the beginning, it can feel intimidating trying to figure out how code and web standards have evolved, not to mention how to design for mobi environments and applications. Don't fret. Many print designers have made the successful transition to web. Truth is, if you already understand good design for print, you just need to get acquainted with some differences for interactive design to better position yourself to get started.

Print is from Venus, web is from Mars

People consume content differently when they have the freedom to do several things at once. Unlike print, where you might pick up a magazine to read later, the web is accessed when something is relevant. This means the designer needs to think not only engaging and aesthetically beautiful, but usable and useful, not to mention accessible (and please put latter three first). Given this, here some ways interactive design differs from print design.

 

Content

Would you attempt to design a magazine or an annual report without knowing the content? Of course, you can design a rough look and feel with a vague idea of the subject. I would argue, however, that you cannot possibly plan a strong navigation system (or visual concept, for that matter) without first understanding the content. That means you need to have the actual copy to absorb and flow. Designing with content in mind encourages your website's readability. Without it, you run the risk of designing with valueless filler that alienates your visitors in just a few seconds.

Organization

To navigate a printed design, a table of contents or a perhaps an index comes to mind. Because people navigate websites differently than they do printed materials, a good navigation helps users to find what they are looking for online. Ideally, a designer works with an Information Architect (IA) to map out the best user experience.

IA's do everything from conducting user research to establishing the content flow to ensure sure information will be "findable" and that site tasks will be successful. While a designer, at minimum, should be able to understand some basic architecture, navigation systems can get very complex, which is why I would strongly suggest working with a full team if you can. Realizing this is not always the reality for everyone, be ready to broaden your skill set if you work solo.

Layout

Much like print design, websites follow a grid structure. It is essential to organizing a visual hierarchy, streamlining content placement, and adapting to the complexity needed to manage content as the site ripples through multiple layers and/or expands to multiple devices. The most common grid width used for the web is 960 pixels; which is the optimal width for a 1024-pixel browser resolution, minus the space required for browser chrome. Although even this accepted size is now debatable.

A grid not only divides up your page aesthetically, but also proportionally, to help you design a flexible layout for varying types of content. When you design for web, keep in mind that, unlike print design, your viewers (or "users" as they are called in interactive design) do not always browse through websites at full screen (or even with a traditional computer). Because screen width can be unpredictable, it is better to design a fluid grid to flexibly fill a variable width. Even better, design your layout to be responsive to the devices visiting your website. This allows you to better control what users will see when they visit your site and encourages readability.

Typography

Good typography is essential for print design. On the web, good typography also means it is accessible and follows web standards. Following web standards ensures search engine optimization (SEO), which is one of the top requirements for any successful website design. Thankfully, interactive design has made huge strides in font availability in recent years (and even kerning), so accessible websites can also be beautiful. Most fonts can also be tested live to help you make the best design choices. To optimize your site's legibility, keep in mind that you need to follow some basic type principles when choosing your fonts.

Imagery

Because your website only has milliseconds to win over a new visitor, it is essential to optimize your images. Because you cannot predict your user's bandwidth, smaller file sizes for images is important to lessen the load time. When estimating how long the load time will take, be sure to account for all images on a single page. Although your webpage is cached once it is loaded, a user might not want to wait for the initial page to appear. (One reason why Flash intros are now considered bad practice). Be sure to follow some basic guidelines when formatting your images for the web to ensure clean coding and optimization for search engines.

Color

The web color space is an RGB color model, which is rendered through light and expressed in hexadecimals. Because this model varies greatly from the printed CMYK color space, and because color depth, color calibration, brightness level is not consistent across all monitors and devices, it is virtually impossible to exactly match an interactive design to a printed design that is rendered with ink and paper. When choosing colors for your website, make sure it will be accessible for those with impaired vision and for poor displays.

Usability

In the print world, a focus group can be used to test an ad campaign before it is launched. In the interactive world, a prototype is created. The prototype can be as simple as a clickable .pdf (even at the wireframe stage) or front-end programmed HTML site. The prototype is used to test the design before final production.

In more established interactive studios or large corporate settings, usability engineers recruit a small sampling of end users to test the success of a design draft. These tests can also be done remotely, using the services of an outside firm. The test participants are asked a series of questions and their responses to finding information on the prototype are recorded. Depending upon the success or failure of these tests, the designs are altered and sometimes retested. Usability testing is especially important to manage risks.

Still with me?

The biggest worry most print designers voice when considering a switch to interactive is learning the code. Although, if you have read this far, you probably realize now that it is only a part of the interactive tool set. Some interactive design positions do not need to understand how to code at all. Even if this is the case, the more you learn about coding and best practices, the more valuable you will become — and the more control you will have over your work.

Next steps

Ready to plug in? There are so many great programs to learn interactive skills. You can start by attending conferences such as An Event Apart, Think Vitamin, SXSW, Brooklyn Beta, Build, etc. Or you can throw yourself full force into a university program at School of Visual Arts, Carnegie Mellon, or even Hyper Island.

Many of the speakers at these conferences and professors for these interactive programs share their best practices free of charge. So you don't need a big budget to get started, just an investment of your time to study and practice, practice, practice.

There are also many free resources online to help you teach yourself HTML and CSS (which are the essentials for content management systems.) Once you have mastered the basics, be sure to bone up on the next generation of coding for HTML5 and CSS3 while you are at it. Almost every web designer I know is self taught (at least to some degree) so don't feel intimidated about not knowing everything. Just get started!

***

More resources can be found on the AIGA Philly Delicious bookmarks for Pencil to Pixel. A series of events to provide interactive design education. mt