first Ventstatus logo
This was the first ventstatus.com logo. I realized I really didn't take my demographic into concern with this, gamers like things a little more flashy. I'm most likely going to make use of the bar graph sound wave idea in the future.
Yes, this is honestly an important part of ventstatus development
Sometimes you just need a picture to get your ideas together. Normally you can jott down ideas like this before you even start storing data. This idea however, came about when I was looking through loads of data I already had, and suddenly had this radical idea of presenting it through a timeline. I quickly opened up MSPaint and planned out what is now one of the coolest features of Ventstatus.
Early in development, Basic Timeline and bar graph
Here we have the first working page of Ventstatus. The bar graph above used a (now) ridiculous method to predict how many users (gray bars) in-between the real bars based on data gathered by the system (black bar). You can also see the first proof of concept of the timeline.
Now we look like a site
I spent a day working mostly with CSS to come up with the above. You can see a fancy implementation of the uglier bar graph from above. The timeline is non existent at this point.
Fisher Price timeline
A good start on the timeline style. This was a quick mockup, just to get my head around how I'm going to present the timeline. I decided that it is going to be a separate window, most likely a popup. It also has the option of auto refreshing through Ajax. This design needed lots of improvement, as I found it hard to imagine this working for servers with over 100 users online.
Its Christmas at ventstatus
Another mockup, here I emphasize the beginning and end of the user's sessions. I also came up with the future layout and style for hour markers. Here the users are smaller to ensure the design will still work even for large amounts of users. Tooltips have been planned out to mark time as well.
Finally starting to shape up
Here is what the site currently looks like. I made some adjustments to the "get status" bar. It real just blended in to the above design, and here I tried to make it a little more apparent. The orange button was swapped for a brighter (and more fitting) green. I also made some changed to the graph algorithm, which doesn't require the need to predict the amount of users anymore, it simply gets that data from the timeline. This means no more dark green bars. I also made a pure css popup to show a nice reading of the amount of users displayed per bar, as well as the time period the bar on the graph represents. This is also the first image here in which the site is running on the CodeIgniter framework.
The timeline hardhat area
This is what the timeline currently looks like. The red bars are a functional version of the hour markers from the mockup above. Each green bar is represents the time a user is online, each user has their own row. In the future I'm going to make this update with AJAX, as well as extend the hour markers, put time markings on top as well as a title and server information.