GRA2143: Adv Web Page Design

Project 1: Site Redesign using recent web design trends

This project will serve as the the foundation for project 2. One of the most important aspects of developing a web site is research, planning, and the initial design of graphical elements to be used in the project. For project 1 you will choose a web site that is in need of a makeover. You should choose an established company whose site is poorly designed or was designed several years ago. Your choice must be approved by the instructor. You will use design trends discussed in class and come up with 3 completely different concepts for this company. One design trend used must be a web 2.0 approach. You have been given permission to revise the company's identity to give them updated presence on the web. You will be expected to use a minimum of one Flash element (type of element is determined by you), however, you must take this into consideration when designing your concepts. You are reminded that this project ONLY involves the design process. You will convert your designs into a functional web site during Project 2.

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/splash 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: Although the site we are designing is rather simple, please 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 three concepts for the splash/home page and three concepts for a sub page (6 pages total). You may design your comps for a monitor that is up to 1024 x 768. You must ftp your design comps by the project due date. Keep in mind the following web design factors when designing your project:

• 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.
• There will be a minimum of one Flash element incorporated into project 2, therefore, you must take this into consideration when designing your comps.
• Target audience
• Concept - the "idea" behind your design.

• to recieve the full credit for concepts you must present both a splash/home page and sub page design comp. The comps for concept 1, 2, & 3 should be different concepts

Technical Requirements

There's not too much "technical" for Project one, however, keep in mind the following guidelines prior to uploading your project:

• Create an html page that showcases the designs you have created. Remember presentation is crucial in design, so how you present your work online will make a difference during the critique. Name the html page "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). Save your designs as a jpg. Use photoshops "save for the web" feature to optimize.
• 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.
• FTP your project. Do NOT FTP any photoshop or illustrator files.
• Your host directory for this project is p1

Grading Criteria

Name:

Date:

Research, Planning & progress	(20 pts)
Research, Roughs, Sitemap & work in progress
Concept 1	(25 pts)
Concept 2	(25 pts)
Concept 3	(25 pts)
Presentation	(5 pts)
FTP site (Do NOT FTP source files (photoshop, illustrator, flash) Use appropriate naming conventions Professional online display of concepts Presented project in a professional manner Effectively communicated concepts Participated in class critique & assessment of projects Grade sheet submitted
Total:	(100 pts)

Notes: To receive full credit you must submit a homepage and subpage for each concept. Failing to submit both per concept will result in a deduction of half the value of each concept not submitted. NO late projects will be accepted in this course. Projects not submitted by the due date will result in a project grade of zero.