Ryan Singer: Designing from start to finish

Designing fromstart to finish

Ryan SingerProduct Manager37signals

Saturday, October 2, 2010
















Design from the inside out

“Epicenter design”





i_grow_ec/app/

controllers/helpers/models/views/

members/new.html.erb


HTML ERB


HTML Mock

ERB Template


1. Roughsketch

2. HTML 3. Style andimages

4. Runningcode


NewMember

ShowMember

Index of Members

Edit a Member












NewMember

ShowMember

Index of Members

Edit a Member


NewMember

ShowMember

Index of Members

Edit a Member






Sign in

Memberindex

New member

Click “Add a member”

Click a member’s

nameShowmember

Click to edit info

Editmember



PhotoshopDocumentsSketch HTMLWireframes

?






• Start with a basic model (members, branches, histories, admins...)

• Split the model into index, new, edit and show screens.

Review


• 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.

For each screen


• Avoid throw-away deliverables

• Get to something useful and clickable as fast as possible

• Designers edit templates directly in the application source code

Priorities


Questions?


Thank you

Ryan SingerProduct Manager37signals

[email protected]/rjs37signals.com


mailto:[email protected]

mailto:[email protected]