Sketch, Skitch, Code!
By Ryan Carson @ryancarson
27 May 2011 | Category: User Interface
Here at Carsonified HQ, we have a design workflow that's really working well, so I wanted to share. We're using this to design and build the new version of Think Vitamin Membership, called Treehouse. Let me show you ...
The above is a group of hand-drawn wireframes by Allison, our designer. We’ve got a ton of new exciting features in Treehouse so she’s working hard on getting the UX just right.
Our current process works like this …
- The Product Team (myself, Alan and Allison) Skype to discuss rough ideas for a page (Example: The new video page)
- Allison draws a rough wireframe, scans it, brings it into Skitch, and marks it up with comments
- She then uploads the Skitched image to Basecamp (attached to the todo relating to that page)
- Alan and I add any comments to the todo in Basecamp
- The three of us have a quick Skype call to chat about any of the comments that need clarification
- Allison creates the wireframe in HTML with minimal styling
- She then commits the HTML and CSS to our GitHub repo
- Alan hooks up the markup to the app
- Repeat!
We’re finding that each iteration takes about one or two days. Once we have all the app screens done, we’ll have a rough working Alpha which we can then test with real users. Once we finish a round of user testing, we’ll update the UX accordingly and then Allison will do the visual design for the app (then we’ll do another round of user testing).
Example wireframe sketches
Example Skitched wireframe
How about you?
We’re really efficient with this process and it’s working well for us. We’d love to hear about you guys though. What’s your workflow like?
Follow @thinkvitamin on Twitter Please check out Treehouse
