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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ryan Singer: Designing from start to finish

3,194
views

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 …

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,194
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
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. 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

×