Embed Size (px)
DESCRIPTION
Enumerates some of the differences between designing for print and designing for the Web.
Citation preview
Designing for the Webvs.Designing for Print
AR340 WEB-BASED DESIGN ● FALL 2010
Bruce Clary, McPherson College, McPherson, Kansas
Print designers are control freaks
AR340 WEB-BASED DESIGN ● FALL 2010
Print designers are control freaks
AR340 WEB-BASED DESIGN ● FALL 2010
• They wield complete control over all aspects of their design and product
Print designers are control freaks
AR340 WEB-BASED DESIGN ● FALL 2010
• 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
AR340 WEB-BASED DESIGN ● FALL 2010
Web
AR340 WEB-BASED DESIGN ● FALL 2010
WebDesigner Controlled
AR340 WEB-BASED DESIGN ● FALL 2010
WebDesigner Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock
Designer Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock Monitors, devices
Designer Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock Monitors, devices
Choice of 1000s of fonts
Designer Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock Monitors, devices
Choice of 1000s of fonts User-limited fonts
Designer Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock Monitors, devices
Pinpoint positioning
Choice of 1000s of fonts User-limited fonts
Designer Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock Monitors, devices
Pinpoint positioning
Choice of 1000s of fonts
Browser, OS variations
User-limited fonts
Designer Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock Monitors, devices
Color proofing
Pinpoint positioning
Choice of 1000s of fonts
Browser, OS variations
User-limited fonts
Designer Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock Monitors, devices
Color proofing
Pinpoint positioning
Choice of 1000s of fonts
Inconsistent color
Browser, OS variations
User-limited fonts
Designer Controlled User Determined
AR340 WEB-BASED DESIGN ● FALL 2010
Web
Paper stock Monitors, devices
Color proofing
Pinpoint positioning
Choice of 1000s of fonts
Inconsistent color
Browser, OS variations
User-limited fonts
Designer Controlled User Determined
End users can even override the designer’sstylesheet with their own styles.
Scale & Proportion of Display
AR340 WEB-BASED DESIGN ● FALL 2010
Scale & Proportion of Display
AR340 WEB-BASED DESIGN ● FALL 2010
• Scale of monitors used to view Web pages ranges from cell phone and iPod/iPad screens to 30-inch HD cinema displays
Scale & Proportion of Display
AR340 WEB-BASED DESIGN ● FALL 2010
• 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
Scale & Proportion of Display
AR340 WEB-BASED DESIGN ● FALL 2010
• 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
AR340 WEB-BASED DESIGN ● FALL 2010
Typography on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• There are exciting breakthroughs in Web typography on the immediate horizon…
Typography on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• 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
Typography on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• 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…
Typography on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• 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
AR340 WEB-BASED DESIGN ● FALL 2010
Color on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Backlit display dictates RGB color control instead of CMYK
Color on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Backlit display dictates RGB color control instead of CMYK
• Pixel display requires “dithering”–the smoothing of jagged edges by interpolating colors
Color on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Backlit display dictates RGB color control instead of CMYK
• Pixel display requires “dithering”–the smoothing of jagged edges by interpolating colors
• Inconsistent color reproduction
Color on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• 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
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Concern regarding download time dictates
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Concern regarding download time dictates
- Sizing all images to space
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Concern regarding download time dictates
- Sizing all images to space
- Compromising quality to reduce file size
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Image characteristics determine file format
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Image characteristics determine file format
- .GIFs for flat-color graphics
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• Image characteristics determine file format
- .GIFs for flat-color graphics
- .JPGs for photos or images with subtle gradients
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• 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
Images on the Web
AR340 WEB-BASED DESIGN ● FALL 2010
• 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!
Other differences
AR340 WEB-BASED DESIGN ● FALL 2010
Other differences
AR340 WEB-BASED DESIGN ● FALL 2010
• Measures (pixels rather than picas & points, e.g.)
Other differences
AR340 WEB-BASED DESIGN ● FALL 2010
• Measures (pixels rather than picas & points, e.g.)
• Accessibility accommodations
