Classic Design And Web Design by Chris Bernard
•
36 recomendaciones•3,058 vistas
A talk I gave at Webmaster Jam Session in Dallas during the fall of 2007
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Similar a Classic Design And Web Design by Chris Bernard
Similar a Classic Design And Web Design by Chris Bernard (20)
Último
Último (20)
Classic Design And Web Design by Chris Bernard
- 1. 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
- 4. Saul Bass Walter Gropius Jay Doblin Piet Mondrian Laszlo Moholy-Nage Hannes Meyer Charles and Ray Eames Ludwig Paul Rand Mies van der Rohe
- 5. What would I tell these guys?
- 6. Design is back baby! Yeah!
- 7. …the World Wide Web
- 8. Bill Moggridge Jesse James Garrett Liz Danzico Valerie Casey John Maeda Irene Au Dan Saffer Bill Buxton Julie Larson-Green
- 9. But…
- 10. Concept: Courtesy of Jon Harris, a Microsoft buddy
- 11. Concept: Courtesy of Jon Harris, a Microsoft buddy
- 12. Concept: Courtesy of Jon Harris, a Microsoft buddy
- 13. Concept: Courtesy of Jon Harris, a Microsoft buddy
- 14. Concept: Courtesy of Jon Harris, a Microsoft buddy
- 15. Concept: Courtesy of Jon Harris, a Microsoft buddy
- 16. Concept: Courtesy of Jon Harris, a Microsoft buddy
- 17. …and
- 18. 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
- 19. But it can‟t all be that bad?
- 33. Let‟s also not forget about technology.
- 36. What‟s important about what these guys did?
- 37. What didn‟t they do that we should do?
- 38. How can we apply this?
- 39. What might happen next?
- 40. What can we learn from classic design movements?
- 41. Graphic Design
- 42. Photography/Film/Motion Illustration Symbolism Typography Source: Photography, Chris Bernard. Illustration, Rachel Pluto, Typography. Chris Bernard. Typography, Chris Bernard. Symbolism, Paul Rand.
- 43. 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.
- 44. 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
- 45. 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.
- 46. 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.
- 47. 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.
- 48. We see representations of these styles in much digital work we see today. MIX conference theme design Halo 3 Source: Microsoft.
- 49. 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
- 50. 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
- 51. Surrealism, De Stijl, Constructivism Surrealism Constructivis De Stijl m Source: Wikipedia Commons, Creative Commons, GNU Free Documentation License, Public Domain, or Fair Use.
- 52. Influences
- 55. Bauhaus
- 57. Wait!
- 58. These guys. Walter Gropius Hannes Meyer Ludwig Mies van der Rohe
- 59. …and these guys too. László Moholy-Nagy Jay Doblin
- 60. These guys all shaped modern design as we know it and practice it today.
- 61. Why is the Bauhaus movement so important to us as Web designers and developers?
- 62. Bauhaus was the first movement to truly focus on design as craft that could be delivered via repeatable processes.
- 63. 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…
- 64. Architecture
- 65. Product design
- 66. Fine arts
- 67. Craft
- 68. Theatre
- 69. Photography
- 70. Graphic design
- 72. “…to create a new guild of craftsmen, without the class distinctions which raise an arrogant barrier between craftsman and artist.” Walter Gropius
- 73. “The complete building is the ultimate aim of all the visual arts.” Walter Gropius
- 74. 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.
- 75. These guys… László Moholy-Nagy Jay Doblin
- 76. …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)
- 77. There are three things we can take from these movements and apply to our jobs as Web designers and developers.
- 78. Gestalt
- 80. Gestalt: Emergence Source: Chris Bernard
- 83. Gestalt: Multistability (Multistable Perception) Source: Wikipedia
- 96. Grid
- 98. Process
- 99. Process Source: Charles and Ray Eames
- 106. Source: Hasso Plattner Institute of Design
- 111. What‟s missing?
- 112. Contextual Research & Ethnography for creators and consumers Source: Institute of Design
- 113. Cross-Disciplinary Team Collaboration Source: International Design Magazine
- 114. People Collaboration: Pro Mashups
- 115. People Collaboration: Consumer Mashups Source: FreakingNews.com
- 116. People Collaboration
- 117. People Collaboration
- 122. How can we apply what Bauhaus gave us?
- 129. Process
- 130. Source: Jesse James Garrett
- 134. Caves/Environment
- 138. Source: Microsoft
- 141. Source: Microsoft
- 142. What‟s next?
- 143. Web 2.0
- 144. Web 2
- 145. + Standards! Platforms Craft Experience Tools Source: Microsoft
- 146. Gadgets: Consumer Examples: ITN News, EasyJet, Manchester United FC, Betfair, Arsenal.com, BBC Radio. More available from http://gallery.live.com/ Source: Microsoft
- 147. Gadgets: Business Examples: News/information feeds, Data analysis/reporting, Alerts, Intranet/Extranet tools Source: Microsoft
- 148. New web experiences Photosynth Virtual Earth Source: Microsoft
- 149. New media experiences Source: Microsoft
- 150. New customer experiences Surface Source: Microsoft
- 151. Rich experiences optimized for platform: Consumer Rich, immersive web experiences Online shopping Kiosk applications Content distribution Source: Microsoft
- 152. Rich experiences optimized for platform: Business Data dashboards Visualisation Custom tools/management apps Real-time reporting Source: Microsoft
- 153. RIAs and platform/device optimized experiences will extend the reach of browser- based applications and services
- 154. Source: Frank Ramirez, Ramirez Design and Luke Wroblewski, LukeW Interface Designs, with minor technology updates by Chris Bernard
- 155. Summary Thoughts
- 156. Nathan Myhrvold's 1st law of software “Software is a gas” Source: www.istockphoto.com
- 157. Chris Bernard‟s1st law of user experience “User experience is liquid” Source: www.istockphoto.com
- 158. Paul Rand
- 159. “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.quot; 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.
- 160. All this has happened before, all this will happen again. Source: With apologies for cribbing from Battlestar Galactica and being a dork.
- 161. Thanks!
- 162. Chris Bernard User Experience Evangelist chris.bernard@microsoft.com 312.925.4095 www.designthinkingdigest.com Look for me on Twitter, Facebook and LinkedIn.