ATEC 6331 Final Project by Annis Leung Nov 25, 2008.
-
Upload
cleopatra-horton -
Category
Documents
-
view
217 -
download
0
Transcript of ATEC 6331 Final Project by Annis Leung Nov 25, 2008.
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