LearnMore Screenshots, Code Snippets and Wireframes


writes on August 12, 2009

[Update]: We want to give a big shoutout to @allisterk and @paul_leibowitz who built aseatapart.com which gave us the inspiration for the app. Meant to say that in our first post ๐Ÿ™‚

As you probably noticed, we’ve been working hard this week on a mini app called Hello. We’re trying to be as open and transparent about the process as we can, in the hope of educating, entertaining and amusing you ๐Ÿ™‚

Here is the latest …


Matt has been pushing updates to the GitHub repository and he’s moving along quite quickly but there’s a huge amount of work to be done (possibly too much) and we’re a bit worried it won’t get done in time. Here’s a quick update from him on the ASP.NET MVC code:

We are using LINQ to SQL for our ORM. Here is an example of how easy it is to use. To grab a list of sessions that have started or start within an hour’s time, and haven’t finished yet, all you have to do is:

var sessions = _repo // _repo is our DataContext
        s => s.Start < DateTime.Now.AddHours(1) // starts within an hours time
          && s.Finish > DateTime.Now // hasn't finished

Or how about inserting a set of tags pulled out of a tweet:

        processedTweet // this is a tweet that has been 'processed'
            .Select(tag => new Tag
                Created = DateTime.Now,
                TagName = tag,
                Username = tweet.Username

Easy, huh?!

We’re using a cool tool from Red Gate called SQL Compare which scripts out the structure of the database as SQL files. You can see an example in the GitHub repo.


I moved the wireframe for the home page from paper into Balsamiq, just to give us a more concrete idea of size and spacing.

Paper Wireframe v2

Second draft wireframe, done on white paper. Home and alternative home page.
View larger

Balsamiq Wireframe v3

Third draft wireframe, done in Balsamiq
View larger or Download the original Balsamiq file


Here is how the design is progressing for Mike

Home page header v1

Home page header, version 1

Home page v2, with search results

Home page, search
View full size


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

13 Responses to “More Screenshots, Code Snippets and Wireframes”

  1. Great post! Thanks for sharing the Balsamiq file.
    I see that you use paper sketches before using Balsamiq.
    I’m the same way: for some reason software doesn’t help you think in the early stages.
    Only difference is, I don’t use paper, but whiteboards with these awesome widgets:


  2. Love the use of the .net platform. Obviously the focus is on the dev at present but will there be a little config and install guide for the project once it’s finished? I see Matt is developing in monodevelop on a mac so am intruiged by the database he is using etc and how he is using the redgate tools to manage the schema.

    good work

  3. Looking great, Carsonified! Already excited about giving it a go at FOWA.

  4. Looks amazing! Will you be “open-sourcing” it? Would love to play around with the code.

  5. Ryan,

    Please put up the original .bmml file from Balsamiq for your mockup. It would be real interesting to play with it inside of Balsamiq Mockups.


  6. Hey, nice stuff. @mike. Hello layout is looking really sweet. Great work. Personally not so keen on the main nav menu hover. But the rest is very slick!

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop