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.
The 4th one down (with 2 sidebars either side) I believe looks the neatest. These sidebars create a sort of “frame” around the main content focusing attention upon it. Rather than having a fuller field of text, the main content is kept with the confines of the centre, hence making it more asthetically pleasing to the reader.
Also, the 2 side bars can have multiple uses, thus increasing the potential uses for them.
Personal choice would be to go for:
2 – I prefer the simplistic minimal content layout of this design, no clutter but still space for additional content
1 – I like this for use in context with the app as the site content focus i assume is the project managements service your promoting, BUT the left sub nav type bar is dead so this prehaps is a bad idea.
4 – As robert says this is the cleanest feeling structure, central focus as good space be a safe bet imo.
Overall i think a variant design wouldbe better, I always think its a bit tough to decide the structure of each page til you know what content needs to sit on it and what focus you intend to give it. Prehaps the last, not too common.
All look good though and look forward to the variant designs.
The actual design at the moment I feel is a bit ‘flat’ although effectively clean and simplistic. Some Improvements I think might help;
larger fonts – make things clearly simple, easy to read & navigate, the number of main nav elements scared me a little but I need to remember this is a tool
more header space – at the moment it feels very “toolish” and unfriendly, some nice graphics or prehaps Icons / more graphic content & symbolism will help of course not to overdue n kill the page.
I agree with Dan, the design definatly feels ‘flat’ and needs some colour to add some depth to it.
That being said, I would lean more toward 2,3, or 5, but thats just because of personal preference on the layout not for a specific reason. It would be much easier to pick the appropriate layout if there were some sort of idea of what would be in the individual containers. Depending on what is being displayed, it may not be feasible to have a third column.
Just my opinion..
Thanks for the feedback so far guys
It is almost certain that several designs will be used throughout the application based on the content. Although the layout may change, it would be inconsistent to go between designs such as the first and second, as it is just a UI change instead of a structural one. On the other hand, designs such as 2, 3 and 5 would work well together.
I’ll create some mocks of “real content” so you can get an idea of what the pages would really look like.
Also, now that it’s been mentioned and I’ve been looking at the design for a while, it does seem a bit ‘flat’, so I’ve added some colour to it. The original can be found here and the colour version is here.