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

Ryan Singer: Designing from start to finish

on

  • 3,648 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 ...

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.

Statistics

Views

Total Views
3,648
Views on SlideShare
2,833
Embed Views
815

Actions

Likes
2
Downloads
40
Comments
0

6 Embeds 815

http://webexpo.cz 396
http://webexpo.net 354
http://lanyrd.com 59
http://webexpo.innit.cz 4
http://www.webexpo.net 1
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ryan Singer: Designing from start to finish Ryan Singer: Designing from start to finish Presentation Transcript

  • Designing from start to finish Ryan Singer Product Manager 37signals 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
  • 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/ helpers/ models/ views/ members/ new.html.erb Saturday, October 2, 2010
  • HTML ERB Saturday, October 2, 2010
  • HTML Mock ERB Template Saturday, October 2, 2010
  • 2. HTML 3. Style and images 1. Rough 4. Running sketch code 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
  • 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 member” member Click a member’s name Show Click to Edit edit info member member Saturday, October 2, 2010
  • 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, histories, admins...) • Split the model into index, new, edit and show screens. Saturday, October 2, 2010
  • 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
  • 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
  • Questions? Saturday, October 2, 2010
  • Thank you Ryan Singer Product Manager 37signals rsinger@gmail.com twitter.com/rjs 37signals.com Saturday, October 2, 2010