The Difference Between Print and Web Design
-
Upload
drywallbmb -
Category
Design
-
view
958 -
download
1
description
Transcript of The Difference Between Print and Web Design
![Page 1: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/1.jpg)
!ber/glassThe difference between print and web design
![Page 2: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/2.jpg)
WHY ME?I’ve been doing both for a while now.
![Page 3: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/3.jpg)
WHERE WE’RE HEADED
Adobe Tools
Color
Resolution
Typography
Format
Interactivity
![Page 4: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/4.jpg)
A MAJOR THEME
!exibility vs.consistency
![Page 5: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/5.jpg)
ADOBE TOOLS
![Page 6: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/6.jpg)
USE THE RIGHT APP!
WEB:• Dreamweaver• Flash• Photoshop• Fireworks• Illustrator*
PRINT:• InDesign• Illustrator• Photoshop
![Page 7: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/7.jpg)
COLOR
![Page 8: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/8.jpg)
ADDITIVE & SUBTRACTIVE
![Page 9: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/9.jpg)
COLOR MODELS
Web:rgb
Print:cmyk
Print:pms
![Page 10: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/10.jpg)
DIFFERENT GAMUTSVisible spectrum (sorta)
RGBCMYK
![Page 11: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/11.jpg)
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.
![Page 12: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/12.jpg)
RESOLUTION
![Page 13: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/13.jpg)
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)
•Print is generally 300dpi
why print has a higher dpi
![Page 14: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/14.jpg)
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.
![Page 15: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/15.jpg)
RESOLUTION & TYPELow resolution hurts typographic detail
![Page 16: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/16.jpg)
TYPOGRAPHYOr, why print designers hate the web
![Page 17: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/17.jpg)
MILLIONS OF FONTS
•Many fonts are designed for a particular medium.
•Considerations include resolution, ink bleed, size, and letter width.
![Page 18: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/18.jpg)
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
![Page 19: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/19.jpg)
THE WEB IS INCONSISTENTThe same font might appear differently.
![Page 20: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/20.jpg)
PRINT CAN DO IT ALL
Seriously, anything goes
Sphinx of black quartz, judge my vow.BaseNineI (36pt)
Sphinx of black quartz, judge my vow.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.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.DeconStruct-Medium (36pt)
Sphinx of black quartz, judge my vow.Dynamoe (36pt)
Sphinx of black quartz, judge my vow.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)
Sphinx of black quartz, judge my vow.WordyDivaBeta (36pt)
Sphinx of black quartz, judge my vow.
![Page 21: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/21.jpg)
SERIF vs. SANS-SERIF
Some argue sans is more readable.
Verdict: Hung jury
![Page 22: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/22.jpg)
FORMAT
![Page 23: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/23.jpg)
PRINT FORMATS
Infinite variety
Some common conventions(letter, trifold, business card)
Consistent for all users/viewers
![Page 24: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/24.jpg)
WEB FORMATS
Constrained by monitor width
May be different for every user
![Page 25: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/25.jpg)
THE “FOLD”
•In print, it has a specific location
•On the web, it could be anywhere
•Significant variation across computers
•People do scroll
![Page 26: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/26.jpg)
OTHER CONSIDERATIONS
WEB:• Fixed/fluid• Centered/left• Connection
PRINT:• Paper stock• Distribution• Page count
![Page 27: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/27.jpg)
INTERACTIVITY
![Page 28: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/28.jpg)
PRINT IS...
linear/sequential: everyone starts at the beginning
immutable: once printed, it doesn’t change
uniform: same piece is seen by entire audience
![Page 29: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/29.jpg)
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
![Page 30: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/30.jpg)
CONVENTIONS
WEB:• Iconography• Element
locations• Help usability
PRINT:• Size/format• Folds/turns• Innovation
encouraged
![Page 31: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/31.jpg)
TECHNICAL STUFFWeb and print have own sets of highly technical challenges
![Page 32: The Difference Between Print and Web Design](https://reader031.fdocuments.us/reader031/viewer/2022020217/54b4cf284a7959bd488b475c/html5/thumbnails/32.jpg)
Q&A