jd williams
Download
Skip this Video
Download Presentation
JD Williams

Loading in 2 Seconds...

play fullscreen
1 / 13

JD Williams - PowerPoint PPT Presentation


  • 137 Views
  • Uploaded on

JD Williams. Design recommendations overview for Adviso r P ortal – workshop out puts Author: Windahl Finnigan. From Green Screens to Rich Screens. Branding and navigation. Early concept of the navigation depicting tabs to break the site into 3 main sections Customer advice

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' JD Williams' - ruby


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
jd williams

JD Williams

Design recommendations overview for Advisor Portal – workshop out puts

Author: WindahlFinnigan

branding and navigation
Branding and navigation
  • Early concept of the navigation depicting tabs to break the site into 3 main sections
  • Customer advice
  • My JD Williams
  • Help & Information
branding and navigation1
Branding and navigation

Application level navigation – final version with names

Main JD Williams branding colours + grey

Colours used to identify sections

Customer Services –

Resources – Company information

My JD Williams – Employee dashboard and details

Final icons - supplied

Dark blue (Brand colour) used with grey

as the application colours

Grey used for all functions

navigation
Navigation
  • Buttons on main navigation are large and support users new to a mouse
  • Active and rollover states the colour is reversed
design descriptions
Design Descriptions
  • Primary actions in button design
  • Secondary actions use link style with an icon if needed
  • Break up actions so there is less chance of the wrong link being chosen – mistakes when too close together
  • Final price last – closer proximity to action
design descriptions1
Design Descriptions
  • Primary actions in button design
  • Secondary actions use link style
  • Use spaces when showing price numbers to make it is easier to read
  • Use separator lines for additional charges
  • Make total cost larger
  • Product links mouse over and show image with link to product
design descriptions2
Design Descriptions
  • Logo in colour
  • Customer name in JD Blue and bigger to standout
  • Links to use link style
  • Optional icons for order build and buy now
  • Use separator lines
  • Tabs for low navigation
error messages
Error Messages
  • Error messages are contextual
  • Use colour – red and an asterisk

Contextual error messages

In red and near form field with error message at top of page

interactions
Interactions
  • Use buttons
  • Calls to action for interaction elements
  • Place instructions next to labels and above functionality
  • Error messages are to be displayed in red and appear on page – contextually

Use close linkson windows – always upper right corner

Use instructional text next to labels

principals of design
Principals of design
  • Use of mouse overs
  • Use of screens that open up and grey behind
  • Using full width of page
displaying forms
Displaying forms
  • Use drop downs to sort in heading tab and include instructional text
  • Make links clear
  • Use faded blue (or grey to separate lines)
  • Use space around date to make it easier to read
  • No lines vertically or horizonally

If possible include instructions or jargon busters to aid use

ad