Syllubus

Art 341 Interactive Media l Fall 2008 MW 12-2.50 pm

COURSE OVERVIEW
This is a Studio Course in Digital Media that requires you to integrate practical and theoretical knowledge in the research and development of web pages. It is the first part of a two-term studio sequence in design for interactive media.

Description:
Interactive design for the web focuses on information architecture, navigation systems, and visual interfaces. HTML protyping and mockup and the use of visual design tools are integral to this course as are the creation and optimization of graphics in compressed formats. Experience with web production workflow will be gained through development of site projects. Topics include usability and the aesthetics of web media.

Prerequisites: Art 120, 210, successful completion of the Sophomore Review.

Objectives:
By the end of this course, students will have been exposed to practical and conceptual approaches to:

• Web page construction through coding in HTML.
• Preparation and optimization of web graphics using appropriate compressed formats.
• Color theory for web design.
• Web page and web site construction using visual page and site editors.
• Assembly of templates from prototype layouts and designs.
• Creation of web animations in optimized formats.
• Information design and the organization of content.
• Interaction design and organization of navigation systems. Site maps and flow charts.
• Screen design, including the use of type, layout, and color to support functionality and user experience.
• Web site file and directory management.
• Web-based portfolio project, including preparation of a design document.



References:
Textbooks are required but having a third party reference book can be helpful. There are many to chose from and sometime dependant on personal preference.

Hardware:
External memory devices are required. Either an USB Flash drive or an external removable hard drive.


Projects

1. Using the Web Environment
A. Flicker site- A photo archive

Required Elements:
Two pages of “Favorites” archive that relate to art and design.
Upload set of your own photos, drawings, or design related images that you made.

B. Facebook or MySpace
C. Create a Blog – Create an identity [Fictional]

Required Elements:
Post an YouTube video, a sound file, photos, drawing, links to articles, archive of daily journal entrees, post news article, links to other sites you like that are related to design.

Link all three sites together.

Projects objective and skills:
- Getting comfortable with the web and using tools that are already available to the public.
- Scanning and Import analog and digital elements.
- Learning how to communicate and dialog on the web.


2. Making a first site
Poetry webpage

Description
Design one line of a poem in Photoshop. Create each of the word elements of the one line poem so that each word is a link. Every word will be a link to another poem site made by a classmate. Using Photoshop, cut-up the page so that each word is a graphic element. Compress the graphic elements. Make one of your links an animated GIF in Photoshop. Import elements into Dreamweaver.

Skill sets covered for project:
- Designing in Photoshop- thinking about how to design and produce the design with the grid in mind.
- Production skills include cutting up graphics, compressing graphics and file formats, color theory.
- Making an animated GIF
- Learning Dreamweaver’s environments and making a one-page HTML page using tables.


3. Final Project
Portfolio website/ Gallery/ Self Promotional Environment
This site is your first personal portfolio site with a small navigation system with a minimum of four navigational sections. For example: Homepage, Design samples [organized in some fashion], Resume, Links

Required elements:
- Web site map
- Two web site homepage design proposals which explores site navigation system and an design aesthedic
- Site Template page
- Site protype/mockup in HTML using Dreamweaver
- Make links to your Facebook, Blog, and Flicker site
- FTP site to a server to have a live site- ODIN account.

Skill sets covered for project: Process
- Making a site map in Illustrator
- Researching different navigation systems
- Researching and exploring site designs for inspiration
- How to organize a project and documents
- Formatting text and using CSS