Warning: Declaration of WPVCAdminConfigAction::render() should be compatible with WPVCWPPlugin::render($ug_name, $ug_vars = Array, $action = NULL) in /nfs/c02/h06/mnt/27819/domains/ianwhitmore.com/html/teaching/psu/wp-content/plugins/wp-vcard/classes/action/WPVCAdminConfigAction.php on line 170
Project #1 | Interactive Media – Whitmore

Project #1

Choose one of the following profiles for your first project:

  • Record Label
  • Publisher
  • Art Gallery
  • Specialty Shop (Books, Cooking, Leftorium)
  • Restaurant/Food Cart
  • Assistance Organization (Counseling, Housing, Medical)
  • Fitness/Health Center

(NOTE: You will be choosing another from this list for Project #2, you cannot repeat this choice)

For this project you will plan, design and develop a web site for your chosen profile. You will be producing a SITE MAP, WIRE FRAMES and collecting source/reference materials, then designing and producing a 6-8 page web site. Because this is ART342 our visual and technical design expectations are increased. You will need to be highly organized and manage your time well and you will be using and following the 960 grid system for this project.

This project will give you opportunity to develop a site for a theoretical client/company. You are in control of the identity, aesthetic and content. You are welcome to source existing such companies, however you are encouraged to make this unique and your site can resemble any existing web site in any way. Take this opportunity to create your perfect Book Store, Record Label, Art Gallery or Coffee Shop. Again this should be as unique and original as possible.

Project requirements:

  1. An organized Site Map and set of Wire Frames
  2. Use of a standards based Grid System – 960 GS – http://960.gs/
  3. Optional Fluid Baseline Grid – http://fluidbaselinegrid.com/
  4. Clear, concise and relevant site design
  5. Cohesive brand through the use of type and image.
  6. Use of jQuery and CSS3
  7. Image optimization: CSS Sprites, Consistent image quality throughout
  8. Appropriate use of Graphic elements vs. HTML Text
  9. Browser Tested and generally corrected for FF, Safari, Chrome

Project Examples


Phase 1: Strategy/Planning/Pre-Design — Jan 9th to Jan 17th

Beginning immediately you will start researching comparable web sites (i.e., If you choose A Record Label: SubPop, JackPot Records, Dischord Records, etc.) Take screen captures and collect examples of sites/features you like. Post these screens to the Flickr Group as well.

Due Jan 17th: Site Map (PDF), Wire Frames for three different pages (PDF) and a folder of source/reference material.

  • Finished Site Map and Wire Frames turned in as PDF documents (these cannot be sketches or drawings)
  • Clear organization and site-map for your 6-8 page site.
  • Post all of these documents as individual JPGs on the Flickr group.
WireFrame Ressources:

Phase 2: Design — Jan 16/17 to Jan 30/31

Review and give feedback on Flickr for your wireframes and site maps. Make adjustments and begin the design process.

Due Jan 30/31: A minimum of THREE complete page designs
(no sketches, no unrefined mock-ups)

  • Designs should be produced in PhotoShop
  • Designs will be organized, refined and clearly show the aesthetic and interactive components that make up your site (you may need A and B versions of certain pages to show elements that are open and closed or to show hover states.
  • Designs will be showcase at least three distinct pages (content areas) (i.e., Home, Shop and Contact pages not three different Shop pages—Splash pages are not acceptable for this phase)
  • You will show me these deisgns in class, you will not turn in files until the 20th.Be prepared to show me your use of the Grid System.
  • Do not post these images to Flickr yet.

Due February 1/2: Revised designs in response to the feedback you received on the 18th.

  • Post 3 side-by-side JPGs that show your design and your design with your grid layer turned on or post 6 separate files one with and without the grid on for each mockup.

Phase 2: Development — Jan 30/31 to Feb 13/14

Once your designs are finalized you begin (if you haven’t already started) the development or coding phase of your project.

We will be trouble shooting in class individually and as groups.

Your final site must be posted online and navigable from any web browser. You can post this on your own hosting server or on your web.pdx.edu account. We will review FTP in class.