Moving From Print to Web: Interaction Design, Planning and Presentation

45
AIGA LA & Print to Web Part 3: Planning & Presentation @josecaballer

description

Jose Caballer speaks at AIGA LA & Abobe Print to Web Part 3 Lecture Series (Thursday, July 22, 2010 at Downtown Independent Theatre)

Transcript of Moving From Print to Web: Interaction Design, Planning and Presentation

Page 1: Moving From Print to Web: Interaction Design, Planning and Presentation

AIGA LA & Print to Web Part 3:Planning & Presentation

@josecaballer

Page 2: Moving From Print to Web: Interaction Design, Planning and Presentation

Jose

Page 3: Moving From Print to Web: Interaction Design, Planning and Presentation

I am a web designer

Page 4: Moving From Print to Web: Interaction Design, Planning and Presentation

Born Digital

Page 5: Moving From Print to Web: Interaction Design, Planning and Presentation

Question: What are your Challenges in Planningwebsites?

Page 6: Moving From Print to Web: Interaction Design, Planning and Presentation

A Story in 3 Parts

Page 7: Moving From Print to Web: Interaction Design, Planning and Presentation

Part 1:In the Beginning

Page 8: Moving From Print to Web: Interaction Design, Planning and Presentation

Question: Why is web design so different than brochures, posters, books and other print?

Page 9: Moving From Print to Web: Interaction Design, Planning and Presentation

1996

Page 10: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 11: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 12: Moving From Print to Web: Interaction Design, Planning and Presentation

Part 2: The Birth of User

Experience

Page 13: Moving From Print to Web: Interaction Design, Planning and Presentation

Business Creative Tech Marketing

ROI RGB USP

SQL

Page 14: Moving From Print to Web: Interaction Design, Planning and Presentation

Part 3: The Firsts Steps

Page 15: Moving From Print to Web: Interaction Design, Planning and Presentation

The Dorktionary

15

1. The Usability Audit What works, what doesn’t

2. User Personas / Profiles Who are they? Age, gender, income, occupation - What motivates them, their story

3. User Stories What will the user do on the site

4. Site Map Give me a macro picture of this thing

5. Wire Frames Where are the components, features and functionality located on a screen?

6. The Creative Brief What should this site look like

6. Site Scapes What does the general look and feel look like - without making an actual page.

7. Prototypes Lets do a quick and dirty proof of our idea

8. Detailed Mockups Down to the pixel designs of a page on the site.

TM

Page 16: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 17: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 18: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 19: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 20: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 21: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 22: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 23: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 24: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 25: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 26: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 27: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 28: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 29: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 30: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 31: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 32: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 33: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 34: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 35: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 36: Moving From Print to Web: Interaction Design, Planning and Presentation
Page 37: Moving From Print to Web: Interaction Design, Planning and Presentation

Closing Thoughts

Page 38: Moving From Print to Web: Interaction Design, Planning and Presentation

The Average Hourly Rate of a UX Designer in L.A. is between$75 & $125/hr.

Page 39: Moving From Print to Web: Interaction Design, Planning and Presentation

I have been designing websites for almost 15 years

and I have never coded a website for a client.

Page 40: Moving From Print to Web: Interaction Design, Planning and Presentation

Programmers and Business people are just as scared

of you than you are of them.

Page 41: Moving From Print to Web: Interaction Design, Planning and Presentation

Being really good at print makes you a hot commodity in web design.

Page 42: Moving From Print to Web: Interaction Design, Planning and Presentation

3 things between you and a successful print to web transition are:1. Knowing the formats 2. Understanding user experience 3. Don’t be afraid of Techies

Page 43: Moving From Print to Web: Interaction Design, Planning and Presentation

Business Creative Tech Marketing

ROI RGB USP

SQL

Page 44: Moving From Print to Web: Interaction Design, Planning and Presentation

COMING THIS FALL: GROOP SKOOL HYPER COLLABORATION WEEKEND WORKSHOPS

SKOOLGROOP TMBUSINESS

TECHNICAL

CREATIVE

MARKETING

COMING THIS FALL: GROOP SKOOL HYPER COLLABORATION WEEKEND WORKSHOPS

SKOOL

GROOP TM

BUSINESS

TECHNICAL

CREATIVE

MARKETING

COMING THIS FALL: GROOP SKOOL HYPER COLLABORATION WEEKEND WORKSHOPS

SKOOLGROOP TMBUSINESS

TECHNICAL

CREATIVE

MARKETING

Coming This Fall:

Page 45: Moving From Print to Web: Interaction Design, Planning and Presentation

Thank You.

@josecaballer