Electronic Imaging 3: Design for the Web

This semester, all late projects will be graded down a letter grade per week. This includes interim progress checks (informal reviews). You must keep up or you will be encouraged to drop the class.

1/29 Class 1: Introduction to the Course: What is the Internet and What Production Techniques are Involved?

• Identifying course software.
• Review of Photoshop, Illustrator and Scanning.
• How to surf the web and use search engines.
• Web Design Resources online.
• Common misconceptions about the internet.
• Basic HTML: head/body, tags, text formatting, linking, images, etc..

Presentation:Methods Overview: Amazon.com,Turbonium.com, DigitalClubNetwork, WalkerArt.org, Atom Films

DUE NEXT WEEK:

• Frankenstein Project
• Begin Online Tutorial Do Lessons 1-6
• Buy books, Zip discs
• Read Internet History Reading

2/5 Class 2: More HTML Tables, Images, Color, and Interactive Structures

• The History of the Internet
• More HTML
• Critique of Frankenstein Project
• What is an interface?
• More on asset mangagement and directory structures.
• Creating a site plan and flow chart from last week's assignment.

Presentation: Piotr Szyhalski Rhizome, WebStalker, Mark Napier

DUE NEXT WEEK:

• Continue Online Tutorial
• Bring in Drawings/Photographs/Illustrations for Next Assignment
• HTML QUIZ NEXT WEEK!

2/19 Class 3: Dreamweaver

• What's a WYSIWIG?
• Dreamweaver Basics
• Working between HTML and Dreamweaver
• Animated GIFS.
• Image Maps.
• Work on Interface Designs and FlowCharts in Class.
• HTML QUIZ

DUE NEXT WEEK:

Informal Review of HomePage for PROJECT 2: The Decorated Diagram
(Work on Draft of Project 1 for Next Week. Have enough to show that you will be able to get good feedback on the pieces's strengths and weaknesses. Be sure to bring in all the research you need to finish the work).

2/26 Class 4: Dreamweaver Finer Points

• Frames
• Cascading Style Sheets
• Forms
• Working with Layers

DUE NEXT WEEK:

PROJECT 2: The Decorated Diagram
(Note: You must include Cascading Style Sheets)

• Critique:PROJECT 2: The Decorated Diagram (at beginning of class!)
• Select a committee for next week.
• Working with Fireworks
• Creating/Importing Documents
• Color
• Creating HotSpots and Image Maps
• Slicing

Presentations: E-Commerce Sites, Designing for Business

DUE NEXT WEEK:

1. Find a commercial site that is widely known. Answer the following questions:

1. What is the logotype? How and where is it used? How is it carried into the design?
2. Is there animation? How is it used?
3. How is color used on the site? Is it color-coded?
4. What is the concept behind the navigation? What is grouped together conceptually?
5. How are graphics used? Heavily or sparely?

2. Make a quick sketch of this sites homepage
3. Create a logo for Magic Mouse Toys.
4. Create 3 separate designs for the first page, modify the logo as needed.

 

3/12 Class 6: More Fireworks

• Presentations of commerical websites.
  
• Committee Review of Comps for Project 3.
• Animated gifs in Fireworks
• Creating HotSpots and Image Maps

DUE NEXT WEEK:

Using whichever design the committee chose in class, develop your sub-pages and, if necessary sub-sub-pages for the rest of the site. Be prepared to show these to me next week.

• Rollovers and Hotspots
• Integrating animated areas.
  
  

DUE NEXT WEEK:

PROJECT 3:Magic Mouse Toys
Be sure to add animations and rollovers for the final critique on Oct. 25.

4/2 Class 8: Getting Started In Flash

• Critique of Project 3: MAGIC MOUSE TOYS
• Overview of The Flash Environment
• Timelines, KeyFrames, Paint Palette
• Layers and Scenes
• Guide layers

DUE NEXT WEEK:

Students FInd one Site made in Flash to Present to Class

4/9 Class 9:More Flash, Working with Sound

• Presentations of Flash Research
• Working with Symbols and Instances
• Tweening: Shape and Motion
  
• Importing Sound and Graphics

DUE NEXT WEEK:

PROJECT 5 : Interactive Art Draft!

 

4/16 Class 10: Advanced Animation Techniques and Simple Scripts

• Rotoscoping
• Using Action Scripts to Navigate between
  scenes, stopping and starting the movie
• Creating rollovers
• Animated masks
• Working with Video and 3D

DUE NEXT WEEK:

INTERACTIVE ART: PROJECT 4

4/23 Class 11: Building an Interface in Flash

• Critique of Project 4.
• Scripting: Objects, Classes, Methods, and Properties
• Syntax
• Editing Actions from the Actions Panel
• Invisible Buttons
• Controlling a Movie Clip and Sound

 

DUE NEXT WEEK:

PROJECT 5: Project Ideas.
Decide whether you are using Basic HTML, Flash, or Shockwave.

4/30 Class 12: Work Session For Project 6

DUE NEXT WEEK:

PROJECT 5: Re-Imagining the Desktop

5/7 Class 13:

• Critique of Project 5 : Re-Imagining the Desktop

DUE NEXT WEEK:

PROJECT 6: Web Portfolio

 

FINAL EXAM DATE: TBA

Note: All assignments must link from the final interface page!