Web vs. Print

transcript

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

• 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

WebDesigner Controlled

WebDesigner Controlled User Determined

Paper stock

Designer Controlled User Determined

Paper stock Monitors, devices

Choice of 1000s of fonts

Choice of 1000s of fonts User-limited fonts

Pinpoint positioning

Choice of 1000s of fonts User-limited fonts

Browser, OS variations

User-limited fonts

Color proofing

User-limited fonts

Color proofing

Inconsistent color

User-limited fonts

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

• 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…

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

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

• 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

• 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

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

Other differences

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

• Accessibility accommodations

Web vs. Print

Education