Client Look and Feel
From UG
(→Colors) |
(→Buttons Tables Etc) |
||
Line 256: | Line 256: | ||
=== Buttons Tables Etc === | === Buttons Tables Etc === | ||
+ | All Tabs and buttons have rounded corners. | ||
+ | Buttons and tabs curvature radius - 5 pixels. | ||
=== Misc === | === Misc === |
Revision as of 19:47, 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:
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 |
Colors
Main colors:
Additional colors. From ZK elements.
Buttons Tables Etc
All Tabs and buttons have rounded corners. Buttons and tabs curvature radius - 5 pixels.