Project #3. Interactive Sitemap

The Assignment: Map the structure for the information on your web site. Imagine the information will reside in separate rooms (or on pages), housed by their relationships and compatibility. During class their will be a workshop on content mapping. We will use traditional tools to quickly sketch the interactive spaces you will be developing. Please bring scissors, tape, markers, and string to class. One group member needs to bring a digital camera. Bring a large sheets of paper (mural paper is best) and post it notes.
Be prepared to work the entire class period.

Students must visualize the content in the form an interactive map. Students will use the sketched map they create in class to develop an interactive site map. Include: the goals, and the message (already determined in the project brief) some where on the poster, as well as the structure of the content. Determine how pages link to one another, consider how the website is a space, and not just a flat page. Begin to consider how do you move from space to space. Think about the interaction, the behaviors, and outcomes that will need to take place.

The Objectives:
To understand the structure of an
interactive space and gain knowledge of information architecture.
To use information mapping to understand complex structures of information
To gain insight into planning phase in the interactive design process

Software Used: Flash

Project #5. Navigation and Interface Design

The Assignment: Design the navigation and interface for the website you have been assigned. Refer to all of your semester projects: the project brief, the user persona, the site map, and especially the wireframes. Using the work you have completed, create a design and apply a visual language across the design. Consider screen real estate, legibility, color, typography, and aesthetics. Be creative and inventive, and make your message come to life. Do not settle on your first pass, try out different ideas, and iterations. Do not deviate from your original plan. You may make changes based on critiques, but do not change course. This is not the time to shift your direction entirely.

You may design in Illustrator, Photoshop or Flash. Be prepared to turn in layered files that are organized and labeled. Choose the application you will work with based on how you plan to implement a final prototype. Do you want to have a full - flash
website, or an HTML / Dreamweaver site?

The Objectives:
To understand the structure of an
interactive space and gain knowledge of information architecture.
To use information mapping to understand complex structures of information
To gain insight into planning phase in the interactive design process

Software Used: Illustrator, Photoshop, Flash

Project #6. Interactive Prototype

The Assignment: After several months of planning an interactive project, it is now time to prototype how this online space. The final phase in our semester long project is to take the design into a development stage by creating a prototype. Demonstrate how the user moves through the site. The outcome should be an interactive prototype, combined with an animated demos for more complicated tasks. The goal is to develop a simulation that represents the final website.

Begin by revising your interface designs. Once this step is completed build your design. Use Dreamweaver, HTML, CSS, and / or Flash. Consider using a combination of coding techniques, you may want to program your navigation in Dreamweaver, using CSS, but have some of the pages components in Flash.

While working on your prototype, test the components on your personal web space, or the Kent space you have been provided.
Be inventive and creative. You must show consistent progress!

The Objectives:
To incorporate software tools and use basic programing principles to develop interactive simulations and animated demonstrations.
To engage in various prototyping techniques that will allow you to communicate and work in the interactive field with other digital media professionals.

Software Used: Flash and/or Dreamweaver