ATEC 6331 Final Project by Annis Leung Nov 25, 2008.
-
Upload
cleopatra-horton -
Category
Documents
-
view
219 -
download
0
Transcript of ATEC 6331 Final Project by Annis Leung Nov 25, 2008.
![Page 1: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/1.jpg)
ATEC 6331Final Project
by Annis LeungNov 25, 2008
![Page 2: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/2.jpg)
Design Items
•Design Mobilelab Logo
•Design Mobilelab Website
•Create the Design Specification
![Page 3: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/3.jpg)
Concept of the Logo
•Line art represents
Simplicity
![Page 4: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/4.jpg)
Concept of the Color
•Gray = Electronic and Metal
•Green = Mobile apps are Paperless =
Go Green
+ =
![Page 5: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/5.jpg)
Colors
• Pantone 377 / #89AC4C - Green
• Pantone 432 / #455560 - Blueish Gray
• Pantone Black / #000000
• Pantone Black 50% / #666666
![Page 6: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/6.jpg)
Typefaces•Gill Sans Family
![Page 7: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/7.jpg)
Typefaces•For logo:
![Page 8: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/8.jpg)
Size & Measurement
•X = the height of the letter “m” in the logo
![Page 9: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/9.jpg)
DOs•Do use the following 6 logo options
depending on different backgrounds.
![Page 10: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/10.jpg)
DOs•Do scale the logo proportionally
•Do allow to use the phone art separately
![Page 11: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/11.jpg)
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
![Page 12: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/12.jpg)
DON’Ts•Don’t use the logo without the
phone art
•Don’t rotate or flap the logo
X
![Page 13: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/13.jpg)
Website Standard
•Grid system
Homepage Interior
![Page 14: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/14.jpg)
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
![Page 15: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/15.jpg)
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)
![Page 16: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/16.jpg)
Applications•Website - Homepage
![Page 17: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/17.jpg)
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
![Page 18: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/18.jpg)
Applications•Website - Interior page - About Us
![Page 19: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/19.jpg)
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)
![Page 20: ATEC 6331 Final Project by Annis Leung Nov 25, 2008.](https://reader035.fdocuments.net/reader035/viewer/2022070411/56649f465503460f94c67ba9/html5/thumbnails/20.jpg)
Q & A