Classic Design And Web Design by Chris Bernard

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    21 Favorites & 1 Group

    Classic Design And Web Design by Chris Bernard - Presentation Transcript

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

    + chrisbernardchrisbernard, 2 years ago

    custom

    6341 views, 21 favs, 2 embeds more stats

    A talk I gave at Webmaster Jam Session in Dallas du more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 6341
      • 6291 on SlideShare
      • 50 from embeds
    • Comments 0
    • Favorites 21
    • Downloads 415
    Most viewed embeds
    • 49 views on http://chrisbernard.blogs.com
    • 1 views on http://www.baramstory.com

    more

    All embeds
    • 49 views on http://chrisbernard.blogs.com
    • 1 views on http://www.baramstory.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events