Exercise 01: Text/Image
Exercise 02: Text/Typography
Exercise 03: Identity
Exercise 04: Animation
Exercise 05: Response
Final Project
Research Report
Student Web Presentation

Exercise 01: Text/Image (due Tu Apr 11)

Use a text editor or Macromedia Dreamweaver MX 2004 (installed in the Labs) to create these exercises. If you are using a WYSIWYG editor, 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 both design exercises and technical exercises, and you will be evaluated based on the originality of your approach and visual refinement of your work, as well as on successful completion.

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 response to the following word: DEEP. 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 depth.

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 Th Apr 6 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 Tu Apr 11 class session and link your projects from your avatar page. Assignments are only considered as completed if they are available from the class website.

Exercise 02: Text/Typography (due Tu Apr 18)

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 overly long—it could be poetic, offering just a glimpse of the scene or characters involved. The hypertext story should be composed of at least ten hyperlinked HTML pages using Cascading Style Sheets (CSS) and images.

Be prepared to discuss your ideas with a text outline of your story during the Th Apr 13 class session. Your project should be published on the class website before the Tu Apr 18 class period.

Exercise 03: Identity (due Tu Apr 25)

Redesign the front page of Craigslist: This heavily-trafficked front page is packed with text links and contains no images. Your first task is to develop a strategy for structuring the links and/or editing the page architecture. You may wish to reimagine the goals of the site and reposition Craigslist for a select web audience. Which categories and links are more important than others? Could some of the information be minimized/collapsed or reduced? You should also consider how the site may be improved by evolving the visual identity of the home page through color, typography, or other visual elements. Utilize your skills with CSS, HTML, JavaScript, and web development tools to create your updated page. Be certain to follow a complete, iterative design process.

Develop a strategy for your updated and improved Craigslist front page and have concepts, sketches, and/or wireframe page architecture designs ready to discuss during the Th Apr 20 class meeting. Your website must be available on the class website before the Tu Apr 25 class session.

Exercise 04: Animation (due Th May 4)

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.

A. Create a looping 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 2. 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 carefully chosen typeface and its possibilities in relation to movement and transitions.

C. Create a 10 second animation in a 320 x 240 pixel space that explores a single, large photographic image or illustration. 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 or an illustration of your own creation. 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 Th Apr 27 and Tu May 2 class sessions.

Exercise 05: Response (due Tu May 16)

A: Story. In this project, you will recreate and reimagine your story from Exercise 2 as a single web page. Realize this exercise using HTML, Cascading Style Sheets (CSS), and JavaScript only. Use this project as an opportunity to improve on and develop your story further. Consider how revealing and hiding parts of the page through user interaction can communicate aspects of the story. In your implementation, minimize the use of any images or text-images; instead, rely primarily on 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 designs in Illustrator. Bring a printout of your design to the Tu May 9 class meeting.

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 728 x 90 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 Tu May 9 and Th May 11 class sessions.

Final Project (due Th Jun 8)

Your portfolio is your shop window. It doesn’t matter whether it is a printed portfolio or a laptop presentation [or viewed online], the same rules apply: make it as compelling and as revealing as possible. Push yourself. Don’t think, oh this will do. It won’t. After your personality, it is the second most valuable tool that you possess to help you find a job.

A portfolio of eight to ten interesting pieces of work is ideal.... Your portfolio pages should exhibit a degree of uniformity. Create a grid, and make sure every project adheres to the grid. This will be difficult because you might be showing a variety of projects (2D and 3D) but it’s worth trying to get this right because you will be judged on how your work is presented as much as by the work itself. A portfolio that has an underlying unity and structure will score more points (and be more enjoyable to view) than one that has no structure or cohesion.
—Adrian Shaughnessy, How to be a graphic designer, without losing your soul

As a designer, your portfolio is your public face and your best tool for generating interest in your work. A good online portfolio is essential when making contact with potential clients and employers. It’s the primary way people anywhere can get a glimpse of who you are and what you do. During the last few weeks of class, you will go through an accelerated design and development process to create an online portfolio of your design work.


week 7 week 8 week 9 week 10
Research Report

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:

Vannevar Bush | Tim Berners-Lee | Marc Andreessen | Ted Nelson | Instant Messaging | Email | Wiki | Mouse | Hypertext | Sourceforge | RSS | Streaming Media | BitTorrent | Spam | Creative Commons | Malware | Arpanet | Wi-Fi network community initiatives | Wearable computers | Google domination | Blogging software | Online advertising

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)
Your evaluation
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.

Student Web Presentation

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.