Classic Design And Web Design by Chris Bernard

Classic Design and Web Design What we‟ve learned and can apply from a history of design Chris Bernard, User Experience Evangelist, Microsoft chris.bernard@microsoft.com www.designthinkingdigest.com All images in this presentation are used for educational purposes only

Saul Bass Walter Gropius Jay Doblin Piet Mondrian Laszlo Moholy-Nage Hannes Meyer Charles and Ray Eames Ludwig Paul Rand Mies van der Rohe

What would I tell these guys?

Design is back baby! Yeah!

…the World Wide Web

Bill Moggridge Jesse James Garrett Liz Danzico Valerie Casey John Maeda Irene Au Dan Saffer Bill Buxton Julie Larson-Green

But…

Concept: Courtesy of Jon Harris, a Microsoft buddy

…and

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 Clement Mok

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 Saul Bass Mark English Jay Maisel Milton Glaser Lou Dorfsman Don Weller Morton Godshall Bernie Fuchs Art Kane Heather Cooper Gene Hoffman Symbolism Typography Paul Rand Bill Bonnell Rod Dyer Herb Lubalin Joe Selame Tom Carnase Harry Murphy Ben Rosen Primo Angeli W. Weingart Tom Geismar Mo Lebowitz Source: Photography, Chris Bernard. Illustration, Rachel Pluto, Typography. Chris Bernard. Typography, Chris Bernard. Symbolism, Paul Rand.

Roots 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010 Art Nouveau Psychedelic Cubism Abstract Expressionism Futurism Super Realism Dada Surrealism Pop Art De Stijl Op Art Constructivis Minimalism m Bauhaus Computer Art Deco Funk

Most early moments were born of styles and individuals that derived from painting or architecture Futurism Cubism Dada Art Deco Art Nouveau 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. Pop Art Psychedelic 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 Computer Super Realism 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.

Roots 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010 Art Nouveau Psychedelic Cubism Abstract Expressionism Futurism Super Realism Dada Surrealism Pop Art De Stijl Op Art Constructivis Minimalism m Bauhaus Computer Art Deco Funk Source: Gregg Berryman

Surrealism, De Stijl, Constructivism Surrealism Constructivis De Stijl m Source: Wikipedia Commons, Creative Commons, GNU Free Documentation License, Public Domain, or Fair Use.

Influences

Bauhaus

Wait!

These guys. Walter Gropius Hannes Meyer Ludwig Mies van der Rohe

…and these guys too. László Moholy-Nagy Jay Doblin

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… László Moholy-Nagy Jay Doblin

…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: Multistability (Multistable Perception) Source: Wikipedia

Gestalt: Invariance Source: Wikipedia

Prägnanz Source: Wikipedia

Gestalt Source: Wikipedia

Gestault Source: Wikipedia

Grid

Grid Source: Gregg Berryman

Process

Process Source: Charles and Ray Eames

Process Source: Gregg Berryman

Source: Hasso Plattner Institute of Design

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

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

What‟s next?

Web 2.0

Web 2

+ Standards! Platforms Craft Experience Tools 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

“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.” Paul Rand 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 chris.bernard@microsoft.com 312.925.4095 www.designthinkingdigest.com Look for me on Twitter, Facebook and LinkedIn.

Classic Design And Web Design by Chris Bernard

0 comments

Notes on slide 1

21 Favorites & 1 Group