Slide deck from presentation delivered to Webuquerque on Feb. 3, 2010.

1. ber/glass
The difference between print and web design

2. WHY ME?
I’ve been doing both for a while now.

3. WHERE WE’RE HEADED
Adobe Tools
Color
Resolution
Typography
Format
Interactivity

4. A MAJOR THEME
exibility vs.
consistency

5. ADOBE TOOLS

6. USE THE RIGHT APP!
WEB: PRINT:
• Dreamweaver • InDesign
• Flash • Illustrator
• Photoshop • Photoshop
• Fireworks
• Illustrator*

7. COLOR

8. ADDITIVE & SUBTRACTIVE

9. COLOR MODELS
Web: Print: Print:
rgb cmyk pms

10. DIFFERENT GAMUTS
Visible spectrum (sorta)
RGB
CMYK

11. COLOR
CONSISTENCY
• Print color should be consistent
across all viewings (only variation
is ambient light)
• Web color varies significantly due
to monitor contrast, brightness,
black level, gamma, etc.

12. RESOLUTION

13. WHAT IS RESOLUTION?
• Means different things in different
contexts (display resolution vs. image
resolution)
• Resolution is measured in dpi
• Screens are typically 72dpi (or
thereabouts) why print has a higher dpi
• Print is generally 300dpi

14. RAMIFICATIONS
• An image on a website that’s three
inches wide on your monitor may
look jagged when printed any
larger than about 3/4 of an inch
wide (multiplier is 4.17 or .072).
• You can cheat, but not much.

15. RESOLUTION & TYPE
Low resolution hurts typographic detail

16. TYPOGRAPHY
Or, why print designers hate the web

17. MILLIONS OF FONTS
• Many fonts are designed for a particular medium.
• Considerations include resolution, ink bleed, size, and letter
width.

18. WEB IS LIMITED
• Type in HTML is limited to
what the user has installed
on his/her computer
• Computers don’t come with
much
• Font is typically specified in
cascading order via CSS

19. THE WEB IS INCONSISTENT
The same font might appear differently.

20. BaseNineSCB (36pt)
Sphinx of black quartz, judge my vow.
BaseNineSCBI (36pt)
Sphinx of black quartz, judge my vow.
BaseNineSCI (36pt)
Sphinx of black quartz, judge my vow.
BaseNineSmallCaps (36pt)
Sphinx of black quartz, judge my vow.
Bell Gothic Black (36pt)
Sphinx of black quartz, judge my vow.
Bergell Plain (36pt)
Sphinx of black quartz, judge my vow.
Concept-One (36pt)
Sphinx of black quartz, judge my vow.
Cuomotype (36pt)
Sphinx of black quartz, judge my vow.
PRINT CAN DeadHistoryBold (36pt)
Sphinx of black quartz, judge my vow.
DeadHistoryRoman (36pt)
Sphinx of black quartz, judge my vow.
DeconStruct-Bold (36pt)
Sphinx of black quartz, judge my vow.
DO IT ALL DeconStruct-Medium (36pt)
Sphinx of black quartz, judge my vow.
Dynamoe (36pt)
Sphinx of black quartz, judge my vow.
Seriously, anything goes
Flexure (36pt)
Sphinx of black quartz, judge my vow.
IndustrialSchizophrenic (36pt)
Sphinx of black quartz, judge my vow.
Marydale (36pt)
Sphinx of black quartz, judge my vow.
Marydale-Bold (36pt)
Sphinx of black quartz, judge my vow.
Napkin (36pt)
Sphinx of black quartz, judge my vow.
NotCaslonOne (36pt)
Sphinx of black quartz, judge my vow.
NotCaslonTwo (36pt)
Sphinx of black quartz, judge my vow.
Osprey (36pt)
Sphinx of black quartz, judge my vow.
Proletarian (36pt)
Sphinx of black quartz, judge my vow.
SuburbanBold (36pt)
Sphinx of black quartz, judge my vow.
SuburbanLight (36pt)
Sphinx of black quartz, judge my vow.
Swifty (36pt)
Sphinxofblackquartz,judgemyvow.
WordyDivaBeta (36pt)
Sphinx of black quartz, judge my vow.

21. SERIF vs. SANS-SERIF
Some argue sans is more readable.
Verdict: Hung jury

22. FORMAT

23. PRINT FORMATS
Infinite variety
Some common conventions
(letter, trifold, business card)
Consistent for all users/viewers

24. WEB FORMATS
Constrained by
monitor width
May be different
for every user

25. THE “FOLD”
• In print, it has a specific location
• On the web, it could be anywhere
• Significant variation across
computers
• People do scroll

26. OTHER CONSIDERATIONS
WEB: PRINT:
• Fixed/fluid • Paper stock
• Centered/left • Distribution
• Connection • Page count

27. INTERACTIVITY

28. PRINT IS...
linear/sequential:
everyone starts at the beginning
immutable:
once printed, it doesn’t change
uniform:
same piece is seen by entire audience

29. THE WEB IS...
nonlinear:
not everyone starts in same place
or goes in same sequence
dynamic:
revisions can/will be made after launch
customizable:
different users may see different content

30. CONVENTIONS
WEB: PRINT:
• Iconography • Size/format
• Element • Folds/turns
locations
• Innovation
• Help usability encouraged

31. TECHNICAL STUFF
Web and print have own sets of highly technical challenges

32. Q&A

33. CONNECT
Ben Byrne
ben@byrnecreative.com
facebook.com/drywall
AIM: drywallbmb
@drywall