Design for the Internet 2004 - 2008

Daniel DiCarlo / Fallen Heros / eZine Comic with self inserted

Instructor: Jeff Prentice
Ofiice Hours: before class, after class, or by appointment

OUTSIDE TIME, REQUIREMENTS.

  1. This is both a technical course and a design course. You will need to allocate the maximum amount of out time to cover the technical AND design/art aspects of beginning web design.

  2. You must have internet access, computer and software.

  3. Dreamweaver, Flash, Photoshop, and a browser such as Firefox. The Studio package is the best deal with your student discount. You can also download 30 day free trials.

MATERIALS. USB portable hard drives are a good buy. You can also use a usbthumb drive-mini storage device. Do not use CDs. You may use the server to store work, however, we are working in an unprotected environment, i.e. no password protection. Your work may be accidentally deleted at any time. Be prepared and always have a backup of your work at home. You need to take your .psd and .fla files with you on a usb after each class- they can be wiped off the server by the sys admin.

CONTENT/EXPECTED LEARNING OUTCOMES.

  1. This class is an overview for a variety of majors, from graphic design to fine art. It embraces experimental, creative and practical application of digital media for presentation on the Internet.

  2. Topics will include interface design, graphic/photo/illustration preparation for presentation on the internet, basic animation, navigation, some audio and video.

  3. We will participate in workshops and lectures in areas such as Photoshop, Dreamweaver, Flash, CSS, HTML, and Javascript.

  4. By the end of the course you will have experience designing an xhtml/css based portfolio site, creating basic animations in flash, and produce a final interactive internet project.

  5. The assignments develop an understanding of current internet iconography and interface design, and encourage the exploration of personal directions and styles.

PREREQUISITES

  1. Students must show proof of prerequisites. Reregistered students who are unable to show proof of prerequisites may be dropped by the instructor.

  2. If space is available, the instructor may add crashers who are able to show proof of prerequisites. By the second class period turn in a copy of a grade report for the prerequisite class (student transcript or degree audit)

  3. The prerequisite for this course is Art 240 or Art 340.

GRADING

  1. A project grade will be determined by evaluating comprehension of the material, concepts and original ideas, excellence of design and timely submission.

  2. An incomplete grade will only be granted for extenuating circumstances.

  3. All copy must be written by the student, except for quotes or material that includes an appropriate credit. Photographs, preferably, should be taken by the student; if not, appropriate credit/reference should be made. Any illustration, symbol or pattern should be drawn by the student or obtained from a copyright free source. Recorded music is not acceptable unless prior permission is given by the instructor. If used, any professionally recorded audio material should receive credit in the work.

  4. Classroom interaction is vital to the learning process. Students will be expected to participate in all class activities. Lectures, demonstrations, discussions and critiques.

ATTENDANCE.

  1. Attendance to all class meetings is required

  2. Grades will be based on class activity and participation

  3. 6 unexcused absences can result in an F for the course.

CRITIQUES and PRESENTATIONS. Constructive criticism help artists and designers analyze their work. Attendance to all critiques and group presentations is required. Absence may result in an F for the project.

DUE DATES

  1. All work is expected to be completed by the due dates

  2. Unless otherwise specified, work is due at the beginning of the class period.

  3. Late work will be docked one letter grade per day missed past the deadline.

  4. If there is a problem in meeting a deadline I should be notified in advance.

Exercises and Table of Contents Project

Instructions:

  1. Create a page, index.html, that is saved in your ROOT FOLDER (a folder named with your last name, all lower case) that will be associated with your name in the course list.

  2. This page will have a list of projects and exercises that we can click on to view your work throughout the semester.

  3. We will add items as workshops are conducted and assignments are completed.

  4. Completed STUDENT EXAMPLE: Stecklair

How to link up content to this TOC index

  1. Create and save a new html doc called statement.html.

  2. Paste your statement into it (if you don't have one ready go to lipsum.com/ , generate some dummy text and use that.

  3. Type the text "statement" on the index page and in the properties window click on the folder that allows you to browse for the file you want to link to: statement.html.

  4. Test the link by previewing in the browser. This is the basic way to link. Note how you have to hit the back button to go back to index. We will be talking about navigation.

  5. Add a contact link mailto:youremail

  6. this index page is yours - personalize it.

Readings

To be assigned throughout the course. We have used Site Seeing and Internet Art previously.

Blog

Each student creates a blog where you can enter your responses to the questions on the readings and homework. You may have a blog already at blogger, or at myspace or facebook. You will need to give us that link. If you don't have a blog, then do the following to create a blog at blogger.com:

  1. Go to blogger.com

  2. Create a new account by following the instructions. NEW: You will need to set up a google account first before setting up the blogger account.

  3. Once you have your account set up, select a template for your blog, and practice creating entries.

  4. Answer the questions I have given you from the readings

  5. Link the blog to your TOC list. See TOC project, below.

Portfolio

Create a portfolio site following the design guidelines/required elements listed here.

We will be covering a number of topics, from background images and rounded table corners to cascading style sheets and drop down jump menus. It is up to you to experiment with the various elements, and develop your ideas on form and content, navigation, contemporary design standards and iconography.

Please note that for this project we want to maintain an high level of professionalism. No snapshots of friends and family, cute or jokey welcome messages, profanity.

Site checklist/required elements:

Page templates
Library elements (optional)
A CSS style sheet
Site ID
Location indicator
Primary navigation - and perhaps second and third levels navigation
Clickable thumbnails and pages that open using open browser window, window fever, or some other method you can discuss - lightbox?
Footer
Artist statement (new) this replaces the bio used previously
Contact infO

We will be looking for design and navigation consistency, display of craft and understanding of the program - tables AND LAYOUTS that don't shift, pages that fit in our browser window without scrolling ways AND down, text legibility - and spelling. These first sites don't have to be technological wonders, but they should be thoughtfully designed and carefully built. Be ready to discuss your design decisions.

Ideas for content:

YOUR ORIGINAL Professional/Commercial designS
Photographs
Illustrations
Multimedia
Stories
Bio
Other

Note: All web images have to be jpg or gif, 72 dpi, and around 600 x 800. You will also need thumbnail images. Look into actions and automation in Photoshop that create these in a single stroke. Look at the student gallery homepages for ideas. Collect resource and inspiration links. I have a large number on my site on the links and resources pages.

PRELIM presentation:

In order to iron out any nav or design issues we will want to see a printed and mounted version of your rough portfolio site ideas, navigation flow.

the standard mounting board, spray mount, color images, graphs etc can be used.

The objective here isnot just to get input from us, but to practice presenting your ideas to a group - something you will be doing in the work world.

Graded on apparent effort, presentation, comprehensiveness.