Art 39540 3EF Design for the Web 1

Workshop on interface design, information structuring and coding for the Web. Sites are reviewed from the perspective of design, usability and accessibility. This course provides experience in the design of (X)HTML documents using CSS with development of a logical information structure, and the prototype testing of this structure. Prereq.: Art 29500 and 29526; 3 hrs./3 cr.

The syllabus and weekly handouts will be posted on the web site as PDF files: at: http://www.annetteweintraub.com/courses/39540/39540.html

Links and e-handouts are posted on LabShare in the folder ‘to_students’ organized by week

If you are absent, you must email someone on the contact list to get the assignment or check the website.

PROCESS

Research

Establish a concept for your site. Determine the site or client requirements.
Collect resource materials, creating original image and art.

Design

Design with type and image emphasizing effective communication, accessibility and utility.
Interface/navigation design using good information architecture.

Workflow

Wire frame to define content areas, flow chart to develop file structure. Work between active design prototyping and CSS/HTML working prototype.

Code

Write (X)HTML and CSS in a text editor. Separation of content and presentation. Hand code— NO DREAMWEAVER

Validate

Test on multiple browsers, platforms. Proofread text, check links, coordinate design elements throughout the site. Validate, test cross-platform.

Publish

Get a domain name, server space and upload to the Web.

Course Content

This course is an exploration of advanced CSS-based web design. Other topics may include alternate style sheets for print, formatting for handhelds and style sheet switching.

Syllabus may be revised during the semester depending on the needs of the course.

Projects

(X)HTML Pages Big Type Page and Big Image & Type Page exercises in (X)HTML [2 weeks]

CSS Version Big Type Page and Big Image & Type Page revised using CSS formatting [1 week]

How-to site Three-page site that presents step-by-step instructions for a task [a recipe, travel directions, home repair, etc.] Text and image, linked pages with navigation, page layout and formatting in CSS [4 weeks]

Site development Site development proceeding from research/concept development, flowchart, wire frame, and prototypes to production. Design an art site exploring an aspect of contemporary culture (3 page minimum). Design graphics, logos and interface; incorporate video, animation and/or sound; and design navigation and interaction. [4 weeks]

Form creation Exercise creating a form [1 week] [4 weeks]

Course Objectives

• To become familiar with the history and development of web design and coding
• To develop and use vocabulary for web design critique.
• To develop superior skills in design and apply these skills to creative projects in web design.
• To develop the ability to write standards-compliant and accessible CSS and HTML.
• To become fluent in the range of digital tools, used by artists in a web design context.
• To follow practices in information architecture and project planning that can be used to gain an internship or become part of a capstone portfolio.

Course Portfolio

All work for this class is web-based. The final portfolio is a gallery site that will be uploaded and presented live online.

All work is presented online. Be sure to copy your work to the server before class. We will look at it from the server.

Gallery Portfolio sites will be kept online for 4 semesters
• content is restricted to course portfolio work ONLY
• any work in violation of copyright will be removed

Be sure to BACKUP your work onto extra disk(s). YOU are responsible for keeping copies of your work!

Missing work, or failure to be at the Midterm or Final will receive an F.

Required Texts

Learning Web Design, A Beginner’s Guide to (X)HTML, Style Sheets, and Web Graphics, 3rd Edition, Jennifer Niederst Robbins, O’Reilly, 2007.

ALSO: the book web site, http://www.learningwebdesign.com

Purchase textbooks and bring to class by week 2

Recommended Texts

The Zen of CSS Design, Dave Shea and Mollty Holzcshlag, New Riders, 2004.

More Bulletproof Web Design, Dan Cederholm, New Riders, 2009.

CSS Mastery, Advanced Web Standards 2nd Edition, Andy Budd, Friends of Ed, 2009.

Adobe Photoshop CS4 How-Tos: 100 Essential Techniques, Chris Orwig, Adobe Press, 2008.

Materials

USB drive (or other removable storage media), 1GB preferred

BACKUP MEDIA: 2nd USB or CDs

Lab fee includes USB drives [given out around mid-semester] and blank DVDs ; students also receive 2 years of web site hosting as part of the lab fee.

Class Resources, links

Go to the weekly schedule and downloads page for resources and links:
http://www.annetteweintraub.com/courses/39540/39540_weekly_downloads.html

ACADEMIC INTEGRITY POLICY

Any act of academic dishonesty will be dealt with by applying the most stringent penalties permitted.
Cheating includes but is not limited to receiving help during exams and submitting homework without properly acknowledging persons who assisted you.
Please read the Policy on Academic Integrity posted on the CUNY website with URL: http://www1.cuny.edu/portal_ur/content/2004/policies/image/policy.pdf

General Requirements

2 unexcused absences only before a grade reduction
three latenesses=1 absence
Purchase textbooks and bring to class by week 2

Incompletes

Incompletes are only granted for medical or legal reasons and must be requested before the final review date Incompletes can only be changed by the Academic Standards Committee.

Grading

Grades are given based on:
• visual design, 30%
• correct use of HTML, CSS, 30%
• completion of weekly assignments 30%
• professionalism, 10%
[participation in class, meeting deadlines and attendance/lateness]

A grade of "C" is average.
Students begin with an assumed grade of "C" and move up or down, depending on the quality of work, presentation in class critiques, attendance and attention to deadlines.

Art Majors [declaring SP09 and later] and BFA students must maintain a GPA of 2.5.

Missing the midterm or final reviews will result in a failing grade.

Lab Reminders

No food/drink in the Lab

At the end of your work session, clean up the area around your computer

We will suspend your Lab account if you break these rules!

Report Lab problems in WRITING, using a copy of the problem report form posted next to Skiter's office, or email him (skiter@ccny.cuny.edu)


Syllabus and Weekly Assignments

Syllabus [PDF]

Weekly topics + download links page

DOWNLOADS

Web Developer addon for Firefox: http://addons.mozilla.org
Firebug addon for Firefox: http://addons.mozilla.org
TextWrangler: http://www.barebones.com/products/textwrangler/
GRID: http://sprymedia.co.uk/article/Grid
Pick/analyze colors & palettes: http://www.colorzilla.com/firefox/

Weekly Assignments:

Week 1: February 2 [PDF] , links: classlinks_week1.html
Week 2: February 9 [PDF] links: classlinks_week2.html
Week 3: February 16 [PDF] links: classlinks_week3.html
NO CLASS on February 23 [Monday Schedule]
Week 4: March 2 [PDF] links: classlinks_week4.html
Week 5: March 9 [PDF] links: 39540classlinks_week5.html
Week 6: March 16 [ PDF] links: classlinks_week6.html
Week 7: March 23 [PDF] links: classlinks_week7.html
Week 8: March 30 [PDF] links: classlinks_week8.html
Week 9: April 6 [PDF] MIDTERM | links: classlinks_week9.html
Week 10: April 13 [PDF] links: classlinks_week10.html
NO CLASS: SPRING BREAK is April 20th to 26th
Week 11: April 27 [PDF] links: classlinks_week11.html
Week 12: May 4 [PDF] links: classlinks_week12.html
Week 13: May 11[PDF] links: classlinks_week13.html
Week 14: May 18[PDF] links: classlinks_week14.html
Final Review date: TBA

Weekly schedule, links and downloads.

Get Adobe Acrobat Reader