Casa Basa ˜ blending art with technology

Syllabus

Course Description: This course is an exploration of design for interactive entertainment. Students learn to combine principles of communication design, sequencing, and interactivity to create engaging user-centered experiences.

Course Length: Spring 2010. Section A, 11 weeks. Tuesday, April 6, 2010 to Tuesday, June 15, 2010, from 8 a.m. – 12 noon, Room 309. Punctuality is expected. Points are deducted for excessive (more than 2) tardies.
Course Competencies:
Upon successful completion of this course, the student should be able to:

• Understand and resolve design issues for a variety of interactive formats.
• Design sequencing and navigational systems that effectively engage users.
• Apply principles of sequential design in the production of interactive prototypes.
• Use sound and motion as effective elements of interaction design.

Download Word version of syllabus here

Course Prerequisite(s): MM2211 Digital Identity Design

Process for Evaluation:       
Attendance and Participation                                                                                      25%
Assignments and Exercises                                                                                       45%
Mid-Term Project/Examination                                                                                   15%
Final Project/Examination                                                                                           15%

Student Evaluation/Grading Policies:

• Class time will be spent in a productive manner.
• Grading will be done on a point system.
• Points for individual activities will be announced.
• All work must be received by the set deadlines. If late work is accepted, it will be at best 50% of possible points.
• ABSOLUTELY NO WORK WILL BE ACCEPTED AFTER THE FINAL CLASS MEETS WEEK 11.

Classroom Policy:

• No food allowed in class or non-kitchen lab at any time. Drinks in recloseable bottles allowed in classroom.
• Edible items brought to class or lab must be thrown out.
• If student elects to eat/drink outside class or lab door, missed time is recorded as absent.
• Tardiness or absence is recorded in 15-minute increments.
• Break times are scheduled by the instructor at appropriate intervals.
• No private software is to be brought to lab or loaded onto school computers.
• No software games are allowed in lab (unless in course curriculum).
• Headphones are required if listening to music during lab. No headphones are allowed in lecture.             

  

Top of page

List of lectures and labs

Weeks: 1 2 3 4 5 6 7 8 9 10 11

 

Week 1: Tuesday, April 5, 2010

Complete the student survey. Review of the school’s emergency evacuation procedures. Review of course and requirements. Contact is skaitner{at}aii.edu or sharon{at}casabasa.com.

Lecture: What is Interaction Design for Entertainment? What is "entertainment"? Introduction and discussion of course content. Interface and interaction design. Platforms for Digital Entertainment. Genres of web-based entertainment. The quest for "stickiness." Beyond content...what methods can designers employ to further entertain?

• http://meowmania.jqln.org/
• http://www.collegehumor.com/video:1913584
• http://matthewjamestaylor.com/exploring-web-typography/
• http://ryanschude.com/ - the beauty of a portfolio site
• http://www.youtube.com/watch?v=eO9_fUH-Kew
• Courtesy of Dana Sheikholeslami http://www.bio-bak.nl/
• courtesy of Mark Condon: http://www.amcharts.com/New%20Charts
• http://www.artinhk.com/
• http://fugal.net/vim/rgbtxt.html
• A fashion design student's interpretation: http://www.sparklab.la/entertainment/
• http://www.joost.com/
• http://www.monsterlabthegame.com/en/
• http://www.smashingmagazine.com/
• http://www.thetaleofdespereauxmovie.com/site/
• http://www.albinoblacksheep.com/flash/end
• http://www.johnnyhollowmusic.com/flashindex2.html
• http://www.007.com/
• http://bestwebgallery.com/
• http://www.thinkbox.tv/server/show/nav.740/chapterId/30
• http://prettyloaded.com/
• Web Developer's Handbook
• http://pushingpixels.at/experiments/dynamic_shadow/

Lab: Group critique warm-up exercise. Assess current student work to determine areas where maximum advancement can be made. Explore samples of interaction design for entertainment.

Week 2: Tuesday, April 13, 2010

Lecture:

• Discussion and presentation of examples. Why did you choose each example? As we look at each, discuss whether or not you would return. And how much is the navigation - moving from one sequence or page to the next - can hinder or help the story.
• Touring through sites should be fun and easy. Consider these examples, each with a unique navigation. They can be annoying or interesting.
  • http://www.pushpininc.com/thenose/index.html
  • http://wefeelfine.org/
  • http://www.sidekickcreative.com/
  • http://letters-numbers.com/
  • http://www.channel4.com/entertainment/tv/microsites/L/lost/main.html
  • http://dosequis.com/mostinterestingshow/
  • From Sebastian: http://www.playauditorium.com/
  • Portfolio site suggested by Phil Ybay
  • ambient interactive: www.ambientinteractive.com
  • http://dsgn.us/
  • Sectionseven.com
  • http://mnatwork.com/
• Sometimes, just a really good photograph can be both interesting and sticky! http://farm4.static.flickr.com/3092/3094666790_5421b33358_b.jpg

• Navigation is assisting the Human-Computer Interaction. Through our designs, we help someone understand what is expected of them in order to view the site's content: a discussion of the process of creating compelling navigation in HTML or Javascript or Flash or jQuery.
  • The basic tools at your disposal, and their strengths and weaknesses: www.grantasticdesigns.com/navigation.html

 

Lab:

• Create a production log online (blog) and make an entry discussing navigation. What do I mean? Try free association...or try giving your opinion. At some point as you were using the Internet, you were either very annoyed or perhaps very pleased with the way the navigation worked.

 

Week 3: Tuesday, April 20, 2010

Lecture: Transitions. Making transitions as captivating as the content. Are transitions possible in HTML or only in Flash? The THREE (and sometimes only TWO) phases of a transition are 1. conceal, 2. distract (optional), and 3. reveal. What makes a transition truly amazing?

Lab: Transition brainstorming. Flash preloaders (time permitting).

• Introduction to jQuery
• Creating a flash preloader:
• http://www.bestflashanimationsite.com/tutorials/3/
• http://www.senocular.com/flash/tutorials/preloading/
• Tutorial (thanks Joseph Schmidt) on building a preloader in ActionScript 3.0

 

Week 4: Tuesday, April 27, 2010

Lecture: Media Rich. Types of media: static artwork, text, sound, video. Conventional uses and cutting edge applications of these media. How much should a designer infuse their own style into the mix?

Lab: Students choose an area to strengthen their media skills. Discussion of ways to create interactivity.

• Machinarium.net
• http://www.digital-librarian.com/audio.html
• http://www.asktog.com/basics/firstPrinciples.html
• http://www.useit.com/papers/heuristic/heuristic_list.html
• http://www.jnd.org/dn.mss/affordances_and.html

Week 5: Tuesday, May 4, 2010

You must email me today that you have attended or you will be marked absent.

Field trip to Web 2.0 Conference

I will go to the school to make sure you all received the message and are attending or working. First sessions begin at 9 a.m. (I'll probably see the web typography, but there are many.) Sessions run throughout the day (there's several on cloud computing, apps, social media, etc.)

Lecture: Be sure you have pre-registered: http://www.web2expo.com for the Expo Hall Only pass ($100). Enter the code "fb101" or "expopass" and you will get that free, plus be emailed a code. Bring the code to the Expo at Moscone Center and enter at one of the computers you see (follow the signs.) Attend keynotes, sessions, the expo - what's available to can be found here: http://www.web2expo.com/webexsf2010/public/content/free. But of prime importance is networking and absorbing the experience.

Lab: Document the experience in your blog or web site. Include pictures (with you in at least one). Make me glad you went to this field trip. If you have me in both classes, I expect two posts and two sets of documentation.

 

Week 6: Tuesday, May 11, 2010

Lecture: Defying Expectations. The WoW factor. http://www.elliottkember.com/vista.html Techniques to induce a sense of surprise in a visitor. You often need to set an expectation in order to defy it. Presentations of extra credit tutorials. http://ie6update.com/ Discussion of proposal. Students will demonstrate a comparable project and their Project Proposal to the class next week (week 7) as part of their grade.

Lab:

• Discussion of the Wow Factor. Group project: Macromedia tutorial (http://www.adobe.com/devnet/flash/articles/motion_blur_print.html) using a combination of static images and a few frames of motion-blurred images in between. First, as a group re-create this tutorial then individually push it further! Present to class.
• 50 Coolest Web sites
• The Flash extension for above
• COPYRIGHT and fair use site: The Creative Commons
• Controlling Media Components with Flash Behaviors
• http://thinkvitamin.com/features/top-web-designers-to-follow-on-twitter/
• http://www.woweffect.be/
• http://konamicodesites.com/ up, up, down, down, left, right, left, right, B, A
• jQuery continued: A Christmas Carol
• Begin work on your project. Research, if applicable, suggestions from your classmates.
• Creating web apps:
  • http://css-tricks.com/app-from-scratch-1-design/
  • http://iwebkit.net/
  • http://www.readwriteweb.com/archives/how_to_create_a_web_app.php
  • http://www.microsoft.com/windowsazure
  • http://mochaui.com/demo/
  • http://gamesalad.com/ - design your own game
  • HTML 5 cheatsheet
  • http://www.webresourcesdepot.com/3d-flash-image-viewer-tiltviewer/

http://sketch.odopod.com/

http://mrdoob.com/120/harmony

http://www.gamehousefusion.com/

Week 7: Tuesday, May 18, 2010

Lecture: User centered design - No field trip but instead, an exploration of our environment.

• In the physical world, many things can vie for our attention. How is our world structured so that certain things/items/people catch our attention, while we ignore so much more?

Lab:

• After this exercise, we will discuss the experience and how we can use it to better our projects. The rest of class will be lab. To receive credit, you must document yourself engaging (interacting) with the physical world, in some multimedia, online way and email me your url.

 

Week 8: Tuesday, May 25, 2010

Lecture: Aesthetic Bliss. People DO respond to the visual quality of your site's elements.

Lab:

• Critique of projects to date
  • http://www.smashingmagazine.com/2009/10/01/how-to-respond-effectively-to-design-criticism/
• Critique Form
• Analyze the visual aspect of your site-in-progress, and suggest improvements and uncover "design blind spots."

 

Week 9: Tuesday, June 10, 2010

 

Lecture: Community Building. Giving visitors an opportunity with the site and with each other. Visit Community Building on the Web (www.naima.com/community) and discuss.

Lab:

• We will user test each project. Please have your questionnaire or form ready.

 

Week 10: Tuesday, June 8, 2010

Lecture:

• [Final] This is a take home final. Complete this week. Due date is MONDAY (day before class)
• Usability testing.
• Discussion of individual production logs.

Lab: General discussion of usability assessment, design and evaluation of individual group projects. Production logs due (will be returned at end of class)

 

Week 11: Tuesday, June 15, 2010

Lecture: Formal presentation and critique of Student Projects.

Lab: None.

 

Assignments

List of each week's homework

• Tuesday, April 6, 2010
• Homework:
  • Assignment #1: Identifying Modes of Online Entertainment: create a web page to present your findings. Assignment One (.pdf, 24KB)
  • Email me your url.
• Tuesday, April 13, 2010
• Homework:
  • Take a navigation concept and develop it to perfection. Assignment Two (.pdf, 21KB). Post to your production log online.
• Tuesday, April 20, 2010
• Homework:
  • Develop a compelling and original transition. Assignment three (.pdf, 22KB). Don't forget to update your blog. Continue reading in your book, Chapter 4. Pay special attention to how you can "move" people through time (transitions) and space (visual hierarchy). Post to your production log online.
• Tuesday, April 27, 2010

• Homework:
  Creating traffic: using your blog to generate interest in you and your website and portfolio ex. Patrick Sean Gibson [Chocolate Covered Brain Cells] (just something for exploring)
  
  Decide on what your next project should include, bearing in mind that it needs to have multiple media and should add to your portfolio. Assignment four/five (.pdf 26kb) To successfully complete this, you need to do some research and order your thoughts. Example of a successful proposal (Jarcques Pretorius)
• Tuesday, May 4, 2010
• Homework:
  • • How To Understand Your Users With Personas | Another view (marketing) on personas
  • Create a persona of a possible user of your site and post to your site.
  • Post to your site the experience (as outlined above) of the Web 2.0 Conference.
  • Continue with work on your final project.
• Tuesday, May 11, 2010
• Homework:
  • Add your research, properly cited, if not already listed on your site. Complete the research section. Email me when it's ready to grade.
    • Continue working on final project and documenting in production log. Be sure to include style information, as well as technical and design issues.
• Tuesday, May 18, 2010
• Homework:
  • Develop two (2) potential interfaces and include on your homework site. How are the buttons, sliders, unexpected scripts enhance the user experience? Due next week.
  • If you wish to receive extra credit by presenting a tutorial using different medias in unexpected ways, time will be given next week. This is optional for extra credit. Post to your production log online.
• Tuesday, May 25, 2010
• Homework:
  • Continue work on final project and production log. Make adjustments to your project based on this week's group critique. Post to your production log online.
• Tuesday, June 1, 2010

• Homework:

  • Read complete-beginners-guide-to-interaction-design/
  • Complete your project proposal of last week, including research and documentation.
  • Discussion of technical and design issues.
  • Include a write up of user results
  • Re-do of midterm project proposal: Documentation and delivery guidelines. Post to your production log online.
• Tuesday, June 8, 2010
• Homework: Final design of promotional materials. [Final] This is a take home final.
• Tuesday, June 15, 2010
  • Homework: None but wrap up your online production log with your final thoughts.

Criteria by which you and your projects are graded for this course. Please see me if you have any questions.

Attendance and Class Participation Policy - Attendance and class participation are 25% of the final grade for the course. Students will be expected to attend class as well as act as active participants in class lectures. This is worth 10% of your overall grade. 5% is awarded for perfect attendance, recognizing that you cannot learn if you do not attend, and how difficult it is to do. This is a sign of excellence. The remainder 10% is given for posts that you make to your production log.

Assignments and homework are graded by points for a total of 45% of your grade. Usually the homework is to demonstrate skill, or as a check of knowledge, or to encourage exploration and higher level of thinking. In this course, 25 points are awarded for several smaller projects like creating a preloader, or doing research. The remaining 20% is your final project, as it will demonstrate your understanding of the class and its goals.

Midterm and Final tests and presentations are a combination of tests and projects. The midterm test is a check for knowledge on both our parts. The final test demonstrates your hard work, skill and knowledge gained in this class. Because this class produces a final project, part of that demonstration includes using the software, xhtml, css and web graphics, and part of that demonstration is the actual final project, your portfolio. These items total 30% of your grade.

Logging into your personal grade

Please remember that the software I use only talles total points of a possible 100. You will not see the grade of "F" change until you are way into the quarter, somewhere around week 8 or 9.

Class Standings

Click on this individual score link to access scoring information on your completed projects.  Enter your name and id (password) exactly as you provided in the student survey.

I upgrade my grades every Sunday, usually no later than 2 p.m. I may update points for work received after this time, but before 7 p.m. only.

If there are any questions at all, please feel free to email me. I usually respond the same day and sometimes immediately, or at least within the hour.

If you have any problems, email me.

 

 

List of recommended readings

Tuesday, April 6, 2010

• Links of Interest:

  • Sample web sites:

    • Band Sites: http://www.wilcoweb.com/, http://bjork.com/, http://www.rollingstones.com/home.php, http://www6.islandrecords.com/utada/
    • Film Sites: http://www.imdb.com/Sections/Trailers/
    • 3:10 to Yuma
    • Perfume: The Story of a Murderer
    • http://www.unfortunateeventsmovie.com/intro.html
    • Short Entertainment (Short): www.atomfilms.com, http://www.jibjab.com/
    • Cross-Media Promotion: www.bmwfilms.com, http://www.gettheglass.com/
    • Massively Multi player Online Game (MMOG): www.worldofwarcraft.com, http://www.hogwartslive.com/ - Danilo
    • Advergame: www.advergame.com
    • Webisodic: www.strandvenice.com, http://www.filmson45.com/, http://www.livevideo.com/ (ongoing videos, usually longer in length)
    • Video Blog (Vlog): www.mobuzztv.com
    • Interactive Portfolio (new classification): http://www.albertlan.com/ (link courtesy Lisa),
    • Entertaining, yet informative: http://www.rubenswieringa.com/code/as3/flex/Book/ (link courtesy Billy)
    • Games and/or puzzles: http://www.jigzone.com/
    • Information: http://www.sfgate.com/
• Monday, April 12, 2010
• Tuesday, April 20, 2010

  • Helpful Links:

    • Case studies in Transitions:

      • crommcruac.com/main.htm
      • www.greenday.com
      • www.sofake.com
      • www.tokyoplastic.com
      • www.bludot.com
      • http://lucasmotta.com/ (also take a look at their preloader)
      • http://unfinisheddream.com/

      • Interesting site: (from Spooky): http://www.scifi.com/tinman/oz/

        Interesting site: (from Franky): http://lab.mathieu-badimon.com/

        Interesting site: (from Adam):
        http://www.incog.fr/

      • Flash page flip book: http://flashpageflip.com/
• Tuesday, April 27, 2010
  • Links of Interest: (Interaction Design for Entertainment)
    • www.projectmiso.net
    • www.imagedive.co.jp
    • www.vectorize.de/index_old.html
    • www.foundationsrecords.com
    • Flash Interaction with Javascript: courtesy of Justin Mahon
    • submitted by Dana Sheikholeslami: http://www.square-enix.co.jp/fabula/ff13/. What intrigued him wasn't the interaction/navigation so much as the mood that was evoked.
    • http://buildinternet.com/2009/09/its-a-rainbow-color-changing-text-and-backgrounds/
    • http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
    • AjaxRain
• Tuesday, May 4, 2010

  • Helpful Links:

    • HowStuffWorks (http://www.howstuffworks.com/cookie1.htm) has lots of information on cookies and their implementation.
    • To get CGI scripts to run properly, you need to be able to control in what mode the files are uploaded (typically ASCII instead of binary) and set their file permissions (ex. CHMOD 755). No so easy to do in Dreamweaver, but you can using an ftp program, such as Fetch (http://fetchsoftworks.com/edstore) or WS-FTP (www.ipswitch.com)
    • CookieLib (www.scriptarchive.com/cookielib.html) from Matt's Script Archive is a time-worn solution to setting and retrieving cookies.
    • Flash and CGI (Common Gateway Interface): http://www.informit.com/articles/article.asp?p=2241&seqNum=1
    • There is a lot of advise out there on how to make a site "sticky", meaning people stay a long time, come back again, and tell others about it. You can find some good advice at this rather plain-looking site: www.virtuescience.com/stickysite.html
    • http://credibilityserver.stanford.edu/captology/facebook/
    • Personal & Personalized. Giving visitors the freedom of choice. Identifying possibilities for personalization. Remembering their choices during a visit or on successive visits. Get their e-mails! example: http://www.flashfunpages.com/. Most prevalent is the use of cookies to help track returning users.
    • How can you use Flash and still have it searchable? An interesting article submitted by Oscar Najarro: http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/ for discussion. In addition, Flash has an equivalent to cookies called Shared Objects (http://www.kirupa.com/developer/mx/sharedobjects.htm)
    • Making Cookies: www.cookiecentral.com. Try some of the cgi code from this site: http://www.cookiecentral.com/cgidemo.htm (you must implement yourself, only code currently available).
    • In class: javascript cookies, cookie tutorials or javascript tutorials. Example of a javascript cookie: cookie.html
• Tuesday, May 11, 2010

  • Helpful Link: http://infotoday.com/online/jul03/head.shtml on personas (thanks, Dana!) Excellent article and example to help get you started. Read BBC's use of multiple personas when tackling a large project, and the example of Microsoft's feature creep for why we use personas.

    Useful links:

    • Matthew Woodruff offers this site on CSS "One True Layout": http://positioniseverything.net/articles/onetruelayout/
    • http://gzone.jp/ shows the results of conceptual planning before starting a project. Here, the latest technologies and techniques are assessed then combined with current cutting edge practices and their own originality.
    • Divs with effects (courtesy of Mark Condon)
      http://amix.dk/blog/viewEntry/19035
    • Ajax Rain (courtesy of Mark Condon)
      
    • http://www.ajaxrain.com/index.php?page=11
• Monday, May 17, 2010
• Monday, May 24, 2010

  • Links of Interest:

    • What Copyright Means for your Website: http://www.sitepoint.com/blogs/2009/03/11/what-it-means-to-copyright-a-website/ submitted by Nick Dyzkeul, former AI student and currently Web Developer for Gallo Winery
    • Free FTP: http://www.smartftp.com/
    • An Ebay-like site for artists: http://www.etsy.com/
    • http://www.cssdrive.com/
    • dynamicdrive.com
    • LightWindow demo
• Tuesday, June 1, 2010

• Helpful links:

  • • Impressive web sites predominately Flash: www.thefwa.com/
    • Inspiring site that entertains while informing: www.interone.de/
    • Creating a Flash magnifier: http://www.webwasp.co.uk/tutorials/b11-magnify/tutorial.php
    • 63 Essential WordPress Hacks, Tutorials, etc.
    • About AS3: AS3 basic tutorial
    • Collapsible div tag 1 and collapsible div tag 2 and collapsible div tag 3
• Monday, June 7, 2010
• Coding rapper
• http://www.smashingmagazine.com/2009/10/01/how-to-respond-effectively-to-design-criticism/
• Monday, June 14, 2010

Calendar Spring 2010

Syllabus
Calendar
Assignments
Course Notes
Links
Website