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 1 :: presentation order

here's the lineup, folks. 10 minutes to present, 10 minutes for feedback. be sure to practice, as i said in class.

8:05 kaufman / laura

8: 30 genia / kyle

8:55 gentry / adam

9:20 b r e a k

9:30 amy / sheila

9:55 veronica / nik

10:20 josh / matt

also come ready to contribute some meaningful and helpful criticism for the benefit of your classmates. with a few minor exceptions, you guys were bumps on logs in friday's class. that hurts you on both the giving and receiving end, and you should know by now that receiving criticism is very helpful in your idea formation and giving it sharpens your ability to think quickly and creatively. let's step that up across the board.

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)

project 1 :: final two weeks

monday oct 12
discuss "don't make me think" reading, part I
make sure designs are finalized
outline final presentation -- 20 minutes total for present and feedback, plan your time wisely
begin prototyping

friday oct 16
i will only be in class until 12:30
discuss "don't make me think" reading, part II
continue prototyping

monday oct 19
i will be out of town today. chris will take roll, so come in and work.
finalize prototypes
work on presentations -- make sure you rehearse!

tuesday oct 20
project 2 will be posted with homework for friday

friday oct 23
post final presentation files to my CAS dropbox
first day on new project

monday oct 26
presentation!

project 1 :: detailing your visual designs

in class

• work day/desk crits to finalize designs and make refinements. 

homework

• continue detailing all aspects of your screen layouts, making sure you are following complete task scenarios to show the user's click paths
• read "don't make me think", chapters 1 and 2
• start vaguely pondering how you will technically produce your prototype. flash? html/css? pdf? 

considerations for visual design refinements

• do your users know where they are in the system? what task they are currently performing?
• are you using spatial/typographic hierarchy to focus the user's attention properly?
• is typography being applied consistently and systematically, in terms of sizes, weights, colors?
• are tools/components/areas of your site named logically and clearly?
• how are you utilizing visual feedback? how do users know they have successfully completed a task (submit info, button click, etc)?
• are you designing properly for the given input device (mouse vs touch)? for example, touch screens cannot utilize rollovers.

grading breakdown for the semester

it looks like project one is going to last 9 weeks, leaving 6 weeks for project two. therefore, this course will be graded on the results of both projects with the following weights:

60% for project one

40% for project two

the four major grading areas (objectives, craft/presentation, participation, and process) will still apply to both projects. i am averaging all of your work across the board into those four areas.

example 1: the presentations you gave for your initial concepts (audience review + wireframes) and your presentation of three directions will both count toward your final presentation grade.

example 2: the quality of your ideas embedded in the research posters will count toward your final objectives grade.

let me know if you have any questions about the grading breakdown or your progress grade you recently received.

project 1 :: a final structural/visual direction

in class

• group crit on three visual/wireframe directions from last week. 

homework

• determine a direction to pursue based on peer input. 
• revise, refine, and detail that direction for the remainer of this week and up to the first class next week.
• place a pdf of your original concept presentation in my CAS dropbox. filename "MX_lastname_conceptpres.pdf"
• post to your blogs a few key frames from your concept presentation. label your post "MX" (and your research poster post as well).

project 1 :: poster posting and CASing

as blog posts of your process are pretty thin, i will be requiring a number of posts that cover the project process and will factor into your grades, here's the first:

make sure you have your final posters on your blogs and have dropped the final PDFs on my CAS drop box. if you split the poster design work in two, share and present both on the your blogs so that the viewer understands the context.

label the PDFs like this:

"MX_lastname_lastname_poster1.pdf" and

"MX_lastname_lastname_poster2.pdf"

project 1 :: wireframe and design iterations

as you know from your years in this program, multiple iterations are vital to making sure you have the best ideas possible. with that in mind, here is where you should head for friday's class and into next week:

• begin developing 3 different design directions for your system (you already have one in progress):
• develop alternate wireframes of 3 key desktop screens and 3 or 4 iPhone screens
• create different visual metaphors for your system and ways those can produce varied emotive directions for your designs
• discuss how alternate hierarchy schemes allows for different, but appropriate, user interaction
• design visual examples to those new wireframe ideas
• read "Module and Program" from Designing Visual Interfaces 153-end

monday we will have a group crit on work-in-progress, so put together screens of your work to project for feedback.