ATEC 6331 Final Project by Annis Leung Nov 25, 2008.

Slides:

Advertisements

Similar presentations

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

Advertisements

Web Pages Week 10 This week: CSS Next week: CSS – Part 2.

CSS Styling CSS Box Model & CS110: Computer Science and the Internet.

Chapter 6 More CSS Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.

Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.

Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.

Very quick intro HTML and CSS. Sample html A Web Title.

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1.

Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.

CSS Tips and Tricks for Designing Accessible Websites Presented by Grace Strother.

End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

Diliev.com & pLOVEdiv.com  DIliev.com.

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

Unit 20 - Client Side Customisation of Web Pages

Chapter 8 Creating Style Sheets.

Tutorial 4: Creating page layout with css

DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.

Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.

Brand Standards Guide.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Web Development & Design Foundations with XHTML

Continued BrokersLink Redesign. General Changes All Headlines, Main Nav options and Sub Nav options will be in the Google font Roboto Slab (Normal 400.

How to Create a Clean Website Layout in Photoshop Part 2.

G053 - Lecture 07 Designing Your Web Pages Mr C Johnston ICT Teacher

Lesson 05 // Web Design, Layout & Structure 1.Web Design/Designer-Coder Relationship 2.Fixed vs Fluid Website Layouts 3.Screen Resolutions.

Website Design Presentation to Members Of The American Morgan Horse Association By Bill Lere August 22, 2012 Copyright, Bill Lere, 08/22/2012, Minneapolis,

Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.

Moving Boxes The CSS ‘box’ Model and moving elements around the page 1.

DEMAP – Developing Enterprise Markets and Products.

Web parts, elements and user controls Width: 350 px / Height: 125 px Rounded corners: Rounding 6 px Background color: ? Name text: Arial, Bold, 12 px,

Creating Google Sites Laura Assem, Director of Technology.

Navigation Typography– Mega Drop Down Menu 1 Wide Desktop Login: Arial, Regular, 14 px, #f08c00 Hover: Underline Toolbar link: Arial, 11 px, #999999, underline.

Header, Footer, and Navigation toolbars CIS 136 Building Mobile Apps 1.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.

Lecture 9: Extra Features and Web Design Tarik Booker CS 120 California State University, Los Angeles.

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

Cascading Style Sheets (CSS) Internal Style Sheets Classes

CSS HTML and website development.

Surface Stage: Design Comps

CSS Layouts: Positioning and Navbars

Creating Your Own Webpage

1. The UMD CS Homepage.

Creating Page Layouts with CSS

Unit 17 Website Development

Cascading Style Sheets (Layout)

GCE Applied ICT G053: Lesson 07 Design Tools and Techniques

Chapter 6 More CSS Basics Key Concepts

Basics of Web Design Chapter 6 More CSS Basics Key Concepts

Google Fonts Selective Formatting

Fixed Positioning.

Basics of Web Design Chapter 6 More CSS Basics Key Concepts

PowerPoint template A template for Children’s presentations

Basics of Web Design Chapter 6 More CSS Basics Key Concepts

How to Make a Power Point

How to use the CSS box model for spacing, borders, and backgrounds

Creating and Linking New Pages

Jordan McKinley - Nichols

CMP Creating Your Personal and Small Business Web Sites

Multipage Sites.

Web4Labels 3.1 Colour and logo definition features

Session IV Chapter 15 - How Work with Fonts and Printing

Presentation transcript:

ATEC 6331 Final Project by Annis Leung Nov 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 / # Blueish Gray Pantone Black / # 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 XXXXXXX

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 Standard For 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 Standard For CSS Feature Boxes Title bar: 223W x 29H Title 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