ART 4302
Interaction Design II

Spring 2012

M/W, 10:30 am–12:20 pm

Wey 214

 

Mark Nystrom

210B Herbert Wey Hall

828.262.2568, office

828.262.2220, art office

nystromml@appstate.edu

 

Office Hours

M–Th, 9:00 am–10:30 am

Tu, 2:00–4:00 pm

Assignments

February 8

Rethink / Redesign

With some experience under your belt and some new tricks up your sleeves, you’re ready to take on something big. As a designer, you will often find yourself redesigning an existing project. Design styles and technology change so often (not to mention the needs of a client and their audience) that projects are often being refreshed.


When asked to redesign something, do more than give something a face lift. A new look is purely cosmetic and no matter how good your new and improved design looks, it may not serve all the needs of a client. Design fulfills needs so before you begin redesigning anything give the project some careful analysis before you starty designing. As Eeyore said, “Brains first, then hard work.”

In this assignment, you’ll redesign the website for the Catherine J. Smith Gallery. Located in the lobby of Farthing Auditorium, the gallery presents a variety of exhibitions and programs throughout the year. Its website was designed in 2004 and is in great need of an update. Each of you will develop a working prototype for a new website and if your site is done well enough, it may become the gallery’s new website.

Process Overview

We’ll start with research to see what is out there and determine the needs and desires for the visitors to the CSG website. We’ll work collaboratively on the research before developing an information architecture for the new site. Once that is done, the design phase starts with digital mockups before moving into a working prototype. We’ll use this project as an opportunity to learn about and utilize HTML 5.

CSG Mission Statement (read this)

Through innovative exhibitions and stimulating educational programs, the Catherine J. Smith Gallery provides opportunities for direct engagement with contemporary works of art and design for students, faculty and community members of Appalachian State University. The Gallery presents original and traveling exhibitions, features works by faculty and students, and enriches its programmatic offerings through collaborative projects. The Gallery actively involves students in its exhibitions and programming by serving as a site for honing curatorial, presentation and installation abilities.

Specifications

  • Content — To come from current site and CSG staff. Your information architecture will determine the content needs.
  • Size — Single web page that fits in a browser window on a screen set to 1024 x 768.
  • HTML/CSS — Use HTML 5 and CSS for styling and layout. Use jQuery and CSS3 transitions as needed, but be sure to not to use them for critical items.
  • Validation — Your site should be HTML 5 compliant as determined by an HTML validator.

Schedule

  • Wednesday, February 8 — Introduce project. Visit CSG. Homework: Review mission statement and current website for CSG. Research precedents online by looking for good examples of museum/gallery sites. Look for other university galleries. Look for non-profit galleries in the state, region and country. Look at the big names, too. Look at how they show work (current and past) and how their sites foster a relationship with their audience/community. Choose five sites to analayze and prepare an oral presentation for class on Monday. Create a page on your website with links to the five sites you selected. Be prepared to discuss their strengths, weaknesses and any features/methods/processes/interfaces that could be used with the CSG site.
  • Monday, February 13 — Review websites in class and talk with CSG staff (if available). Assign KJ phase and work in groups.
  • Wednesday, February 15 — Organize and prioritize KJ. Assign information architecture. Each of you should design a site map diagram for presentation to CSG staff.
  • Monday, February 20 — IA presentations with CSG staff (if available). Assign paper prototypes and wireframes.
  • Wednesday, February 22 — Review sketches and begin digital mockups.
  • Monday, February 27 — Review digital mockups.
  • Wednesday, February 29 — Crit digital mockups. Begin site prototypes.
  • Monday, March 5 — Review site prototypes.
  • Wednesday, March 7 — Review site prototypes.
  • Spring Break
  • Monday, March 19 — Review site prototypes.
  • Wednesday, March 21 — Review of HTML/CSS of homepage plus two other pages.
  • Monday, March 26 — Full review of whole site design.
  • Wednesday, March 28 — Power of Design Workshop.
  • Monday, April 2 — Full review of whole site design with full content for exhibition pages.
  • Wednesday, April 4 — Full review of whole site with full content for whole site.
  • Wednesday, April 11 — Critique. Presentations to CSG staff.

process reflection

  • » What went well with this assignment?
  • » What did not go well?
  • » What would you do differently if you could do this assignment again?
  • » What did new design problems did you encounter with the design of this site?

evaluation

  • Concept/Creativity/Design — 60%
  • Craft — 30%
  • Process — 10%
February 1

jQ2.landscape

Okay, now that you’ve dipped your toes into the water of jQuery, you should have a basic idea of what you’re getting into. With this next assignment, you’ll expand on the techniques you have learned and design a web page with a higher degree of complexity.


Design a single webpage that is an interactive landscape. The virtual space you create can be as real or abstract as you wish. You could have a natural landscape or one constructed of geometric shapes or type. Whatever you do, things should move in response to interaction by a user. The challenge for you is how to construct this space and give it meaning. A user’s interaction with this space can make things appear, disappear, shrink, grow, etc. You could make this a game of hide and seek. You could bury treasure or you could think about the space like a puzzle, waiting to be completed.

Before you start, spend time playing with jQuery’s mouse events and effects.

In class . . .

  • Five quick sketches (single web pages) using different mouse events
  • Make three sketches that have more than one item/thing respond to an event

You’ll turn these in with the process documentation.

Specifications

  • Content — It’s up to you. Content could be words, images or both.
  • Format — Single web page that fits in a browser window on a screen set to 1024 x 768.
  • HTML/CSS — Use HTML and CSS for styling and layout. Use jQuery for dynamic transitions. Do not use CSS3 transitions.

Schedule

  • Monday, February 6 — Bring in prototypes of your web page for review. Be prepared to show sketches/experiments that led to your prototype.
  • Wednesday, February 8 — Completed project due at start of class. Work must be posted online and linked from your homepage. E-mail your process reflection before the start of class.

process reflection

Write responses to the following:

  • » What went well with this assignment?
  • » What did not go well?
  • » What would you do differently if you could do this assignment again?
  • » If a website is a virtual space, how can you use the idea of landscape to organize a website? What are some of the benefits or pitfalls of doing so?

Type your repsonses using a word processor. Be sure to carefully proofread it and add your name to the top of your paper. Your reflection is due at the start of class on the project’s due date. You must write all process reflections for this class.

evaluation

Concept/Creativity/Design — 60%
Craft — 30%
Process — 10%

January 30

jQ1.jokes

This next assignment will be quick. You’ll use it as an opportunity to play with a different technique for making dynamic interactive experiences. Sound dull? Don’t make it so. Use these new techniques to tell some jokes!


Use jQuery to create three separate web pages. Each one should tell a joke. Every joke has a punchline so don’t give it all away right away. Take advantage of jQuery’s ability to hide/reveal/move to enhance the telling of each joke.

You have a lot of information to present, but don’t think you have to show it all at once. Use CSS transitions to enrich a user’s interaction with your text. Make your page responsive to users.

Specifications

  • Content — Jokes! Three of them.
  • Format — Single web pages that fit in a browser window on a screen set to 1024 x 768.
  • Typography — Yes! And style it appropriately.
  • Images — Only if they help tell the joke.
  • Colors — Yep.
  • HTML/CSS — Use HTML and CSS for styling and layout. Use jQuery for dynamic transitions. Do not use CSS3 transitions.

Schedule

  • Wednesday, February 1 — Completed project due at start of class. Work must be posted online and linked from your homepage. E-mail your process reflection before the start of class.

process reflection

Write responses to the following:

  • » What went well with this assignment?
  • » What did not go well?
  • » What would you do differently if you could do this assignment again?
  • » Now that you have used jQuery and CSS to create dynamic interactive experiences, compare the two. What are the strengths and weaknesses of each?

Type your repsonses using a word processor. Be sure to carefully proofread it and add your name to the top of your paper. Your reflection is due at the start of class on the project’s due date. You must write all process reflections for this class.

evaluation

Concept/Creativity/Design — 50%
Craft — 25%
Process — 25%

January 18

Hello, my name is ...

Put your knowledge of HTML and CSS to the test. Design a web page that tells us a bit more about yourself using only type. Use this as a chance to play with typography for the screen and, most importantly, to experiment with using motion to hint at and reveal content.


Start by answering all the questions on this questionnaire. Then, make sketches and mockups to explore the possibilities for layout. Use your type skills to design a page with impact and a clear hierarchy. Play with all the typographic parameters available to you as well positive and negative space within your composition. Use type specimens as examples. Google “type specimen sheet” and “type specimen layout” to see examples.

You have a lot of information to present, but don’t think you have to show it all at once. Use CSS transitions to enrich a user’s interaction with your text. Make your page responsive to users.

Read

Read CSS3 for Web Designers (the whole book). It’s short and won’t take long.

W3C list of CSS transitions properties

Typography

Take advantage of alll the new typography choices available to you.

Specifications

  • Content — Fill out all blanks in the questionnaire and include all of your responses.
  • Format — Single web page. Must fit in a browser window on a screen set to 1024 x 768. No links to other pages.
  • Type — Use at least two different typefaces in a variety of styles.
  • Images — Yes, but only in a limited fashion. Keep your page primarily typographic.
  • Colors — Yep.
  • HTML/CSS — Use HTML and CSS for styling and layout and CSS3 for dynamic transitions. Tag your content according to what it is and use an HTML table somewhere.
  • Links — None. All content must appear on the page.
  • Motion — Something must move in response to a user’s action.

Schedule

  • Wednesday, January 18 — Review of HTML and CSS transitions. We’ll play with transitions, do some exercises and you’ll begin designing your page. Use InDesign, Illustrator or Photoshop to prepare at least five mockups for next class. Choose the best one to develop in HTML/CSS and begin developing working prototypes of your design. Use your prototypes to experiment with a variety of ways to hide and reveal content. Bring prototypes and printouts of all five mockups to class for review on Monday.
  • Monday, January 23 — Review of prototypes in HTML and CSS. Work in class on refinements.
  • Wednesday, January 25 — Review prototypes.
  • Monday, January 30 — Completed project due at start of class. Work must be posted online and linked from your homepage. Submit your process reflection by the start of class.

process reflection

Write responses to the following:

  • » What went well with this assignment?
  • » What did not go well?
  • » What would you do differently if you could do this assignment again?
  • » What insights did you gain into design for the web?

Type your repsonses using a word processor. Be sure to carefully proofread it and add your name to the top of your paper. Your reflection is due at the start of class on the project’s due date. You must write all process reflections for this class.

evaluation

Concept/Creativity/Design — 50%
Craft — 25%
Process — 25%