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: Arial, size: 11pt.
-
# 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 two types of font style can have different:
This two types of font style can have different:
Line 39: Line 39:
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.
-
'''Below 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:
-
     # Header
+
     * Header
-
     # Main text
+
     * Main text
-
   # 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.)
-
     # Actual date
+
     * Actual date
=== Colors ===
=== Colors ===

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

Colors

Buttons Tables Etc

Misc

QA

RFC

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