Client Look and Feel

From UG

(Difference between revisions)
Jump to: navigation, search
(→Fonts)
(→Fonts)
Line 112: Line 112:
</td>
</td>
</tr>
</tr>
-
</table>
+
<tr>
-
 
+
<td>
-
 
+
-
 
+
-
+
-
 
+
-
: Color: white. [[File:Greetings.png‎]]
+
## '''Main Menu tab:'''
## '''Main Menu tab:'''
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
## '''Top5 tab:'''
## '''Top5 tab:'''
-
### Header [[File:Top5_header.png‎‎]]
+
</td>
-
### Main text [[File:Top5_text.png‎‎]]
+
<td>
 +
</td>
 +
<td>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
### Header
 +
</td>
 +
<td>
 +
color: #FF9900
 +
</td>
 +
<td>
 +
[[File:Top5_header.png‎‎]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
## '''RSS News Feed:'''
## '''RSS News Feed:'''
-
### Main Text [[File:RSS_text.png]]
+
</td>
-
### Date and "More": font-style: underline. [[File:RSS_underline.png]]
+
<td>
 +
</td>
 +
<td>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
### Main Text
 +
</td>
 +
<td>
 +
color: #FF9900
 +
</td>
 +
<td>
 +
[[File:RSS_text.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
### Date and "More"
 +
</td>
 +
<td>
 +
font-style: underline
 +
</td>
 +
<td>
 +
[[File:RSS_underline.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
## '''Testimonials tab:'''
## '''Testimonials tab:'''
-
### Main text: first character: color: #FF9900; font-weight: bold; [[File:TEST_text.png]]
+
</td>
-
### First name and Last name of the user: color: #FF9900; font-weight: bold; [[File:TEST_name.png]]
+
<td>
-
### Company name: font-weight: bold; [[File:TEST_company.png]]
+
</td>
-
## '''Footer.''' [[File:FOOTER_text.png]]
+
<td>
-
# '''Small text:''' size: 8pt, color: white.
+
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
### Main text
 +
</td>
 +
<td>
 +
first character: color: #FF9900; font-weight: bold;
 +
</td>
 +
<td>
 +
[[File:TEST_text.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
### 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>
 +
### Company name
 +
</td>
 +
<td>
 +
font-weight: bold
 +
</td>
 +
<td>
 +
[[File:TEST_company.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
## '''Footer.'''
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:FOOTER_text.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
# '''Small text:'''
 +
</td>
 +
<td>
 +
size: 8pt, color: white.
 +
</td>
 +
<td>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
## '''Top Banner:'''
## '''Top Banner:'''
-
### Buttons (News, Information, our Services, etc.) [[File:TOP_small.png]]
+
</td>
-
### Actual date [[File:TOP_date.png]]
+
<td>
 +
</td>
 +
<td>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
### Buttons (News, Information, our Services, etc.)
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:TOP_small.png]]
 +
</td>
 +
</tr>
 +
<tr>
 +
<td>
 +
### Actual date  
 +
</td>
 +
<td>
 +
</td>
 +
<td>
 +
[[File:TOP_date.png]]
 +
</td>
 +
</tr>
 +
</table>
=== Colors ===
=== Colors ===

Revision as of 16:54, 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:

  1. Header: font-family: Arial, size: 11pt.
  2. Main text: font-family: Arial, size 10pt.
  3. Small text: font-family: Arial, size: 8pt.

This three types of font style can have different:

  1. color darkblue#4D5962, orange#FF9900, white#FFFFFF, File:Color.png
  2. weight regular, bold File:weight.png
  3. 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:

  1. Headers:

size: 11pt, weight: bold, color: #4D5962

    1. RSS News Feed:
      1. text header

File:RSS_text_header.png‎

      1. tab sub-header

color: #FF9900

File:RSS_tab_subheader.png‎

  1. Main text:

size 10pt, color: #4D5962

    1. Top Banner:
      1. Greetings

Color: white.

File:Greetings.png‎

    1. Main Menu tab:
    1. Top5 tab:
      1. Header

color: #FF9900

File:Top5_header.png‎‎

    1. RSS News Feed:
      1. Main Text

color: #FF9900

File:RSS_text.png

      1. Date and "More"

font-style: underline

File:RSS_underline.png

    1. Testimonials tab:
      1. Main text

first character: color: #FF9900; font-weight: bold;

File:TEST_text.png

      1. First name and Last name of the user

color: #FF9900; font-weight: bold;

File:TEST_name.png

      1. Company name

font-weight: bold

File:TEST_company.png

    1. Footer.

File:FOOTER_text.png

  1. Small text:

size: 8pt, color: white.

    1. Top Banner:
      1. Buttons (News, Information, our Services, etc.)

File:TOP_small.png

      1. Actual date

File:TOP_date.png

Colors

Buttons Tables Etc

Misc

QA

RFC

Retrieved from "https://wiki.jaguarfreight.com/Client_Look_and_Feel"
Personal tools