Project Trackr Development Log » User Interface http://logbook.projecttrackr.com Building a better web based project management solution Mon, 15 Mar 2010 15:33:37 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Design 2 http://logbook.projecttrackr.com/ui/design-2/ http://logbook.projecttrackr.com/ui/design-2/#comments Thu, 30 Jul 2009 18:26:20 +0000 Damian Jakusz-Gostomski http://logbook.projecttrackr.com/?p=83 So here’s the next potential design for the application. This one is intentionally completely different from first one and has a much more contrasting colour scheme. It is also built using the 960 grid system CSS framework, so can easily be adopted to have the same structure as the variations shown in design 1.

Even though there’s more colours and more ‘going on’ it doesn’t seem to distract from the main content, as it’s nicely separated from the rest of the UI by the bold colour differences.

So what are your thoughts on this one compared to the previous one?

]]> http://logbook.projecttrackr.com/ui/design-2/feed/ 2 Design 1 http://logbook.projecttrackr.com/ui/design-1/ http://logbook.projecttrackr.com/ui/design-1/#comments Sun, 19 Jul 2009 12:18:38 +0000 Damian Jakusz-Gostomski http://logbook.projecttrackr.com/?p=44 So I spent a little bit of time today coming up with a set of ideas for the main UI. In total there are 5 versions of the design, each with a small tweak for the layout of the main part of the page. The general design was built using the 960 grid system, which makes making CSS layouts much easier by imposing a few rules. I went for a very clean and minimalistic design, so that it wouldn’t get in the way of the content, using several shades of grey to differentiate elements such as the main navigation. The design is in no way a final design, but just focuses on the layout options. All variations of this design have the standard horizontal navigation at the top where users expect to find it. All designs are a fixed width of 960 pixels and centred in the page.

Clicking on the screenshot will take you to the live preview of that design

This is the first variation of the design has the sidebar on the left of the main content. This is a pretty standard layout and something most users will be familiar with.
The only difference between the first and second design is that the sidebar has been moved to the right of the page.

Although a small change, it means the main content comes first as users scan left to right.
This is very similar to the above, but there are now 2 smaller side columns on the right. They only take up 80 pixels more room but allow for much more secondary data to be displayed along side the main content
Same as above, but this time we have a column either side of the main content. This has 2 benefits, it keeps the main content centred and also allows the 2 side columns to serve different purposes. The one on the left can be a standard sidebar, but the one on the right can contain meta data and actions on the specific content displayed in the main view
This is probably the most different of these designs and it has 2 equal sized columns. The idea is that the left pane has various actions and items, and the right pane would display the item/action. This lets you get more items in a single page while only seeing the one you’re interested in.
Update
By popular demand, here’s the same design but with some added colour. The structure is the same as the first design, but the grey navigation and footer has been replaced with a bold blue. The background colour has also been changed to a very subtle blue and the headings have been changed to match.

These are very small changes but they make a big difference.

So what are your thoughts? Which is your favourite and why? I’ll try get another (completely different) design with several variations up in the next few days to compare the two. It is also important to remember that each page will actually look different as the various content elements have not yet been styles yet.

]]> http://logbook.projecttrackr.com/ui/design-1/feed/ 5