Exercise 01: Text/Image
Project 01: Text/Image
Exercise 02: Animation/Response
Project 02: Animation/Response
Student Web Presentation
Exercise 01 Text/Image (due Wed. Oct. 12)
Use a text editor or Macromedia Dreamweaver MX 2004 (installed in the
Labs) to create these exercises. If you are using a WYSIWYG,
continually move between the code and design in order to enforce the
relation between the two representations. The structure of the HTML
code will be a part of the evaluation. Remember, these are design
exercises and technical exercises and you will be evaluated based on
the originality of your approach, its visual refinement as well as
Project 01: Text/Image (due. Mon. Oct. 24)
A. Re-create the Periodic Table of the Elements using only HTML tables and text.
[name your document table.html and put it into your folder in the projects folder,
B. Sampling/Collage: 5 K competition. Create one HTML page showing your creative
interpretation of the following theme: Half and half. You may use images/photography,
text, or a hybrid.
All images used must have a file size smaller than 5 Kilobytes,
and the total size of all material used on
the page must be less than 25 KB. Use Photoshop/ImageReady to save your
images as .JPEG or .GIF files using the appropriate compression/color
C. Story: Write a short story in hypertext that makes use of hyperlinking
in a way that is integral to the narrative structure. The story should be autobiographical
in nature, based on an event or episode in your life. Your story need not be long—
it could be poetic, offering just a glimpse of the scene or characters involved.
The hypertext story should be composed of at least five hyperlinked HTML pages.
For parts B and C, develop at least 3 different ideas and sketch your ideas into your
sketchbook, take images and research material. Be prepared to discuss
your ideas during the Wed. Oct 5 and Mon. Oct. 10 class session. Apply
your knowledge acquired in class about colors, images, and formatting
(tables, cropping images using tables and background images, framesets,
divisions etc.) in creative and original ways.
Upload your assignment onto the server before the Wed. Oct. 12 class
session and link your projects from your avatar page. Assignments are
only considered as completed if they are available from the class
Based on the theme you chose for your research report you chose, create a
small website (between 3-5 pages) about one aspect of your theme. Keep
in mind that this project focuses on layout structure and user
navigation and is different from the website you’ll create to
communicate your research report. Be creative in the choice of one
specific aspect of your theme (e.g. Artists using Creative Commons
licenses, photo bloggers, WiFi coverage in the US, etc).
Develop your theme through research. Be prepared to
discuss your research and your approach to communicate the theme
based on sketches during the Mon. Oct. 17 and 19 class sessions. Do not rely on
web-based research only: use the campus libraries, take photographs, make
photocopies, conduct interviews. Structure your collected materials and
sketch ideas. Develop a design strategy to communicate your idea. Think
carefully about the type of content appropriate for the Web and invent
interesting ways to use the media. Think about the structure of the
website. How does the user navigate the website, how are elements
interconnected? Define the narrative structure and hyperlinks. Define
possible issues in the HTML implementation and do tests. Do not start
programming the website before having followed this design process. Use
to follow a complete, iterative design process.
Exercise 02: Animation/Response (due Wed. Nov. 2)
Your website must be available on the class website before the Mon. Oct. 24 class session.
Create the exercises using the timeline representation in Flash.
Remember, these are exercises to explore conceptual thinking, form, and technique,
and you will be evaluated on your approach and visual refinement as well as
successful completion. You are expected to create innovative and well-crafted
solutions. Sketch and develop ideas on paper before starting to work on the computer.
Project 02: Animation/Response (due Mon. Nov. 14)
A. Create a repeating animated composition consisting of five lines. Make
your movie size 500 x 500 pixels, and use only black, white, and shades
of gray. Each line in the composition should represent a
different quality of motion (e.g. smooth, jerky, peaceful, violent).
Focus on exact timing, quality of acceleration, deceleration, motion. Your
animation should loop continuously. Do not rely heavily on Flash's motion tween tool.
B. This exercise focuses on the expressive power of typography. Develop
a 15 second animation based on a key word or phrase from
your autobiographical story in Exercise 1, part C.
Create an animation that helps communicate the emotional content of
your text. Choose an appropriate typeface for the meaning of
the text you want to communicate. Consider formal aspects of your font
and its possibilities in relation to movement and transitions. Avoid
obvious solutions such as morphing between two words.
C. Create a 10 second animation in a 320 x 240 pixel space that explores
a single, larger photographic image. The animation should reveal some aspect
of the image that may not be obvious on viewing of the entire image.
Feel free to use elements of cinematic language (pan, zoom, cuts, dissolves)
to convey your concept and bring life to the image. Your source image should
be a photograph you have taken yourself. Provide a link to the source image
on a separate page.
In each of these exercises, also consider how the Flash animations are “framed”
or otherwise contained on the webpage. The page should be considered as
a compositional whole.
Develop 3 different concepts for each exercise to be discussed during
the Wed. Oct 26 and Mon. Oct. 31 class sessions.
A: Story. In this project, you will recreate and reimagine your story from
Exercise 1, part C as a single web page.
Realize this exercise using HTML, Cascading Style Sheets (CSS),
page through user interaction can communicate aspects of the story.
In your implementation, do not use any images or text-images (no GIF or JPEG files); instead, use only
the typographic tools HTML and CSS can provide. Keep in mind limitations
based on the fonts' client-side interpretation. Develop your idea based on sketches
and Illustrator designs. Bring a letter (landscape) printout of your
design to the Mon. Nov. 7 class meeting.
Final Project (due Wed. Dec. 7)
B: Flash Response.
Create a dynamic landscape controlled by the mouse (create a series of
buttons/invisible buttons which control a number of movie clips) in the
size 468 x 60 pixels (width x height, standard banner size). The subject
matter is open to your creative interpretation; develop a strong
artistic concept, which communicates in other contexts. Your landscape
should feel like a seamless surface, not like a Graphic User Interface.
Be prepared to discuss ideas during the Mon. Nov. 7 class session.
The web has special significance as a new kind of space, both virtual and
physical. Cyberspace is a vast territory spanning the globe and
millions of users but is ready to be viewed and navigated by any
single, stationary user anywhere in the world who can log on and connect.
For the final project, you will create a website
that represents a “virtual tour” of a topic you choose.
The site should familiarize viewers to a place or a process
you know well or have special interest in. Choose a topic that is relevant
to current events, has historical significance, or is especially meaningful
to you. The site should function
both a “map” and a “story.” It should strive towards
these two contrasting goals: to allow viewers to know where they
are at any time, and to make visitors feel like they are actually
Develop a concept, a visual identity and a navigable
structure within the remaining 3 weeks. You may use all techniques
hybrid. Choose the appropriate tool for your idea. There is no page
limit, however, choose quality over quantity.
- Appropriate research: The first week is focused on research. Gathering of materials will be finalized in week 8.
- One page project proposal, incorporating objectives, literature review and references (due Mon. Nov. 21).
- A site map illustrating the website’s structure
- Sketches and Illustrator/Photoshop designs defining 'look and feel' and graphics concept
- Navigation concept
- analyze the theme and sketch three different ideas about theme.
Summarize your ideas in a one page project proposal (12 pt, double
space), stating clearly the category you chose, background information
and relevant work/sources, and your objective how you want to
contribute to the theme/topic. Sketch out a storyboard/site map for
each of your ideas based on your project proposal, defining approach
and structure. Be prepared for an individual discussion with Prof. and
TA on Mon. Nov. 21. Choose one idea to elaborate on based on the
discussion with Prof. and TA.
- one page finalproject proposal and storyboard/site map due on Wed. Nov. 23
- rework your 'storyboard' according to the discussed changes
- elaborate your designs in Illustrator and Photoshop
- test technical challenges and clarify issues during the Lab sessions
- start implementing your concepts
- class presentations of work in progress (sketches, designs, tests and implementations) on Mon. Nov. 28
- finalize and refine your project
- individual discussion with Prof. and TA
- Refine your project
- Publish it on the website, check and enhance compatibility, performance etc.
- Final individual critique on Mon. Dec. 5
- Final presentation on Wed. Dec. 7
The Internet and World Wide Web are continually evolving. These research topics
are representative of the history, present, and future of the Web and the technologies
it relies on:
Student Web Presentation
Search Engines | Wikipedia | Sourceforge | MMOGs | GSM/GPRS/3G |
Hypertext | NCSA Mosaic | Arpanet | Mouse | Virus |
MUDs | Typepad/Movable Type | Streaming Media |
Content Management Systems (CMS) | Advertising on the Web | Flickr |
RSS | del.icio.us | Creative Commons | Spam | Bittorrent | Google Earth
Select one of these topics and thoroughly research its context and significance.
Your research report is a 10-minute in-class presentation that should be based on
the following structure:
1 Abstract (30 seconds)
Summarizing the topic
2 Background (2 minutes)
Technological and conceptual
3 Description (3 minutes)
Matter-of-fact description of the topic
4 Analysis (3 minutes)
Why is/was this topic important?
What is good about the topic?
What are the weakness or failings of the topic?
5 Conclusions (1 minute)
Competing products or technologies
Possible future developments
6 References (30 seconds)
Minimum of three books, articles, essays, websites about the topic
References should be based on the Chicago Citation Style.
Be certain to practice and time your presentation before presenting in class. You
will be evaluated based on the substance of your research and clarity
of your presentation. You may use both
HTML and/or Flash to present you topic. Only presentations accessible
from the class website will be accepted. Optimize the amount of
information per page, legibility of typography and images based on a
presentation context and a screen resolution of 1024 x 768 pixels.
Give a five-minute presentation to the class about a website of your own
choosing. This should be a favorite site that you find notable for its navigation,
interactivity, or overall design aesthetic.