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