ATEC 6331Final Project

by Annis LeungNov 25, 2008

Design Items

•Design Mobilelab Logo

•Design Mobilelab Website

•Create the Design Specification

Concept of the Logo

•Line art represents

Simplicity

Concept of the Color

•Gray = Electronic and Metal

•Green = Mobile apps are Paperless =

Go Green

+ =

Colors

• Pantone 377 / #89AC4C - Green

• Pantone 432 / #455560 - Blueish Gray

• Pantone Black / #000000

• Pantone Black 50% / #666666

Typefaces•Gill Sans Family

Typefaces•For logo:

Size & Measurement

•X = the height of the letter “m” in the logo

DOs•Do use the following 6 logo options

depending on different backgrounds.

DOs•Do scale the logo proportionally

•Do allow to use the phone art separately

DON’Ts•Don’t scale the logo in wrong

proportion

•Don’t use any other colors for the logo

X X X X X X X

DON’Ts•Don’t use the logo without the

phone art

•Don’t rotate or flap the logo

X

Website Standard

•Grid system

Homepage Interior

Website StandardFor CSS (Cascading Style Sheet)

•Webpage- Width: 950px, Height: no limit- Background color: light gray (#ededed)

•Navigation Buttons- Size: 99pxW x 26pxH- Font: Gill Sans Regular, 17pt- normal: gray background, white text - hover: green background, gray text

• Footer- Verdana Regular, 11pt, white

Website StandardFor CSS

• Feature Boxes

Title bar: 223W x 29HTitle font: Gill Sans Bold, 16pt, white

Whole box: 223W x 217H, 10pt round corner with drop shadow

Highlight: Verdana Bold, 14pt, black (#000000)

Content: Verdana Regular, 14pt, gray (#666666)

Link: Gill Sans Bold, 14 pt, green (#89AC4C)

Applications•Website - Homepage

Interior Page Standard For CSS

•Content Box- Width: 689px, Height: no limit- Background color: white- 10px round corner with drop shadow

• Title- Verdana Bold, 30px, green (#89AC4C)

• Body text- Verdana Regular, 12pt, black

Applications•Website - Interior page - About Us

Evaluation Criteria• To complete the MobileLab logo design

• To complete the MobileLab website layout design - Homepage & one Interior page

• Clear header and footer (show logo and contact info)

• Clean and clear design and layout

• Build the design standard- Typeface- Color- Logo size/measurement- Dos & Don’ts- Grid system- CSS (Cascading Style Sheet)

Q & A