Client Look and Feel

From UG

(Difference between revisions)
Jump to: navigation, search
(→Fonts)
(→Fonts)
Line 30: Line 30:
=== Fonts ===
=== 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:
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:
-
# '''Header:''' [[font-family: Arial, size: 11pt.]]
+
# '''Header:''' font-family: <p color=gray>Arial, size: 11pt</p>.
-
# '''Main text:''' [[font-family: Arial, size 10pt.]]
+
# '''Main text:''' font-family: Arial, size 10pt.
-
# '''Small text:''' [[font-family: Arial, size: 8pt.]]
+
# '''Small text:''' font-family: Arial, size: 8pt.
This three types of font style can have different:
This three types of font style can have different:
-
# '''color''' [[darkblue#4D5962, orange#FF9900, white#FFFFFF]],  
+
# '''color''' darkblue#4D5962, orange#FF9900, white#FFFFFF,  
-
# '''weight''' [[regular, bold]]
+
# '''weight''' regular, bold
-
# '''style''' [[none, underline]].
+
# '''style''' none, underline.
And mixing of this components create all variables of fonts style on the page.
And mixing of this components create all variables of fonts style on the page.
'''Example of Main Page font tree:'''
'''Example of Main Page font tree:'''
-
# '''Headers:''' [[size: 11pt, weight: bold, color: #4D5962]]
+
# '''Headers:''' size: 11pt, weight: bold, color: #4D5962
## '''RSS News Feed:'''  
## '''RSS News Feed:'''  
### text header
### text header
-
### tab sub-header: [[color: #FF9900]]
+
### tab sub-header: color: #FF9900
-
# '''Main text:''' [[size 10pt, color: #4D5962]]
+
# '''Main text:''' size 10pt, color: #4D5962
## '''Top Banner:'''
## '''Top Banner:'''
-
### Greetings: [[Color: white.]]
+
### Greetings: Color: white.
## '''Main Menu tab:'''
## '''Main Menu tab:'''
## '''Top5 tab:'''
## '''Top5 tab:'''
Line 53: Line 53:
## '''RSS News Feed:'''
## '''RSS News Feed:'''
### Main Text
### Main Text
-
### Date and "More": [[font-style: underline.]]
+
### Date and "More": font-style: underline.
## '''Testimonials tab:'''
## '''Testimonials tab:'''
-
### Main text: first character: [[color: #FF9900; font-weight: bold;]]
+
### Main text: first character: color: #FF9900; font-weight: bold;
-
### First name and Last name of the user: [[color: #FF9900; font-weight: bold;]]
+
### First name and Last name of the user: color: #FF9900; font-weight: bold;
-
### Company name: [[font-weight: bold;]]
+
### Company name: font-weight: bold;
## '''Footer.'''
## '''Footer.'''
-
# '''Small text:''' [[size: 8pt, color: white.]]
+
# '''Small text:''' size: 8pt, color: white.
## '''Top Banner:'''
## '''Top Banner:'''
### Buttons (News, Information, our Services, etc.)
### Buttons (News, Information, our Services, etc.)

Revision as of 14:48, 24 July 2009

Contents

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. Headers: size: 11pt, weight: bold, color: #4D5962
    1. RSS News Feed:
      1. text header
      2. tab sub-header: color: #FF9900
  2. Main text: size 10pt, color: #4D5962
    1. Top Banner:
      1. Greetings: Color: white.
    2. Main Menu tab:
    3. Top5 tab:
      1. Header
      2. Main text
    4. RSS News Feed:
      1. Main Text
      2. Date and "More": font-style: underline.
    5. Testimonials tab:
      1. Main text: first character: color: #FF9900; font-weight: bold;
      2. First name and Last name of the user: color: #FF9900; font-weight: bold;
      3. Company name: font-weight: bold;
    6. Footer.
  3. Small text: size: 8pt, color: white.
    1. Top Banner:
      1. Buttons (News, Information, our Services, etc.)
      2. Actual date

Colors

Buttons Tables Etc

Misc

QA

RFC

Retrieved from "https://wiki.jaguarfreight.com/Client_Look_and_Feel"
Personal tools