Classic Design And Web Design by Chris Bernard

Classic Design and Web DesignWhat we‟ve learned and can apply from a history of design

Chris Bernard,

User Experience Evangelist, Microsoft

[email protected]

www.designthinkingdigest.com

All images in this presentation are used for educational purposes only

Laszlo

Moholy-Nage

Saul Bass

Jay DoblinPiet Mondrian

Walter Gropius

Hannes

Meyer

Charles and Ray

Eames Ludwig

Mies van der Rohe

Paul Rand

What would I tell these guys?

Design is back baby! Yeah!

…the World Wide Web

John MaedaIrene Au

Dan SafferBill Buxton

Julie Larson-Green

Bill Moggridge

Liz DanzicoValerie Casey

Jesse James Garrett

But…

Concept: Courtesy of Jon Harris, a Microsoft buddy

Concept: Courtesy of Jon Harris, a Microsoft buddy

Concept: Courtesy of Jon Harris, a Microsoft buddy

Concept: Courtesy of Jon Harris, a Microsoft buddy

Concept: Courtesy of Jon Harris, a Microsoft buddy

Concept: Courtesy of Jon Harris, a Microsoft buddy

Concept: Courtesy of Jon Harris, a Microsoft buddy

…and

Clement Mok

There has clearly been a steady decline in the

design profession for over 30 years, and the

source of that decline is the profession‟s

intractable stasis.

We are unchanged professionals in a changing

professional climate, clutching at old idols,

while failing to create new offerings, failing to

reinvent and reinvigorate the practice when

needed, failing to inculcate a professional

culture that is accessible and fair.

Source: Communication Arts, 2003

But it can‟t all be that bad?

Let‟s also not forget about

technology.

What‟s important about what these

guys did?

What didn‟t they do that we should

do?

How can we apply this?

What might happen next?

What can we learn from classic

design movements?

Graphic Design

Photography/Film/Motion Illustration

Symbolism Typography

Source: Photography, Chris Bernard. Illustration, Rachel Pluto, Typography. Chris Bernard. Typography, Chris Bernard. Symbolism, Paul Rand.

Photography/Film/Motion Illustration

Symbolism Typography

Saul Bass

Jay Maisel

Lou Dorfsman

Morton Godshall

Art Kane

Paul Rand

Rod Dyer

Joe Selame

Harry Murphy

Primo Angeli

Tom Geismar

Mark English

Milton Glaser

Don Weller

Bernie Fuchs

Heather Cooper

Gene Hoffman

Bill Bonnell

Herb Lubalin

Tom Carnase

Ben Rosen

W. Weingart

Mo Lebowitz

Source: Photography, Chris Bernard. Illustration, Rachel Pluto, Typography. Chris Bernard. Typography, Chris Bernard. Symbolism, Paul Rand.

1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010

Art Nouveau

Cubism

Futurism

Dada Surrealism

De Stijl

Constructivis

m

Bauhaus

Art Deco

Psychedelic

Abstract Expressionism

Super

Realism

Pop Art

Op Art

Minimalism

Computer

Funk

Roots

Most early moments were born of styles and individuals

that derived from painting or architecture

Art DecoDada

Cubism

Art Nouveau

Futurism

Source: Wikipedia Commons, Creative Commons, GNU Free Documentation License or Public Domain.

Psychedelic and pop art often leveraged existing influences

in packaging, billboards and images.

Psychedelic

Pop Art

Source: Wikipedia Commons, Creative Commons, GNU Free Documentation License, Public Domain, or Fair Use.

Science and the quest for photorealism drive computer

influenced art and borrow from the super realism movement

Super

Realism

Computer

Computer

Source: Wikipedia Commons, Creative Commons, GNU Free Documentation License, Public Domain, or Fair Use.

We see representations of these styles in

much digital work we see today.

MIX conference theme design Halo 3

Source: Microsoft.

1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010

Art Nouveau

Cubism

Futurism

Dada Surrealism

De Stijl

Constructivis

m

Bauhaus

Art Deco

Psychedelic

Abstract Expressionism

Super

Realism

Pop Art

Op Art

Minimalism

Computer

Funk

Roots

Source: Gregg Berryman

1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010

Art Nouveau

Cubism

Futurism

Dada Surrealism

De Stijl

Constructivis

m

Bauhaus

Art Deco

Psychedelic

Abstract Expressionism

Super

Realism

Pop Art

Op Art

Minimalism

Computer

Funk

Roots

Source: Gregg Berryman

Surrealism, De Stijl, Constructivism

Source: Wikipedia Commons, Creative Commons, GNU Free Documentation License, Public Domain, or Fair Use.

SurrealismDe Stijl

Constructivis

m

Influences

Bauhaus

Wait!

Hannes MeyerWalter Gropius Ludwig Mies van der Rohe

These guys.

Jay DoblinLászló Moholy-Nagy

…and these guys too.

These guys all shaped modern design as we know it and

practice it today.

Why is the Bauhaus movement so

important to us as Web designers

and developers?

Bauhaus was the first movement to

truly focus on design as craft that

could be delivered via repeatable

processes.

The Bauhaus movement recognized the

creative relationships between art and

technology.

It extended Constructivist and De Stijl ideas

into all aspects of visual communication.

Including…

Architecture

Product design

Fine arts

Craft

Theatre

Photography

Graphic design

Bauhaus Principles

“…to create a new guild of

craftsmen, without the

class distinctions which

raise an arrogant barrier

between craftsman and

artist.”

Walter Gropius

“The complete building is

the ultimate aim of all the

visual arts.”

Walter Gropius

Precedents

• Functional architecture and consumer good that are

functional, cheap and consistent with mass production.

• Reunite art with craft to develop high-end and function

products with artistic pretensions.

• Artists trained to work with „industry‟ and learn skills in

illustration (painting), photography, textiles, typography,

sculpture, architecture.

These guys…

Jay DoblinLászló Moholy-Nagy

…linked the Bauhaus to design as we

know it today by…

• Bringing the Bauhaus school to the United States in

1939 (Moholy-Nagy)

• Bring the principals of the Bauhaus to the Harvard

School of Design (Gropius)

• Formalizing the techniques, practices and application

of design to industry (Doblin)

There are three things we can take

from these movements and apply to

our jobs as Web designers and

developers.

Gestalt

Gestalt: Emergence

Source: Wikipedia

Gestalt: Emergence

Source: Chris Bernard

Gestalt: Reification

Source: Wikipedia

Gestalt: Reification

Source: Wikipedia

Gestalt: Multistability (Multistable Perception)

Source: Wikipedia

Gestalt: Invariance

Source: Wikipedia

Gestalt: Invariance

Source: Wikipedia

Gestalt: Invariance

Source: Wikipedia

Gestalt: Invariance

Source: Wikipedia

Gestalt: Invariance

Source: Wikipedia

Prägnanz

Source: Wikipedia

Gestalt

Source: Wikipedia

Gestalt

Source: Wikipedia

Gestault

Source: Wikipedia

Gestault

Source: Wikipedia

Grid

Grid

Source: Gregg Berryman

Process

Process

Source: Charles and Ray Eames

Process

Source: Gregg Berryman

Process

Source: Gregg Berryman

Process

Source: Gregg Berryman

Process

Source: Gregg Berryman

Process

Source: Gregg Berryman

Process

Source: Gregg Berryman

Source: Hasso Plattner Institute of Design

Source: Chris Bernard

Source: Chris Bernard

What‟s missing?

Contextual Research & Ethnography for creators and

consumers

Source: Institute of Design

Cross-Disciplinary Team Collaboration

Source: International Design Magazine

People Collaboration: Pro Mashups

People Collaboration: Consumer Mashups

Source: FreakingNews.com

People Collaboration

People Collaboration

What about diversity?

What about accessibility?

What about sustainability?

How can we apply what Bauhaus

gave us?

Grid

Source: Chris Bernard

Process

Source: Chris Bernard

Process

Source: Jesse James Garrett

Caves/Environment

Source: Microsoft

Source: Microsoft

What‟s next?

Web 2.0

Web2

Craft

Platforms

Tools

Experience

+ Standards!

Source: Microsoft

Gadgets: Consumer

Examples: ITN News, EasyJet, Manchester United FC, Betfair, Arsenal.com, BBC Radio.

More available from http://gallery.live.com/ Source: Microsoft

Gadgets: Business

Examples: News/information feeds, Data analysis/reporting, Alerts, Intranet/Extranet tools

Source: Microsoft

New web experiences

Photosynth Virtual Earth

Source: Microsoft

New media experiences

Source: Microsoft

New customer experiences

Surface

Source: Microsoft

Rich experiences optimized for platform: Consumer

Rich, immersive web experiences Online shopping

Kiosk applications Content distribution Source: Microsoft

Rich experiences optimized for platform: Business

Data dashboards Visualisation

Custom tools/management apps Real-time reporting Source: Microsoft

RIAs and platform/device

optimized experiences will

extend the reach of browser-

based applications and services

Source: Frank Ramirez, Ramirez Design and Luke Wroblewski, LukeW Interface Designs, with minor technology updates by Chris Bernard

Summary Thoughts

Nathan Myhrvold's 1st law of software

“Software is a gas”

Source: www.istockphoto.com

Chris Bernard‟s1st law of user experience

“User experience is liquid”

Source: www.istockphoto.com

Paul Rand

Paul Rand

“If a user experience can be refined, without disturbing it's image, it seems reasonable to do

so. A user experience, after all, is an instrument of pride and should be shown at its best."

Here is what a user experience is and does;

• A user experience is a flag, a signature, an escutcheon.

• A user experience doesn't sell (directly), it identifies.

• A user experience is rarely a description of a business.

• A user experience derives its meaning from the quality of the thing it symbolizes, not the

other way around.

A well designed user experience, in the end, is a reflection of the business it symbolizes. It

connotes a thoughtful and purposeful enterprise, and mirrors the quality of its products or

services. it is good public relations - a harbinger of goodwill. It says, 'We care.'

A user experience is less important than the product it signifies; what it means is more

important than what it looks like.”

Source: Paul Rand, Some thoughts…and some logos.

All this has happened before, all

this will happen again.

Source: With apologies for cribbing from Battlestar Galactica and being a dork.

Thanks!

Chris Bernard

User Experience Evangelist

[email protected]

312.925.4095

www.designthinkingdigest.com

Look for me on Twitter, Facebook and LinkedIn.