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 with the interactive features of Adobe Animate (formerly Flash).

Description

Design (or re-design) an interactive map for a physical location. The map does not have to be to scale, but it must fit comfortably on an iPad (1024x768px). Simplify the information to show clarity (edit out all non-essential information). Utilize interactivity to show/hide information as needed. The subject matter of the map is up to you, but here are some options:

• floorplan of exhibits in a museum
• floorplan of restaurants at an airport
• floorplan of stores at a mall
• map of tourist attractions near a hotel
• music festival map
• map of parks in a community
• mass transit route maps for a town or city
• bike routes for a town or city

At a minimum, the map must include the following information:

• title
• location (i.e. city, state)
• a symbol indicating north
• geographic information of your choice (streets, routes, landmarks, etc.)

Optional: showcase the interactive map within a responsive html page.

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

Per our syllabus, you may ONLY use the standard "core" fonts installed in D019 for your assignments unless you obtain prior approval from the instructor (see Parkland's Core Fonts Specimen Sheet). Please talk to your instructor if you need to use a non-standard font from the Adobe Font Folio collection.

Procedure

1. Research for inspiration: Find examples of clean, modern, minimalist maps for reference. Pay particular attention to how designers utilize typography to create hierarchy. Make note of how designers unify the map by repeating visual elements. Study how designers make use of color for contrast (strong or subtle). Share links to your best research on your Process Page (links must open in a new window/tab).

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 interactive map, make use of the Vocabulary Wheel as a starting point. Publish your brief as a shared Google Doc and make a link from your Process Page. Email the published link to your instructor.

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 your finished web page. Edit your concepts down to your best three ideas and share them on your Process Page for critique.

4. Prototype mock-up: Based on the critique of the above, create a prototype "contract proof" of the map in Illustrator. If needed, use multiple pages to show examples of interactivity. Publish a PDF linked from your Process Page for critique.

5. Developing version 1.0: Revise your mock-up as needed, then import the art into Adobe Animate. Add interactivity and/or animation as needed. Publish a HTML canvas document linked from your Process Page for critique.

6. Developing version 1.1: Duplicate your FLA file and revise your map as needed. Publish a new version of the HTML canvas document linked from your Process Page for critique. Prepare a presentation and "sell" the design to the client. Optional: also develop a responsive HTML page and embed the map inside an iframe.

7. Grading: Based on the critique of the above, revise the map 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 screenshots (use this template) and mounting a tabloid-sized print on foam board. Your project may win a cash prize and be published in a showcase of student work on Parkland's website.