User Interface templates by Summer Interns The Virtual Labs project – An overview

From Virtual Labs Community
Jump to: navigation, search

While the main focus of the first phase of Virtual Labs project was to collect lab sources(content) from the lab developers(content authors) as well as host the labs successfully, the focus of the next phase for VLEAD would be to take a deeper look at all the hosted labs, recognise any pitfalls and incorporate improvements wherever needed. In this context VLEAD engineers recognize that the User Interface is one area which needs quality improvement. The team sees certain issues in its current UI and is in a hurry to present a new one as early as possible. End of September 2013 is the timeline it has imposed on itself to complete this task!

The engineers are of the opinion that the UI needs to be made more elegant in its aesthetic appeal and also in its overall functionality. They recognize that, with the existing design, if a user is in an ‘experiment page’ he/ she cannot easily navigate to any other page unless he visits the Home page once again. The new design will take care of this aspect. It will do so by providing a header and a footer interface with every page. These two interfaces will accomodate all possible tabs pertaining to the site pages. Using them users can navigate to places of their choice, while being anywhere on the site.

SummerInterns Nitish Mittal and Ankit Bhansali have done the preliminary work of re-creating the new UI template. In fact they have come up with two UI templates.

The first one which is just a prototype is at ui-1. They created this from bootstrap library and an already existing template. Here is a snap shot of the same:


Their second template is at ui-2. This second template is the one which will be actually used for the new UI.This template was designed from scratch, using jQuery, Bootstrap and Yahoo’s Pure library. The design offers cross browser compatibility; can be used with any of the browsers like chrome, firefox, safari, opera, or IE9 and above. Also the design is `responsive`, meaning to say that same UI meant to work with desktops, can be used to work with all portable devices like laptops, mobiles and tablets.

The new UI template is much more appealing and effective in all ways. For instance, instead of simply listing out the labs in a table format the labs will be presented as a set of attractive icons for the users to choose from. Check this link to see it for yourself: labs. This new rendering would eliminate pages with sparse text. Will also use the display area more effectively and uniformly.

Here is one more sample page from the new template; a page which displays the experiment list of a lab: landing-page-2-edited

Before you leave do not forget to take a complete tour of the new site from its landing page at new-ui-template. We will appreciate any feedback from you!


This entry was posted in Uncategorized on July 18, 2013 by Jayashree Prasad.

Post navigation

Summer Interns 2013