GRA2143: Advanced Web Page Design

Project 4: Apparel web site

For project 4 you will be designing a web site for a fictional apparel company that specializes in screenprinted T-shirt designs. The company may focus on additional apparel, however, their main profit comes from their customized T-shirt designs. They solicit artists to participate in designing new and fresh T-shirt designs. The primary target audience are ages 15-30. It is your responsibility to come up with the name, concept, branding and content for your web site.

Research & Planning

Complete the research & planning portion of the project and turn in on the final project due date:

• Research: Research examples of good design - get inspired! A minimum of five examples of research must be turned in with the project on the specified due date. Design examples are not limited to Web design. Research MUST be provided in printed format (i.e. photocopy, magazines, for interactive work online take screenshot*). Make comments on the research examples you provide. Write what you feel about the design is strong. If color is the design strength, your print must be in color. All research must be good design examples, and not just examples of web sites similar to the project topic.
  
  *How to take a screenshot
  Mac Users - CMD + Shift + 3 will enable you to capture an image of your entire screen
  CMD + Shift + 4 will cause a crosshair will appear on your screen that will allow you to drag across a specified area of your screen you wish to capture an image of. Once complete a pdf will appear on your desktop.
  PC Users - A Print Window key on your keyboard may be used to copy an image of your screen to your clipboard. Once complete, simply open an image editing program, open a new file, paste the screenshot into the new file and save your file.
• Roughs: You must complete 10 rough drafts for the home page, and 10 rough drafts of a subpage (20 total). Rough drafts should be approximately 4" x 6" in size. All rough drafts must be hand drawn, uniquely different, and not just changing the font or color. Rough drafts should indicate your overall organization of graphical elements. Include in your rough drafts design considerations such as typography, color, graphical elements, motion, etc. Your rough drafts should include consideration for navigational elements. Think about not only how the navigation is placed. Also think about functionality & usability.
• Site Map: Create a basic site map including all pages of the navigation as well as appropriate links. Each page will represent a rectangle in your site map, with links to other pages connected via lines. This site map can either be hand drawn or created on the computer. Additionally the site map should clearly outline the information and content that is planned for each page.

Comprehensive Designs

Once these initial steps have been completed, you are ready to mock up your site design. You may use Photoshop (or your design program of choice) to create your comprehensive designs. Your designs comps should closely resemble your plans for your final functional design. It should be work you'd be proud to show a client. For this project you are to propose a minimum of one concept for the home page and one concept for a sub page (2 pages total). You should design your comps for an 1024 width monitor. You must ftp your design comps by the date outlined in the course schedule.

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?
• Design a gallery to showcase apparel
• 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.
• 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
• Navigational elements must have rollover effects (javascript or CSS)
• Proper use and set up of CSS Positioning (no tables). Tables may ONLY be used for data. You may not use it for your overall page layout. If you do your project will NOT be graded.
• Appropriate use of external CSS (only one CSS file is necessary - NO internal or inline styles!)
• The site must demonstrate proper CSS formatting. Name all CSS rules (NO .style1, .style2, .style3)
• Apparel gallery functionality and usability
• Create a form with a minimum of 5 form elements (NOT just text fields)
• Validate a minimum of 2 elements in your form
• Process form using php so that once submitted it is emailed to you
• Create a thank you page so that once your form is submitted and processed it thanks the user and then redirects to another page in your web site. Your thank you page should be consistent with your overall site design.
• Your host directory for this project is p4

Grading Criteria

Name:

Date:

Deadlines	(20 pts)
Rough drafts, research, sitemap Design comps due by specified date, quality, design and correct number of comps completed.
Design Considerations	(30 pts)
Design Improvements Color scheme Typography Style & Use of imagery/graphics Top fold Navigation Content Organization Target audience Concept - the "idea" behind your design. Apparel gallery design Form 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
Technical Considerations	(35 pts)
Site contains a minimum of six pages Functional links Rollover navigational elements (javascript or CSS) Links to pictures (all pictures appear - no ? marks) Proper use of CSS Positioning (NO tables) CSS formatting. Name all CSS rules. External CSS Page titles Alt tags applied to all images Apparel gallery functionality & usability Form set up, validation, processing & thank you page with redirect
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: