GRA2143: Advanced Web Design

Project 2: Redesign Site Development

By now you should have chosen a design from project 1. You should make suggested improvements prior to starting project 2. Your objective is to implement your design to a fully functional web site. You should be using dreamweaver to create this web site. You must implement a minimum of one Flash element (i.e. banner ad, header, etc.). The Flash element should link to another page in your web site.

Design Considerations

Although you should be focused on how to create a functional web site, you will be graded on the various aspects which are instrumental in creating a well designed web site such as:

• Color scheme
• Typography
• Style & Use of imagery/graphics
• Top fold - Ensure the important elements (logo, navigation, calls to action, etc.) are in the top 350-450px of the page
• Navigation - is it usable? Have you considered rollover effects?
• Content Organization. Group relevant topics together, use columns rather than having one huge body of text.
• Text. Text areas generally should never be longer than 365px wide. (Line length article: Web style guide) Use headings & subheadings to help emphasize areas of interest.
• Design of a minimum of one Flash element
• Target audience
• Concept - the "idea" behind your design.

Technical Requirements

You must demonstrate your proficiency with Dreamweaver, XHTML & CSS during this project. Keep in mind the following guidelines prior to uploading your projects:

• Your site must contain a minimum of six pages.
• Name your HTML files and images descriptively.
• Your home page must be named "index.html".
• Use all lowercase letters for naming, and avoid special characters and spaces (except for hyphens and underscores, which are OK).
• File optimization. (appropriate file size, file format, & image quality)
• Put your images in an /images/ subfolder to keep your site organized.
• Check all your links and pages to ensure they work correctly before you are done.
• All pages should have descriptive page titles
• All images must have alt tags declared
• Implement anchor links on a minimum of one page.
• Navigational elements must have rollover effects (javascript or CSS)
• Proper use and set up of tables
• The site must demonstrate proper CSS formatting. Name all CSS rules (NO .style1, .style2, .style3)
• Use of external CSS (only one CSS file is necessary - NO internal or inline styles!)
• Create an email link with a predefined subject.
• Create 2 external links that open in a new window.
• Flash element. Appropriate file size/load time. Should link to a web page in your site.
• Your host directory for this project is p2

Grading Criteria

Name:

Date:

Deadlines	(5 pts)
Working Version prepared each week prior to due date	(5 pts)
Design Considerations	(35 pts)
Design Improvements Color scheme Typography Style & Use of imagery/graphics Top fold Navigation Content Organization Target audience Concept - the "idea" behind your design.
File Organization	(5 pts)
Proper naming conventions	(2 pts)
File organization (separate directories for assets, images, css)	(3 pts)
File Optimization	(5 pts)
Appropriate file size, file format, image quality
Flash Element	(10 pts)
Appropriate file size/load time. Links to a web page in your site.
Technical Considerations	(35 pts)
Site contains a minimum of six pages Functional links Rollover navigational elements (javascript or CSS) 2 external links (open in a new window) Links to pictures (all pictures appear - no ? marks) Anchor links Email link (with predefined subject) Proper use of tables CSS formatting. Name all CSS rules. External CSS Page titles Alt tags applied to all images
Presentation	(5 pts)
FTP site (Do NOT FTP source files (photoshop, illustrator, flash) Presented project in a professional manner Effectively communicated concepts Participated in class critique & assessment of projects
Total:	(100 pts)

Notes: