project 2 :: final crit lineup

here is who you will crit on friday:

laura crits gentry and veronica

josh crits veronica and kyle

gentry crits kyle and kaufman

veronica crits kaufman and adam

kyle crits adam and genia

kaufman crits genia and nik

adam crits nik and matt

genia crits matt and amy

nik crits amy and sheila

matt crits sheila and laura

amy crits laura and josh

sheila crits josh and gentry

project 2 :: final crit

 final crit will be brief presentations of your work to the group, followed by written critiques. presentations will be informal; two or three minutes to share your work with everyone, explaining any ideas, technical wizardry, etc. so everyone can see the work.

you will provide written critiques for two classmates. fifteen minutes will be provided for each crit and should be posted to your classmate's blog as a comment. the comment will be placed in the post i'll describe below. your crit should address the following issues:

• overall usability of the site
  
• the degree to which it pushes boundaries / questions traditional presentation of portfolio work
• same as above but for overall site navigation
• if the site utilizes linear / cinematic elements (such as transitions, image sequences, etc) and the success of those linear elements
  
• overall organization of the work -- logical? interesting?

to prep for the written crit, make sure you have a final screen grab of the project posted on your blog and title the post "MX project two final". if you have the work on your website, please provide a link to the site in the text of that post. also provide a written description of your intentions for the site -- what you hoped to achieve in its design, rationale for the design decisions you made, what you learned through this process, what you are most proud of, what you struggled most with.

project 2 :: blog requirements + readings

here is what i'll be looking for in terms of process documentation:

• evidence of brainstorming -- lists or sketches
  
• image(s) of your 3d model(s)
• two screen grabs of at least three rapid prototypes. show two screens from each idea with brief explanations. 
• refinements/process toward your final direction.
• a couple of screen grabs of the final functioning wireframe.
  
• four reading responses from "the language of new media".

label all posts "MX"

also, all reading responses are due on monday nov 30.

project 2 :: production time

in class
production work day. remember to stay focused on task scenarios -- as jason rincker calls them,"use cases" -- so there is a smooth and efficient flow from screen to screen, image to image. the final goal here is tight, fully-functioning wireframes. no need to worry much about color or even specific portfolio contents at this point. plan for roughly 10 to 15 pieces, or whatever number you feel is appropriate.

homework
production
reading: "the language of new media" pp 103-115 the screen and the body, representation vs simulation
reading response on your blog. label post "MX"

final project schedule
monday nov 23: production work day
friday nov 27: thanksgiving break
monday nov 30: production work day
friday dec 4: final crit

project 2 :: task scenario / wireframe refinements

in class
desk crits on task scenario sketches.

homework
refine task scenario sketches, add more screens and task scenarios as needed to achieve a full set of possible wireframed screens.
reading: "the language of new media" pp 94-103 the screen and the user, a screens' genealogy
reading response on your blog. label post "MX"

project 2 :: decision-making and task scenario-ing

for next class session

• reading: "the language of new media" pp 78-93 cinema, hci: representation vs control
• reading response on your blog. label post "MX"
• post visual iterations to your blog, determine a direction to pursue.
• create task scenarios to flesh out a range of screens that storyboard the interaction process.
• roughly determine portfolio content -- 10-15 pieces. focus more on categories of work, rather than specific pieces.

project 2 :: reading responses

to reinforce the importance of reading theory and criticism, you are required to write a response to each reading for this project (four total) from "the language of new media". each response will be worth 10 points max, and should be posted to your blog with the label "MX". an excellent response does the following:

• notes new concepts learned in the passage
• makes connections between the reading and your MX projects
• makes connections between the reading and non-MX readings/experiences
• does all of the above concisely 

lesser responses that exclude portions of the above will decrease in points earned.

project 2 :: round-up crit

in class

• 15 min: discuss reading
• group crit on all rapid prototypes. 10 min each, max.

homework

• revise idea based on crit feedback. go back to sketch mode, iterating widely and creating a range of wireframe layouts that utilize your chosen functionality.
• reading: the language of new media, pp 63-78 the interface, cultural interfaces, printed word 

the reading is at the library under eppelheimer's reserves,  or you can get a pdf through the kcai library site (direct link). the reading is called "the interface" and the password is "media".

blogs
post two screen grabs of each idea, each showing different states of interaction. that will give you a rough total of six screen grabs -- three or so ideas. provide a brief explanation for how each idea works, to supplement your images.

Project Two :: Round Up

In class

• 15 min: find+share
• finalize test 3 by end of class. show idea quickly
• revise/refine previous directions

Homework

• refine all tests and prep for group crit. group crit will be used to select one direction to pursue.
• reading: Windows & Mirrors, from The myth of transparency 48-50 to Another strategy 55-56

project 2 :: round 3 iterations

in class

• 15 min: find+share
  30 min: discuss reading
• 50 min: finalize test 2. show idea quickly, one-on-one.
  50 min: brainstorm round 3

homework

• continue brainstorm/rapid prototype #3. tests can be html/css/javascript vs flash, or a combination of both
• reading: Windows & Mirrors, from the history of disappearing pp 34-38 to the macintosh interface 44-48

project 2 :: round 2 iterations

in class

• 15 min: find+share
• 1 hour: for coding / finishing flash test #1
• 1 hour: create interaction model(s) in a 3 dimensional model

homework

• continue brainstorm/rapid prototype #2. tests can be html/css/javascript vs flash, or a combination of both
• reading: Windows & Mirrors, from Introduction 2-7, to Wooden Mirror 32-34 on e-reserve

to access e-reserves complete the following steps:
-log onto the KCAI Library Catalog
-under Other Options/Course Reserves: choose instructor name
-search by the instructors last name (eppelheimer)
-select "multimedia experience"
-select "windows and mirrors"
-Log-in to the Library Catalog (enter your name, campus ID and campus code) and then it asks you to enter your Course Password -- media

project 2 :: CRAFT DAY!

for round 2 of the initial interaction iterations, we will build 3 dimensional interactive models as a way of generating new ideas. each of you should bring supplies to use for building (and sharing with classmates):
- paper clips
- toothpicks
- marshmallows
- tape
- peanuts (or tree nuts if you prefer)
- mattboard scraps
- paper scraps
- anything you can come up with

bring a bunch of one thing for all to share in class on Friday.

rapid prototyping

so, if you are confused as to how to proceed based on our first discussion of your ideas, do the following...
you should create quick functional examples of your ideas in either Flash or HTML/CSS/Javascript. pick one idea to start and use basic boxes or images as a base to work with. try to make the interactions you are imagining really happen on a small scale. if you want the user to drag something across the screen, figure out how to make that happen. use the sites provided on the blog and internet searches to find similar solutions you can copy and alter to suit your needs.

remember, a rapid prototype is a quickly fabricated model that allows decreased development time and mistakes down the road by allowing corrections to be made earlier in the process. effective prototypes are fast, disposable, and focused.

project two: flash actionscript sites

to help you along the way.

lynda.com of course. paid subscription site.

http://www.adobe.com/designcenter/video_workshop/

several helpful beginning actionscript videos in here.

http://www.adobe.com/devnet/flash/articles/atv_flcs4_demos.html

five video demos for flash beginners (includes some basic actionscript info)

http://www.adobe.com/devnet/flash/samples/

some good sample fla files for beginners and intermediates

http://www.adobe.com/devnet/actionscript/articles/actionscript_1-on-1.html

a good collection of beginner video tutorials

http://www.flashkit.com

a huge range of user-generated tutorials, including a section on interactivity and navigation.

http://kirupa.com/
kirupa.com is a site that aims to make designers better developers, and maybe even help developers become better designers.

project two :: brainstorming interaction and/or animation

the first half of this project will be very experimental and involve quick iterations of your ideas. to start, come up with as many unique or alternative models of interaction or animation as you can. use metaphor to fuel your ideation and think beyond the chrome, along all possible axes. you can write out these ideas, or sketch out the ideas, or combine both methods. check these different but equally valid ideas from last year:

Curtis Pickell

1. horizontal movement: macro - micro view of work
2. divide all content into two parent categories: emotion/logic
3. homepage randomly choses a portfolio piece each time it is refreshed
4. each page (content type) is a room in a house. different types of work are contained within different rooms
5. hallway with multiple doors dedicated to specific content
6. night skyscape: constellations are formed through navigation
7. subservient curtis: user can command me to present certain work as well as do other things
8. filters determine given content (color, creation date, emotion, type, etc)
9. site framed within actual eyeglass lens: focus blurs during transitions. left lens= nav; right lens= content

Adam Tramposh

project two :: sweet portfolio and reel examples

Vermeersch

Self Titled

Kashiwa Sato

Justin Schrader

Karim

Barcinkski & Jeanjean

2x4

Alvin Aronson

Takach

Justin Ruggieri

iamwebsite

theFWA (flash archives)

t2

collection of papervision sites

attik

drag the red box on the right side.

collective 08 website

designed by garrett and takach

Trollback + Company

agency: collective

brand new school

click on "montage" in the menu

ca-square

click on "reel" in the upper-right corner

imaginary forces

buck

project two :: beyond the portfolio

description

conceive, design, and produce a fine-tuned, fully-functioning wireframed portfolio website. our focus is on creating a unique and carefully-structured navigation/interaction experience. you have two major options for how to approach this work:

1) focus on the non-linear selection of projects in your portfolio, with consideration of smaller linear elements.

or 

2) focus on a linear presentation of time/motion-based work (aka "demo reel"), with consideration of a larger simplified non-linear structure to house the linear portfolio.

the direction you choose will determine how your process goes. students choosing option 1 will be using portfolio pieces as rough content with the option of refinements in pro practice next term. their focus will be on the creation of the unique interaction model and not on portfolio content selection.

students choosing option 2 will necessarily be focused on selecting and editing work for inclusion in the demo reel and will spend a good amount of time on the linear presentation of that work. their larger portfolio structure will have to be simplified to complete the project in time. 

objectives

• investigate alternate and experimental forms of presentation 
• integrate linear and non-linear elements into a seamless user experience. 
• understand the multiple tools & multiple technologies makeup of interactive design and explore the combination of these technologies 
• understand the separation of design and content that is integral to current multi-authored web content 
• further develop critical thinking and articulation skills in informal class discussions and formal critiques

homework

• visit and explore links from the examples post above (do this first) 
• brainstorm interaction or animation types (see brainstorm post above also)