Just Design It - An Approach To Web App Design

Just Design It An approach to web app design by Karri Saarinen LABS

? Who am I?

6 developer years designer of web stuff entrepreneur

Product Manager / Partner, UX & Design Co-founder

My approach to design projects 1 Concept Brief 2 Sketching 3 Wireframes 4 Mockups 5 Implementation 6 Lifecycle

Let’s say we’re desiging a photosharing site for twitter users.

1 Concept Deﬁne the core for the project/product. What’s the problem we are trying to solve? eg. Sharing photos easily on twitter Why? - People want to share photos on twitter Who is the customer? - Twitter population (online hipsters) Goals - Able to upload, view and share photos

End up with a Concept Brief The doc should have sections like: - Problem - Solution - Goals - Views - Personas

Personas have two goals: A persona: “Evan the 30-year old developer who loves twitter” Discover and keep the person who you’re designing for clear in your mind. (You can’t design for everyone) End UI or feature debates (Q: Do we need printing option? A: No. Evan doesn’t have a printer)

2 Sketch 1 List views on piece of paper 2 List elements on a view 3 Group elements with letters, prioritize 4 Draw Thrash as much as you can!

2 SKETCH: List views - Photo view - Upload form - Account - Homepage - Sign up / Sign in Can you remove or merge some views?

2 SKETCH: List elements on a view Start with the most important view. 1 Photo 2 Caption 3 Share on twitter / short url 4 Submitter 5 Avatar 6 Comments

2 SKETCH: Group elements on a view Start with the most important view. 1 Photo A 2 Caption 3 Share twitter button 4 Submitter B 5 Avatar C 6 Comments

2 SKETCH: Group elements on a view B Evan A 1 Photo 2 Caption 3 Share twitter button A B 4 Submitter My Cats 5 Avatar C Jack Cool C 6 Comments Sam Awesome cats

2 SKETCH: Thrash what you can B Evan A My Cats Maybe we don’t C Jack Cool need comments Sam Awesome cats for now

3 Wireframes Transform sketches to more detailed wireframes Wireframes are good for communicating the project to clients/developers... Draw layout (header, content, sidebars, footers, boxes) Add elements (text, links, buttons, images, forms)

3 Wireframes Worry about the layout & information architecture Not the colors and visual elements visitmix.com

4 Mockups Design the different views in Photoshop - Start with a grid or guides - Have whitespace - Natural colors, use real text (not lipsum) - Choose colors, typography, feel

4 Mockups 960.gs Use Grid Use whitespace Makes things Usually you can’t use much clearer too much

Web design is 95% typography. - Information Architects, Inc http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

5 Implement Good web/ux designer should know how to code. - Do the html, css, javascript - Test and polish the experience - Design the states and content (errors, notiﬁcations, forms, content)

Designers should spend 80% of time redesigning existing features while only 20% on new features. - Dave McClure

Designers should spend 80% of time redesigning existing features while only 20% on new features. - Dave McClure Designers spend 95% of their time on new things. - The truth

6 Design Usage Lifecycle 1 First Contact 2 First Time Use 3 Ongoing use 4 Passionate use 5 Death

6 Design Usage Lifecycle 1 First Contact Try to “Onboard” people from 1 to 4 2 First Time Use with: 3 Ongoing use - Welcome screens 4 Passionate use - Emails - Help text 5 Death - Tutorials - “10% proﬁle done”

Further reading http://52weeksofux.com/ http://uxmag.com/ http://gettingreal.37signals.com/ http://37signals.com/svn/ http://www.informationarchitects.jp/en/ Our new blog :) http://kiskolabs.com/laukaus

Thanks. email: karri@karrisaarinen.com http://twitter.com/karrisaarinen http://karrisaarinen.com http://kiskolabs.com http://www.arcticstartup.com

http://railsgirls.com	57834
http://karrisaarinen.com	367
http://translate.googleusercontent.com	42
http://yygoh.wordpress.com	20
http://localhost:8000	15
http://helloruby.com	7
http://lanyrd.com	6
http://translate.yandex.net	3
http://twitter.com	2
http://localhost	2
http://paper.li	2
http://kings-cross.ru	2
http://bradparker.github.io	2
http://tmp.railsgirls.ch	2
http://131.253.14.66	1
https://teras.tieto.com	1
https://abs.twimg.com	1
http://guides.railsgirls.com	1
http://a0.twimg.com	1
http://www.slideshare.net	1
http://webcache.googleusercontent.com	1
http://joshuaclanton.com	1
http://www.mysterypaulo.com	1
http://twittertim.es	1
http://itsmetherobot.appspot.com	1

Just Design It - An Approach To Web App Design

by Karri Saarinen on Oct 14, 2010

Accessibility

Categories

Upload Details

Usage Rights

25 Embeds 58,317

Statistics

Just Design It - An Approach To Web App Design Presentation Transcript