Professor Casey Reas, TA Andrew Hieronymi

  Index
  Schedule
Exercises
  Syllabus

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.

PS 01. Introduction & HTML
PS 02. Animation & Response
PS 03. Cascading Style Sheets
PS 04. Forms & Javascript
PS 05. Style & Design Exploration
PS 06. Information Architecture
PS 07. Design Variations
PS 08. Refinement
PS 09. Implementation

Research Report





PS 01. Introduction & HTML (Due 14 January)

This and all subsequent Problem Sets are not complete until they are hosted from the class website.

1.
Why are you taking this course?
How much experience do you have in designing for the Web?

2.
What is your favorite dynamic website? Why?

3.
Build a web structure for displaying your work for this class. Create a directory for yourself in the class website's "web/projects" directory. In developing the structure, remember there will be nine Problem Sets in total and each will have three parts. Post the results of PS 01 into this structure.



Top

PS 02. Animation & Response
(Due 21 January)

This Problem Set is challenging. Remember to follow a smart design methodology — divide your ambitious plans into smaller, manageable tasks. Start simply and gradually add complexity, therefore always having a working project.

Remember these are design exercises, and the aesthetic qualities of these exercises should be excellent.

1.
For what reasons would you choose to design a website with Flash instead of HTML. For what reasons would you choose to design a website with PHP (or other datebase-linked site technology) instead of HTML.

2.
Create a repeating or generative animation with at least five straight 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. Use either Flash or Processing to realize this exercise. Hint: If you are using Flash, you may use the timeline and the automatic transitions to minimize the complexity of the exercise.

3.
Create two minimal black and white 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 buttom. Use either Flash or Processing to realize this exercise. Hint: If you are using Flash, you may use the button template with Movie Clips to minimize the complexity of the exercise.




Top

PS 03. Cascading Style Sheets
(Due 26 January)

1.
In no less than two hundred words, explain the benefits of "separating style from structure".

2.
The homepage for this class is built using tables to set the position of the elements. Using CSS Positioning with an embedded style sheet, re-create the homepage for this class.

3.
Select a passage of text (at least 200 words) from your favorite book. 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 of the reader. Modulate the elements of typography (size, color, kerning, leading, etc.) to add nuance to each phrase. Use only cascading style sheets to acheive the effect (no inline <font> tags).
Examples:
If two people are speaking use a different typeface for each.
If someone begins to whisper, diminish the text.
If the writing is aggressive use a bold font and emphasize the key words.



Top

PS 04. Forms & Javascript
(Due 2 February)

1.
In Web Design in a Nutshell, Niederst says "CGI (Common Gateway Interface) is the interface between HTTP/web server software (the program responsible for web transactions) and other programs on the server." In your own words, what does this mean?

2.
Use your knowledge of CSS, Forms, and Javascript to re-design the front page of the class website. Design the page in the manner consistent with the content of the class. The page structure may change radically, but the information and links must remain intact. Be prepared to explain all of your decisions.

3.
In the spirit of Form Art, construct a composition with form elements.




Problem Sets 05 to 09 comprise the final project for the class. The final project is to make a website hosting the research reports written by your classmates.


Top

PS 05. Style & Design Exploration
(Due 9 February)

Explore the visual communication element of the website. What form language will you develop? What colors will you use? What typeface will you select? The answers to all these questions should come from your idea of the content of the site and the audience. Who do you want to read your website? What style is appropriate for a website about technological and social trends of the Internet?

Make decisions about the content and the audience. Develop and explore appropriate design elements through developing at least five 1024x768 px style images. Create an additional page with a text list explaining your sources of inspiration, techniques, and naming websites which match your style. For the critique, you will show your explorations and clearly explain the rational for your decisions. This work will serve as the foundation for executing Exercise 07 (Design Variations).

Notes:
Please do not use "clip art" or "stock photography" unless they are part of your concept. You are encouraged to take your own photographs and develop your own graphic language.




Top

PS 06. Information Architecture
(Due 16 February)

Before executing this problem set, you need to decide if you will be making your site in HTML/FLASH or HTML/PHP. This decision will greatly affect the future work for the quarter.

1.
Using Cloninger's Understanding the Web as Media as a reference, determine how you can use the characteristics of the web to your advantage in creating your dynamic site for this class. In no fewer than two hundred words, explain your thoughts.

2.
Construct a map of your site's page architecture. This map is your tool for explaining the experience of a visitor to the site. How many pages will you have and what will they be? Will the site simply be an index and articles, or will there be other supporting pages? Will there be a page of abstracts? Will visitors be able to search or post comments? Will there be category pages? Etc. How do you move from one page to another?


3.
Construct the wireframe schemes for each page in your site. How many templates will you have? What elements will be on each page? Where are the navigation elements? Are you using form elements and where are they placed? There should be one scheme for each template (unique page). These diagrams determine where the content, navigation, and other information go on every page. In building the navigation, keep in mind the following questions in reference to the visitor: Where am I? Where can I go?




Top

PS 07. Design Variations
(Due 23 February)

Develop three separate design variations and apply them to each of the templates / page elements articulated in PS 06. All of these design variations should directly emerge from PS 05, but they should explore a range of potential communication ideas. Make quick, rough animation tests if they are essential to understanding the design of your site. Explore a range of designs from radical to conservative. Develop the variations using design tools like Photoshop and Illustrator.

1.
Design Variation 1

2.
Design Variation 2

3.
Design Variation 3




Top

PS 08. Refinement
(Due 1 March)

Refine one design from the three design directions presented in PS 07. Each refined page should have an additional annotated version including the details of implementation (size of images, table borders, etc.) and notes about any transitions or animations. These designs should be final so you are not making major design decisions while you are implementing. You should be able to give these pages to another person and they should be able to implement the site using only these documents as a reference. Develop the refinements using design tools like Photoshop and Illustrator. If you site includes animation, you are encouraged to create animations tests.

1.
Text page(s). Show the screen(s) while a person is reading an article.

2.
Home page(s). Show the primary navigation page(s).

3.
Additional page(s). Create documents for any additional screens in the website.




Top

PS 09. Implementation & Refinement
(Due 17 March)

Build the site you've designed. If you are building a Flash website, it's only necessary to implement four articles, but it's encouraged to complete the entire site. If you are building a PHP website, you must implement all articles.

You will be evaluated based on these metrics: quality of graphic design, information architecture, and excellence of implementation. PS 09 counts for 30% of your final grade.

You will have individual critiques on 8 and 15 March.







Top

Research Report


The Internet and World Wide Web are continually changing. New technologies come originate and disappear with a high frequency as cultural and economic trends allow 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:

Friendster
Smart Mobs
Online Gaming
Instant Messaging
Google
Carnivore
Bots (Web Spiders)
Weblog + Movable Type
Wiki
Apache Server
Sourceforge
Bluetooth
GSM/GPRS/3G
WI-FI
Wearable Computers
Netomat
Arpanet
Modem
NCSA Mosaic
Hypertext
BBS (Bulletin Board System)
Compuserve
Amazon
eBay
Napster
Praystation
K10K

Select one topic and thoroughly research it's context and importance. Citation and the References should follow the Chicago Manual of Style format.
Your written report and presentation should literally follow this outline:

1 Abstract (60 - 100 words)
  Summarizing the topic

2 Background (300 - 400 words)
  Technological and conceptual precedents

3 Description (300 - 400 words)
  A matter-of-fact description of the topic

4 Analysis (300 - 400 words)
  Why is/was this topic important?
  What is good about the topic?
  What are the weakness or failings of the topic?


5 Conclusions (60 - 100 words)

6 References
  Minimum of three books, articles, essays about the topic


Deliverables:

File in .TXT format containing your complete text. Each section header should be clearly marked and the file must be saved with UNIX line breaks. Use the template file to ensure compliance. Put your text file on the class server, in web/projects/yourtopicname.txt

Ten minute in class presentation clearly elucidating your topic.