classic design and web design by chris bernard
TRANSCRIPT
Classic Design and Web DesignWhat we‟ve learned and can apply from a history of design
Chris Bernard,
User Experience Evangelist, Microsoft
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
John MaedaIrene Au
Dan SafferBill Buxton
Julie Larson-Green
Bill Moggridge
Liz DanzicoValerie Casey
Jesse James Garrett
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
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
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…
“…to create a new guild of
craftsmen, without the
class distinctions which
raise an arrogant barrier
between craftsman and
artist.”
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.
…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.
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
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
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.
Chris Bernard
User Experience Evangelist
312.925.4095
www.designthinkingdigest.com
Look for me on Twitter, Facebook and LinkedIn.