Include the following pieces of information in your video:

—introduce your cuisine/global community through what you learned during your research process, what you found interesting etc. “Spanish cuisine has a history rich in tradition and has influenced other Latino cultures such as Puerto Rico, Mexican and Cuban. The secret to making Spanish cuisine authentic comes through the selection of specific ingredients such as olive oil and spices, etc.”

—introduce your interactive environment’s context and the user’s goal.
“An interactive iPad application was created for someone interested in putting together a Spanish themed meal.”

—introduce the tasks the user has already done up to the point where you begin showing the site. “Our user, Ellen, has logged into the Spanish Cuisine Helper application and selected main course as her menu item.”

—Then begin to walk through the scenario of use. Avoid language that says…click here and this happens. Instead say “Ellen needs to find the necessary ingredients in the kitchen environment and begins with items in the cabinet…” The voiceover happens while you are showing interactions.

—Credits: Include your names, Michigan State University, STA468 Interactive Web Design, Spring 2012, and bibliography of info/photos.

Steps for creating your video presentation:
1. Create outline for storyboard, use the list of info from above
2. Write Script to support storyboard
3. Photograph/Source any images you need (for introduction, the more you can take on your own the better)
4. Gather Sound (in addition to voice overs) (optional)
5. Compile all elements in keynote or other software (including your screens)
6. Work out animations of screens in keynote (need animated keynote)
For iphone and ipad, either use actual video of hand interacting (or use a photographed hand) OR, use icons to represent fingers
7. Record Voiceover in keynote
8. Export Keynote as Movie file
9. Upload to Vimeo

EXAMPLES of PRESENTATIONS:
Hooked
Blind Tiger 
Soless

KEYNOTE TIPS:
example of what is possible in keynote
voiceover
animation
more animations

The design components of your initiative will be delivered in a Brand Book. In the Brand Book include all information from your creative strategy, audience profiles/personas, design identity elements (logo versions, color, photos, illustrations, patterns, etc.) touchpoint strategy, and touchpoints, plus anything else that you find relevant to your initiative.

Brand books educate and build brand awareness. They communicate what the brand stands for as well as show standards, templates, and guidelines. The brand books are typically shared internally and with other designers that need to create further materials for the brand. In this last phase of the project you will structure your brand book and plan a presentation for the class of your work.

You will present your company’s creative strategy, visual identity, and touchpoints
as they relate to the intended audience with a focus on how you speak to your work.

Your Brand Book and a final presentation will be due during our final exam times (May 1st 3-5 pm). Your presentation must be brief and cover the following: concept and objectives, design identity elements (logo versions, color, photos, illustrations, patterns, etc.) touchpoints with information about the intended audience. Create this presentation PDF in InDesign, 11 X 8.5 landscape.

I will also need a folder with all of your final work from project 1 and 2. Title this folder with your name and drop it into the Sharespace folder by the final exam time.

Next week (the last week of classes!) I will be reviewing rough draft versions of your Brand Book.

After creating a site diagram(s) (you may need to do a few to narrow down to the specifics) begin to create a low-content wireframe and/or prototype. This should illustrate how the user interacts with the information. Remember “low-content” means just that, design details are not a priority, the interactive properties are. Be creative in how you show this, think outside the typical black and white wireframe process. Is it similar to the example I showed in class? Analog sketching combined with digital?

Both the site diagram(s) and low-content wireframe/protoptype is due on April 17th at the beginning of class. At that time I will also introduce the last project objective and that will pertain to how you will present and design the rest of your interactive experience!

Refer to this post for information about Kevin Lynch and the organizational elements.

When asked to visualize a city versus a town, we are quickly able to imagine each. Imagining a “city”, we see skyscrapers, crowded streets, various noises and traffic. When thinking of a “town” we picture smaller scale buildings, houses, and parks. When asked to imagine New York City and Omaha, Nebraska, our perceptions shift, based on our past experiences and memories of other cities and towns. However, we would find our way through each city by drawing from these experiences and memories, calling upon the ‘imageable’ characteristics to navigate us. imageability is “that quality in a physical object which gives a high probability of evoking a strong image in any given observer” (lynch, 9).
All cities comprise a certain structure that maintains its imageable quality despite the particular features that construct the city’s overall identity. Lynch’s theory of city imageability is supported by the organizational elements of landmarks, districts, nodes, edges, and paths. These elements construct an underlying structure in any environment that is approached with little difficulty, forming an environment that is legible. A legible environment is one that is made up of parts that are easily recognizable, that has clarity, and can be organized into patterns. We are able to orient ourselves, recognize places of interest, and choose from a variety of paths connecting to locations and people. It involves the daily occurrence of getting from one place to another as we continually interact within our physical environment. This interaction can form either positive or negative ‘environmental’ images, all filled with meaning. Lynch describes an environmental image as the “result of a two-way process between the [audience] and its environment. The environment suggests distinctions and relations, and the [audience] selects, organizes, and endows with meaning what [they] see” (lynch, 6). Our collection of environmental images varies due to our individual cognitive differences and situated context.

elements of imageability
landmark: external to the user, cannot go into, prominence in location, use in orientation, may be isolated, not integrated.
district: can be linked together, observer can go inside of, identifiable from the inside but visible from the outside.
nodes: small points in the city, user can enter, can be several nodes, can carry a theme, focus of a district, can be dominant feature.
edges: boundaries between two kinds of areas or content, can have directional qualities.
paths: may not be identifiable or continuous, user moves along a path through his/her interaction within an environment.

Lynch, Kevin. The Image of The City. Cambridge: The Massachusetts Institute of Technology Press, 1960.

Discussion Thread that answers the question: How might chapter III, The City and its Elements from Kevin Lynch’s book “The Image of the City”, relate to effective development practices of interactive media? from NCSU Digital Imaging course

Kevin Lynch, overview of “The City and Its Elements”, The City Reader: R LeGates & F Stout, 1996

—touchpoint pieces: are they appropriate to the indicated audience group/persona?

—clarity and hierarchy: is all information legible and readable, how do you read each piece?

—format design (specifically the 3D pieces): does the construction/folding of the piece feel simple and not overly complicated in terms of viewing information? in terms of production?

—website design: is there a clear task being shown? Are there too many steps being shown, or too little? The website storyboards need to show enough design to get a sense of it being part of the brand and to meet a specific task.

—identity system components (kit of parts): photos, typography, color, illustrations, patterns, backgrounds, etc. are they all working together to effectively represent the brand? Is there one or more elements that feel out of place? Are more elements needed? Fewer elements? Do they support the design objectives and concept statement?

—logo: have the refinements improved legibility? Does it communicate the initiative effectively? Does it support the design objectives and concept statement?

—overall system: does everything work well together? Does it feel like a set? Is there consistency of visual elements across each piece. Is there anything being done differently on one piece and not the next?

NEXT WEEK
Monday April 9th—work in class, individual critiques
Wednesday April 11th—work in class, individual critiques

If you have adjusted and refined your logo, please show this as well in a separate image (separate from the touchpoint pieces).

Monday April 2nd—work in class
Wednesday April 4th—rough art critique of all work (touchpoints and identity)

—begin a google document and/or a facebook group for your group as a collaboration space
—individually begin to research the country and the various cuisine types that are from the region
document and share your research with your group via your online collab. space
—determine a few key dishes that you would like to focus on, eventually you will narrow to one (perhaps each person picks one dish)
—list the ingredients and process for creating each dish
—research origins of ingredients, the dish, the people, influences, etc.
—organize a meal together where you have to prepare it (this should happen at some point during the project!)
—as a group select the one dish you will focus one

In class on Tuesday 4/3 you will be creating a map/diagram of your content, so come prepared!

The final map/diagram is due at the beginning of class on Thursday 4/5 as a digital file posted to your online collab. space and/or blog space.

The Main Failing Of Design School: Kids Can’t Think For Themselves
by Michael Bierut

—Create a list that covers all the information that will be in your screen-based touchpoint

—Using one of your audience profiles, determine a “task” that aligns with their goals and motivations.

—Plan out a “user path” of how the user moves through your site or application and their moments of interaction. Begin to use “interactive vocabulary” to plan for how the user interactions ex. roll over, clicks, types, selects, scrolls, zooms, click and drag, etc. Don’t be afraid to think gesturally either,  considering a touch screen environment. Create a low-content wireframe that highlights the information and moments of interaction.

—if you are doing a motion piece determine the sequence of information, create a rough storyboard that shows your plan.

Print-based Materials
Step 1: Content and Format

—Create a list for each piece that covers all the information that will be communicated.

—Begin to gather, create, expand on this content, ex. textual information, images. When at all possible use your own photography for images. For the textual information, no “dummy text” or “lorem ipsum” is allowed, this means you must source or write your own copy.

—Create several 2D sketches and 3D paper explorations to determine format possibilities for each piece, these can be half size. Also consider the grid structure and how it relates to your company.

Monday March 26th—individual reviews in progress with Rebecca
Wednesday March 28th—small group touch base on work

Organize your project into a presentation book and export that book as a PDF. Make this 11 x 8.5 landscape and arrange it the way I have indicated here. You must bring to class a printed and bound (stapled, wirobound, other creative ways) booklet and a PDF file of your work. You must also have the PDF posted to your blog.

You will be presenting your PDF in class on Tuesday. Be prepared!