Art 39540 4KN Design for the Web 1 [formerly Art 37000]
Workshop on interface design, information structuring
and interactivity for screen design for the World Wide Web. Existing web
sites are reviewed from the perspective of design, utility and interactivity.
This course provides experience in the design of HTML documents, incorporation
of images, development of a logical information structure, and the prototype
testing of this structure.
Prereq.: Art 29526/369; 3 hrs./3 cr.
The syllabus and weekly handouts will be posted on the website as PDF
files: at: . http://www.annetteweintraub.com/courses/39540/39540.html.
If you are absent, you must email someone on the contact list or check
the website.
Course Content
Design
Interface/screen-based design with type and image emphasizing effective
communication and Web utility.
Coordination of text, graphics, sound, and animation. Separation of content
and presentation using CSS.
Software
Writing (X)HTML in a text editor.
Using Photoshop/ImageReady, and other graphics tools to create images.
Processing sound and video for the Web; media integration in (X)HTML.
Use of Dreamweaver and CSS.
Production
Using a flow chart to develop a file structure.
Developing a workflow.
Working between design prototyping (Photoshop/ImageReady) and HTML. |
Site management; maintaining links among files.
Research
Establishing a concept for the site.
Determining the site or client requirements.
Collecting resource materials.
Creating original source materials in text and image.
Development of palettes, formats, design and type style guides for the
site from sketches to final art.
Creating a logical navigation and information architecture.
Prototyping
Building the site.
Testing the text and image on the site.
Editing text, checking links, coordinating design elements throughout
the site.
Publishing
Uploading to the Web.
Verbal and visual presentation of final projects.
Projects
Portal Exercise
Simple text site using CSS & the
box model. [1 page, 2 week exercise]
Information Site
Design of an information site (4 page minimum)
with linked text and graphics. Develop content and graphics, use a flow
chart for planning and Photoshop for page prototyping. Site should demonstrate
good design, effective structuring of infomation and use of a visual metaphor
for navigation. 6 weeks.
Culture site
Design of a cultural site—a ‘zine, entertainment or art site exploring
an aspect of contemporary culture (2 minimum). Students work as a team
to edit text; design graphics, logos and interface; incoporate video,
animation and sound; and design interaction. Students will be judged on
their original work, and for their contribution to the team. 6 weeks.
Printouts will be required each week for the
critique, as well as digital files.
There will also be an oral presentation on a website from the list distributed
in class.
Required Texts
HTML, XHTML, and CSS, Sixth Edition:
Visual QuickStart Guide (6th Edition),
Elizabeth Castro, Peachpit Press, 2006.
Macromedia Dreamweaver 8 for Windows and Macintosh Visual QuickStart Guide,
Tom Negrino, Peachpit Press.
Recommended Texts
Macromedia Dreamweaver 8 Advanced
for Windows and Macintosh Visual QuickStart Guide,
Lucinda Dykes, Peachpit Press.
the Zen of CSS Design,
Dave Shea and Mollty Holzcshlag, New Riders, 2004.
Bulletproof Web Design,
Dan Cederholm, New Riders, 2006.
CSS Mastery, Advanced Web Standards
Solutions, Andy Budd, Friends of Ed, 2006.
Styling with CSS,
Charles Wyke-Smith, New Riders, 2006.
Photoshop CS at Your Fingertips, Get in Get Out, Get Exactly What You
Need, Jason Teague and Walt Dietrich,
Sybex Books, 2004.
Materials
USB drive (or other removable storage media), 1GB preferred
BACKUP MEDIA: 2nd USB or CDs
Photo-quality MATTE inkjet paper for printing.
1 Itoya Presentation/Display Book Art Porfolio, 9x12, 24 sleeves
Tools
Xyle Scope [download] Displays CSS in any webpage [license, $19.95] http://www.culturedcode.com
Renders CSS online as you type. http://gregtaff.com/rendar2.html
Renders CSS http://www.webucator.com/resources/css/reference.html
View Source Chart, http://jennifermadden.com/scripts/ViewRenderedSource.html
Edit/Render CSS in Firefox EditCss 0.3.5 http://addons.mozilla.org/firefox/179/
Web page layout templates. http://intensivstation.ch/en/templates/
Complete directory of web links. http://www.alvit.de/handbook/
Also:
Examples of one, two and three column CSS layouts. http://www.glish.com/css/
Colored Box method. http://www.maxdesign.com.au/presentation/process/
Building a page template in CSS. http://www.maxdesign.com.au/presentation/wentworth/
Sample CSS Page Layouts. http://www.maxdesign.com.au/presentation/page_layouts/
Markup Guide. http://www.w3.org/MarkUp/Guide/Style
List of CSS tools http://www.soxiam.com/Notes/CSSTools
Web Standards Guide http://www.maxdesign.com.au/presentation/workshop/index.htm
CSS Resources & References
Complete directory of web links http://www.alvit.de/handbook/
Useful CSS & web links
http://www.wpdfd.com/wpdres.htm
Tutorials and reference
http://www.westciv.com/style_master/house/index.html
Links to web design info. http://www.wilk4.com/links/links2.htm
CSS resources http://www.ericmeyeroncss.com/links/resources.html
CSS resources http://cssvault.com/resources.php
Summary of positioning techniques http://coda.co.za/archive/20050616/17:11:16
CSS resources and links http://meyerweb.com/eric/css/edge/
CSS resources and links http://www.cbel.com/style_sheets/
Site Examples, good design
http://www.andybudd.com/links/well_designed_css_sites/index.php
http://www.webdesignfromscratch.com/current-style.cfm
Analysis of current web trends+ definitions
http://www.designshack.co.uk/index.php
http://www.webstandardsawards.com/
http://www.csszengarden.com.
Excellent approach to CSS design
http://www.cssbeauty.com/
http://css-galleries.com/
Gallery of web design.
http://piepmatzel.de/
http://www.stylegala.com/
http://www.netdiver.net/
Cheat Sheets
[also available in the class download]
http://cdburnerxp.se/htmlcheatsheet.pdf
[XHTML]
http://www.ilovejackdaniels.com/css_cheat_sheet.pdf
[CSS]
directory of more cheat sheets:
http://lorelle.wordpress.com/2005/10/10/html-css-php-and-more-cheat-sheets/
More Web Tools
A List Apart: weekly magazine on web design and CSS http://www.alistapart.com/stories/
Renders CSS online as you type. http://gregtaff.com/rendar2.html
Links to web tools http://www.protolize.org/.
CSS design tutorial http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html.
Excellent web page layout templates http://intensivstation.ch/en/templates/
Troubleshooting layouts http://www.positioniseverything.net/articles/onetruelayout/
Links to layout examples http://css-discuss.incutio.com/?page=CssLayouts
Three column layout examples http://css-discuss.incutio.com/?page=ThreeColumnLayouts
Layout-o-matic tool http://www.inknoise.com/experimental/layoutomatic.php
CSS template gallery [layouts] http://tools.i-use.it/details.aspx
Tutorials and reference. http://www.w3schools.com/css/default.asp
Layout examples http://www.glish.com/css/
CSS markup guides http://www.stuffandnonsense.co.uk/archives/css_mark-up_guides.html
Diagram of nested boxes http://www.stuffandnonsense.co.uk/archives/3d_css_zen_garden.html
Top ten CSS tutorialshttp://www.cameronolthuis.com/2006/04/top-10-css-tutorials/
CSS Help Pile [great list of CSS links] http://www.artypapers.com/csshelppile/
CSS Postitioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Tutorials and reference http://www.wpdfd.com/index.htm
CSS from the Ground Up: beginning tutorial+ reference http://www.wpdfd.com/editorial/basics/cssbasics3.html
General References
Guide to web design, interface, color use http://info.med.yale.edu/caim/manual/contents.html.
Lynda.com: links for web design resources http://www.lynda.com/resources/links/
Typography resorce: history, definitions, examples, links http://www.rsub.com/typographic/
IE HACKS
Fixes and hacks for IE 5 and 6
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtmlhttp://www.positioniseverything.net/explorer/dobled-margin.html
http://www.positioniseverything.net/explorer/expandingboxbug.html
http://css-discuss.incutio.com/?page=BoxModelHack
http://virtuelvis.com/archives/2004/02/css-ie-only
http://css-discuss.incutio.com/?page=BoxModelHack
http://www.thesitewizard.com/css/excludecss.shtml
http://www.informit.com/articles/printerfriendly.asp?p=170511&rl=1
Website for the XHTML/Castro book:
http://www.cookwood.html/html6ed/
CSS Cheat Sheet Widget:
http://www.apple.com/downloads/dashboard/developer/csscheatsheet.html