Final
Final Project – Due Thursday, June 7
Pick an existing website of your choice. The website must be a business or organization, and not a personal site for you or someone you know. Create a re-designed version of this site for your final project but give it a new name –your final project will be inspired by this site but will not use the name from this site.
Write a narrative critiquing the effectiveness of the current site. Base your critique on the objectives from “The Basics of Web Design” reading and the critiques you did Week 03.
- The Grid
- Color Palette
- Navigation
- Design Principles
- Typography
Describe what works and does not work with the design. Who is the target audience? Post this critique to your Tumblr blog.
Redesign 5 pages of the website you’ve selected to redesign. Create a sitemap for your project and save it as a PDF to your “source_files” folder. Create a design comp (for all 5 pages) in Photoshop paying close attention to the layout and the balance and composition of the page. Using image slicing (we will cover this in later in class), create the assets and compress their file sizes effectively. Pay particular attention to the consistency and functionality of the navigation system. Using either a one-column structure or two-column, build the pages in HTML using one external CSS file.
Specifications:
- Optimize your design for a browser resolution size of 1024 x 768 (remember the dimension of your page should be 990 pixels wide and “the fold” is around 560 pixels. The page should not end at 560 pixels!)
- Your Photoshop file must be RGB and 72 dpi.
- Set up your file structure correctly with a “final_last name” folder containing 2 separate folders: “final_web” and “source_files.”
- Complete 5 HTML pages with one external CSS file. For the rest of your pages, create “placeholder” pages. (A placeholder page is the structure of the page with all the navigation but it doesn’t need to have complete text and photos. This is an example of a placerholder page).
- Must use HTML text for the main content of your site, not images.
- Please use images you have created, or free or royalty-free images on your site. (See possible sources below).
- Upload your final project to the class server via FTP.
Possible sources for images:
- On the SMC server there is a library of free images to use in your project
- Creative Common section on Flickr
- 30+ Websites for Stock Photos and Royalty Free Images
- Veer: Wonderful selection of stock photography
- iStock Photo
- Morgue File: Free!
- Stock Xchange
- Stock Vault
- iStock Pro
- Open Photo
- Getty Images
- Index Stock Imagery
- Absolute Vision
- Jupiter images
- Juicy Stock
- Clipart.com
- Original Free Clip Art
- #1 Free Clip Art
Final Project checklist
Before completing your project make sure you have reviewed the checklist below:
- Did you research the project and define a target audience for the site?
- Did you successfully create a strong, visually effective site?
- Did you follow the specified dimensions based on a 1024 x 728 monitor resolution?
(Finished width is 990 pixels and “the fold” is 560 pixels. Do not make your site a fixed height) - Did you create your site using CSS Column Layout (did you use divs not tables)?
- Did you design effective main navigation for your site?
- Did you title your pages and highlight navigation?
- Did you use mostly HTML text in your site?
- Did you create and use only one CSS file for your site?
- Did you create placeholder pages for the remaining pages of your site? (A placeholder page is the structure of the page with all the navigation but it doesn’t need to have complete text and photos. This is an example of a placerholder page).
- Did you upload the website to the server and view it on the server to make sure everything is displaying and working correctly?