UP3 Theme & Skin Concept 1

As part of the concepting offered by Collier Jones, and based on feedback and research from the field, I thought I'd pull together a few concepts for a UP3 skin & theme overhaul.

I hope to provide as much background information to these designs and ideas as possible, so keep checking back if you're interested.

In the meanwhile, here are some screens with a few call-outs. Much of this stuff dovetails into what Collier has already started, so please check out his concepting also.

Main Screen

Description

Click to Zoom (Larger Image)

1) Quick Navigation Menu
This AJAX enabled selector menu can be used to navigate all portlets in a users layout. By selecting a portlet, uPortal should focus that portlet view for the user. This feature would give users persistent access to any portlet in the portal from one easy location. Depending on how this would be implemented, it may help disabled users since the screen reader would hit this list first.

2) Updated Logo
This is an optional logo that could be used in place of the current logo. Click here for more information on this subject.

3) Admin. Tools Menu
Users with administrative privileges would get this menu. This menu would list all of the administrative tools/portlet (i.e. Groups Manager, Channel Manager, Etc.) in uPortal. Ultimately, I would like to see a portlet that consolidates a dashboard view into all of these tools much like Mambo's back end UI. And ideally, all of these tools should be completely re-designed to create a cohesive user experience across all of the workflows – but that's another discussion.

4) Custom Settings
Think of this as a menu for the current Preferences options. I'm not sure I'm completely sold on the title "Custom Settings" yet, but the idea is to have a roll up of preference options.

5) Quick Link Icons
These icons represent a quick link / tray functionality. The idea being that users would have quick access to key portlets or portal features with the added layer of alerts (i.e. mail notifications) where ever appropriate. The edit link next to the icons implies a UI that would allow users to select which set of quick link icons they want to display in this area.

Warning

These icons are FPO (for placement only) and were grabbed from other, possibly commercial / licensed products, rather randomly while mocking up these designs. These icons are not to be used or reproduced without permission. At a later date, these icons, and consequently, these screenshots will be updated with OS friendly versions.

6) Page Headers
As a slight departure from Collier's concept of a page in that these headers identify the tab a user is located on. The reason I'm calling them pages rather than tabs is because tabs are navigation metaphores and pages are conventionally what are understood as destinations (or screens). This is just a nominclature adjustment that could make things a little easier for the user to understand.

7) Page Menu
This is a redundant navigation option for navigating the pages (or what are currently called tabs). Instead of clicking on a tab to get to the desired page, a user can also use the menu option.

8) Variable Tab Navigation
This AJAX powered tab navigation system will allow users to add as many tabs as they want without concern for the vertical screen space. When tabs exceed a given browser width, they get rolled-up into a fly-out menu selector. Also, users will be able to re-arrange tabs on the fly by dragging and dropping their location.