HTML Injection Attacks: Impact and Mitigation Strategies
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
2.
3.
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
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
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.
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…
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.
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.
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
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
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.
162. Chris Bernard
User Experience Evangelist
chris.bernard@microsoft.com
312.925.4095
www.designthinkingdigest.com
Look for me on Twitter, Facebook and LinkedIn.