Exercise 01: Text/Image
Project 01: Text/Image
Exercise 02: Animation/Response
Project 02: Animation/Response
Final Project
Research Report
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 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, http://classes.design.ucla.edu/Fall5/161A/projects/firstname_lastname/table.html]

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 depth.

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 website.

Project 01: Text/Image (due. Mon. Oct. 24)

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 only HTML, images, and JavaScript to communicate your ideas. Be certain to follow a complete, iterative design process.

Your website must be available on the class website before the Mon. Oct. 24 class session.

Exercise 02: Animation/Response (due Wed. Nov. 2)

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 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.

Project 02: Animation/Response (due Mon. Nov. 14)

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), 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, 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.

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.

Final Project (due Wed. Dec. 7)

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 going places.

Develop a concept, a visual identity and a navigable structure within the remaining 3 weeks. You may use all techniques introduced in class, such as HTML, JavaScript, Flash and CSS, or a hybrid. Choose the appropriate tool for your idea. There is no page limit, however, choose quality over quantity.


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:

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