Confessions of a Print Designer turned Web

The Web is continually redefining the way people, business, and organizations access and distribute information. As companies are pushing for a stronger online presence, many print designers are being faced with the task of applying their print skills to the digital medium. After nearly a decade as a print designer, I decided to take the headlong plunge into the Web world myself and thought I’d share a few of my experiences and  “ah-ha” moments to help anyone considering a similar path.

When I first decided to make the switch, I was quickly overwhelmed and I was really not sure where to begin. In addition to feeling like I needed to learn what seemed like a million different coding languages, I unknowingly still had even more to learn about understanding the key differences between the media.

There was also a bit of an ego pill to swallow. It was humbling to watch our resident Web guru fly though code, correcting errors along the way in minutes or seconds, that had taken me hours to create, while going on about ‘box models’ and ‘style inheritance’ as he absentmindedly plowed through my creation. Huh? This humbling initial buy-in can be the make or break moment for a lot of people. It’s difficult to be in a position where after 10 years of professional experience, you feel like you’re back in your first year of school.

I’ll admit my first Web site was easily recognizable by most Web designers as a site that was done by a print designer. At first, I did not understand how they knew. I now know that print designers are notorious for designing “pretty” Web sites which load slowly, are not optimized for the search engines, don’t work on certain browser/operating system combination’s, and have numerous usability problems. The sites look nice, but they are often re-purposed print pieces that don’t take full advantage of the strengths of the Web.

To utilize the strengths of print and Web, it is important to grasp a few obvious (or not so obvious) differences between each medium.

• The Web is dynamic. Unlike print, the elements on a Web page can be interactive. Content, such as text, images, and form fields on a Web page can change in response to mouse or keyboard actions by using animations, mouse-over effects, pull down menus, etc. As obvious as this is to anyone that has used the Web, it is important to plan for these elements as you are designing a site. Also remember that just because you can do something does not always mean you should. The key to using interactive elements is not only knowing how to use them, but also knowing when to use them.

• A Web site is never “done.” This was another concept I had to wrap my head around. With a print piece, once it is printed it is done. You can’t change it unless you reprint it. With the speed at which the Web evolves it is necessary to continually plan for and adapt to change. A site plan you develop today may be significantly different than one you had a year ago, or even a few months ago.

• Lack of visual control. This was one of the hardest things for me to understand and embrace. When designing for print, the layout, fonts, line breaks, colors, page size, paper stock and every last detail was meticulously crafted to ensure that all the printed pieces looked exactly how I wanted. With a Web site, all of those constants become variables. Different screen sizes, browsers, operating systems, system fonts, and color and contrast settings, are just a few of the reasons why the same Web site could display differently on each user’s computer or mobile device.

Thinking back to my first Web site, to achieve the control that I wanted I thought it would be a good idea to do it all in Flash. Sure it gave me that print-like control, but in the end it was a bad idea for the overall purpose of the site. While Flash elements can be a great compliment to an HTML site, it’s usually not recommended that a site be entirely done in Flash for a variety of reasons, primarily Search Engine Optimization (SEO) purposes. That’s a whole different, larger discussion and you can read more here – so we’ll move on.

• Usability. Usability. Usability. Usability, not the design, often determines the success or failure of a Web site. While great content and a visually appealing design can give credibility to a site and its company or organization, ultimately that does not matter if the user can’t find what they are looking for. Create a site structure with a clear, self-explanatory navigation and interactive elements first, and then make it “pretty.”

At this point you may have that overwhelmed feeling I mentioned at the start of this article. Don’t worry; while there are certainly a lot of differences, there are also many similarities that can help make designing for the Web a little less intimidating.

• Good design is good design. The same fundamental design skills you have developed to effectively communicate a message through print can also be used to create a compelling and dynamic Web site. Good color use, balance, rhythm, negative space, typography, etc., are all still critical, there are just some different things to consider and rules to follow.

• Design process is similar. While the tools, file types, and delivery methods are different, the design process used to publish in print is very similar to the process of publishing for the Web. Just as you would never begin to design a print piece without knowing about the content, the size, the number of pages, or audience, you wouldn’t start designing a Web site unless you understood its purpose, structure, the kind of content, and the goals for what the site should accomplish.

• You don’t have to do it all. Just as there are various vendors for print, there are those for Web. Beyond the keystones of HTML and CSS, there are seemingly endless scripting languages, databases and other techno-jargon – enough to overwhelm anyone. But there’s no need to know how to do them, you just need to know what they are, and their capabilities – then find a specialist to create what you need. Understanding what is doable is more important than knowing how to do it.

As I carved out my own path for learning the Web, I determined I wanted to focus on the importance of usability, how Search Engine Optimization (SEO) works, and have a basic understanding on how to build Web sites using HTML and CSS using Web standards. I felt that this would be a great starting point and knowing these would help build a solid foundation for learning more complex aspects of the Web. I was lucky enough to have a very knowledgeable and patient co-worker that was there to answer any of my questions along the way, but barring that resource, here’s a few to help get you started.

Resources:

HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach

By Christopher Murphy and Nicklas Persson

This book will teach you step-by-step how to build hand-crafted Web pages using XHTML and CSS. You will also learn about the history and evolution of Web standards and why they are important. A must-read for any beginner.

Don’t Make Me Think: A Common Sense Approach to Web Usability, 2^nd Edition

By Steve Krug

The title of this book says it all. It’s a very quick read and gives a lot of common sense advice on creating usable designs for the Web.

Firebug

Firebug is a free plug-in that integrates with Firefox. It has numerous capabilities, but it is also a great learning tool as it allows the user to edit CSS, HTML, and JavaScript live on any Web page and immediately see the effects.

Lynda.com

Lynda.com is a subscription-based, online educational and training resource with a suite of step-by-step lessons on a wide variety of topics – from best practices for Photoshop for the Web, to nitty gritty code lessons. Most lessons are supplied with well-constructed example files, which is a great bonus.