Ninjas on a Penny Farthing

For the last month or two, I've been building a new site called "Ponder" for a University project. The site itself is simple a ground up redevelopment of the site I built for RailsRumble - "Insight" - but with the added twist it's been built on jQuery and a bunch of other technologies (You can see a list of all the resources I used etc on the site itself which I will post once marking has been completed).

With the intention of showing the process of developing it from beginning to end, I now present you with a few pictures of the site throughout the development process.

Simple Beginnings

Like most developments, it started out with a simple problem - What to built the site on? I liked the idea of Merb and StrokeDB but in the end time constraints meant I ended up using Ruby, Rails & MySql to build it. The first stage was to draw out a few plans for it and to even mock up a few ideas - below is the first design I thought of and played around with (book image from SXC.hu).

Eventually I settled on the idea of a nice desk style design - with a "shined-wood" type header with a piece of page for where the logo etc. fits. So from there, I whipped up a draft design in photoshop and built a rough prototype page in Rails - followed by some basic models etc to get a feel for it (see below)

Since Login pages are a tad different from actual content pages, I then went on to making a layout / general style for smaller pages e.g. Logging in - ending up with the following.

Then after further styling, esp. forms - I ended up with the following.

Following on from that, I developed it a bunch more - both application and design wise. After a week or two of doing it in my spare time, I got to the first design milestone...

After a few more weeks of tweaking and testing, I then started to work on the main feature - study sessions. Essentially, little ajax chat rooms designed for holding a study meeting. Below is a glimpse of the design. The best part is that it was relatively simple with jQuery and Rails - Only two hundred or so lines of code (excluding templates).

Now we arrive at the end game - There's roughly a week left as of posting this and I've done most of the application. With the aim of showing what the site is and some of the features I've built in, I'll likely make a screencast on Ponder and will post it here sometime soon. I hope you like what you see - I plan to post more on Ponder sometime soon.