|
|
All exercises are due at the beginning of class and must be accessible
from the course website to be considered complete. All files must be hosted
from the class website.
A Text/Image Exercises
B Text/Image
C Animation Exercises
D Animation
E Text/Image II Exercises
F Text/Image II
G Response Exercises
H Final Project
Research Report
With the exception of the Research Report, all exercises will be created in relation to a chosen theme. Select a theme from the following list.
People
Andrei Tarkovsky
John Cage
Martha Graham
Jean Tinguely
Anni Albers
Nam June Paik
Ray Eames
Mies van der Rohe
Leni Rievenstahl
Isamu Noguchi
Dianne Arbus
...
Events/Topics
US War with Iraq
Presidential Election 2004
Assassination of Martin Luther King, Jr.
...
Words:
Rage
Dependence
Obsession
Control
Emerge
Personal
...
Objects
Valentine Typewriter (Olivetti)
Cotton Gin (Eli Whitney)
Macintosh Computer (Apple Computer)
Wright B Flyer (Orville, Wilbur Wright)
Mars Rover (NASA et al.)
...
Processes
Tofu production
Television transmission
Refining oil
Desalinating water
Making steel
...
Text/Image Exercises
Create these exercises with a text editor or a HTML WYSIWYG of your choice. We recommend Dreamweaver MX 2004. 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 will be a part of the evaluation. Remember, these are design exercises and technical exercises and you will be evaluated on your approach and visual refinement as well as successful completion.
1.
Re-create the Periodic Table of the Elements using only HTML tables and text.
2.
5K competition. Create a representation of a tree (JPG or GIF) in less than 5 Kilobytes.
3.
Create one HTML page about your Theme integrating text and image. It must contain at least one table, external links, HTML text, image text, and images.
Top
Text/Image
Create a small website (between 3-5 pages) about one aspect of your theme. Use only HTML, images, (and Javascript) to communicate your ideas. Be certain to follow a complete, iterative design process. Think carefully about the type of content appropriate for the Web and invent interesting ways to use the media. In addition to uploading your work to the class website, turn in a rough six page process document including content, paper sketches (may be photocopies), design elements, and preliminary screen designs.
Create this exercise with a text editor or a HTML WYSIWYG of your choice. We recommend Dreamweaver MX 2004. 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 will be a part of the evaluation. Remember, this is a design exercise and technical exercise and you will be evaluated on your approach and visual refinement as well as successful completion.
Be prepared to show your work-in-progress during the 20 April session, both initial paper sketches, work in Photoshop/Illustrator, and the HTML implementation. You should think of the time between Tuesday and Thursday as a period of refinement, rather than the time to begin.
Top
Animation Exercises
Create these exercises using the timeline representation in Flash. Remember, these are design exercises and technical exercises and you will be evaluated on your approach and visual refinement as well as successful completion. The most obvious solutions will be graded poorly and innovative and well-crafted solutions will be graded highly. Sketch and develop ideas on paper before touching the keyboard.
1.
Create a repeating animation with at least five white lines on a black field. Each line should have a different quality of motion. For example, one line may be slow and move in a strait path and another line may be fast and move intermittently.
2.
Create a repeating animation in which a circle transforms into a square and back again.
3.
Create a twenty second animation about one aspect of your theme.
Top
Animation
Using Flash, create a one - two minute animation about one aspect of your theme. Be certain to follow a complete, iterative design process. Think carefully about the type of content appropriate for Flash animation and invent interesting ways to use the media. In addition to uploading your work to the class website, turn in a rough six page process document including content, paper sketches (may be photocopies), design elements, and preliminary screen designs.
Be prepared to show your work-in-progress during the 04 May session, both initial paper sketches, work in Photoshop/Illustrator, and the Flash implementation. You should think of the time between Tuesday and Thursday as a period of refinement, rather than the time to begin.
Top
Text/Image II Exercises
1.
The homepage for this class is built using tables to set the position of the elements. Using CSS Positioning with an embedded style sheet, precisely re-create the homepage for this class. Write your style sheet from scratch rather than relying on your WYSIWYG editor to do it for you.
2.
Using the HTML from the previous Exercise (directly above), modify ONLY the style sheet to reconfigure the elements of the page. Change the page layout to match your ideas about the design of the homepage for this class.
3.
Select (or write) a text about your theme of at least 200 words. In the spirit of expressive typographic exploration, re-interpret this text through controlling the attributes of the letters. Imagine the text as if it were read and expose the rhythm, volume, and tone. Modulate the elements of typography (size, color, kerning, leading, etc.) to add nuance to each phrase. Use only external cascading style sheets to achieve the effect (no inline <font> tags). Write your style sheet from scratch rather than relying on your WYSIWYG editor to do it for you.
Examples:
If there are two voices speaking use a different typeface for each.
If the tone is soft, diminish the text.
If the writing is aggressive use a bold font and emphasize the key words.
Top
Text/Image II
Create a small website (between 6-9 pages) about one aspect of your theme. Think carefully about how you have treated your theme in the previous projects and the different potential ways it can be addressed in the remaining exercises. Think carefully about the type of content appropriate for the Web and invent interesting ways to use the media. Use only HTML, CSS, images, (and Javascript) to communicate your ideas. Be certain to follow a complete, iterative design process. In addition to uploading your work to the class website, turn in a rough six page process document including content, paper sketches (may be photocopies), design elements, and preliminary screen designs. The project is not considered complete until the process document is handed in.
Be prepared to show your work-in-progress during the 20 May session, both initial paper sketches, work in Photoshop/Illustrator, and the HTML/CSS implementation.
Top
Response Exercises
1.
Create two visually minimal grayscale circular buttons. They must be visually
identical, but must have distinct behaviors. Reveal each button's behavior
through its response to the mouse. The button behaviors should reveal
them to be, for example aggressive, shy, or fatigued. For example, an aggressive button will be quick to respond, and then might pulsate or flash violently until the user moves their mouse off the button.
2.
Create a dynamic landscape which is controllable with the mouse by creating a series of buttons which control the timeline. This should not feel like a GUI, but a seamless surface.
3.
There are three weeks left in this class. It's time to focus even more and create excellent work. You have the last two weeks of the class to combine your knowledge from the previous eight weeks into one project.Uusing your theme, develop a concept for a small website. Create a five page project proposal related to your idea for the final project and post it from your website. These pages will form the basis for your final project. Include information about the visual qualities, the way people will navigate through the content, and the technical challenges. You are free to elaborate on themes from previous weeks.
Top
Final Project
Implement your project proposal from Exercise G. There is no page limit and emphasize quality over quantity. You may use any of the techniques we have discussed in class including HTML, CSS, Javascript, and Flash. This project counts for twice as much as the previous exercises in terms of the final grade for the class. There will be a preliminary small-group critique on 8 June so have your work-to-date online and ready to present. The final critique is 10 June.
Top
Research Report
The Internet and World Wide Web are continually changing. New technologies
originate and disappear with a high frequency as cultural and economic
trends cause certain ideas and applications to proliferate and others
to fail.
The following research topics are representative of the history, present,
and future of the Web:
Instant Messaging
Email
Search Engines
Bots
Blog
Wiki
Database
Sourceforge
Online Gaming (Console)
Online Gaming (Mobile phones)
GSM/GPRS/3G
WI-FI
Open Sound Control (OSC)
Virus
WebTV
Arpanet
Mouse
NCSA Mosaic
Hypertext
Select one topic and thoroughly research it's context and importance.
Your presentation should literally follow this outline and time table:
1 Abstract (30 seconds)
Summarizing the topic
2 Background (2 minutes)
Technological and conceptual precedents
3 Description (3 minutes)
A 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)
6 References (30 seconds)
Minimum of three books, articles, essays, websites about the topic
Deliverables:
Ten minute in-class presentation clearly elucidating your topic.
Be certain to practice and time your presentation at least three times before presenting in class. Have your presentation accessible from the Internet to avoid delays between presentations.
|
