Client Look and Feel
From UG
(→Fonts) |
(→Fonts) |
||
Line 30: | Line 30: | ||
=== Fonts === | === 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: | 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:''' | + | # '''Header:''' font-family: <p color=gray>Arial, size: 11pt</p>. |
- | # '''Main text:''' | + | # '''Main text:''' font-family: Arial, size 10pt. |
- | # '''Small text:''' | + | # '''Small text:''' font-family: Arial, size: 8pt. |
This three types of font style can have different: | This three types of font style can have different: | ||
- | # '''color''' | + | # '''color''' darkblue#4D5962, orange#FF9900, white#FFFFFF, |
- | # '''weight''' | + | # '''weight''' regular, bold |
- | # '''style''' | + | # '''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:''' | + | # '''Headers:''' size: 11pt, weight: bold, color: #4D5962 |
## '''RSS News Feed:''' | ## '''RSS News Feed:''' | ||
### text header | ### text header | ||
- | ### tab sub-header: | + | ### tab sub-header: color: #FF9900 |
- | # '''Main text:''' | + | # '''Main text:''' size 10pt, color: #4D5962 |
## '''Top Banner:''' | ## '''Top Banner:''' | ||
- | ### Greetings: | + | ### Greetings: Color: white. |
## '''Main Menu tab:''' | ## '''Main Menu tab:''' | ||
## '''Top5 tab:''' | ## '''Top5 tab:''' | ||
Line 53: | Line 53: | ||
## '''RSS News Feed:''' | ## '''RSS News Feed:''' | ||
### Main Text | ### Main Text | ||
- | ### Date and "More": | + | ### Date and "More": font-style: underline. |
## '''Testimonials tab:''' | ## '''Testimonials tab:''' | ||
- | ### Main text: first character: | + | ### Main text: first character: color: #FF9900; font-weight: bold; |
- | ### First name and Last name of the user: | + | ### First name and Last name of the user: color: #FF9900; font-weight: bold; |
- | ### Company name: | + | ### Company name: font-weight: bold; |
## '''Footer.''' | ## '''Footer.''' | ||
- | # '''Small text:''' | + | # '''Small text:''' size: 8pt, color: white. |
## '''Top Banner:''' | ## '''Top Banner:''' | ||
### Buttons (News, Information, our Services, etc.) | ### Buttons (News, Information, our Services, etc.) |
Revision as of 14:48, 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:
- Headers: size: 11pt, weight: bold, color: #4D5962
- RSS News Feed:
- text header
- tab sub-header: color: #FF9900
- RSS News Feed:
- 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.
- Top Banner:
- Small text: size: 8pt, color: white.
- Top Banner:
- Buttons (News, Information, our Services, etc.)
- Actual date
- Top Banner: