12 August 2009
More Screenshots, Code Snippets and Wireframes
[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 …
Development
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
.Sessions
.Where(
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:
_repo
.Tags
.InsertAllOnSubmit(
processedTweet // this is a tweet that has been 'processed'
.Tags
.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.
Wireframing
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
Balsamiq Wireframe v3
View larger or Download the original Balsamiq file
Design
Here is how the design is progressing for Mike …
Home page header v1
Home page v2, with search results
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
karl
# August 12, 2009 - 11:38 am
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!
Shawn
# August 12, 2009 - 11:47 am
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.
Thanks,
Shawn
Ryan Carson
# August 12, 2009 - 11:57 am
No problem – just uploaded it to http://ryancarson.com/junk/hello-home.zip
Shawn
# August 12, 2009 - 12:17 pm
Ryan,
You rock. Thanks so much for posting this. Very nice mockup. I can’t wait to see the finished app. I loved watching the design process that you did last time with heyamigo.net and I am enjoying watching @HelloApp come together. Especially in a language I program in. ASP.NET MVC. :-)
Thanks again,
Shawn
Justin Kozuch
# August 12, 2009 - 12:16 pm
Looks amazing! Will you be “open-sourcing” it? Would love to play around with the code.
Ryan Carson
# August 12, 2009 - 2:14 pm
Hey Justin,
Yup, we’re open sourcing it. Just head over to http://github.com/carsonified/helloapp/tree/master
Best,
Ryan
Justin Kozuch
# August 13, 2009 - 3:15 pm
Awesome, thanks Ryan!
Ben Bodien
# August 12, 2009 - 12:57 pm
Looking great, Carsonified! Already excited about giving it a go at FOWA.
Ryan Carson
# August 12, 2009 - 5:43 pm
Cheers Ben! :)
Jay Greasley
# August 13, 2009 - 4:31 pm
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
Efraim
# August 13, 2009 - 8:10 pm
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:
http://www.MockupMagnets.com
-Efraim
zapbeauty
# August 14, 2009 - 4:29 am
Eye Shadow,Eyelash Curler,Bobbi Brown,Helena Rubinstein,Ghd,Gucci,Victoria Secret,Shu Uemura
Facebook Connect Mock-Up For Balsamiq | Big Trapeze
# August 19, 2009 - 3:45 am
[...] don’t pitch products much, but I feel like I need to on this one. A Carsonified post from Ryan Carson clued me into a great tool for designers and developers who like to sketch up [...]