Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

GDS 271 Interactive Design
Project 3: Movie Promo Site

Instructor: Paul Young

Objective

To develop conceptual thinking skills. To communicate ideas visually and verbally. To apply design principles to real-world visual communication problems as it relates to web design.

Secondary objectives

To gain experience designing with Muse, a web prototyping tool for designers.

Description

Design a promo website for a local band (avoid well-known artists or artists who already have a well-designed site). You may use existing images and text from internet links or their published CDs. You may also make up a non-exisiting "dream" band.

You may change any of the following:

 

Specifications:

  • 5 pages minimum (including the landing page)
  • Must be responsive
  • Branding: original or copied from existing site
  • Links to music and/or videos from the band
  • Art: downloaded from existing internet links, Photospin or another legal source
  • Typography: only clean readable fonts (unless discussed with the instructor first)

Your design must show an understanding of unity, emphasis, balance and color. When appropriate, utilize rhythm and depth as well.

Procedure

1. Research for inspiration: Research existing band promo sites. Look specifically for examples of creative visual branding, clever concepts, nice images, clean typography, innovative interactivity, and a good overall user experience. Publish your research on your Process Page for discussion (see example). Be sure to link to the site and cite the source.

2. Marketing Research: Research your client. What is your client's background? Who is the target audience? What are their marketing objectives? What does the competition look like? Analyze your research and write a written statement of objectives in the form of a memo (see sample brief ). In describing the "character" of the website, make use of the Vocabulary Wheel as a starting point. Publish your brief as a HTML file and make a link from your Process Page. Email the published link to pyoung@parkland.edu.

3. Develop the concept: In your sketchbook begin to conceptualize ideas for this project (see sample wireframe layouts ). Make at least 10 sketches of all possible directions you might take this project. Draw exactly how you intend to layout key pages of your site using traditional pen and paper or digital tools (try wireframe.cc  or Balsamiq ). Edit your concepts down to your best three ideas and share them on your Process Page. Rough out site maps (see examples) as needed to explain your navigation scheme (try Coggle). Publish your wireframes/site maps on your Process Page for critique.

4. Prototype mock-up: Based on the critique of the above, create a prototype "mock-up" of key sample screens in Illustrator and/or Photoshop which will show the "look-and-feel" of the website. Place your art inside a 1024x768 ipad mock-up (one example). Generate web-ready JPEGs of your prototype "contract proofs" and publish them on your personal Process Page for critique. Also develop your site architecture by preparing the text for your website and publish a text-only website (see example).

4. Prototype mock-up: Based on the critique of the above, create a prototype "mock-up" of key sample screens in Illustrator and/or Photoshop which will show the "look-and-feel" of the website. Place your art inside a 1024x768 browser window (download your favorite blank browser chrome from designerstoolbox.com). Generate web-ready JPEGs of your prototype "contract proofs" and publish them on your personal Process Page for critique. Also develop your site architecture by preparing the text for your website and publish a text-only website (see example).

5. Developing the master page(s): Revise your mock-up as needed, then extract the pixel elements and produce working "master page(s)" with Muse. Export and publish these page(s) as links from your personal Process Page for critique.

6. Final critique: Revise your "master page(s)" as needed, then produce a fully functional website. Publish your website as a link from your personal Process Page for critique. Prepare a presentation and "sell" the design to the client.

7. Grading: Based on the critique of the above, revise the website as needed. If necessary, make refinements until you are 100% satisfied with the project. Review your Process Page and make sure you have an accurate record of your process. You will not receive full credit for this project if any of the above elements are missing.

8. Extra credit: Submit your project into the annual student show by printing your screenshots and mounting them on foam board. Also prepare a screenshot of the same art (at 100%) and submit your project using the online entry form at gds.parkland.edu/show. Your project may win a cash prize and be published in a showcase of student work on Parkland's website.

BACK TO TOP
Last updated: 1/3/17 ■ Webmaster: Paul Young