Client Look and Feel

From UG

Revision as of 16:55, 24 July 2009 (edit) Slava (Talk | contribs) (→Fonts) ← Older edit		Revision as of 16:58, 24 July 2009 (edit) (undo) Slava (Talk | contribs) (→Fonts) Newer edit →
Line 89:		Line 89:
	</tr>		</tr>
	<tr>		<tr>
-	<td>	+	<td colspan='3'>
	## '''Top Banner:'''		## '''Top Banner:'''
-	</td>
-	<td>
-	</td>
-	<td>
	</td>		</td>
	</tr>		</tr>
Line 109:		Line 105:
	</tr>		</tr>
	<tr>		<tr>
-	<td>	+	<td colspan='3'>
	## '''Main Menu tab:'''		## '''Main Menu tab:'''
-	</td>
-	<td>
-	</td>
-	<td>
	</td>		</td>
	</tr>		</tr>
	<tr>		<tr>
-	<td>	+	<td colspan='3'>
	## '''Top5 tab:'''		## '''Top5 tab:'''
-	</td>
-	<td>
-	</td>
-	<td>
	</td>		</td>
	</tr>		</tr>
Line 138:		Line 126:
	</tr>		</tr>
	<tr>		<tr>
-	<td>	+	<td colspan='3'>
	## '''RSS News Feed:'''		## '''RSS News Feed:'''
-	</td>
-	<td>
-	</td>
-	<td>
	</td>		</td>
	</tr>		</tr>
Line 169:		Line 153:
	</tr>		</tr>
	<tr>		<tr>
-	<td>	+	<td colspan='3'>
	## '''Testimonials tab:'''		## '''Testimonials tab:'''
-	</td>
-	<td>
-	</td>
-	<td>
	</td>		</td>
	</tr>		</tr>
Line 211:		Line 191:
	</tr>		</tr>
	<tr>		<tr>
-	<td>	+	<td colspan='3'>
	## '''Footer.'''		## '''Footer.'''
-	</td>
-	<td>
	</td>		</td>
	<td>		<td>
Line 231:		Line 209:
	</tr>		</tr>
	<tr>		<tr>
-	<td>	+	<td colspan='3'>
	## '''Top Banner:'''		## '''Top Banner:'''
-	</td>
-	<td>
-	</td>
-	<td>
	</td>		</td>
	</tr>		</tr>

---

Revision as of 16:58, 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 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:

Headers:	size: 11pt, weight: bold, color: #4D5962
RSS News Feed:
text header
tab sub-header	color: #FF9900
Main text:	size 10pt, color: #4D5962
Top Banner:
Greetings	Color: white.
Main Menu tab:
Top5 tab:
Header	color: #FF9900
RSS News Feed:
Main Text	color: #FF9900
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.
Small text:	size: 8pt, color: white.
Top Banner:
Buttons (News, Information, our Services, etc.)
Actual date

Colors

Buttons Tables Etc

Misc

QA

RFC