Client Look and Feel

From UG

(Difference between revisions)

Jump to: navigation, search

Current revision as of 20:55, 25 November 2009

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

Header: font-family: Arial, size: 11pt.
Main text: font-family: Arial, size 10pt.
Small text: font-family: Arial, size: 8pt.

This three types of font style can have different:

color darkblue#4D5962, orange#FF9900, white#FFFFFF,
weight regular, bold
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:

Dark Blue: #4D5962.
Orange: #FF9900.
White: #FFFFFF.

Additional colors. From ZK elements.

Light Blue: #D8ECF7 (Background in tabs)
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

@@ Line 1: / Line 1: @@
+[[Category:Client_Misc]]
 == Biz Analyst Intro ==
 == Sys Analyst Intro ==
@@ Line 41: / Line 43: @@
 '''Example of Main Page font tree:'''
-<table border=0>
+<table border=1px cellspacing=0>
 <tr>
-<td>
+<td >
 . '''Headers:'''
 </td>
@@ Line 54: / Line 56: @@
 <tr>
 <td colspan='3'>
-.## '''RSS News Feed:'''
+.1. '''RSS News Feed:'''
 </td>
 </tr>
 <tr>
 <td>
-.### text header
+.1.1 text header
 </td>
 <td>
@@ Line 69: / Line 71: @@
 <tr>
 <td>
-.### tab sub-header
+.1.2 tab sub-header
 </td>
 <td>
@@ Line 90: / Line 92: @@
 <tr>
 <td colspan='3'>
-.## '''Top Banner:'''
+.1 '''Top Banner:'''
 </td>
 </tr>
 <tr>
 <td>
-.### Greetings
+.1.1 Greetings
 </td>
 <td>
@@ Line 106: / Line 108: @@
 <tr>
 <td colspan='3'>
-.## '''Main Menu tab:'''
+.2 '''Main Menu tab:'''
 </td>
 </tr>
 <tr>
 <td colspan='3'>
-.## '''Top5 tab:'''
+.3 '''Top5 tab:'''
 </td>
 </tr>
 <tr>
 <td>
-.### Header
+.3.1 Header
 </td>
 <td>
-color: #FF9900
 </td>
 <td>
 [[File:Top5_header.png‎‎]]
+</td>
+</tr>
+<tr>
+<td>
+.3.2 Main text
+</td>
+<td>
+</td>
+<td>
+[[File:Top5_text.png‎‎]]
 </td>
 </tr>
 <tr>
 <td colspan='3'>
-.## '''RSS News Feed:'''
+.4 '''RSS News Feed:'''
 </td>
 </tr>
 <tr>
 <td>
-.### Main Text
+.4.1 Main Text
 </td>
 <td>
-color: #FF9900
 </td>
 <td>
@@ Line 143: / Line 153: @@
 <tr>
 <td>
-.### Date and "More"
+.4.2 Date and "More"
 </td>
 <td>
@@ Line 154: / Line 164: @@
 <tr>
 <td colspan='3'>
-.## '''Testimonials tab:'''
+.5 '''Testimonials tab:'''
 </td>
 </tr>
 <tr>
 <td>
-.### Main text
+.5.1 Main text
 </td>
 <td>
@@ Line 170: / Line 180: @@
 <tr>
 <td>
-.### First name and Last name of the user
+.5.2 First name and Last name of the user
 </td>
 <td>
@@ Line 181: / Line 191: @@
 <tr>
 <td>
-.### Company name
+.5.3 Company name
 </td>
 <td>
@@ Line 192: / Line 202: @@
 <tr>
 <td>
-.## '''Footer.'''
+.6 '''Footer.'''
 </td>
 <td>
@@ Line 212: / Line 222: @@
 <tr>
 <td colspan='3'>
-.1## '''Top Banner:'''
+.1 '''Top Banner:'''
 </td>
 </tr>
 <tr>
 <td>
-.1.1### Buttons (News, Information, our Services, etc.)
+.1.1 Buttons (News, Information, our Services, etc.)
 </td>
 <td>
@@ Line 227: / Line 237: @@
 <tr>
 <td>
-.1.2### Actual date
+.1.2 Actual date
 </td>
 <td>
@@ Line 238: / Line 248: @@
 === Colors ===
+Main colors:
+# [[File:DarkBlue.png]] Dark Blue: #4D5962.
+# [[File:Orange.png]] Orange: #FF9900.
+# [[File:White.png]] White: #FFFFFF.
+Additional colors.
+From ZK elements.
+# [[File:LightBlue.png]] Light Blue: #D8ECF7 (Background in tabs)
+# [[File:GrayBlue.png]] Gray Blue: #7EAAC6 (Contour in tabs)
 === Buttons Tables Etc  ===
+All Tabs and buttons have rounded corners.
+Buttons and tabs curvature radius  - 5 pixels.
 === 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 ==