The Difference Between Print and Web Design

!ber/glassThe difference between print and web design

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

WHERE WE’RE HEADED

Adobe Tools

Color

Resolution

Typography

Format

Interactivity

A MAJOR THEME

!exibility vs.consistency

ADOBE TOOLS

USE THE RIGHT APP!

WEB:• Dreamweaver• Flash• Photoshop• Fireworks• Illustrator*

PRINT:• InDesign• Illustrator• Photoshop

COLOR

ADDITIVE & SUBTRACTIVE

COLOR MODELS

Web:rgb

Print:cmyk

Print:pms

DIFFERENT GAMUTSVisible spectrum (sorta)

RGBCMYK

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.

RESOLUTION

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

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.

RESOLUTION & TYPELow resolution hurts typographic detail

TYPOGRAPHYOr, why print designers hate the web

MILLIONS OF FONTS

•Many fonts are designed for a particular medium.

•Considerations include resolution, ink bleed, size, and letter width.

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

THE WEB IS INCONSISTENTThe same font might appear differently.

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.

SERIF vs. SANS-SERIF

Some argue sans is more readable.

Verdict: Hung jury

FORMAT

PRINT FORMATS

Infinite variety

Some common conventions(letter, trifold, business card)

Consistent for all users/viewers

WEB FORMATS

Constrained by monitor width

May be different for every user

THE “FOLD”

•In print, it has a specific location

•On the web, it could be anywhere

•Significant variation across computers

•People do scroll

OTHER CONSIDERATIONS

WEB:• Fixed/fluid• Centered/left• Connection

PRINT:• Paper stock• Distribution• Page count

INTERACTIVITY

PRINT IS...

linear/sequential: everyone starts at the beginning

immutable: once printed, it doesn’t change

uniform: same piece is seen by entire audience

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

CONVENTIONS

WEB:• Iconography• Element

locations• Help usability

PRINT:• Size/format• Folds/turns• Innovation

encouraged

TECHNICAL STUFFWeb and print have own sets of highly technical challenges

Q&A

CONNECTBen Byrne

ben@byrnecreative.com

facebook.com/drywall

AIM: drywallbmb

@drywall