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

GDS 271 Interactive Design
Project 1: Travel Website

Instructor: Paul Young

Objective

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

Secondary objectives

To gain experience designing with DNN, a professional content management system (CMS).

Description

Re-design a travel destination website. Be sure to choose a destination with a poorly designed site. Make improvements in any of the following areas: form (user experience, user interface, design principles, typography, information architecture), content (logo, photography, illustration, copywriting, marketing objectives).

Specifications:

  • 8 pages minimum (including the landing page)
  • Must be responsive
  • Text: original or edited from existing site
  • Branding: original or copied from existing site
  • Art: downloaded from existing site, 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.

Resources:
Procedure

1. Research for inspiration: Research existing award-winning websites. Look specifically for clean visual branding, creative concepts, nice images, clean typography, innovative interactivity, 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 (download blank browser window ) 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 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 DNN. 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 (download Photoshop template) and mounting them on foam board. Also prepare a JPEG of the same art (1000px wide, no larger than 200K) 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