Ryan Singer: Designing from start to finish
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Ryan Singer: Designing from start to finish

  • 3,735 views
Uploaded 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......

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,735
On Slideshare
2,908
From Embeds
827
Number of Embeds
6

Actions

Shares
Downloads
40
Comments
0
Likes
2

Embeds 827

http://webexpo.cz 403
http://webexpo.net 359
http://lanyrd.com 59
http://webexpo.innit.cz 4
http://www.webexpo.net 1
http://localhost 1

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. Designing from start to finish Ryan Singer Product Manager 37signals Saturday, October 2, 2010
  • 2. Saturday, October 2, 2010
  • 3. Saturday, October 2, 2010
  • 4. Saturday, October 2, 2010
  • 5. Saturday, October 2, 2010
  • 6. Saturday, October 2, 2010
  • 7. Saturday, October 2, 2010
  • 8. Saturday, October 2, 2010
  • 9. Saturday, October 2, 2010
  • 10. Saturday, October 2, 2010
  • 11. Saturday, October 2, 2010
  • 12. Saturday, October 2, 2010
  • 13. Saturday, October 2, 2010
  • 14. Saturday, October 2, 2010
  • 15. Saturday, October 2, 2010
  • 16. Saturday, October 2, 2010
  • 17. Design from the inside out “Epicenter design” Saturday, October 2, 2010
  • 18. Saturday, October 2, 2010
  • 19. Saturday, October 2, 2010
  • 20. Saturday, October 2, 2010
  • 21. i_grow_ec/ app/ controllers/ helpers/ models/ views/ members/ new.html.erb Saturday, October 2, 2010
  • 22. HTML ERB Saturday, October 2, 2010
  • 23. HTML Mock ERB Template Saturday, October 2, 2010
  • 24. 2. HTML 3. Style and images 1. Rough 4. Running sketch code Saturday, October 2, 2010
  • 25. New Show Index of Edit a Member Member Members Member Saturday, October 2, 2010
  • 26. Saturday, October 2, 2010
  • 27. Saturday, October 2, 2010
  • 28. Saturday, October 2, 2010
  • 29. Saturday, October 2, 2010
  • 30. Saturday, October 2, 2010
  • 31. Saturday, October 2, 2010
  • 32. Saturday, October 2, 2010
  • 33. Saturday, October 2, 2010
  • 34. Saturday, October 2, 2010
  • 35. Saturday, October 2, 2010
  • 36. New Show Index of Edit a Member Member Members Member Saturday, October 2, 2010
  • 37. New Show Index of Edit a Member Member Members Member Saturday, October 2, 2010
  • 38. Saturday, October 2, 2010
  • 39. Saturday, October 2, 2010
  • 40. Saturday, October 2, 2010
  • 41. Saturday, October 2, 2010
  • 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. Saturday, October 2, 2010
  • 44. ? Sketch Documents Wireframes Photoshop HTML Saturday, October 2, 2010
  • 45. Sketch Documents Wireframes Photoshop HTML Saturday, October 2, 2010
  • 46. Sketch Documents Wireframes Photoshop HTML Saturday, October 2, 2010
  • 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. 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. 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. Questions? Saturday, October 2, 2010
  • 51. Thank you Ryan Singer Product Manager 37signals rsinger@gmail.com twitter.com/rjs 37signals.com Saturday, October 2, 2010