Ryan Singer: Designing from start to finish
•
3 likes•2,447 views
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.
Recommended
More Related Content
Viewers also liked
Viewers also liked (16)
More from WebExpo
More from WebExpo (20)
Recently uploaded
Recently uploaded (20)
Ryan Singer: Designing from start to finish
- 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