Presented byDenise R. Jacobs

Refresh Ft. LauderdaleDecember 2010

The Age of Emotional & Experience

Design

The Age of TwitterI am:

@denisejacobs

Our fine event is:# RefreshFLL @RefreshFLL

And I will wax philosophic on:#aeed

A true renaissance woman

CSSDetectiveGuide.com

InteractWithWebStandards.com

Current age of web design

The Age of What?The web is experiencing a kind of renaissance or

even blossoming of possibilities, due to a confluence of 4 factors

Code

Browsers

Devices, Environment (& Access)

Interface designers and Imagineers

Well, maybe more like this:

Where we are now?

How did we get here?

Evolution of the web

Past

1992to

1996

The World Wide What? Era

The general populace

HTML: 1991

HTML: circa 1993

CSS: 1996

CSS: Usage of the time

Browsers: pre-1993

Browsers: 1993

Browsers: 1992-1997

• 1994: Netscape Navigator• 1995: Internet Explorer• 1996: Opera

Design: very first website

Add examples of web design from that period

1. First website ever2. Typical geocities3. Professional4. Under construction animated gifs and

rainbow <hr>s

Web Design: circa 1996

Computers: circa 1996

Computers: circa 1996

1992-96: Mobile Phones

Mobile Phones: 1992-1997

Environment: 1992-1996

1997-2001

Dot.com Bubble Boom Insanity Era

HTML: 1997-2001

• Beginning1997: HTML 3.2• End of 1997: HTML 4.0• Late 1999: HTML 4.01• 2000: XHTML 1.0

CSS: 1998

CSS 2 introduced• Not yet full Recommendation status,

remains Candidate Recommendation to present.

Browsers: IE v. NN

Design: circa 1997

Design: circa 2000

Design: Flash websites, circa 2000

Computers: 1999

Mobile Phones: 1997-2000

Access: circa 2000

2002to

2007

Era of Web Standards& Beginnings of Ubiquity

HTML: 2002-2007

• HTML 4.01 and XHTML hold steady as the favorite versions

• XHTML 1.1 released (but noone seems to care)

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

Design: circa 2003

Design: circa 2005

Mobile Phones: 2002-2007

• 2002: Bl/Crackberry• 2003: Treo combines PDA with

Smartphone• 2004: Motorola Razr released

2008 &

2009

Modern Era

HTML & CSS: 2008-2009

• Web Standards widely promoted and embraced

(WASP started in 1998, but started to take off around 2002-3)

Browsers: 2008-2009

Design: 2008-2009

Computers: 2002-2007

Mobile Phones: 2007

Environment & Access: 2008-9

Present

We’re lucky!

Improved Code: Easier Implementation

Improved Browsers

Great devices

Great devices

Can access anywhere

So much figured out

Shift focus

Change the world?

Standards-based DesignSeparation of presentation from content by using web standards and incorporating latest technologies: HTML5 and CSS3

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 connectionto it. “

- Wikipedia (with liberal edits)

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)

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

Don’t do what everyone else has done

Avoid

And instead, produce

Or

Or even

Engage and Delight

Details that users will love

Future

To Do: these 3 things...

1. See Potential

See Potential• In yourself and almost infinite possibilities of the

web– So many options of where to focus and direct your

energy and talents

2. Have Aspirations

HaveAspirationsDon’t be skurred:• Dive in, constantly learn and innovate• Follow interests and compulsions and see where

they lead you

3. Be Responsible

Be Responsible1. Create things that are both useful and beautiful2. Practice continuous improvement3. Stay abreast of trends4. Create trends5. Practice the “Sankofa” of design

Looking towards the future

The First Missive“Design to where the Web will be, and not where

it is.”- Faruk Ates

The Second Missive

The Final Missive“Be the web designer and create the interfaces that

you want to see in the world.”- Denise Jacobs

Non-exclusive

The Age of Emotional and Experience Design

Thank you!denisejacobs.com

twitter.com/denisejacobs

slideshare.net/denisejacobs