Interactive Graphic Design
I  N  T  E  R  A  C  T  I  V  E    D  E  S  I  G  N    F  O  R  U  M 
Issue 18   |   December 2000  

Interactive Graphic Design (Art 302/402)
   Diana Black
, Assistant Professor, Minnesota State University, Mankato

PROJECT 1—Shape Changing
Abstract shapes communicate through characteristics of edges, color, and size or scale,etc. Geometric forms are usually thought of as harder and more controlled than amorphous shapes. The circle, of course, is somewhat of an exception. Color theory and popular notions of color contribute to how we read the application of hue to shape. And size is always a relative thing, measured against other objects and against what we view as appropriate for the specific context. In this project we will also investigate how shapes can communicate through motion and transformation.

EXAMPLE: What message is communicated if 50 small black dots join together to become one large black dot? How about the reverse of that? Overarching social, biological, physical, spiritual, and political messages can be read into either of these scenarios. The use of abstract shapes often leaves the message open to multiple interpretations.

Choose a concept that you would like to communicate visually, that can be demonstrated over time, and involves change of form or position in space. Begin by thinking about and deciding on a set of parameters for your shape changes. You may want to explore the permutations of an individual shape in motion and transformation, or a group of shapes and their interactions, or a combination of these.

1) Brainstorm your concept(s)
2) Create your shape(s)—keep them simple
3) Create your animation—using Flash shape and motion tweening

PROJECT 2— Text & Sound
Conventions of reading the English language—left to right, and top to bottom—persist no matter what media used. Languages from other cultures have their own traditions and conventions. The actions of reading text as text and using text as image communicate different ideas. When we introduce movement to letterforms, words, or sentences, punctuation, there are greater possibilities for added meaning or emphasis. There is the possibility for subversion, irony, or epiphany. You already know that motion communicates specific moods or ideas through direction, velocity, rotation, scaling, fades, etc. (Remember, motion for motion's sake can be simply annoying.)

Think of all the things you know about typography and letterforms and bring them to this project. Think about concrete poetry, Dada, poetry slams, email, movie credits, handwritten letters, subtitles, movie marquees, and any other medium for text delivery.

Sound adds a new dimension to interactive work. As in using motion, it can underscore an idea or add depth to a message, or it can be used to create aural background or texture. Vocal sounds communicate quite differently than sound effects, or musical instruments.

Choose a concept to explore with text and sound. The text can make sense, as in a passage of a poem, or the US Constitution, but you may also choose to use text in a more abstract way. You are encouraged to record your own sounds, using SoundEdit 16, but you may also sample very short phrases from CDs, or download sounds from the web. You may not capture a soundtrack and use that for your work. Sound files can be big, so use smaller files to keep your overall movie file small. One of the main objectives of this project is to examine the interactions and relationships between text / reading and sound / hearing. You will continue learning animation tweening techniques and learn the basics of sound capture, manipulation and use.

1) Choose your concept
2) Brainstorm ideas about your concept
3) Storyboard your actions
4) Create your work in Flash / record sounds using SoundEdit 16
5) Publish as Flash movie

PROJECT 3— Narrative Layers
In this project you will explore the possibilities inherent in the non-linear and interactive form. You will also create layers of meaning by addressing multiple audiences on different levels. Narratives can be linear, non-linear, or a hybrid of both. Linearity implies a more or less straight line, or a path that has a clear start point, a middle passage, and a definite end point. Non-linearity on the other hand indicates there are multiple routes through and these paths may be circular or branching. In non-linear narratives, sometimes there are no clear start or end points.

The Internet has increased our familiarity with non-linearity because of the way links can take us to anywhere from anywhere. We may begin researching facts on one subject and end up discovering information about something completely different. Sometimes nonlinear works can be confusing, chaotic, or frustrating, but they can also be surprising, humorous, or freeing.

Choose a specific subject (an actual thing or place) rooted in your immediate environment—that is in the Mankato or MSU community. Spend time brainstorming ways to communicate ideas about your subject. Think about relating to several different audiences, young, not-so-young, old. Write about the thing or place from different viewpoints.

Example: if you chose the fountain in front of the Union, you might provide details about its exact location or material make up, (scientist); a personal or family experience about a fountain, or water, now or as a child, (writer, historian); an overheard conversation between two people at the fountain, (reporter or sociologist); a poetic refrain about the water, (poet); and the universal aspects of the circle and spiral (philosopher).

The information you provide should be both direct and tangential. Your project should incorporate text, image, and motion. You may choose to incorporate sound also, but keep this minimal if you do. The piece should communicate its narratives primarily on interactive, visual, textual levels.

Think about using multiple voicesÉfirst, second, third person. Think about the differences between monologue, dialogue, and multivoiced conversation. An interactive work can simulate conversation between the user and the interface. Writing with all of these—or other— approaches to a single place or thing will spark ideas about visuals you can incorporate to strengthen your narrative.

Construct your interactive narrative so that the user may experience several paths through the work. You will be using links or buttons that the user can click on or rollover. These links will take your user to another section of your work. Think about the kind of experience you want your user to have. This will help you design your interface—the look of it, and the nature of their experience. Think about the digital world, the Internet, computers in general, the magic, the problems. You, as the creator of an interactive interface, have a certain amount of control over the user, but not complete control. Your piece should be about the place or thing in your community and relate to the nature of interactivity.

—Diana Black is an Assistant Professor of Graphic Design at Minnesota State University, Mankato, MN   Email:

Support Open Source EDU!
your course description, syllabus or project ideas to this section:[Email].
Read why we all benefit from sharing your ideas.


[Top]  |  [Back to start]  |  [About this site]  |  [Email]