TABLE OF CONTENTS

1.0 Overview
     1.1 What's New
           Look and Feel
           Layout Changes
     1.2 What's Staying the Same: Most User Interaction

2.0 Layout And Design
     2.1 Intro Screens
           2.1.1 Installer
           2.1.2 Launch Page
           2.1.3 Launch Page (Sun Branded)
           2.1.4 Splash Image
           2.1.5 Splash Image (Sun Branded)
           2.1.6 Login Screen
           2.1.7 Welcome Screen recommended design
           2.1.8 Current welcome screen (with Help navigation constraint for this release)
     2.2 Console Screens
           2.2.1 Events
           2.2.2 Enterprise
           2.2.3 Libraries
           2.2.4 Reports
           2.2.5 Setup
     2.3 NW Admin Screens
           2.3.1 Monitoring
           2.3.2 Configuration
           2.3.3 Devices Closed Tree
           2.3.4 Device Open Tree
           2.3.5 Media
     2.4 Dialog Boxes and Miscellaneous Screens
           2.4.2 Column Preferences
           2.4.3 Properties
3.0 Fonts

4.0 Icons

5.0 Buttons

1.0 Overview

1.1 What’s New

Look and Feel

The NetWorker Keystone release includes a brand new look and feel, including layout, colors, shapes and images/icons. These changes are intended to create a more professional look which increases its acceptability and credibility. The functionality remains equal to the current version. The new look is designed to reflect familiar elements of native Windows/Desktop products, but with a unique, contemporary design, that also identifies NetWorker as part of the family of ESG/EMC products. As many Desktop applications do now, some elements borrow from the Web. For example, there are now links in some areas, rather than relying only on menus or icons for action, and the design of the top task bar is a bit more webby in look and feel.

The overall Java Swing is from www.jgoodies.com, called “Looks”, specifically Plastic3DLookAndFeel, ExperienceBlue theme, with some customization.

There was a change in file format for the icons from gif to png. The png file format provides alpha transparency allowing soft shadows and smooth antialiased edges.

Layout Changes

1) The main menu is placed underneath, rather than on top of, the task bar. This is because task selections, driven by task icons in the top bar, actually change available actions in the file menu. While this placement is a departure from the standard Windows look, and this has created some debate, it represents the proper hierarchy of actions.

2) Toolbar icon placement. Rather than tool bar icons showing separately for the tree (on the left) and the content area (tables on the right) these icons are consolidated. For actions that are shared across the application, a small standard tool bar is included on the left (which we anticipate will grow in the next release) and to the right, depending on the task you have chosen, a contextual tool bar shows up. (There were contextual icons in the current iteration but they were split between the tree and the content area – not so now).

3) Elimination of a few icons. In addition to new imagery for icons throughout the application, in some cases, action icons have been eliminated to reduce clutter or confusion, especially if the frequency of use is under 20% (80-20 rule). Most actions are still available in File menus or right click. For example, “cross check” within …. Is used rarely, and mainly for troubleshooting, so will exist in the File menu only. There are a few other exceptions to this as well.

1.2 What's Staying the Same: Most User Interaction
With a few exceptions where noted, such as in Devices, user interface and interaction elements remain unchanged. Next release should be designed from ground up using user data, and may require a change in technology that allows separation of UI from backend; right now, the UI mirrors the way the server renders the UI.

(Back to Table of Contents)

2.0 Layout and Design
Layout, design, colors and icon states are defined, using the selected NetWorker Management Console’s Enterprise task. Changes specific to different tasks are shown in subsequent pages. Se section on "icons" for specific reference to all Keystone icons.

17. Console identifier icon should only be used to identify the console windows, and shows in title bar and when minimized in task bar. 18. NW Admin identifier icon should only be used to identify NW admin launched from console, and also in the title bar as mentioned above.   SEE LEGEND FOR CIRCLED NUMBERS BELOW

2.1 Intro Screens

2.1.1 Installer

The installer screen image includes the left graphic and all the white area to the right as well, making a complete background image. The image is in BMP format.

The image = 499W X 312H

HTML for this page can be referenced here: (link not shown)

The launch page uses 3 branding images:

• The top image which includes the EMC world graphic and the product name. This image is 475w x 210h.



• The EMC/legato logo which is 153w x 51h.



• The EMC copyright image is 475w x 26h

HTML for this page can be referenced here: (link not shown)

The launch page uses 3 branding images:

• The top image which includes the EMC world graphic and the product name. This image is 475w x 210h.



• The Sun Microsystems logo which is 153w x 51h.



• The EMC copyright image is 475w x 26h

This smaller splash image IS the whole screen here This image is 229W X 154H

It should be noted that Webstart runs it's own compression over this image therefore the original image should always be provided as a jpg set at 100% quality during optimization.

Sun Branded. This smaller splash image IS the whole screen here This image is 229W X 154H

The original image should always be provided as a jpg set at 100% quality during optimization.

2.1.6 Login Screen

Redone, with NetWorker icon ONLY in the title bar, and no NMC icon. J-Goodies is styling the buttons.

2.1.7 Welcome Screen

This is the recommended design, however constraints will not allow this release to use this rendition. See below for this release design.

2.1.8 Current Welcome Screen

This current design is acceptable - it shows landing page with Help navigation in top and left -- should be eliminated in future releases.

(Back to Table of Contents)

(Back to Table of Contents)

2.2.3 Libraries

2.2.4 Reports

2.2.5 Setup


(Back to Table of Contents)

2.3 NW Admin Screens

2.3.1 Monitoring

Note: Identifier icon for NW Admin icon in the upper left. (This icon is also found when launching a server from Console, and also in the Window's task bar when minimized.)

Note: Content Title removed to preserve vertical real estate. Previously content title was under toolbar. It was found to be not nessesary.

2.3.2 Configuration

2.3.4 Devices 1 of 5

Libraries and Devices are mimicked in Storage nodes; storage nodes is simply another view, as shown in 1 of 4.

2.3.4 Devices 2 of 5

This shows libraries opened, with a library chosen, and underneath it the library drives in left tree, but when selected, all the devices on the right in the table show up.

Drives are physical representations, devices are representations of devices that have a many-to-one relationship with the drives and the connection graphic (the lines at top) attempt to illustrate that.

Not showing (should be updated) is that the Model and Control Port information in the right table should be moved next to the Library in the header:

Library: ATL_P3000 (Model: Standard SCSI jukebox, ControlPort: scsidev@2.0.0)

2.3.4 Devices 3 of 5

Denotes all devices, both library devices and non-library (or "standalone") devices in one list for the server curly.

2.3.4 Devices 4 of 5

This shows the Storage Node View, where curly server opens with libraries, the drives associated with it, and when a drive is selected, the devices associated with it in the right pane.

Non-libary devices are listed under curly as well in the tree.

2.3.5 Media

2.4 Dialog boxes and Miscellaneous Screens
2.4.1 Column Preferences

2.4.2 Properties

(Back to Table of Contents)

3.0 Fonts
Style: Trebuchet MS – alternative, Verdana, GillSans, Arial;
Text Color: #333333
Link color: #333333
Task Bar Sizes/weight – 10 px bold
Menu sizes – TBD
Table Views Sizes/weight:
Column Header (folder/file name): 12 px/bold
File list body: 11px
Row colors:
Alternating row (blue): #F2F5FA
Highlighted color: #D7DBE0
Properties/dialogs:
Main text – 11px
SubHeader (subclass): 12 px/bold


4.0 Keystone Icons

The complete suite of Keystone icons can be viewed here: (link not shown)
PSDs can be located at: (link not shown)

5.0 Keystone Buttons

The complete buttons for widgets can be viewed here: :
PSDs can be located at:
(link not shown)