Your SlideShare is downloading. ×
Just Design It - An Approach To Web App Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Just Design It - An Approach To Web App Design

155,125
views

Published on

Hold a lecture recently on a UI course about my process of designing web apps.

Hold a lecture recently on a UI course about my process of designing web apps.

Published in: Design, Technology

2 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total Views
155,125
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
204
Comments
2
Likes
28
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide




























  • Transcript

    • 1. Just Design It An approach to web app design by Karri Saarinen LABS
    • 2. ? Who am I?
    • 3. 6 developer years designer of web stuff entrepreneur
    • 4. Product Manager / Partner, UX & Design Co-founder
    • 5. My approach to design projects 1 Concept Brief 2 Sketching 3 Wireframes 4 Mockups 5 Implementation 6 Lifecycle
    • 6. Let’s say we’re desiging a photosharing site for twitter users.
    • 7. 1 Concept Define 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
    • 8. End up with a Concept Brief The doc should have sections like: - Problem - Solution - Goals - Views - Personas
    • 9. 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)
    • 10. 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!
    • 11. 2 SKETCH: List views - Photo view - Upload form - Account - Homepage - Sign up / Sign in Can you remove or merge some views?
    • 12. 2 SKETCH: List views - Photo view - Upload form - Account - Homepage - Sign up / Sign in Can you remove or merge some views?
    • 13. 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
    • 14. 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
    • 15. 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
    • 16. 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
    • 17. 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)
    • 18. 3 Wireframes Worry about the layout & information architecture Not the colors and visual elements visitmix.com
    • 19. 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
    • 20. 4 Mockups 960.gs Use Grid Use whitespace Makes things Usually you can’t use much clearer too much
    • 21. Web design is 95% typography. - Information Architects, Inc http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/
    • 22. 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, notifications, forms, content)
    • 23. Designers should spend 80% of time redesigning existing features while only 20% on new features. - Dave McClure
    • 24. 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
    • 25. 6 Design Usage Lifecycle 1 First Contact 2 First Time Use 3 Ongoing use 4 Passionate use 5 Death
    • 26. 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% profile done”
    • 27. 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
    • 28. Thanks. email: karri@karrisaarinen.com http://twitter.com/karrisaarinen http://karrisaarinen.com http://kiskolabs.com http://www.arcticstartup.com