Designing Your Web App

My presentation from #RailsGirlsDC #2

Transcript

1. S Designing Your Web App RailsGirls DC November 2012 Piotr Steininger
2. About me S  Co-founder of Tapangi – tapangi.com S  Build apps S  Social S  Mobile S  Web
3. Web Apps S  Software that helps accomplish tasks S  Lives in a browser vs directly on the computer S  Nothing to download S  Ever-evolving product S  Solves a particular problem or set of problems S  Useful, engaging, value-adding
4. Under the Hood S  Visible component – User Interface S  HTML S  CSS S  Javascript S  Behind the scenes S  Server-side: Ruby on Rails
5. The Process S  Find a problem to solve S  Define the concept and scope S  Sketch it up S  Make wireframes S  Create mockups / comps S  Code away S  Launch !
6. The Problem S  Familiar to you S  Has manageable scope S  Has your passion and interest http://2.bp.blogspot.com/_Hc_WOH22J2I/ScD5Cl9N-HI/AAAAAAAAAEA/iUr7dkRmmpQ/ s400/148_thinking_person2.gif
7. Scope and Concept S  Define core / objective of the app S  What is it? S  Why? S  Who is the user/customer? S  What are key goals? S  Minimum feature set S  Less is more!
8. Write it down S  Problem definition S  Solution S  Goals S  Screens / Views S  Personas / Customers
9. Sketch it up! S  List all screens or views S  Break each screen into logical components S  Group components accordingly S  Draw, erase, scrap, rinse, repeat S  Scrap away S  Create a navigation diagram
10. Sketch it up! http://www.onextrapixel.com/2010/09/29/40-brilliant-examples-of-sketched-ui-wireframes-and-mock-ups/
11. Sketch it up! http://www.onextrapixel.com/2010/09/29/40-brilliant-examples-of-sketched-ui-wireframes-and-mock-ups/
12. Sketch it up! http://www.onextrapixel.com/2010/09/29/40-brilliant-examples-of-sketched-ui-wireframes-and-mock-ups/
13. Keep it simple S  Too many screens? S  Too many components? S  Can you combine or rearrange? S  Prioritize important screens or components S  Remember - Less is more
14. Organize http://www.cazazz.com/site/DefaultSite/filesystem/images/articles/wireframes-storyboard.jpg
15. Wireframes S  Transform hand sketches into digital versions S  Great for refining the concept and communicating S  With clients, developers, designers S  Great tools out there: S  Balsamiq, Mocking Bird, Gliffy, etc S  http://mashable.com/2010/07/15/wireframing-tools/
16. Balsamiq http://www.cazazz.com/resources/Articles/Best-tools-for-web-design-1.aspx
17. Visio http://www.cazazz.com/resources/Articles/Best-tools-for-web-design-1.aspx
18. Mockups/Comps S  High fidelity UI definintions S  Pick your tool: Photoshop, Illustrator, Paint Shop Pro,… S  Start with grids and guides S  Embrace white space, don’t cram things S  Use natural soft colors S  Use Real text, no Lorem Ipsum
19. Design … S Is 95% typography S  According to Information Architects, Inc S  Choose your fonts wisely S  Is the thought process not the end result S  Is redesigning the previous designs (improvement)
20. Mockups/Comps
21. Mockups/Comps
22. Mockups/Comps
23. Mockups/Comps
24. Implement S  Good designers also know how to code S  At least HTML, CSS and some JavaScript S  Test your designs with different text, images and other data S  Don’t forget about interactions and the “unhappy” paths S  Errors, notifications, forms and validation, etc
25. Launch
26. Rinse and Repeat S  Once a product is out, it has a life of its own S  Incremental improvements S  Based on user feedback S  Customer engagement and retention S  Outperforming competition
27. Cuteness!
28. Thank you @polishprince piotr@tapangi.com www.tapangi.com