Download pdf - Web vs. Print

Designing for the Webvs.Designing for Print

AR340 WEB-BASED DESIGN ● FALL 2010

Bruce Clary, McPherson College, McPherson, Kansas

Print designers are control freaks




• They wield complete control over all aspects of their design and product



• They wield complete control over all aspects of their design and product

• Among the greatest adjustments print designers must make in coming to the Web are yielding control to end users and accepting the technical limitations of their – and their users’ – technology, hardware, and software

Print


Web

Print


WebDesigner Controlled

Print


WebDesigner Controlled User Determined

Print


Web

Paper stock

Designer Controlled User Determined

Print


Web

Paper stock Monitors, devices


Print


Web


Choice of 1000s of fonts


Print


Web


Choice of 1000s of fonts User-limited fonts


Print


Web


Pinpoint positioning

Choice of 1000s of fonts User-limited fonts


Print


Web




Browser, OS variations

User-limited fonts


Print


Web


Color proofing




User-limited fonts


Print


Web


Color proofing



Inconsistent color


User-limited fonts


Print


Web


Color proofing



Inconsistent color


User-limited fonts


End users can even override the designer’sstylesheet with their own styles.

Scale & Proportion of Display




• Scale of monitors used to view Web pages ranges from cell phone and iPod/iPad screens to 30-inch HD cinema displays




• Monitors may have a 3:2, 4:3 or 16:9 proportion




• Monitors may have a 3:2, 4:3 or 16:9 proportion

• As a rule, the entire design is not immediately visible!

Typography on the Web




• There are exciting breakthroughs in Web typography on the immediate horizon…




• … but display of type is still effectively limited to the fonts the user has installed on her computer





• Users can adjust size of type as desired, breaking the designer’s intended layout…





• Users can adjust size of type as desired, breaking the designer’s intended layout…

• … although, again, advanced CSS techniques are making it easier and easier to achieve true elastic designs.

Color on the Web


Color on the Web


• Backlit display dictates RGB color control instead of CMYK

Color on the Web



• Pixel display requires “dithering”–the smoothing of jagged edges by interpolating colors

Color on the Web




• Inconsistent color reproduction

Color on the Web




• Inconsistent color reproduction

• But, good news: We can put “Web-safe” colors behind us

Images on the Web


Images on the Web


• Concern regarding download time dictates

Images on the Web



- Sizing all images to space

Images on the Web



- Sizing all images to space

- Compromising quality to reduce file size

Images on the Web


Images on the Web


• Image characteristics determine file format

Images on the Web



- .GIFs for flat-color graphics

Images on the Web




- .JPGs for photos or images with subtle gradients

Images on the Web





- .PNGs for graphics and gradients requiring transparency

Images on the Web





- .PNGs for graphics and gradients requiring transparency

- But NO .TIFFs or .PSDs or .AIs!

Other differences


Other differences


• Measures (pixels rather than picas & points, e.g.)

Other differences


• Measures (pixels rather than picas & points, e.g.)

• Accessibility accommodations