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 #2 | Interactive Media – Whitmore

Project #2

Choose one of the following profiles for your second project, remember that you cannot repeat the same project and you should avoid related subject matter:

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

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.

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. Clear, concise and relevant site design
  3. Required use of Flash (a moving Flash based element, see the description below)
    –Implementation as a well thought out interactive element pushing your understanding of design for movement and general presentation.
  4. Use of jQuery and CSS3 is REQUIRED for this
  5. (With a clear design and technical rationale)
  6. Image optimization: CSS Sprites, Consistent image quality throughout
  7. Appropriate use of Graphic elements vs. HTML Text
  8. Browser Tested and generally corrected for FF, Safari, Chrome

Phase 1: Strategy/Planning — Feb 13/14 – 20/21

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 Feb 20/21: 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 — May 20/21  to  March 5/6

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

Due Mar 5/6: A minimum of THREE complete page designs (no sketches, no unrefined mock-ups)

  • Designs should be produced in PhotoShop only!
  • Designs will be organized, refined and clearly show the aesthetic direction you’ve chosen. 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 Mar 7/8: Revised designs in response to the feedback you received on the 18th.

  • Post three JPGs

Phase 3: Development — Mar 5/6 to 21/22

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.

Flash Requirement

As stated above you are required to include a Flash component in your site in one of the following two ways:

1) Advanced slideshow or interactive main-stage.

2) Flash web banners, you must include two web banners with the same AD content in two different sizes. You must choose tow sizes from a rectangle, skyscraper and leaderboard sizes. Here are sizes for reference LINK.


Basic Previous Examples

Stark Records
Arapaho Brewing Co.
Quintell’s Pawn Shop
Church Records
Doux Amour