T816B Mon-Wed 4p-6:45p

DGD 365BINTERACTIVE MEDIA 1

INTRODUCTION

One of the important skillsets you'll learn in interactive is the ability to see disorganized, or more specifically complex, things as systems. And each system is comprised of smaller parts. If you were to take the whole thing at a glance, it feels very difficult to break into smaller parts and classify. However, if you develop the above skillset, you quickly learn to compartmentalize larger things into smaller tasks.

At first blush, developing an interactive experience is a heady requirement: concept, structure, code (HTML, CSS, JavaScript, AS3, etc) and usability must all come together to create a seamless relatable piece.

This project will start you opening your eyes to this process by taking a look at something we're all familiar with: food.

You will divide into groups, and create themed 'dinner-parties'. As a group, you will decide on the cohesive meal to 'serve' to the user. Each student will take one item for dinner: cook/bake and document it. The final project will involve stitching together all items from the meal into online experiences.

00PLAN (YOUR DINNER)DUE 09.07.11

Divide into THREE groups. As a group, discuss which type of meal you all wish to "have". Each student should take a different dish, and all dishes should go together.

DISH REQUIREMENTS:

  • Must go with the rest of your dinner/teams's meal
  • Have at least 5 ingredients
  • Have at least 5 steps to preparation
  • Must NOT be a 'boxed' item (aka Stouffer's Au Gratin Potatoes)
  • BE Legal (if you are under 21, you may not prepare an alcoholic beverage)
  • HAVE FUN

CONSIDER AS A GROUP:

  • What makes a meal?
  • What makes a dinner party?
  • Why do certain things go together?
  • Why do people gather to eat?
  • Zigging instead of Zagging
  • How is your dinner going to be three times as awesome as the other groups'?

When choosing dishes or themes, consider online resources: Epicurious, Martha Stewart, etc

This project is also about collaboration and coordination. You should be sharing your raw assets with other members of your team. Set up a Flickr group for your team.

Though you are divided into groups, your focus will be your dish. Each person of the team will, in the end, assemble a website that showcases the entire dinner from their perspective.

REMEMBER: Each NON-INTERACTIVE deliverable is required to be in a presentation PDF. Be sure to ALSO email me your final PDF to my email address.

01CONCEPT (BAKE AND DOCUMENT)DUE 09.12.11

Over the course of the weekend, prepare your dish (physically) and consume it. Document this process with VIDEO, PHOTOGRAPHY, and a written journal. You don't have to meet up as a group to actually eat the entire meal together (though that would be pretty cool).

You are in essence, documenting a performance. Remember that. Practically, this means that your evidence for each phase will only exist for that brief period of time, so you'll have to be thorough. No going back.

THINGS TO CONSIDER DOCUMENTING:

  • Gathering Ingredients: Shopping, etc
  • Storing and retrieving Ingredients
  • Preparation (do you need to chop things, do they sit in a dish)
  • Cooking
  • Presentation. If Iron Chef has taught us nothing, it's that HOW you serve your meal is as important as how it tastes
  • Consumption: How does it taste, how long does it take to eat?
  • How do you feel while eating it? How do you feel afterwards?
  • Clean-Up

Come to Class on Monday with a well-documented PDF of your dish. We will briefly divide into groups again so you can confer with your Dinner Party. Plan on having a way to share assets.

REMEMBER: Each NON-INTERACTIVE deliverable is required to be in a presentation PDF. Be sure to ALSO email me your final PDF to my email address.

02DESIGNDUE 09.14.11

Now that you have your meal is crafted, create 2-3 different* interface designs that will allow you to explore the narrative you've created. These are DESIGNS ONLY (photoshop/illustrator), not working interface prototypes.

Consider:

  • Interactivity
  • Design
  • Typography
  • Animation

REMEMBER: Design, Design, Design. This design should carry through deeper than the surface, and become integral with the interactive experience. Consider navigation without clicking, navigation by keyboard only, animation, or puzzle-based linear paths. These should be fun to explore. The caveat here is that this project will be due the following Wednesday, so watch your deliverables vs. timeframe. Please try to include sketches and other concept work into your PDF. Though you won't have to present these pieces, I will look at them.

Keep in mind: Your design and interactive experience should FOCUS ON YOUR DISH. This is about your dish. You will be LINKING to the other portions of the meal (aka the other students' work on your team). Through this linking is how the experience will come together.

BE SMART, and plan ahead. Build placeholders into your design, and produce your project so that programatically, as much as possible is completed for this portion, pending only the final URLS.

CONTENT: The amount of content, imagery, or sound you put into this project is up to you. It should all support the 'micro-narrative' of the dish and the 'macro-narrative' of the meal. You can choose to use words, or explore your narrative using only image and sound. IT all should satisfy the content requirements of OmNomNom.

*to clarify: 'different' means different in look, layout, and scope - it doesn't mean changing the colors, or the font - or other superficial things. EXPLORE.

03YOUR DISH: COMPLETE (BETA)DUE 09.21.11

TECHNICAL REQUIREMENTS: Part of any interactive project you'll face is balancing content and technical goals, so that both align into a comprehensive and well-executed project. One goal of this project is to assess your current technical ability using various web and interactive technologies. All of the following are REQUIRED:
REQUIRED HTML:

  • HTML: should be built with fully functional tables, or alternately, CSS.
  • some HTML copy: how much is up to you (hint: you can use HTML copy in Flash, if you enable text boxes correctly)
  • CSS: whichever HTML copy you use (whether in Flash or otherwise) must then be styled via CSS

REQUIRED FLASH:

  • At least one MouseEvent Listener
  • At least two MovieClips
  • Use of at least one animated segment (coded or tweened)
  • One MovieClip must call another MovieClip and tell it to change its state in some way, this must happen on user interaction

IN ADDITION:

  • Non-Linear Navigation: each content item should link to others
  • A clean directory structure
  • standard naming convention
  • proper HTML page titling
  • META tagging of HTML pages (keyword and description)
  • Your Project MUST be online, and publicly reachable.
  • You must link to all other student projects in your dish, in an integrated fashion

You might also consider:

  • Frames and/or iFrames
  • Flash as navigation
  • video, and or sound
  • Code Commenting

Come to class with your work at 'BETA'. Beta is an interactive development term that defines how far in-process you are to project completion. Beta is defined as 90-99% complete. This means, that to an uninformed observer, your project would be done.

Your project MUST BE ONLINE at this point.

04PROJECT COMPLETE (FINAL)DUE 09.26.11

Now that your own DISH is complete, you will need to link-up your project to the other student projects of your MEAL. You should have built 'hooks' into your project such that you only now need to add the final URLs

Come to class ready to present. This means you should verify BEFORE class that your site works, is online and accessible.

FINAL PROJECT MUST BE TURNED IN AS A LINK VIA EMAIL. Practically, this means you must also leave your project up for the whole semester. (don't override the link).

PROJECT OVERVIEW

This project is designed to refresh your interactive skillset, your ability to manage a compressed timeline, and your conceptual ability.

More specifically, it's a quickstart project, and looks interchangably at how people can consume content online. We are used to looking at something in a linear context, but interactive media allows us to change the order and flow of how we understand things.

GOALS/DELIVERABLES

  • Gauge Student Comprehension and Level of Flash and HTML
  • Conceptualization
  • Collaboration
  • Constrained Timeline
  • Working around Unknown Assets
  • Merging disparate Concept and Interactive Needs into a cohesive, supportive whole

This project REQUIRES the use of Flash and HTML working together synonymously. Requirements will be detailed more specifically as we reach that stage of the project.

DELIVERABLES: Because of the detailed scope of this project, please see part 3 of this project for a full list

YOU ARE AWESOME