Quick Upload

Classic Design And Web Design by Chris Bernard

from chrisbernard, 11 months ago Add as contact

3837 views | 0 comments | 14 favorites | 1 embeds (Stats)

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

Embed customize close
 

Categories

Technology

Tags

Groups/Events

More Info

This slideshow is Public

Also on LinkedIn

Views: 3837 Comments: 0 Favorites: 14 Downloads: 274

View Details: 3792 on Slideshare
45 from embeds
Most viewed embeds (Top 5): (…more)
All Embeds: (less)
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this slideshow as inappropriate.

If needed, use the feedback form to let us know more details.

Loading...
Flash Player 9 (or above) is needed to view slideshows. We have detected that you do not have it on your computer. To install it, go here.
Post to Twitter Post to Twitter
Share on Facebook Share on Facebook
Post to Blogger Post to Blogger
Myspace Hi5 Friendster Xanga LiveJournal Facebook Blogger Tagged Typepad Freewebs BlackPlanet gigya icons

Presentation Transcript

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

Feed RSS

What's new?

© 2008 SlideShare Inc. All Rights Reserved