DYNAMIC WEB D|MA 161B WINTER 2006

Instructor: Peter Cho, TAs: Tyler Adams, Sue Huang

 Students
Schedule
Exercises
Syllabus
Discussion
Exercises:

PS 1: Introduction
PS 2: Interface
PS 3: PHP + Forms
PS 4: Data Visualization
PS 5: Style + Design Exploration
PS 6: Information Architecture
PS 7: Design Variations
PS 8: Refinement
PS 9: Final Implementation
Research Report


All exercises are due at the beginning of class and must be linked from the course website to be considered complete. All files must be hosted from the classes.design.ucla.edu server.


 
PS 1: Introduction (due Wed Jan 11)

0. Build a web structure for displaying your work for the class. Create a directory for yourself in the “web/projects” folder for the class. Name your main menu page index.html so that it will be linked properly from the front page of the class website. In developing the structure, remember that there are nine Problem Sets in total and each has one to three parts. Post your results of PS 1 into this structure.

1. Why are you taking this course? What prior experience do you have in designing for the web?

2. Select two projects from the web you consider to be interesting: 1) a Flash-based project, and 2) a dynamically-generated web site. List each project with its title, URL, one or more small “thumbnail” images, and two to three sentences describing the project and why it is especially remarkable. Your page should be clear and well-considered in its layout.

3. Design a web page with an expressive typographic interpretation of this quotation:

Both everyday and exotic, public and private, autonomous and commercial, the internet is a chaotic, diverse and crowded form of contemporary public space.
—Rachel Greene, Internet Art
Use CSS to control the precise appearance of the type and any supporting imagery. If you include images, do not use clip art or found images from the web unless if they are part of your concept. Think about how scale, juxtaposition, and position can affect how the text is read. You may wish to use JavaScript to increase the interactivity of the page by hiding and revealing text when the viewer clicks or rolls over different elements.


 
PS 2: Interface (due Mon Jan 23)

1. Network structures and patterns can be found in nature as well as in the man-made world. What natural phenomena could be used as a metaphor for the web? Find or create images of the natural world that suggests the networked relationships of cyberspace.

2. Using the visual concepts of part 1, create a static, graphical map of the websites submitted by the class last week. Select at least eight of the web projects, and visualize the relationships and groupings among these various websites. Your map should include the title, a description, and one or more “thumbnail” images for each link.

3. Design an interface in Flash MX 2004 based on your work in part 2. The interface should link to a minimum of five of the web projects. Develop a concept to organize the links using the 3rd or 4th dimension to create a seamless user experience. For each web project, you should include a title, short description, one or more “thumbnail” images of the website, and a link to the actual project.


 
PS 3: PHP + Forms (due Mon Jan 30)

1. What would be the reasons to design a website with Flash instead of static HTML? Why would you choose to use PHP (or other dynamically-generated page technology) instead of HTML?

2. Build a page with PHP and forms that allows a user to make a conversion from one system (of measurement, currency, etc.) to another. Your page should be elegant and well-considered in its layout.

3. Create a dynamic web site using only form elements and one or more PHP pages. In the spirit of Alex Shulgin's Form Art project or bak.spc.org's Choose project, build icons, patterns, images, typography, and links out of form elements and text. You may use CSS to define and position type and form elements. You should allow user input and data from the form elements to create variations.


 
PS 4: Data Visualization (due Mon Feb 6)

1. You will be using the “world” database provided in class as the basis for this project. Build a “map” of the world data, realized in PHP and MySQL. Your map could be a geographical or topological representation of the space, an artistic rendition, or a personal interpretation of the data. After installing the provided tables in your personal database, you may alter the structure and the information for your own purposes. For your design, focus on one specific aspect within the scope of your abilities, utilizing color, layers, tables, images, forms, typography, and using CSS and JavaScript if appropriate. Be prepared to show sketches and discuss ideas during the Wed Feb 1 class session.



Problem Sets 5 through 9 comprise the final project for the class. The final project is to create a website hosting the research reports written by your classmates.

 
PS 5: Style + Design Exploration (due Mon Feb 13)

Explore the visual and formal aspects of your website. What visual language will you develop? What color palette and typeface(s) will you use? The answers to these questions should come from your concepts about your site content and the audience. Who is the intended readership of your site? What style is appropriate for a website about history, technology, and social trends of the internet?

Develop and explore appropriate design elements by creating at least five 1024x768 px images. Create an additional page with a list explaining your sources of inspiration and other websites that reflect the design direction and style you would like to pursue. For the critique, you will show your explorations and clearly explain the rational for your decisions. This work will serve as the foundation for Problem Set 7.


 
PS 6: Information Architecture (due Wed Feb 22)

Before executing this problem set, you need to decide if you will be using Flash or PHP to develop your site. This decision will greatly impact your work process for the rest of the quarter.

1. Using Cloninger’s Understanding the Web as Media as a reference, determine how you will use the characteristics of the web to your advantage to create your dynamic site for this class. In a minimum of 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? How do you move from one page to another? Will your site simply be an index and articles, or will there be other supporting pages? Will there be a page of abstracts or category pages? Will visitors be able to search or post comments?

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?


 
PS 7: Design Variations (due Mon Feb 27)

Develop three separate design variations and apply them to each of the templates / page elements articulated in PS 6. All of these design variations should directly emerge from PS 5, 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


 
PS 8: Refinement (due Mon Mar 6)

Refine one design from the three design directions presented in PS 7. 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 your site includes animation, you are encouraged to create animation tests.

1. Text page(s). Show what screen(s) appear as a viewer 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.


 
PS 9: Final Implementation (due Wed Mar 15)

Build the site you’ve designed. If you are building a Flash website, you should implement a minimum of six articles, but you are 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 9 counts for 25% of your final grade.

You will have an individual critique on Mon Mar 13.



Research Report

The Internet and web are constantly changing at a fast rate. New technological capabilities give rise to social phenomena that can just as quickly fade away. The following topics deal with aspects of Internet history, culture, and technology — the past, present, and future of the web.

Select one topic and research its context and importance. Be sure to proofread your text for any grammatical or spelling errors. Your research report is a 10- to 15-minute in-class presentation to your peer students. This presentation is based on research. The following structure is suggested:

1 Abstract
Summary of the topic

2 Background
Technological and/or conceptual precedents

3 Description
Description of the topic

4 Analysis
Why is this topic significant to our context?

5 Conclusions
Your own evaluation and opinions

6 References
Minimum of three books, articles, essays, websites about the topic. References should be based on the Chicago Citation Style.

You will be evaluated based on the substance of your research and clarity of your presentation. For your in-class presentation, you may use HTML, Flash, or other web-accessible technology to present your topic. Only presentations accessible from the class website will be accepted. Optimize your design for a 1024 x 768 pixel screen resolution.

Additional deliverable: Submit a file containing your compete text in .TXT format. Put your text file on the class server, in web/projects/yourtopicname.txt. Each section heading should be clearly marked and the file must be saved with UNIX line breaks.