Exercise 01: Text/Image
Exercise 02: Text/Typography
Exercise 03: Identity
Exercise 04: Animation
Exercise 05: Response
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, http://classes.design.ucla.edu/Spring06/161A/projects/firstname/table.html]
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: http://www.craigslist.org/.
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.
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),
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.
- Research: What is your identity as a visual designer? What is the look and feel you wish to portray in your online presence? Gather all possible projects you may wish to include in your online portfolio. You may need to create new documentation of your work in order to get this right. This will be a chance to see and judge your work as a whole. You should make your selection of material, to be finalized in week 8.
- One paragraph project proposal, along with links/images you may be using as inspiration and reference (due Tue. May 23).
- A site map illustrating the website’s structure
- Sketches and Illustrator/Photoshop designs defining 'look and feel' and graphics concept
- Navigation concept
- Final site implementation
- Sketch at least three different ideas for your site.
- Summarize your ideas in a one paragraph project proposal, stating clearly the goals and objectives for your portfolio site and any references you may be calling upon.
- Sketch out a storyboard/site map for each of your ideas based on your project proposal, defining approach and structure. What are the sections of your site? How will you organize your work?
- Gather and make selections of your work for your online portfolio. Bring your documentation to class.
- Be prepared for an individual discussion with Prof. and TA on Thu. May 18. Choose one idea to elaborate on based on the discussion with Prof. and TA.
- One page final project proposal and storyboard/site map due on Tue. May 23
- Rework your site storyboards based on discussions with Prof. and TA
- Develop your designs in Illustrator and Photoshop
- Test and clarify technical issues during the lab sessions
- Start implementing your concepts
- Class presentations of work in progress (sketches, designs, tests and implementations) on Tue. May 30
- 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 Tue. Jun. 6
- Final presentation on Thu. Jun. 8
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)
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.