11 November 2011

16

Building Treehouse

mikekus

This week, Ryan Carson and his team @treehouse launched Treehouse. A totally reinvented version of Think Vitamin Membership. With Treehouse you can watch video tutorials on web design, web development and iOS. You then take quizzes and unlock badges that are shown on your public profile.

Ryan hired me to design and build the front-end of Treehouse. Alan Johnson (Developer) had the mammoth task of making it all work. I designed the style guide for the badges and then handed the actual badge design over to Allison Grayce. The whole Treehouse team was involved in making this a success! We also brought in Neil Kinnish who did browser/device testing and bug fixing.

I designed the entire app in the browser, mainly because the app is responsive and it’s easier to design in the browser. It’s still possible to design in Photoshop and hand work to a developer but today more than ever, designers need to know how to code and understand the principles of responsive web design.

Something else I used on this project was Sass. With Sass you can add nested rules, variables, mixins, selector inheritance etc. Your .scss files are translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. It generally makes life a bit easier, especially on larger stylesheets.

Anyway, here are a few screenshots from Treehouse. You can view Treehouse here.

16 Comments

  1. Jake Bresnehan

    11 November 2011 | 1:08 am

    Awesomely executed Mike! Top job!

  2. Antonio Capuozzo

    11 November 2011 | 1:12 am

    Mike, this is rad! Superbly done!

  3. Nathan Gilmore

    11 November 2011 | 1:16 am

    Great work! The final product turned out amazing!

  4. Adam Soffer

    11 November 2011 | 2:02 am

    Stunning. Huge congratulations!

  5. Ryan

    11 November 2011 | 6:03 am

    Mike,

    What did you find particularly challenging about designing in the browser? Brandon Mathis told me that using SASS helps with the process immensely.

  6. mikekus

    11 November 2011 | 10:02 am

    Hi Ryan,

    I’v updated with a few details on Sass.

    Cheers,

    Mike.

  7. mikekus

    11 November 2011 | 10:02 am

    Thanks for your comments, guys :)

  8. james lonergan

    11 November 2011 | 10:21 am

    Nice style

  9. Pasha

    11 November 2011 | 10:21 am

    If I may ask, what do you mean that you designed it entirely in the browser?

    Beautiful website as well, very easy to navigate! I can’t wait to sign up to treehouse!

  10. John

    11 November 2011 | 10:57 am

    Love your work Mike! The site looks awesome.

    I think your froggy dude should have been an Owl with the same big eyes. Owls are supposed to be very wise and also live in trees so it would have been perfect :)

    Keep up the great work!

  11. Pasha

    11 November 2011 | 11:17 am

    Stunning website! If I may ask, what do you mean by when you say you designed it in the browser?

  12. Rich Brown

    11 November 2011 | 11:52 am

    Beautiful stuff, and a great product. Will be getting my mits around it pronto.

  13. Francesco

    11 November 2011 | 2:51 pm

    Did designing directly into browser change your workflow? I mean, how could you get a product “vision” without doing the visual design first?

    Anyway you did a great job :)

  14. Jackson Stephens

    11 November 2011 | 4:17 pm

    Ridiculously great work Mike.

  15. Mark Hoult

    17 November 2011 | 10:08 am

    Really, really beautiful work Mike.

    I wish I’d visited your website a year ago!

    Overall, these are some of the most eye-catching illustrative designs for websites I’ve seen.

  16. Rob

    17 November 2011 | 3:46 pm

    Super sick. Love it.

Leave a Comment