Print Design to Web Design: Comparative Analogies

I used to work in Pre-Press for a long time. Longer even now than I’ve been working on the web. I was in and out of InDesign documents all day every day. I’m not an uber-pro, but I know my way around pretty well. Recently I’ve been finishing up laying out my new book Digging Into WordPress (which you can buy now!) and during that time I was thinking about some of the ways working in InDesign is similar to CSS, and some of the ways it’s not. Let’s have a look.

Print documents are of a fixed size. Web browsers are fluid.

In print, you declare the width and height of your page and you can absolutely count on that and design around the edges. In web design, the only edge you can count on is the top edge. If you go left-aligned, you can count on the left edge too, but that’s it. The possibility for bleeding (having graphics / colors flush against the edge) is a lot stronger in print.

Dimensions in print are generally fairly standard. Dimensions in web design are generally tall and narrow.

In print, ultimately a viewer picks up and holds the material in their hands. A print designer takes that into account and makes sure the final product is well handle-able. On the web, our designs can scroll, and users aren’t afraid to do it. That means the dimensions for a complete web page are often really tall and thus relatively narrow. On the web we don’t use images that are 10,000px tall, as we need to consider performance, visible area, and fluctuating content.

Using paragraph styles in print is like setting block-level CSS.

In InDesign (and other major layout programs), you can select a block of text and apply a Paragraph Style. For example, you’d create a Paragraph Style called “Article #1 Text” which you would apply to all normal paragraphs of the first article you are working on in a magazine layout. This Paragraph Style has lots of options you can set. You can set font family, style, and size. You can set colors. You can set indenting and spacing, which controls how the paragraphs interact with each other on the page.

This is a lot like using CSS, and setting styles for block-level paragraph (<p>) tags. The same things you might do as a Paragraph Style, you might do like this in CSS:

p {
   font: italic 16px/1.5 Georgia, Serif;
   margin: 0 0 24px 0;
   text-indent: 24px;
   color: #222;
}

In both cases, this is a smart thing to do. It means that if you need to make changes later, you can change things in one place and that change is reflected across the entire web page (in the case of web design) or the entire document (in the case of print design).

Using character styles in print is like setting inline-level CSS.

Similarly, in InDesign, you can select text and apply character styles. With character styles you can also select font families and colors and things like that, but you cannot alter spacing. This is like styling an inline level element in CSS like a span, strong, or em element.

In print you absolutely know what the end result will look like. In web, you just hope for the best.

In print design, you get proofs of your documents that your printer provides that you sign off on if everything looks exactly perfect as you want it. If you are a really dedicated print designer, you’ll even be there at the printer when your design goes to press so you can ensure the final product is perfect.

“press check”

In web design, the best we can do is cross-browser check. But there are so many different browsers, different platforms, different monitors with different calibrations of different sizes. We can check as many as is reasonable, and check the most popular combinations, but otherwise we just need to use our professional judgment and experience in saying the design will look acceptable in all environments.

Adobe Browser Lab

WYSIWYG tools are ideal in print, and garbage in web design.

The tools of print design are far superior to the tools of the web designer. In InDesign, you click and drag boxes around and they stay where you leave them. Need three columns of text instead of two? It’s only a few clicks away. You get pen tools and pencil tools and resizing tools, all of which behave like the metaphor that they are.

Adobe tried to bring these same metaphors to WYSIWYG web design tools like Dreamweaver, but it doesn’t hold up. You can’t just draw a box on a canvas and drag it around and expect a program to turn that into perfect HTML and CSS. There are too many other factors that come into play. The result is either going to be exactly how you drew it and full of terrible inflexible code, or not at all how you drew it.

If you are coming to web from print, don’t expect to use the same tools you did before. At least not in the same way. Prepare to code, but don’t worry, it’s really not that complicated.

If you are coming from print, you aren’t gonna love the font situation over here.

To be fair, it’s getting a ton better. But print designers really have it made. Any font in the world can be had and used. On the web we deal with a very limited font set, expanded only by bad techniques (e.g. using images), fancy paid-for technology (e.g. TypeKit), or licensing problems (e.g. very few decent typefaces are legal to use with @font-face).

Font Explorer X

Even with the situation getting better on the web (hey, we’re even getting ligatures!), the control is still going to be pretty bad for a long time. Print designers are masters of kerning. Kerning is pretty tough to do on the web. Want to apply a stroke to letters on the web? Good luck with that.

Print is a 300 DPI world. The web is a 72 PPI world.

PPI meaning pixels per inch, DPI meaning dots per inch (although when working digitally with print, you’ll be working at 300 PPI) To be fair, digital printing these days doesn’t really need 300 DPI anymore, but it’s still a valid point. And, for the record, many computer screens are higher than 72 PPI, but you’ll still probably work in Photoshop at 72 PPI. Print designers may enjoy coming over to a world where they can work in Photoshop at 100% all the time. What you see in Photoshop is what you see in the browser. File sizes are smaller and so Photoshop is far more responsive. The clip art you download is way cheaper too!

Both can be frustrating.

Once you get used to working in one or the other, you’ll surely find certain things frustrating in the other. Why can’t I set a background color, padding, and rounded corners on character styles in InDesign. Grrrrr! Why is it so hard to make a full size background image on the web. Grrrrr!

The fundamentals are the same.

Line, shape, color, balance, texture, contrast, flow, affordances, the gestalt… What ultimately makes a good web designer is the same thing that ultimately makes a good print designer: fundamentals. You just need to know what looks good and what looks bad and have the time and patience to get to good. Knowing your tools helps, and definitely makes you faster, but are just a tiny fraction of what makes a good designer.

I meet print designers all the time that talk about how they want to get into web. Awesome. Both are cool but the web is definitely the medium of the future. If they are already a great print designer, I already know they’ll do well in web. If they are a print designer because it was an easy major in college and are just trying to learn web because they are nervous about losing their job, I worry.