Classic Design And Web Design by Chris Bernard

8,925 views

Published on

A talk I gave at Webmaster Jam Session in Dallas during the fall of 2007

Published in: Technology, Design
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,925
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
621
Comments
0
Likes
32
Embeds 0
No embeds

No notes for slide

Classic Design And Web Design by Chris Bernard

  1. 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
  2. 2. Saul Bass Walter Gropius Jay Doblin Piet Mondrian Laszlo Moholy-Nage Hannes Meyer Charles and Ray Eames Ludwig Paul Rand Mies van der Rohe
  3. 3. What would I tell these guys?
  4. 4. Design is back baby! Yeah!
  5. 5. …the World Wide Web
  6. 6. Bill Moggridge Jesse James Garrett Liz Danzico Valerie Casey John Maeda Irene Au Dan Saffer Bill Buxton Julie Larson-Green
  7. 7. But…
  8. 8. Concept: Courtesy of Jon Harris, a Microsoft buddy
  9. 9. Concept: Courtesy of Jon Harris, a Microsoft buddy
  10. 10. Concept: Courtesy of Jon Harris, a Microsoft buddy
  11. 11. Concept: Courtesy of Jon Harris, a Microsoft buddy
  12. 12. Concept: Courtesy of Jon Harris, a Microsoft buddy
  13. 13. Concept: Courtesy of Jon Harris, a Microsoft buddy
  14. 14. Concept: Courtesy of Jon Harris, a Microsoft buddy
  15. 15. …and
  16. 16. 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
  17. 17. But it can‟t all be that bad?
  18. 18. Let‟s also not forget about technology.
  19. 19. What‟s important about what these guys did?
  20. 20. What didn‟t they do that we should do?
  21. 21. How can we apply this?
  22. 22. What might happen next?
  23. 23. What can we learn from classic design movements?
  24. 24. Graphic Design
  25. 25. Photography/Film/Motion Illustration Symbolism Typography Source: Photography, Chris Bernard. Illustration, Rachel Pluto, Typography. Chris Bernard. Typography, Chris Bernard. Symbolism, Paul Rand.
  26. 26. 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.
  27. 27. 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
  28. 28. 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.
  29. 29. 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.
  30. 30. 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.
  31. 31. We see representations of these styles in much digital work we see today. MIX conference theme design Halo 3 Source: Microsoft.
  32. 32. 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
  33. 33. 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
  34. 34. Surrealism, De Stijl, Constructivism Surrealism Constructivis De Stijl m Source: Wikipedia Commons, Creative Commons, GNU Free Documentation License, Public Domain, or Fair Use.
  35. 35. Influences
  36. 36. Bauhaus
  37. 37. Wait!
  38. 38. These guys. Walter Gropius Hannes Meyer Ludwig Mies van der Rohe
  39. 39. …and these guys too. László Moholy-Nagy Jay Doblin
  40. 40. These guys all shaped modern design as we know it and practice it today.
  41. 41. Why is the Bauhaus movement so important to us as Web designers and developers?
  42. 42. Bauhaus was the first movement to truly focus on design as craft that could be delivered via repeatable processes.
  43. 43. 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…
  44. 44. Architecture
  45. 45. Product design
  46. 46. Fine arts
  47. 47. Craft
  48. 48. Theatre
  49. 49. Photography
  50. 50. Graphic design
  51. 51. Bauhaus Principles
  52. 52. “…to create a new guild of craftsmen, without the class distinctions which raise an arrogant barrier between craftsman and artist.” Walter Gropius
  53. 53. “The complete building is the ultimate aim of all the visual arts.” Walter Gropius
  54. 54. 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.
  55. 55. These guys… László Moholy-Nagy Jay Doblin
  56. 56. …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)
  57. 57. There are three things we can take from these movements and apply to our jobs as Web designers and developers.
  58. 58. Gestalt
  59. 59. Gestalt: Emergence Source: Wikipedia
  60. 60. Gestalt: Emergence Source: Chris Bernard
  61. 61. Gestalt: Reification Source: Wikipedia
  62. 62. Gestalt: Reification Source: Wikipedia
  63. 63. Gestalt: Multistability (Multistable Perception) Source: Wikipedia
  64. 64. Gestalt: Invariance Source: Wikipedia
  65. 65. Gestalt: Invariance Source: Wikipedia
  66. 66. Gestalt: Invariance Source: Wikipedia
  67. 67. Gestalt: Invariance Source: Wikipedia
  68. 68. Gestalt: Invariance Source: Wikipedia
  69. 69. Prägnanz Source: Wikipedia
  70. 70. Gestalt Source: Wikipedia
  71. 71. Gestalt Source: Wikipedia
  72. 72. Gestault Source: Wikipedia
  73. 73. Gestault Source: Wikipedia
  74. 74. Grid
  75. 75. Grid Source: Gregg Berryman
  76. 76. Process
  77. 77. Process Source: Charles and Ray Eames
  78. 78. Process Source: Gregg Berryman
  79. 79. Process Source: Gregg Berryman
  80. 80. Process Source: Gregg Berryman
  81. 81. Process Source: Gregg Berryman
  82. 82. Process Source: Gregg Berryman
  83. 83. Process Source: Gregg Berryman
  84. 84. Source: Hasso Plattner Institute of Design
  85. 85. Source: Chris Bernard
  86. 86. Source: Chris Bernard
  87. 87. What‟s missing?
  88. 88. Contextual Research & Ethnography for creators and consumers Source: Institute of Design
  89. 89. Cross-Disciplinary Team Collaboration Source: International Design Magazine
  90. 90. People Collaboration: Pro Mashups
  91. 91. People Collaboration: Consumer Mashups Source: FreakingNews.com
  92. 92. People Collaboration
  93. 93. People Collaboration
  94. 94. What about diversity?
  95. 95. What about accessibility?
  96. 96. What about sustainability?
  97. 97. How can we apply what Bauhaus gave us?
  98. 98. Grid Source: Chris Bernard
  99. 99. Process Source: Chris Bernard
  100. 100. Process
  101. 101. Source: Jesse James Garrett
  102. 102. Caves/Environment
  103. 103. Source: Microsoft
  104. 104. Source: Microsoft
  105. 105. What‟s next?
  106. 106. Web 2.0
  107. 107. Web 2
  108. 108. + Standards! Platforms Craft Experience Tools Source: Microsoft
  109. 109. Gadgets: Consumer Examples: ITN News, EasyJet, Manchester United FC, Betfair, Arsenal.com, BBC Radio. More available from http://gallery.live.com/ Source: Microsoft
  110. 110. Gadgets: Business Examples: News/information feeds, Data analysis/reporting, Alerts, Intranet/Extranet tools Source: Microsoft
  111. 111. New web experiences Photosynth Virtual Earth Source: Microsoft
  112. 112. New media experiences Source: Microsoft
  113. 113. New customer experiences Surface Source: Microsoft
  114. 114. Rich experiences optimized for platform: Consumer Rich, immersive web experiences Online shopping Kiosk applications Content distribution Source: Microsoft
  115. 115. Rich experiences optimized for platform: Business Data dashboards Visualisation Custom tools/management apps Real-time reporting Source: Microsoft
  116. 116. RIAs and platform/device optimized experiences will extend the reach of browser- based applications and services
  117. 117. Source: Frank Ramirez, Ramirez Design and Luke Wroblewski, LukeW Interface Designs, with minor technology updates by Chris Bernard
  118. 118. Summary Thoughts
  119. 119. Nathan Myhrvold's 1st law of software “Software is a gas” Source: www.istockphoto.com
  120. 120. Chris Bernard‟s1st law of user experience “User experience is liquid” Source: www.istockphoto.com
  121. 121. Paul Rand
  122. 122. “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.
  123. 123. All this has happened before, all this will happen again. Source: With apologies for cribbing from Battlestar Galactica and being a dork.
  124. 124. Thanks!
  125. 125. Chris Bernard User Experience Evangelist chris.bernard@microsoft.com 312.925.4095 www.designthinkingdigest.com Look for me on Twitter, Facebook and LinkedIn.

×