Client Look and Feel
From UG
(→Fonts) |
(→Fonts) |
||
| Line 44: | Line 44: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | + | 1. '''Headers:''' | |
</td> | </td> | ||
<td> | <td> | ||
| Line 54: | Line 54: | ||
<tr> | <tr> | ||
<td colspan='3'> | <td colspan='3'> | ||
| - | ## '''RSS News Feed:''' | + | 1.## '''RSS News Feed:''' |
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### text header | + | 1.### text header |
</td> | </td> | ||
<td> | <td> | ||
| Line 69: | Line 69: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### tab sub-header | + | 2.### tab sub-header |
</td> | </td> | ||
<td> | <td> | ||
| Line 80: | Line 80: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | + | 2. '''Main text:''' | |
</td> | </td> | ||
<td> | <td> | ||
| Line 90: | Line 90: | ||
<tr> | <tr> | ||
<td colspan='3'> | <td colspan='3'> | ||
| - | ## '''Top Banner:''' | + | 1.## '''Top Banner:''' |
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### Greetings | + | 1.### Greetings |
</td> | </td> | ||
<td> | <td> | ||
| Line 106: | Line 106: | ||
<tr> | <tr> | ||
<td colspan='3'> | <td colspan='3'> | ||
| - | ## '''Main Menu tab:''' | + | 2.## '''Main Menu tab:''' |
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td colspan='3'> | <td colspan='3'> | ||
| - | ## '''Top5 tab:''' | + | 3.## '''Top5 tab:''' |
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### Header | + | 1.### Header |
</td> | </td> | ||
<td> | <td> | ||
| Line 127: | Line 127: | ||
<tr> | <tr> | ||
<td colspan='3'> | <td colspan='3'> | ||
| - | ## '''RSS News Feed:''' | + | 4.## '''RSS News Feed:''' |
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### Main Text | + | 1.### Main Text |
</td> | </td> | ||
<td> | <td> | ||
| Line 143: | Line 143: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### Date and "More" | + | 2.### Date and "More" |
</td> | </td> | ||
<td> | <td> | ||
| Line 154: | Line 154: | ||
<tr> | <tr> | ||
<td colspan='3'> | <td colspan='3'> | ||
| - | ## '''Testimonials tab:''' | + | 5.## '''Testimonials tab:''' |
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### Main text | + | 1.### Main text |
</td> | </td> | ||
<td> | <td> | ||
| Line 170: | Line 170: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### First name and Last name of the user | + | 2.### First name and Last name of the user |
</td> | </td> | ||
<td> | <td> | ||
| Line 181: | Line 181: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### Company name | + | 3.### Company name |
</td> | </td> | ||
<td> | <td> | ||
| Line 192: | Line 192: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ## '''Footer.''' | + | 6.## '''Footer.''' |
</td> | </td> | ||
<td> | <td> | ||
| Line 202: | Line 202: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | + | 3. '''Small text:''' | |
</td> | </td> | ||
<td> | <td> | ||
| Line 212: | Line 212: | ||
<tr> | <tr> | ||
<td colspan='3'> | <td colspan='3'> | ||
| - | ## '''Top Banner:''' | + | 3.1## '''Top Banner:''' |
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### Buttons (News, Information, our Services, etc.) | + | 3.1.1### Buttons (News, Information, our Services, etc.) |
</td> | </td> | ||
<td> | <td> | ||
| Line 227: | Line 227: | ||
<tr> | <tr> | ||
<td> | <td> | ||
| - | ### Actual date | + | 3.1.2### Actual date |
</td> | </td> | ||
<td> | <td> | ||
Revision as of 17:05, 24 July 2009
Contents |
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:
- 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.## 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 |
color: #FF9900 |
|
4.## RSS News Feed: |
||
1.### Main Text |
color: #FF9900 |
|
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. |
|
3.1## Top Banner: |
||
3.1.1### Buttons (News, Information, our Services, etc.) |
|
|
3.1.2### Actual date |
|
|
