Enumerates some of the differences between designing for print and designing for the Web.

1. AR340 WEB-BASED DESIGN ● FALL 2010
Designing for the Web
vs.
Designing for Print
Bruce Clary, McPherson College, McPherson, Kansas

2. AR340 WEB-BASED DESIGN ● FALL 2010
Print designers are control freaks

3. AR340 WEB-BASED DESIGN ● FALL 2010
Print designers are control freaks
• They wield complete control over all aspects of
their design and product

4. AR340 WEB-BASED DESIGN ● FALL 2010
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

5. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web

6. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled

7. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined

8. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock

9. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock Monitors, devices

10. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock Monitors, devices
Choice of 1000s of fonts

11. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock Monitors, devices
Choice of 1000s of fonts User-limited fonts

12. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock Monitors, devices
Choice of 1000s of fonts User-limited fonts
Pinpoint positioning

13. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock Monitors, devices
Choice of 1000s of fonts User-limited fonts
Pinpoint positioning Browser, OS variations

14. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock Monitors, devices
Choice of 1000s of fonts User-limited fonts
Pinpoint positioning Browser, OS variations
Color proofing

15. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock Monitors, devices
Choice of 1000s of fonts User-limited fonts
Pinpoint positioning Browser, OS variations
Color proofing Inconsistent color

16. AR340 WEB-BASED DESIGN ● FALL 2010
Print Web
Designer Controlled User Determined
Paper stock Monitors, devices
Choice of 1000s of fonts User-limited fonts
Pinpoint positioning Browser, OS variations
Color proofing Inconsistent color
End users can even override the designer’s
stylesheet with their own styles.

17. AR340 WEB-BASED DESIGN ● FALL 2010
Scale & Proportion of Display

18. AR340 WEB-BASED DESIGN ● FALL 2010
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

19. AR340 WEB-BASED DESIGN ● FALL 2010
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

20. AR340 WEB-BASED DESIGN ● FALL 2010
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!

21. AR340 WEB-BASED DESIGN ● FALL 2010
Typography on the Web

22. AR340 WEB-BASED DESIGN ● FALL 2010
Typography on the Web
• There are exciting breakthroughs in Web
typography on the immediate horizon…

23. AR340 WEB-BASED DESIGN ● FALL 2010
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

24. AR340 WEB-BASED DESIGN ● FALL 2010
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…

25. AR340 WEB-BASED DESIGN ● FALL 2010
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.

26. AR340 WEB-BASED DESIGN ● FALL 2010
Color on the Web

27. AR340 WEB-BASED DESIGN ● FALL 2010
Color on the Web
• Backlit display dictates RGB color control instead
of CMYK

28. AR340 WEB-BASED DESIGN ● FALL 2010
Color on the Web
• Backlit display dictates RGB color control instead
of CMYK
• Pixel display requires “dithering”–the smoothing of
jagged edges by interpolating colors

29. AR340 WEB-BASED DESIGN ● FALL 2010
Color on the Web
• Backlit display dictates RGB color control instead
of CMYK
• Pixel display requires “dithering”–the smoothing of
jagged edges by interpolating colors
• Inconsistent color reproduction

30. AR340 WEB-BASED DESIGN ● FALL 2010
Color on the Web
• Backlit display dictates RGB color control instead
of CMYK
• Pixel display requires “dithering”–the smoothing of
jagged edges by interpolating colors
• Inconsistent color reproduction
• But, good news: We can put “Web-safe” colors
behind us

31. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web

32. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
• Concern regarding download time dictates

33. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
• Concern regarding download time dictates
- Sizing all images to space

34. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
• Concern regarding download time dictates
- Sizing all images to space
- Compromising quality to reduce file size

35. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web

36. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
• Image characteristics determine file format

37. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
• Image characteristics determine file format
- .GIFs for flat-color graphics

38. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
• Image characteristics determine file format
- .GIFs for flat-color graphics
- .JPGs for photos or images with subtle gradients

39. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
• Image characteristics determine file format
- .GIFs for flat-color graphics
- .JPGs for photos or images with subtle gradients
- .PNGs for graphics and gradients requiring
transparency

40. AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
• Image characteristics determine file format
- .GIFs for flat-color graphics
- .JPGs for photos or images with subtle gradients
- .PNGs for graphics and gradients requiring
transparency
- But NO .TIFFs or .PSDs or .AIs!

41. AR340 WEB-BASED DESIGN ● FALL 2010
Other differences

42. AR340 WEB-BASED DESIGN ● FALL 2010
Other differences
• Measures (pixels rather than picas & points, e.g.)

43. AR340 WEB-BASED DESIGN ● FALL 2010
Other differences
• Measures (pixels rather than picas & points, e.g.)
• Accessibility accommodations