Web design tips for print designers

Over the years I have had the opportunity to collaborate with a number of print designers on website designs. The way these collaborations usually work is that the print designer will mock-up initial static layouts for the website, and it will fall to me to bring their mock-up to life in either Flash or HTML. These collaborative efforts can be very rewarding, but there are a few common “gotchas” that tend to catch print designers unawares when they first try their hand at designing for the web. Most of the problems stem from design challenges that are particular to the web, and wouldn’t typically be encountered by a print designer.

The web is interactive

Sounds obvious right? But it is perhaps the key difference between the print and web mediums. In a print publication the reader’s interaction with the medium is essentially linear – they read from left to right, one page after the next. When navigating a website, the viewer’s interactive engagement is significantly more complex, and a number of web design conventions have evolved to aid usability and simplify the navigational experience.

One of the simplest ways to improve the usability of a website is to make interactive elements stand out. Hyperlinks which occur within body copy should be visually differentiated from the text surrounding them by a contrast in tone and color, or by decoration such as an underline. Similarly, menu and navigational buttons should be identifiable at a glance, either by their placement on their page, their color, or their visual decoration. When the user moves their mouse over a link it should change appearance to reinforce the fact that it is clickable.

Without these visual clues website users are forced to forage for links using their mouse. Imagine trying to read a book whose pages have been glued together, and won’t open until you touch a particular word on the page – only you don’t know which word it is! That’s how a website visitor feels when you take their navigational cues away.

Content is dynamic

One of the challenges faced by website designers is producing layouts that are flexible enough to handle dynamic content. The content of a website is very unlikely to remain static throughout it’s lifetime – or even for more than a few months at a time – and the design needs to be supple enough that it won’t break every time the content changes. Headlines need to wrap cleanly over multiple lines. Content boxes need to expand vertically if more text copy is added to them. Navigation menus need to be able to accommodate new buttons, in case a new section is added to the website. If the user increases or decreases their web browser’s text size, the site needs to flex accordingly. When the client adds content to the site themselves using a Content Management System, their changes needs to integrate smoothly with the existing content.

In print terms, a website design needs to be like a magazine template: it needs to be flexible enough to handle whatever the writers, photographers and editors may throw at it from one issue to the next.

Size matters

Intrinsic to designing for the web is consideration of the computer monitor, and its unit of measurement, the pixel. When creating website layouts in your favourite image editor, it is important to create your document with a resolution of 72 dpi, and regularly preview the design at its actual size, so you get a feel for how it will look in a web browser.

Most web designers choose to create layouts in Photoshop because it gives them pixel perfect control of their layout. In my experience print designers feel more comfortable using vector editing applications like Illustrator to create website mock-ups, which can cause problems if the designer doesn’t give consideration to the resolution of their document and remember to preview their layout at 100% scale.

For a similar reason, I advise against sending website mock-ups to clients as PDF documents. Because a PDF will typically scale to fit the reader’s monitor, chances are the client is not going to see the layout at its true pixel-for-pixel size. This might lead to nasty surprises down the track, when the mock-up and finished product don’t appear to match one another. My personal preference is to embed a JPG of my mock-up in an HTML document and provide my client a link to the web page. That way they can preview the layout in their web browser, giving the most accurate possible representation of how the finished site will look.

Another important sizing consideration is the dimensions of the webpage itself. Computer monitors come in all shapes, sizes, and resolutions, and a website should be designed to display well across the widest possible range of devices. Don’t be fooled into thinking that just because you have a whopping enormous monitor that your audience have one too.

For many years 800×600 pixels was the dominant monitor resolution, and websites were all designed to be viewable on 800×600 monitors without the viewer needing to scroll horizontally to see the site’s content. The advent of high resolution LCD monitors has changed that situation, and today an increasing number of sites are optimized to display on monitors with a resolution of 1024×768 pixels or higher. When designing your page, remember to also give consideration to the ‘fold’ – the point at which the bottom of the page is cut when it extends beyond their height of the browser window.

Because the width and height of a website visitor’s browser window are unknown quantities, important information is usually placed at the top left of a web page where it is guaranteed to be visible to everyone regardless, of their monitor resolution.

Arial is your friend

As every web designer knows only too well, when you are creating a web page you have approximately five fonts to choose from: Arial, Trebuchet, Verdana, Georgia, and Times New Roman. There are a few others, but they either render poorly on screen at small sizes, are available for Mac users but not PC users (or vice versa), or are not guaranteed to be installed on 100% of computers. Web designers moan about the lack of variety, but we entertain ourselves by arguing the benefits of one font over the other four – currently Georgia is a hot favourite.

For the print designer though, this lack of variety comes as a rude shock. Using Arial instead of Helvetica? The horror! But the reality is that Arial was designed for onscreen display and therefore renders much better at low resolutions that Helvetica does. In print Helvetica is still king, but on the web Arial rules the roost.

Flash offers far better options for font variety, but prior to Flash 8 its font rendering was notoriously flaky. Anti-aliasing of fonts was extremely poor, and it was not possible to apply kerning to dynamic text fields. But for print designers new to the web, Flash offers a design experience that is much closer to print design.

Pixel perfection is an illusion

Print designers are used to working with fixed formats. The physical dimensions of a flyer, poster, or booklet are usually determined at the outset of a project, and the design will be developed with those specific dimensions in mind. The designer chooses a typeface, sets text at their chosen point size, and can rest assured that the end result is going to look almost (if not exactly) identical to the way it appears in Quark, InDesign or illustrator.

On the web the translation from static mock-up to finished webpage is seldom so straightforward. Not only are a large number of design and layout issues not resolved until during the development process, there is a near certainty that the website will render slightly differently in each of the major web browsers. Quirks in the way different browsers interpret a website are something that web designers have learned to live with, especially with the advent of Cascading Style Sheets for controlling layout. We are happy to trade pixel perfection for semantic, accessible websites that are useable across a wide range of platforms, browsers and web enabled devices.

The web designer also has to relinquish a great deal of control to the viewer. A website visitor can test, twist, bend and break a webpage’s design by posting forum comments, uploading images, or simply enlarging or shrinking their browsers type size. The possibility of user interaction is one of the things that makes the web so exciting, but it frustrates the desire for control and order that most designers possess!

Flash ♥’s print designers

I touched earlier on the advantages Flash offers print designers when it comes to font rendering, and I thought it was worthwhile elaborating further on the benefits of Flash for translating layouts to the web. It is straightforward to copy and paste between Illustrator and Flash, and unlike HTML, Flash does not require underlying markup on which to hang it’s layout – pretty much any layout you can create in Illustrator or Photoshop can be recreated in Flash. Flash has it’s disadvantages of course, but when it comes to facilitating collaboration between designer and developer it certainly makes life simpler.

Conclusion

I think that print designers have a lot to offer the discipline of web design. Many of the best web designers were previously print designers, or still work across both mediums. The field of web development is an overwhelmingly technical sphere, and the more designers who choose to work in the industry, the better. But the desire to design for the web needs to be tempered by a consideration of the unique challenges posed by the medium. With an understanding of both sides of the coin, good design and usability can go hand in hand.

Further Reading

The Anatomy of Web Fonts

Everything you ever wanted to know about using fonts on websites.

Web Designer’s Guide to Print Design

The other side of the coin.

The fold

Details the maximum viewable area in a web browser window at various screen resolutions. Based on a great Webmonkey article from some years back which is unfortunately no longer online.