Client Look and Feel

From UG

(Difference between revisions)
Jump to: navigation, search
(→Fonts)
 
(41 intermediate revisions not shown)
Line 1: Line 1:
 +
[[Category:Client_Misc]]
 +
== Biz Analyst Intro ==
== Biz Analyst Intro ==
== Sys Analyst Intro ==
== Sys Analyst Intro ==
Line 41: Line 43:
'''Example of Main Page font tree:'''
'''Example of Main Page font tree:'''
-
<table border=1>
+
<table border=1px cellspacing=0>
<tr>
<tr>
-
<td colspan='3'>
+
<td >
-
# '''Headers:'''
+
1. '''Headers:'''
</td>  
</td>  
<td>
<td>
Line 53: Line 55:
</tr>  
</tr>  
<tr>
<tr>
-
<td colspan='5'>
+
<td colspan='3'>
-
## '''RSS News Feed:'''
+
1.1. '''RSS News Feed:'''
</td>
</td>
</tr>
</tr>
<tr>
<tr>
<td>
<td>
-
### text header  
+
1.1.1 text header  
</td>
</td>
<td>
<td>
Line 65: Line 67:
<td>
<td>
[[File:RSS_text_header.png‎]]
[[File:RSS_text_header.png‎]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
1.1.2 tab sub-header
 +
</td>
 +
<td>
 +
color: #FF9900
 +
</td>
 +
<td>
 +
[[File:RSS_tab_subheader.png‎]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2. '''Main text:'''
 +
</td>
 +
<td>
 +
size 10pt, color: #4D5962
 +
</td>
 +
<td>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td colspan='3'>
 +
2.1 '''Top Banner:'''
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.1.1 Greetings
 +
</td>
 +
<td>
 +
Color: white.
 +
</td>
 +
<td>
 +
[[File:Greetings.png‎]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td colspan='3'>
 +
2.2 '''Main Menu tab:'''
 +
</td>
 +
</tr>
 +
<tr>
 +
<td colspan='3'>
 +
2.3 '''Top5 tab:'''
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.3.1 Header
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:Top5_header.png‎‎]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.3.2 Main text
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:Top5_text.png‎‎]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td colspan='3'>
 +
2.4 '''RSS News Feed:'''
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.4.1 Main Text
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:RSS_text.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.4.2 Date and "More"
 +
</td>
 +
<td>
 +
font-style: underline
 +
</td>
 +
<td>
 +
[[File:RSS_underline.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td colspan='3'>
 +
2.5 '''Testimonials tab:'''
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.5.1 Main text
 +
</td>
 +
<td>
 +
first character: color: #FF9900; font-weight: bold;
 +
</td>
 +
<td>
 +
[[File:TEST_text.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.5.2 First name and Last name of the user
 +
</td>
 +
<td>
 +
color: #FF9900; font-weight: bold;
 +
</td>
 +
<td>
 +
[[File:TEST_name.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.5.3 Company name
 +
</td>
 +
<td>
 +
font-weight: bold
 +
</td>
 +
<td>
 +
[[File:TEST_company.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
2.6 '''Footer.'''
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:FOOTER_text.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
3. '''Small text:'''
 +
</td>
 +
<td>
 +
size: 8pt, color: white.
 +
</td>
 +
<td>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td colspan='3'>
 +
3.1 '''Top Banner:'''
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
3.1.1 Buttons (News, Information, our Services, etc.)
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:TOP_small.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
3.1.2 Actual date
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:TOP_date.png]]
</td>
</td>
</tr>
</tr>
</table>
</table>
-
 
-
 
-
 
-
### tab sub-header: color: #FF9900 [[File:RSS_tab_subheader.png‎]]
 
-
# '''Main text:''' size 10pt, color: #4D5962
 
-
## '''Top Banner:'''
 
-
### Greetings: Color: white. [[File:Greetings.png‎]]
 
-
## '''Main Menu tab:'''
 
-
## '''Top5 tab:'''
 
-
### Header [[File:Top5_header.png‎‎]]
 
-
### Main text [[File:Top5_text.png‎‎]]
 
-
## '''RSS News Feed:'''
 
-
### Main Text [[File:RSS_text.png]]
 
-
### Date and "More": font-style: underline. [[File:RSS_underline.png]]
 
-
## '''Testimonials tab:'''
 
-
### Main text: first character: color: #FF9900; font-weight: bold; [[File:TEST_text.png]]
 
-
### First name and Last name of the user: color: #FF9900; font-weight: bold; [[File:TEST_name.png]]
 
-
### Company name: font-weight: bold; [[File:TEST_company.png]]
 
-
## '''Footer.''' [[File:FOOTER_text.png]]
 
-
# '''Small text:''' size: 8pt, color: white.
 
-
## '''Top Banner:'''
 
-
### Buttons (News, Information, our Services, etc.) [[File:TOP_small.png]]
 
-
### Actual date [[File:TOP_date.png]]
 
=== Colors ===
=== 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  ===
=== 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

[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, File:Color.png
  2. weight regular, bold File:weight.png
  3. style none, underline. File:Style.png

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

File:RSS_text_header.png‎

1.1.2 tab sub-header

color: #FF9900

File:RSS_tab_subheader.png‎

2. Main text:

size 10pt, color: #4D5962

2.1 Top Banner:

2.1.1 Greetings

Color: white.

File:Greetings.png‎

2.2 Main Menu tab:

2.3 Top5 tab:

2.3.1 Header

File:Top5_header.png‎‎

2.3.2 Main text

File:Top5_text.png‎‎

2.4 RSS News Feed:

2.4.1 Main Text

File:RSS_text.png

2.4.2 Date and "More"

font-style: underline

File:RSS_underline.png

2.5 Testimonials tab:

2.5.1 Main text

first character: color: #FF9900; font-weight: bold;

File:TEST_text.png

2.5.2 First name and Last name of the user

color: #FF9900; font-weight: bold;

File:TEST_name.png

2.5.3 Company name

font-weight: bold

File:TEST_company.png

2.6 Footer.

File:FOOTER_text.png

3. Small text:

size: 8pt, color: white.

3.1 Top Banner:

3.1.1 Buttons (News, Information, our Services, etc.)

File:TOP_small.png

3.1.2 Actual date

File:TOP_date.png

[edit] Colors

Main colors:

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

Additional colors. From ZK elements.

  1. File:LightBlue.png Light Blue: #D8ECF7 (Background in tabs)
  2. File:GrayBlue.png 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

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