WSOL

Can someone who only has a background in print effectively design a website? Well, would you order a pulled pork sandwich at a sushi bar?

Let me first state that I love both pulled pork and sushi. That said, I would certainly prefer pulled pork to be prepared by a BBQ master, and my maki rolls to be prepared by a sushi chef. The techniques and process involved in preparing each are not interchangeable, so I would not trust one to do the other’s job. The idea of specialized roles applies to design as well.

There are many similarities that exist between print and web design. But these similarities are predominantly universal principles of design, meaning that they aren’t specific to any one medium. Examples include elements such as typography, visual hierarchy, color, balance, and composition. While these design elements transcend medium, there are a number of underlying fundamentals that make designing for print and web two very different beasts.

Fundamental Differences

Print design and web design have entirely different sets of constraints. With print design you have a degree of control that simply is not possible on the web. With the web, you need to embrace and take advantage of the disparities that exist between screens, browsers and devices. With print you are dealing with a primarily static product, whereas with web design you are designing more for interaction.

1. Size

   When dealing with print you design for a fixed size output. On the web, each page may have different vertical dimensions. You also need to consider different options for the width of the web page. You can create either fixed width or fluid width sites. It is even possible to develop responsive layouts that adapt to the context of the user. What a web site visitor sees is only partially determined by the designer. There are many other variables in play that affect how much or how little of the page a user sees. Some of these factors include the size of the viewport on the device they are accessing content from, the display resolution, and even the plug-ins (or lack of) installed on the device.

2. Content

   Print content is finalized before it gets published. This means the layouts can rely on a predetermined amount of copy. Web content is ever changing. A solid web design must be able to accommodate different types and amounts of content. Coming from a print design background, but now fully immersed in web design, this is in my opinion the largest conceptual gap to overcome. Imagine that as a print designer, you have just delivered a poster to the printer. You have earnestly laid out the page with the final artwork and copy. Now imagine that the printer takes your piece, and reproduces it over and over, each time inserting new and varying amount of copy and imagery. How does this affect the design? Did the poster anticipate the variety of content it would need to house?

3. Typography

   With print, typographic options are limited only by the font library and imagination of the designer. On the web, there are many constraints. You need to be considerate of what fonts are commonly available to most users. Even then, different users may not have a specific font installed, meaning that a backup font will take its place. The backup font may have a slightly different width or height, which may affect the way text flows. This could present a problem if the design is dependent on copy that breaks in specific places, or if there are areas where a text block has vertical constraints. There are many different services and techniques, such as typekit, cufón, sIFR,and @font-face that can be used to render more unique fonts on a web page, but the designer must know the advantages or disadvantages of each, as well as the licensing and copyright issues associated with them. "Web Fonts at the Crossing" is a good article published on A List Apart that discussing the many font embedding options.

4. Browser and Device Limitations

   On the web you need to plan for the design to be rendered in different browsers with different capabilities. Because some browsers are more advanced than others, it is neither practical nor realistic to expect a design to display with 100% similarity across them all. I’ve encountered a number of situations where we’ve been handed a design by a print designer. Throughout development, the designer had focused on trying to make sure that the design looked exactly the same in each and every browser. This makes sense in print, where you can control the design of each element on every page. But valuable time and resources were spent trying to add hacks to extend the capabilities of old deprecated browsers. The hacks also resulted in extraneous code that burdened the load time of the page, while also making future updates more time-consuming and difficult. A better strategy would be to spend that time ensuring that the design is flexible enough to render to best ability of each browser’s native capability.

5. Designing Interaction

   Print design focuses on communication, aesthetics and concept. Although these elements apply to web design as well, the web designer must also think of the site as an actual product that a person uses. This is a fundamental shift in the way of approaching the design. Considering the user experience is perhaps the most important element to consider when designing a site (aside from say, content, which should be what you are designing around). This isn’t to say that considering user experience is not a part of other forms of design...it certainly is. It’s just that each medium requires a different type of insight into the psychology of user behavior. For a website there are a lot of different questions that need to be addressed. What is the right amount of content to show? Is the interface intuitive? Where are the hot-spots for eye traffic on a page? Do the buttons look clickable? Does the user know where they are or where they are going? Does it matter if content is below the "fold" (a concept which doesn’t translate to the web the same as it does in print)? There are also many types of interaction that exist in other forms of design that are absent from the web, such as more sensory, haptic experiences. This includes things like the weight of a the object or the way it feels to the touch.

Do Qualifications Matter?

There are many more similarities and differences that exist between print and web design, but the list above touches on some of the key ones. A big client concern that I’ve encountered is the perception that a print designer is more likely to produce a better looking design than a web designer is. I think one reason this misconception might exist is because many of the people who call themselves web designers don’t have a background or any formal training in design. While I don’t think that having a degree in design is required to be a good web designer, it will certainly give you an advantage. In my opinion the ability to create a successful web design stems from three things:

1. An understanding of the principles of graphic design
2. An understanding of the constraints of the medium
3. Knowing how to engage/interact with the target audience

Removing Design Boundaries

The purpose of this article isn’t to argue that print designers can’t create great web site designs, because they can and often do. In fact I agree that web designers can learn much from the world of print. As I mentioned at the beginning, a lot of the effectiveness of a design comes from an understanding of design principles. I don’t think that a person’s background matters nearly as much as their understanding of the web as a medium, and the constraints that go along with it. The way that we design is changing each day because the way people access information is changing. A single design might need to translate to print, packaging, and the desktop, as well as mobile and handheld devices. Returning to the topic of BBQ and sushi chefs: yes it's true, I wouldn't hire one to do the other’s job. Yet I would have no qualms about having an Iron Chef prepare me either one, in fact I would be delighted. It’s time for designers to stop creating boundaries and arguing about this type of designer vs. that. Successful design needs to transcend the mechanism of delivery. Designers can’t afford to live in isolated bubbles anymore. If you want to be successful and remain relevant in today’s competitive design landscape, you need to be aware of where we are and where the industry is going. And unless you intend to solely be a design strategist, you better know how to code too...because the young designers coming out of high school already do.

People, links and resources mentioned in this post:

1. Richard Fink "Web Fonts at the Crossing"
2. Paddy Donnelly"Life Below 600"
3. Ethan Marcotte "Responsive Web Design"