Just Design It - An Approach To Web App Design

162,504 views

Published on

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

Published in: Design, Technology
2 Comments
31 Likes
Statistics
Notes
No Downloads
Views
Total views
162,504
On SlideShare
0
From Embeds
0
Number of Embeds
153,561
Actions
Shares
0
Downloads
213
Comments
2
Likes
31
Embeds 0
No embeds

No notes for slide




























  • Just Design It - An Approach To Web App Design

    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

    ×