Client Look and Feel

From UG

Revision as of 18:16, 24 July 2009 (edit) Slava (Talk | contribs) (→Colors) ← Older edit		Current revision as of 20:55, 25 November 2009 (edit) (undo) Alex (Talk | contribs)
(7 intermediate revisions not shown)
Line 1:		Line 1:
		+	[[Category:Client_Misc]]
		+
	== Biz Analyst Intro ==		== Biz Analyst Intro ==
	== Sys Analyst Intro ==		== Sys Analyst Intro ==
Line 247:		Line 249:
	=== Colors ===		=== Colors ===
	Main colors:		Main colors:
-	# Dark Blue: #4D5962.	+	# [[File:DarkBlue.png]] Dark Blue: #4D5962.
-	# Orange: #FF9900.	+	# [[File:Orange.png]] Orange: #FF9900.
-	# White: #FFFFFF.	+	# [[File:White.png]] White: #FFFFFF.
	Additional colors.		Additional colors.
	From ZK elements.		From ZK elements.
-	# Light Blue: #D8ECF7 (Background in tabs)	+	# [[File:LightBlue.png]] Light Blue: #D8ECF7 (Background in tabs)
-	# Gray Blue: #9AB5BE (Contour in tabs)	+	# [[File:GrayBlue.png]] Gray Blue: #7EAAC6 (Contour in tabs)
	=== Buttons Tables Etc  ===		=== Buttons Tables Etc  ===
		+	All Tabs and buttons have rounded corners.
		+	Buttons and tabs curvature radius  - 5 pixels.
	=== Misc ===		=== Misc ===
-	==  QA ==	+	==  Tweaks V.1.1.a ==
		+	tw1) change the light blue color to slightly darker blue, because the current light blue is so difficult to see.
		+
		+	== QA ==
		+
	==    RFC ==		==    RFC ==

---

Current revision as of 20:55, 25 November 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 Tweaks V.1.1.a 6 QA 7 RFC

[edit] Biz Analyst Intro

[edit] Sys Analyst Intro

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

[edit] Dev

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

[edit] 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

[edit] 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

[edit] 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.1. RSS News Feed:
1.1.1 text header
1.1.2 tab sub-header	color: #FF9900
2. Main text:	size 10pt, color: #4D5962
2.1 Top Banner:
2.1.1 Greetings	Color: white.
2.2 Main Menu tab:
2.3 Top5 tab:
2.3.1 Header
2.3.2 Main text
2.4 RSS News Feed:
2.4.1 Main Text
2.4.2 Date and "More"	font-style: underline
2.5 Testimonials tab:
2.5.1 Main text	first character: color: #FF9900; font-weight: bold;
2.5.2 First name and Last name of the user	color: #FF9900; font-weight: bold;
2.5.3 Company name	font-weight: bold
2.6 Footer.
3. Small text:	size: 8pt, color: white.
3.1 Top Banner:
3.1.1 Buttons (News, Information, our Services, etc.)
3.1.2 Actual date

[edit] Colors

Main colors:

1. Dark Blue: #4D5962.
2. Orange: #FF9900.
3. White: #FFFFFF.

Additional colors. From ZK elements.

1. Light Blue: #D8ECF7 (Background in tabs)
2. Gray Blue: #7EAAC6 (Contour in tabs)

[edit] Buttons Tables Etc

All Tabs and buttons have rounded corners. Buttons and tabs curvature radius - 5 pixels.

[edit] Misc

[edit] Tweaks V.1.1.a

tw1) change the light blue color to slightly darker blue, because the current light blue is so difficult to see.

[edit] QA

[edit] RFC