Client Look and Feel

From UG

Revision as of 14:03, 24 July 2009 (edit) Slava (Talk | contribs) (→Fonts) ← Older edit		Revision as of 14:05, 24 July 2009 (edit) (undo) Slava (Talk | contribs) (→Fonts) Newer edit →
Line 42:		Line 42:
	# '''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:05, 24 July 2009

Contents 1 Biz Analyst Intro 2 Sys Analyst Intro 3 Dev 4 Style Guide 4.1 Layout 4.2 Fonts 4.3 Colors 4.4 Buttons Tables Etc 4.5 Misc 5 QA 6 RFC

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
   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