The document summarizes the evolution of web design from the early 1990s to the present. It discusses four key eras: 1) 1992-1996, the early "World Wide Web" era with basic HTML and early browsers. 2) 1997-2001, the dot-com boom era with expanding HTML and CSS usage and the rise of commercial websites. 3) 2002-2007, the era of web standards and the beginnings of ubiquitous access. 4) 2008-present, the modern era emphasizing standards-based design, emotional and experience design, and designing for all devices and environments. The document advocates focusing on potential, having aspirations, and being responsible to shape the future of web design.

1. The Age of
Emotional &
Experience
Design
Presented by
Denise R. Jacobs
Refresh Ft. Lauderdale
December 2010

2. The Age of Twitter
I am:
@denisejacobs
Our fine event is:
# RefreshFLL @RefreshFLL
And I will wax philosophic on:
#aeed

3. A true renaissance woman
CSSDetectiveGuide.com
InteractWithWebStandards.com

4. Current age of web design

5. The Age of What?
The web is experiencing a kind of renaissance or
even blossoming of possibilities, due to a
confluence of 4 factors

6. Code

7. Browsers

8. Devices, Environment (& Access)

10. Interface designers and Imagineers

11. Well, maybe more like this:

12. Where we are now?

13. How did we get here?

14. Evolution of the web

15. Past

16. 1992
to
1996
The World Wide What? Era

17. The general populace

18. HTML: 1991

19. HTML: circa 1993

20. CSS: 1996

21. CSS: Usage of the time

22. Browsers: pre-1993

23. Browsers: 1993

24. Browsers: 1992-1997
• 1994: Netscape Navigator
• 1995: Internet Explorer
• 1996: Opera

25. Design: very first website
Add examples of web design from that
period
1. First website ever
2. Typical geocities
3. Professional
4. Under construction animated gifs and
rainbow <hr>s

26. Web Design: circa 1996

27. Computers: circa 1996

28. Computers: circa 1996

29. 1992-96: Mobile Phones

30. Mobile Phones: 1992-1997

31. Environment: 1992-1996

32. 1997-
2001
Dot.com Bubble Boom
Insanity Era

33. HTML: 1997-2001
• Beginning1997: HTML 3.2
• End of 1997: HTML 4.0
• Late 1999: HTML 4.01
• 2000: XHTML 1.0

34. CSS: 1998
CSS 2 introduced
• Not yet full Recommendation status,
remains Candidate Recommendation to
present.

35. Browsers: IE v. NN

36. Design: circa 1997

37. Design: circa 2000

38. Design: Flash websites, circa 2000

39. Computers: 1999

40. Mobile Phones: 1997-2000

41. Access: circa 2000

42. 2002
to
2007
Era of Web Standards
& Beginnings of Ubiquity

43. HTML: 2002-2007
• HTML 4.01 and XHTML hold steady as
the favorite versions
• XHTML 1.1 released (but noone seems
to care)

44. Browsers: 2002-2007
• 2001: our favorite browser, IE6 is
released
• 2002: Netscape dies
• 2003: Safari grows with Mac market
• 2004: Firefox rises from the ashes

45. Design: circa 2003

46. Design: circa 2005

47. Mobile Phones: 2002-2007
• 2002: Bl/Crackberry
• 2003: Treo combines PDA with
Smartphone
• 2004: Motorola Razr released

48. 2008
&
2009
Modern Era

49. HTML & CSS: 2008-2009
• Web Standards widely promoted and
embraced
(WASP started in 1998, but started to take
off around 2002-3)

50. Browsers: 2008-2009

51. Design: 2008-2009

52. Computers: 2002-2007

53. Mobile Phones: 2007

54. Environment & Access: 2008-9

55. Present

56. We’re lucky!

57. Improved Code: Easier Implementation

58. Improved Browsers

59. Great devices

60. Great devices

61. Can access anywhere

62. So much figured out

63. Shift focus

64. Change the world?

66. Standards-based Design
Separation of presentation from content by using
web standards and incorporating latest
technologies: HTML5 and CSS3

67. Emotional Design
“Aesthetically pleasing objects appear to users to
be more effective by virtue of their sensual
appeal and an affinity the user feels for the object
based on a formation of an emotional connection
to it. “
- Wikipedia
(with liberal edits)

68. Experience Design
“…Designing products, processes, services,
events, and environments with a focus placed on
the quality of the user experience….Experience
design is driven by consideration of the moments
of engagement between people and [objects],
and the ideas, emotions, and memories that
these moments create.”
- Wikipedia
(with liberal edits)

69. “Social Design”
Design of sites that encourage connection and
interaction of users and build community.

70. Don’t do what everyone else has done

71. Avoid

72. And instead, produce

73. Or

74. Or even

75. Engage and Delight

76. Details that users will love

77. Future

78. To Do: these 3 things...

79. 1. See Potential

80. See Potential
• In yourself and almost infinite possibilities of the
web
– So many options of where to focus and direct your
energy and talents

81. 2. Have Aspirations

82. HaveAspirations
Don’t be skurred:
• Dive in, constantly learn and innovate
• Follow interests and compulsions and see where
they lead you

83. 3. Be Responsible

84. Be Responsible
1. Create things that are both useful and beautiful
2. Practice continuous improvement
3. Stay abreast of trends
4. Create trends
5. Practice the “Sankofa” of design

85. Looking towards the future

86. The First Missive
“Design to where the Web will be, and not where
it is.”
- Faruk Ates

87. The Second Missive

88. The Final Missive
“Be the web designer and create the interfaces that
you want to see in the world.”
- Denise Jacobs

89. Non-exclusive

90. The Age of Emotional and Experience Design

91. Thank you!
denisejacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs