Blogs about Jazz

Blogs > Jazz Team Blog >

New family ties for Rational Web products

Tags: , , ,

You might have noticed a new look to the Rational Team Concert Web UI login screen and banner in recent weeks. These changes are a step toward an updated look for a number of user interface elements that will help to unify the presentation of our Jazz-based Rational web products. As we take steps toward greater integration between the products within Collaborative Application Lifecycle Management, the need to have a common look (a familial resemblance) and common behavior for similar user interface elements (a familiar feel) has increased.

The images to follow give you a taste of some of the style changes to come. They do not reflect all that component and product teams will ultimately offer in their releases, or the final details in all cases, but do give an idea of the convergence of style on some of the higher level UI elements. These include:

Login screen: The Jazz Team Server login screen takes on the Rational teal blue visual style, and offers more specific context login information, e.g., you will now see what product you are logging into.

Login screen example

Server setup wizard: With the new color for the login and banner, all setup wizards, including the Jazz Team Server Setup, will inherit a new blue look in the banner area. This update is part of a larger underlying facelift to a common Jazz Foundation component called “StyledBox”. The StyledBox provides the base for a number of box-type elements, including wizards, dialogs, and viewlets, to name a few.

Jazz Team Server Setup wizard example

Banner color scheme: In the Rational Team Concert and Jazz Team Server cases, the shift is from green to blue. Other Rational web products will make a similar shift from what was their product-specific color to the new blue.

Common banner examples for multiple products

Common banner example showing the full Rational Team Concert context

Personal Dashboard or Home button in the banner: The “Dashboards” link that was on the product navigation bar is taking a new more prominent location on the banner, to the left of the product name.

Dashboard button example

Dashboard viewlet style: Along with other StyledBox variations in the UI, the new viewlet look has been updated with a light 3-dimensional header that is more stylistically in line with other UI elements, a softer outline to allow the content to advance and not compete with the rendering of the box, and a light gradient at the bottom to give it a “lift” off the page background.

Dashboard viewlet style example, showing a Personal Dashboard

Dashboard viewlet style example, showing a Team Area Dashboard

Read more about Dashboards and other Jazz Foundation updates in the Jazz Foundation 1.0 M3 New & Noteworthy.

Your comments are welcome.

Kimberley Peter
Jazz UI Design Team