ENERGY DELIGHT Can visual engineering delight the eye

The (awful) power of interactivity Pong, circa 1975

We’re wired for eye candy… 10/7/2020 patricklynch. net

If you ask why something works and you push back far enough, eventually everything

Candy is bad for you…. right? Calvin is with us still…

Why I don’t do what I like to look at… If you want my

Design magazines will turn your brain to oatmeal… But your eyes will enjoy it,

What is simple should be treated simply, what is difficult should be reduced to

The “marketplace” The comfort of choice and complexity

The Web in context The Web is a new medium in an old context

Graphic design is the management of contrast & entry points

Information consists of differences that make a difference. Edward Tufte

The “Gutenberg Z” Initial anchor Terminal anchor

“Reading gravity” Easy movements. With the flow Difficult movements. Against the flow

Eye tracking and page spreads Reader’s first view of page after turning

Eye tracking and page spreads Contrast draws the reader’s eye

Eye tracking and “entry points” No contrast, no fixations

This is not a page ”Ceçi n'est pas une pipe” Magritte…

Users see screens, not pages Design in screens, not pages Users experience screens, not

The screen as a “page” Screens go this way Pages go that way

Limited view of the world What’s available; what’s possible?

Color images and screens RGB Screen 75 dpi Millions of colors Transmitted light CMYK

Design as rhetorical persuasion • Ethos – Is the speaker credible & trustworthy? •

Color as rhetoric • Ethos – Is the color credible & trustworthy? • Pathos

Design fundamentals • Know who the audience is • Know what you want to

Site development process • Site definition and planning • Information architecture & interface •

“Clown’s pants” design erodes your identity as an enterprise

The nice thing about standards is that we have so many to choose from.

Energy wins every time… • Concept – What’s the idea; said to whom? •

For most of your audience, you are your Web site.

patrick. lynch@yale. edu http: //info. med. yale. edu/caim/lynch/ dartmouth/dartmouth_slides_5. htm

Slides: 94

Download presentation

ENERGY & DELIGHT Can visual engineering delight the eye? Patrick J. Lynch, MS Director, Media Group Information Technology Services—Medicine Yale University School of Medicine patrick. lynch@yale. edu 10/7/2020 patricklynch. net

90 seconds

The (awful) power of interactivity Pong, circa 1975

CD-ROM design, c. 1989

Content, not technology (or design)

We’re wired for eye candy… 10/7/2020 patricklynch. net

If you ask why something works and you push back far enough, eventually everything seems to be based on contrast: the ability to distinguish one thing from another. Chris Pulman, The Education of a Graphic Designer

Candy is bad for you…. right? Calvin is with us still…

Why I don’t do what I like to look at… If you want my angels, you get my devils too…

Design magazines will turn your brain to oatmeal… But your eyes will enjoy it, right ‘till the end…

Good ≠ “simple”

What is simple should be treated simply, what is difficult should be reduced to the simplest terms. Josef Muller-Brockmann

Staying out of the user’s way

Site “life cycles” and design

Mature sites reflect their complexity

The “marketplace” The comfort of choice and complexity

Design isn’t simply a matter of taste…

The Web in context The Web is a new medium in an old context Respect communication precedents THE WEB CHANGES EVERYTHING – NOT!

Graphic design is the management of contrast & entry points

Information consists of differences that make a difference. Edward Tufte

The “Gutenberg Z” Initial anchor Terminal anchor

“Reading gravity” Easy movements. With the flow Difficult movements. Against the flow

Eye tracking and page spreads Reader’s first view of page after turning

Eye tracking and page spreads Contrast draws the reader’s eye

Eye tracking and “entry points” No contrast, no fixations

Macula “Blind spot”

~ 45 -55 characters per line

The screen as a “page”

This is not a page ”Ceçi n'est pas une pipe” Magritte…

Users see screens, not pages Design in screens, not pages Users experience screens, not pages Size and shape of screen govern layout design

The screen as a “page” Screens go this way Pages go that way

Limited view of the world What’s available; what’s possible?

17 inch monitor (1024 x 768) Small book

Color images and screens RGB Screen 75 dpi Millions of colors Transmitted light CMYK Paper 150 dpi 4 colors Reflected light

Design as rhetoric

Design as rhetorical persuasion • Ethos – Is the speaker credible & trustworthy? • Pathos – Passions of the audience – Intuitive; does message “feel right? ” • Logos – Does the message make sense?

Color as rhetoric • Ethos – Is the color credible & trustworthy? • Pathos – Customs & expectations of audience – Red & bankers; blue and physicians • Logos – Does the color design reinforce the message or interfere with it?

The Web & existing design genres

Useful existing design genres

Newsletters

The design process

Design fundamentals • Know who the audience is • Know what you want to say • Know what you want the audience to think or do after viewing • Know what your goals are • Establish metrics

Site development process • Site definition and planning • Information architecture & interface • Site design • Site construction • Site marketing • Metrics, evaluation, maintenance

Page design grids, or “wireframes”

Balancing sensation & functionality

Who are you?

“Clown’s pants” design erodes your identity as an enterprise

Identity and Web design

Identity and site design programs

Who are you (personally)?

Managing sites

The nice thing about standards is that we have so many to choose from. Anonymous

Extending the enterprise “blueprint”

Energy is pure delight…

Energy wins every time… • Concept – What’s the idea; said to whom? • Context – What medium; what situation? • Contrast – Graphic design is managing contrast

For most of your audience, you are your Web site.

patrick. lynch@yale. edu http: //info. med. yale. edu/caim/lynch/ dartmouth/dartmouth_slides_5. htm