University Web Templates Human Resources Design Update

1
University Web Templates Human Resources Design
Update
2
The University Template Fixed Elements

• University logo
• University name
• Campus green navigation bar
• Custom Verdana font
• Colors dark green, light green and gold
• Green page footer

3
The University Template Optional Elements

• Program center name under the university
  name
• Search bar
• Top navigation bar
• Left navigation
• News and Events callout box

4
The University Template Sample PagesSingle
column with optional navigation bar
5
The University Template Sample PagesTwo column
with call out box
6
The University Template Sample PagesTwo column
with left menu
7
The University Template Sample PagesThree
column with left menu and call-out box
8
Existing HR Page Elements
The following web elements highlighted in yellow
were identified as requirements for the converted
web design.

• The top department navigation bar
• Common links
• Whats New links
• Page content
• Related links

9
Converting Existing Elements to New Design

• Program center name
• Common page links
• Top department menu bar
• Whats New area

10
Converting Existing Elements to New Design

• Program center name (OK)
• Common page links (Not OK)
• Top department menu bar (Not OK)
• Whats New area (OK)

This was a good beginning. However, we were told
that the design went against the template
standards when having multiple lines for the
optional menu bar. Also, the homepage is the
only page that can have the secondary light green
link bar.
11
3 Column with Area Menus to the Side

• Program center name
• Common page links moved from the second
  light green bar to the optional top
  navigation bar
• The optional top navigation bar moved to the
  left side as a left menu bar
• Whats New area brought up into a third column
  to move it from the bottom of the page

12
3 Column with Area Menus to the Side

• Program center name
• Common page links
• Top department menu bar moved as a left menu
  bar
• Whats New Area

The left margin does not accommodate a large
program center such as Human Resources (Not OK)
13
Recommended Design HR Main Homepage

• HR homepage is a two column design
• The common links was moved within the photo
• A condensed drop-down menu bar was created
• The Whats New was moved to the right
  column, bringing it up from the bottom of
  the page
• The related links was added as an additional
  call-out box

14
Recommended Design Department Home Page
This page represents a sample of the Benefits
main page.

• Three column design
• Graphic size is reduced to allow for more
  content space
• Left column contains the departments links on
  each page
• Center column is for a mission statement or
  introductory statement and contact information
• Right column highlights the Whats new items

15
Recommended Design Additional Department Pages
This page represents a sample of additional
Benefits pages.

• Two column design
• Left column menu follows from the homepage
  onto each department page
• Right column is removed to allow for more page
  content.

16
Recommended Design Common Link sample page
This page represents a sample of a common links
page (the hyperlinks within the bridge image).

• Single column design
• Full sized header

17
Template Decisions Top Menu Changes
This is a sample of the existing top menu and a
top nav sample menu where the items have been
condensed to just one line
18
Template Decisions Top Menu Changes
Here are the changes that were made
Leaves
Text items were condensed to make more space
Text items were removed because the link was not
used
Items were combined as additional links under
Employment Programs
Text was added
19
Template Decisions Top Menu Configuration
Sample Menu Outline

• 130 Character maximum, yes this includes spaces
• Combine similar items into a drop-down item that
  were previously listed separately
• Reduce expanded department name to a shorter
  version using abbreviations or acronyms

20
Human Resources Design Update
Questions or comments?
21
(No Transcript)