essaysketch: design

The world is complex, dynamic, multidimensional; the ... [screen] is flat. How are we to represent the rich visual world of experience ... on mere flatland? ... To envision information -- and what bright and splendid visions can result -- is to work at the intersection of image, word, number, art.
-- Edward Tufte

visual design

How will you present the information visually? What (implicit or explicit) grid structures will affect the layout? What color harmonies and contrasts will give light to your ideas? How will they promote readability? How will they enliven the work as communication? What sets of text specifications (fonts, sizes, weights, spacings) will you use? How will these components of visual design work together to create a coherent sense of layering?

Define a look and feel. Create a style guide of visual language design modules that show how you will represent different types of information, and how these representations will work together. Develop a set of example screen designs that articulate the major visual design concepts and elements that will make up your site. Connect your visual design with your concept. Be clear about what is consistent and what breaks the rules and why.

interaction design

Dynamic interaction can add | subtract | modify information on a momentary basis. Animation enables smooothly evolving transitions. What brings your essaysketch to life? Beyond regular hyperlink navigation that you specified in your information architecture, how will your site be interactive?

What gestures by the user will be required? How will these be detected using onmouseover, onmouseout, onmousedown, onmouseup, onmousemove, and hover? How will they transform styles, text, images, layout, and visual presentation. From JavaScript, you have full access to the stylesheet attributes of every DOM element in your documents. How can you draw from this powerful set of capabilities, as a wellspring, rather than a candystore?

How will you bring sensory and conceptual approaches from games, puzzles, exhibits, and physical experience into the screen and mouse? How will dynamic components contribute to your concept? How will they contribute to the user's experience? Create continuity and cohesion, along with dynamics, in your interaction design.

Define a set of dynamic interaction structures (types) to support your presentation. Provide storyboards that show how each type will evolve. Depict the visual states. Label them to describe how interaction and/or animation brings us from one to the next.

due thursday, 10/20
designed for mozilla 1+ and ie 6+
an interface ecology lab production