Sketch, Skitch, Code!

Treehouse●Uncategorized 24 Comments

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 …

Photo of hand-drawn wireframes by Allison House

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 …

  1. The Product Team (myself, Alan and Allison) Skype to discuss rough ideas for a page (Example: The new video page)
  2. Allison draws a rough wireframe, scans it, brings it into Skitch, and marks it up with comments
  3. She then uploads the Skitched image to Basecamp (attached to the todo relating to that page)
  4. Alan and I add any comments to the todo in Basecamp
  5. The three of us have a quick Skype call to chat about any of the comments that need clarification
  6. Allison creates the wireframe in HTML with minimal styling
  7. She then commits the HTML and CSS to our GitHub repo
  8. Alan hooks up the markup to the app
  9. 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

Photo of sketched wireframes taped to wall

Example Skitched wireframe

Sketched wireframe with skitch notes on it explaining various parts of the app

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?

Start Learning Web Design, Coding, How To Start A Business & More for Free!

Learn More

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

  • Anonymous

    It’s a great way of working and something I wholeheartedly agree is the way to do things. Short bursts and iteration are a very efficient way of getting to an end result. 

    I’m curious though because you’ve not highlighted anything about the actual visual design stage, your process just jumps from minimally styled HTML to *bam* The app is done. 

    How do you deal with design iteration and the overall look and feel/icons/graphics/colour schemes/typography etc?

    • http://carsonified.com Ryan Carson

      Allison is going apply the visual design (and iterations) after the Alpha is working

      • Deane Jayamanne

        She works directly on the alpha PHP files or the initial HTML and then alan integrates again?

        • http://carsonified.com Ryan Carson

          She builds the HTML/CSS views for our Rails app

  • Anonymous

    It’s a great way of working and something I wholeheartedly agree is the way to do things. Short bursts and iteration are a very efficient way of getting to an end result. 

    I’m curious though because you’ve not highlighted anything about the actual visual design stage, your process just jumps from minimally styled HTML to *bam* The app is done. 

    How do you deal with design iteration and the overall look and feel/icons/graphics/colour schemes/typography etc?

    • http://carsonified.com Ryan Carson

      Allison is going apply the visual design (and iterations) after the Alpha is working

      • Deane Jayamanne

        She works directly on the alpha PHP files or the initial HTML and then alan integrates again?

        • http://carsonified.com Ryan Carson

          She builds the HTML/CSS views for our Rails app

  • http://twitter.com/smolahloe Samuel Molahloe

    This is

  • http://twitter.com/smolahloe Samuel Molahloe

    This is

  • Anonymous

    I am constantly fine tuning my workflow methods to get not only maximum work but the most creativity also. The least amount of problems means the happier I am and the better I work. I use Littlesnapper in the same way as you use Skitch. I prefer this just because of SmartFolders and easier to archive screenshots.

    Thanks for sharing :)

  • Anonymous

    I am constantly fine tuning my workflow methods to get not only maximum work but the most creativity also. The least amount of problems means the happier I am and the better I work. I use Littlesnapper in the same way as you use Skitch. I prefer this just because of SmartFolders and easier to archive screenshots.

    Thanks for sharing :)

  • http://glowfilter.com John K

    Ours is a similar process, except rather than sketching out on paper, we usually jump right into HTML. We have a library of minimally styled components that we can easily add and remove. This gets us to a clickable prototype quickly that we can put in front of people. It also allows our devs to start wiring up the interface before CSS styling is complete.

  • http://glowfilter.com John K

    Ours is a similar process, except rather than sketching out on paper, we usually jump right into HTML. We have a library of minimally styled components that we can easily add and remove. This gets us to a clickable prototype quickly that we can put in front of people. It also allows our devs to start wiring up the interface before CSS styling is complete.

    • http://carsonified.com Ryan Carson

      Nice. Great idea!

  • http://www.maj3sticstudios.com Brandon

    Thank you for posting this great process. Really gives me a insight on how others are accomplishing everything. Is there another recommendation for similar skitch apps? Base Camp is awesome but we currently use Rule.fm (http://www.rule.fm/)

  • http://www.maj3sticstudios.com Brandon

    Thank you for posting this great process. Really gives me a insight on how others are accomplishing everything. Is there another recommendation for similar skitch apps? Base Camp is awesome but we currently use Rule.fm (http://www.rule.fm/)

  • Anonymous

    One Word: balsamiq

  • Anonymous

    One Word: balsamiq

  • http://twitter.com/KrisTemmerman Kris Temmerman

    Nice workflow :) , I usually start sketching on a piece of paper . Because my co-workers are on the same spot as I am ,we quickly meet about the UX ,after thats done we choose the right color palette for the right customer.
    the basic design then gets mocked up in html / css . this mockup is tested by 5 random selected testers.
    If the mockup is rated 3 / 5 we start the development of the whole mockup … and then get it tested by a group of 10 people . then we implement the design into the rest of code .

  • http://twitter.com/KrisTemmerman Kris Temmerman

    Nice workflow :) , I usually start sketching on a piece of paper . Because my co-workers are on the same spot as I am ,we quickly meet about the UX ,after thats done we choose the right color palette for the right customer.
    the basic design then gets mocked up in html / css . this mockup is tested by 5 random selected testers.
    If the mockup is rated 3 / 5 we start the development of the whole mockup … and then get it tested by a group of 10 people . then we implement the design into the rest of code .

  • http://twitter.com/lappynet Georgina Hughes

    I sketch, but I draw like a kid so they’re no where near as detailed as yours. Learning to draw is on my to-do list… :)

  • http://twitter.com/lappynet Georgina Hughes

    I sketch, but I draw like a kid so they’re no where near as detailed as yours. Learning to draw is on my to-do list… :)

  • dumb

    BORING!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!