Print to web is a two-part series that outlines the basic concepts and skills print designers need to learn to transition into web design. Jump to Part 2 »

"How do I become a web designer?" This is a question I hear all the time from my print colleagues. Yet there don't seem to be any resources to tell you how to get there.

Having made the transition myself, I have strong empathy for print designers who want to learn web design but can't figure out how to get started. It's easy to feel like you've missed the boat and that the barrier to entry is insurmountable because the technology is too daunting or changes too fast.

The fact is, what tends to hold print designers back isn't software skills as much as unfamiliarity with the culture, terminology, and basic concepts of the web medium. With that in mind, I've put together an outline of the skill set required to do web design in an agency setting, along with a brief explanation of terms and concepts geared toward the print designer.

Obviously a single blog post won't turn you into a web designer, but hopefully it will demystify some of the concepts, provide context and background, and—most important—get you thinking constructively about what you need to do to get there.

1. Know what a pixel is

Forget picas and inches—the pixel is the basic unit of any web design, including font sizes. Web design is done in raster programs like Photoshop and Fireworks, never Illustrator or InDesign (or, god forbid, Powerpoint). Always use RGB (or better, hexidecimal) color values, never CMYK. If you want your designs to be usable by a programmer, become an expert Photoshop user.

2. Stop thinking in pages

Web development firms used to estimate jobs on a per-page basis. This is no longer the case. Websites are increasingly being built in content management systems (CMS) that use a database to store chunks of content, then assemble them on the fly. In other words, you can't control exactly how every page will look, where line breaks will occur, or how many lines of text there will be.

This can be a difficult concept for print designers, but it's essential to grasp. Think of it as a design challenge—how can I take into account different kinds of content and still have the whole site look and feel consistent and cohesive? The best place to start learning this is observation—go to any content-heavy website (e.g., iStockPhoto, Amazon, Facebook) and see how they deal with variable content.

3. Understand typography for the web

Although there are signs of progress, the web is still a typographic wasteland. As a result, many designers resort to Flash or blocks of graphic text. The problem with this is that it can render websites unreadable by search engines and inaccessible to disabled visitors who rely on screen readers. As much as possible you want to use "system" text (the kind that can be highlighted in the browser and copied), especially in navigation and headings where they count more toward search engine rankings.

The second place where print designers get into trouble is making type too small, too faint, or treating it like a design element instead of a communication tool. The web is a transactional medium, which means people are trying to do something. Anything that stands in the way of their task creates frustration, annoyance, and almost always causes them to abandon the site in favor of one that's easier to use. With few exceptions, the web is not a place to push the design envelope or get precious with your typography. This doesn't mean your type skills are irrelevant, quite the contrary. It takes a great designer to make a beautiful, original site out of the same five fonts everyone else is using.

Text, type, and search engine optimization (SEO) are inextricably linked on websites and believe it or not, SEO is one more facet designers have to take into consideration. For a good overview of dos and don'ts, check out WebDesigner Wall.

4. Know your place

In most web projects, design is the smallest time component. Yep, you read that right. For a good sized CMS-based website, discovery and development (aka, programming or coding) require much more time than design.

Don't assume, however, this means design is unimportant or that you'll be slacking off while everyone else does the work. By the time a project gets to the design phase, there is often a huge amount of information the designer needs to read, distill, and internalize before he or she can begin work. You'll be reviewing sitemaps and schematics (aka, wireframes), competitive analyses, strategic briefs, functional requirements, and so on. In smaller shops, you might be the one who does the research or creates the wireframes. If you're not familiar with these types of documents, a great place to start is Dan Brown's "Communicating Design."

5. Learn how to work with developers

Once the design is complete, you'll be handing everything over to the development team. Just like sending files to a printer, the more explicit and detailed your instructions, the cleaner your files, and the more you've tried to anticipate everything they will need—the better the outcome. If you want the final website to look like your design files here are a few tips:

• Begin a dialog with your developer early so you don't design something they can't build
• Label every Photoshop layer, put layers in folders, and use a logical naming scheme throughout
• Design to the pixel level—if two things need to line up, zoom in and make sure they are perfectly lined up in your file
• Design for interaction—websites have moving parts such as hover (rollover) states, modes, dropdowns, and fly-out menus. If you want a say in how these look and behave, make sure they are part of your design.
• Don't be a prima donna—work with your developer and be willing to compromise on the design if it's too difficult or expensive to code
• Appreciate the developer's culture—developers don't think like designers and they use different terms to talk about the same thing. Learn their culture and terminology and you'll have a much easier time communicating what you want.

» Continue reading: Print to web, Part 2

[ Kim Bieler wrote this article and she welcomes your comments. ]