Client Look and Feel
From UG
(→Dev) |
|||
(91 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | [[Category:Client_Misc]] | ||
+ | |||
== Biz Analyst Intro == | == Biz Analyst Intro == | ||
== Sys Analyst Intro == | == Sys Analyst Intro == | ||
+ | |||
+ | This specification covers overall Look And Feel solution. Layout, wireframes, colors, fonts, styles, etc. | ||
+ | |||
== Dev == | == Dev == | ||
http://mantis.jaguarfreight.com/mantis/view.php?id=685 | 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 === | === Layout === | ||
- | + | ss1) Each page consists of: | |
* Header | * Header | ||
Line 23: | Line 30: | ||
* breadcrumb trail | * breadcrumb trail | ||
- | === | + | === Fonts === |
- | This | + | 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, [[File:Color.png]] | ||
+ | # '''weight''' regular, bold [[File:weight.png]] | ||
+ | # '''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:''' | ||
+ | <table border=1px cellspacing=0> | ||
+ | <tr> | ||
+ | <td > | ||
+ | 1. '''Headers:''' | ||
+ | </td> | ||
+ | <td> | ||
+ | size: 11pt, weight: bold, color: #4D5962 | ||
+ | </td> | ||
+ | <td> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td colspan='3'> | ||
+ | 1.1. '''RSS News Feed:''' | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | 1.1.1 text header | ||
+ | </td> | ||
+ | <td> | ||
+ | </td> | ||
+ | <td> | ||
+ | [[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> | ||
+ | </tr> | ||
+ | </table> | ||
+ | |||
+ | === 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 === | |
- | + | All Tabs and buttons have rounded corners. | |
- | + | Buttons and tabs curvature radius - 5 pixels. | |
- | + | === Misc === | |
- | + | ||
- | + | == 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 == |
- | + |
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:
- 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 |
[edit] Colors
Main colors:
Additional colors. From ZK elements.
[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.