Designing from
                 start to finish

                 Ryan Singer
                 Product Manager
           ...
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Design from the inside out
                               “Epicenter design”



Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
i_grow_ec/
                              app/
                               controllers/
                               h...
HTML                     ERB




Saturday, October 2, 2010
HTML Mock




                  ERB Template




Saturday, October 2, 2010
2. HTML    3. Style and
                                          images


                            1. Rough      4. Ru...
New        Show    Index of    Edit a
                 Member     Member   Members    Member




Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
New        Show    Index of    Edit a
                 Member     Member   Members    Member




Saturday, October 2, 2010
New        Show    Index of    Edit a
                 Member     Member   Members    Member




Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Sign in



                            Member      Click “Add           New
                            index       a memb...
Saturday, October 2, 2010
?
   Sketch                   Documents   Wireframes   Photoshop   HTML




Saturday, October 2, 2010
Sketch                   Documents   Wireframes   Photoshop   HTML




Saturday, October 2, 2010
Sketch                   Documents   Wireframes   Photoshop   HTML




Saturday, October 2, 2010
Review

                            • Start with a basic model (members,
                               branches, historie...
For each screen

                            • Sketch on paper, very roughly.
                            • Design in HTML...
Priorities

                            • Avoid throw-away deliverables
                            • Get to something use...
Questions?



Saturday, October 2, 2010
Thank you

                 Ryan Singer
                 Product Manager
                 37signals

                 rsin...
Upcoming SlideShare
Loading in...5
×

Ryan Singer: Designing from start to finish

3,326

Published on

UI design involves more than wireframes, Photoshop and HTML. Ryan will demonstrate how UI design runs through an entire project from initial concept and modeling to sketches, HTML mockups, and final running code.

Rather than teaching ideas in the abstract, Ryan will share his design process live in real time by building an actual project. Attendees to this session will get a hands-on feeling for how design happens at 37signals.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,326
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ryan Singer: Designing from start to finish

  1. 1. Designing from start to finish Ryan Singer Product Manager 37signals Saturday, October 2, 2010
  2. 2. Saturday, October 2, 2010
  3. 3. Saturday, October 2, 2010
  4. 4. Saturday, October 2, 2010
  5. 5. Saturday, October 2, 2010
  6. 6. Saturday, October 2, 2010
  7. 7. Saturday, October 2, 2010
  8. 8. Saturday, October 2, 2010
  9. 9. Saturday, October 2, 2010
  10. 10. Saturday, October 2, 2010
  11. 11. Saturday, October 2, 2010
  12. 12. Saturday, October 2, 2010
  13. 13. Saturday, October 2, 2010
  14. 14. Saturday, October 2, 2010
  15. 15. Saturday, October 2, 2010
  16. 16. Saturday, October 2, 2010
  17. 17. Design from the inside out “Epicenter design” Saturday, October 2, 2010
  18. 18. Saturday, October 2, 2010
  19. 19. Saturday, October 2, 2010
  20. 20. Saturday, October 2, 2010
  21. 21. i_grow_ec/ app/ controllers/ helpers/ models/ views/ members/ new.html.erb Saturday, October 2, 2010
  22. 22. HTML ERB Saturday, October 2, 2010
  23. 23. HTML Mock ERB Template Saturday, October 2, 2010
  24. 24. 2. HTML 3. Style and images 1. Rough 4. Running sketch code Saturday, October 2, 2010
  25. 25. New Show Index of Edit a Member Member Members Member Saturday, October 2, 2010
  26. 26. Saturday, October 2, 2010
  27. 27. Saturday, October 2, 2010
  28. 28. Saturday, October 2, 2010
  29. 29. Saturday, October 2, 2010
  30. 30. Saturday, October 2, 2010
  31. 31. Saturday, October 2, 2010
  32. 32. Saturday, October 2, 2010
  33. 33. Saturday, October 2, 2010
  34. 34. Saturday, October 2, 2010
  35. 35. Saturday, October 2, 2010
  36. 36. New Show Index of Edit a Member Member Members Member Saturday, October 2, 2010
  37. 37. New Show Index of Edit a Member Member Members Member Saturday, October 2, 2010
  38. 38. Saturday, October 2, 2010
  39. 39. Saturday, October 2, 2010
  40. 40. Saturday, October 2, 2010
  41. 41. Saturday, October 2, 2010
  42. 42. Sign in Member Click “Add New index a member” member Click a member’s name Show Click to Edit edit info member member Saturday, October 2, 2010
  43. 43. Saturday, October 2, 2010
  44. 44. ? Sketch Documents Wireframes Photoshop HTML Saturday, October 2, 2010
  45. 45. Sketch Documents Wireframes Photoshop HTML Saturday, October 2, 2010
  46. 46. Sketch Documents Wireframes Photoshop HTML Saturday, October 2, 2010
  47. 47. Review • Start with a basic model (members, branches, histories, admins...) • Split the model into index, new, edit and show screens. Saturday, October 2, 2010
  48. 48. For each screen • Sketch on paper, very roughly. • Design in HTML from the inside out. • Style incrementally. • Use Photoshop to explore when necessary. Then go back to HTML. • Implement the HTML as templates in running code. Saturday, October 2, 2010
  49. 49. Priorities • Avoid throw-away deliverables • Get to something useful and clickable as fast as possible • Designers edit templates directly in the application source code Saturday, October 2, 2010
  50. 50. Questions? Saturday, October 2, 2010
  51. 51. Thank you Ryan Singer Product Manager 37signals rsinger@gmail.com twitter.com/rjs 37signals.com Saturday, October 2, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×