Client Look and Feel
From UG
(→Fonts) |
(→Fonts) |
||
Line 35: | Line 35: | ||
This two types of font style can have different: | This two types of font style can have different: | ||
# '''color''' (darkblue#4D5962, orange#FF9900, white#FFFFFF), | # '''color''' (darkblue#4D5962, orange#FF9900, white#FFFFFF), | ||
- | # '''weight'''(regular, bold), | + | # '''weight''' (regular, bold), |
- | # '''style'''(none, underline). | + | # '''style''' (none, underline). |
And mixing of this components create all variables of fonts style on the page. | And mixing of this components create all variables of fonts style on the page. | ||
'''Example of Main Page font tree:''' | '''Example of Main Page font tree:''' | ||
# '''Headers:''' size: 11pt, weight: bold, color: #4D5962 | # '''Headers:''' size: 11pt, weight: bold, color: #4D5962 | ||
- | + | ## RSS News Feed: | |
* text header | * text header | ||
* tab sub-header: color: #FF9900 | * tab sub-header: color: #FF9900 |
Revision as of 14:03, 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 two 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:
- Headers: size: 11pt, weight: bold, color: #4D5962
- RSS News Feed:
* text header * tab sub-header: color: #FF9900
- Main text: size 10pt, color: #4D5962
* Top Banner: * Greetings: Color: white. * Main Menu tab: * Top5 tab: * Header * Main text * RSS News Feed: * Main Text * Date and "More": font-style: underline. * Testimonials tab: * Main text: first character: color: #FF9900; font-weight: bold; * First name and Last name of the user: color: #FF9900; font-weight: bold; * Company name: font-weight: bold; * Footer.
- Small text: size: 8pt, color: white.
* Top Banner: * Buttons (News, Information, our Services, etc.) * Actual date