Studio
Projects One: Interactive Stories
Design Diagram: DUE: 9/17
Wednesday week 3
Web site:DUE 10/6
Monday week 6
Objective:
To practice two types of storyboarding: visual/sequential and site-structural,
or link-based. To create possibilities for story events to occur, by
accounting for choice/decision in the user/reader of our sites. To
tell stories,
not only interactively, but visually. To work in groups for web site
production.
The project
consists of three components for you to complete: visual research
for a site, a design diagram or map of site architecture done in
Adobe Illustrator, and a site based upon these two preparatory activities.
Visual
Research: Research is a component of interactivity. By working
with ideas that refer to things in everyday life, or in "reality",
we change them in our art-making activities. Artists can influence the
things of their research, and especially with the web, our ideas can be
seen by a world audience.
Visual research
allows us to clarify our conceptions of the topics of our sites. With
visual research, objects that we want to talk about in our sites have
a better chance of referring to the corresponding conception of these
objects in our viewer's or user's mind. More
on visual storytelling.
To begin on visual research:
Use the library to check out materials on visual culture. Choose from
commercial, fine art, scientific, and academic imagery. You may also use
the web. Google.com has an image search function, as do other search engines.
When you find a rich source of imagery or a good collection of stories,
or types of stories, decide on a topic.
Try to figure out relationships between elements of your
topic, and follow research leads even if they are not strictly visual.
Think of yourself as one who is responsible for communicating facts or
relationships about your topic, as well as ideas and opinions about your
topic.
For instance, I have an ongoing interest in world's fairs,
am currently interested in mathematics, and recently saw a World War Two
thriller on Enigma code. I will start there for my research.
Design Diagrams: A design diagram
is similar to a flowchart, that might be used in explaining a decision
mechanism of a computer program. It usually consists of boxes linked together
by directional arrows. In your version, web pages will be represented
by the boxes or simple shapes, and parent-child relationships will be
indicated by the directional arrows/lines.
The parent-child relationship
comes from "class theory," in logic or computer programming.
If a web page is accessed through another web page at a higher level of
organization (or if one page begets another through a link), then the
higher level, the begetting level is the parent and it produces the child
page.
Unlike in computer programming, in web site architecture,
you do not necessarily have to worry about the functionality of parents
and children, except in terms of navigation. A design diagram is a
map
of navigation, and it tells what begets what. You do not however inherit
specific attributes of a parent pages, in the navigational experience
(in using templates in Dreamweaver, yes). A design diagram tells which
pages are linked to other pages in the site, and what supportive technologies,
i.e. scripting, flash, PDF, database are going to be used in the site.
You will create the diagram in Adobe Illustrator. We
will speak of aesthetics and function in the critique so you will want
to make this diagram visually dynamic and interesting, to the best of
your ability. Think about ways in which you can show through diagrammatic
illustration, the pathways of navigation through your site. You may also
use the design diagram to generate your research interests or storyline.
PI Scenario refers to a turn of events like in the
movie PI where mathematics is applied to textual interpretation. The New
Physics refers to a group of scientists working in physics today, that
believes the basic building blocks of our world, constructively combine
according to probabilities that can be approached through computing and
simulation. The Enigma code was a WWII encryption for messages that was
used by the Germans; it was transmitted through a small typewriter sized
machine.
This story was created through visualizing the type
of parent-child relationships. I started with my first page, the index.html
or home page, and drew three lines radiating out asymmetrically. This
then suggested to me that the parts of the story would be somewhat independent
yet escalating in their implications for the story as a whole. Since I
am interested in how science and technology filter into everyday life
and have done my research on world fairs, I decided to begin with a scene
at a contemporary world's fair, where major companies position their technologies
for the future. It then occurred to me that the reader of the story would
be enticed to find out more about a mystery company or contributor, and
so I chose to create an unknown speaker.
The narrative followed from those initial parameters
in combination with the initiated areas of research. The
Web site: From this
diagram, I now can set up a home page, my index.html page, and then
have a link to 1) The World's Fair, 2)The Story of Mathematics,
and 3) Enigma Music. Yes, the story may be read non-linearly. A
side goal for this project is to make the story readable non linearly
as a collection of events that don't necessarily follow in any order
or can occur in multiple orders that make sense.
The world's Fair page incorporates the imagery from visual
research on the World's Fair, AND links to the companies mentioned in
its child page in the design diagram. The companies page incorporates
imagery that suggests this meaning or turn of events (which can be helped
along by text, either an elaboration, or straight from the design diagram),
AND links to its child page.
Additionally, in the design diagram and in the site,
you can have a child link back to it parent. Feel free to draw lines of
connection from the child to the parent in a given flow chart/design diagram.
It works because it describes links between two pages, multi-directional,
or bi-directional links.
To reiterate the steps: Begin a little preliminary
research for imagery, in order to think of a topic. Or, using a
visual pattern of layout that interests you, start sketching out
the design diagram, thinking about the structure of the story as
communicated by the layout, as I did above. Once you have images
collected or created or modified, then flush them out according
to the topics of each page.
Assessment
15 points concept and storyboard
10 points realization/execution/visuals
10 points visual effects and meaning together
Logistics of Turning in Your Assignment
All files necessary for your site will be copied to the server
in the folder, "BringmanAssignments". Name the main file
with your name and the project number as the title. A folder could
also be the main file for your project.
For more information on visual
storytelling strategies.
|
