Client Look and Feel

From UG

Biz Analyst Intro

Sys Analyst Intro

This specification covers overall Look And Feel solution. Layout, wireframes, colors, fonts, styles, etc.

Dev

http://mantis.jaguarfreight.com/mantis/view.php?id=685

Style Guide

The purpose of this section is to completely cover style, layout etc. This info should:

• present look and feel of the system
• reinforce consistency across pages
• help developer when in tweaking existing pages or creating new

Layout

ss1) Each page consists of:

• Header
• Body
• Footer

ss2) See example page here: http://mantis.jaguarfreight.com/svn/ct2/SS/client/v2/client-wireframes2.jpg

ss3. Header and Footer are same for every page ss4. Body is different from page to page but has some "shared standard components":

• main menu bar
• breadcrumb trail

Fonts

All webpage builded mainly on Arial font, except parts, that comes from google gadgets, they may consist - Tahoma, Verdana, Sans-Serif. Text that we use consist of:

1. Header: font-family: Arial, size: 11pt.
2. Main text: font-family: Arial, size 10pt.
3. Small text: font-family: Arial, size: 8pt.

This three types of font style can have different:

1. color darkblue#4D5962, orange#FF9900, white#FFFFFF,
2. weight regular, bold
3. style none, underline.

And mixing of this components create all variables of fonts style on the page.

Example of Main Page font tree:

 1.## RSS News Feed:

   1.### text header 

   2.### tab sub-header

 1.## Top Banner:

   1.### Greetings

 2.## Main Menu tab:

 3.## Top5 tab:

   1.### Header

 4.## RSS News Feed:

   1.### Main Text

   2.### Date and "More"

 5.## Testimonials tab:

   1.### Main text

   2.### First name and Last name of the user

   3.### Company name

 6.## Footer.

 3.1## Top Banner:

   3.1.1### Buttons (News, Information, our Services, etc.)

   3.1.2### Actual date 

Colors

Buttons Tables Etc

Misc

QA

RFC