PCC Art 198, Spring Semester 2008

Design for the Internet

Course Resources

Adobe Creative Suite Purchase

Adobe Student License Purchase Program
FAQS

Web Design Concepts

Designing for web publishing
http://www.adobe.com/devnet/dreamweaver/articles/designing_for_web.html
From A Dao of Web Design
by John Allsopp
http://www.alistapart.com/articles/dao/

HTML

HTML Cheat Sheet
http://www.ilovejackdaniels.com/cheat-sheets/html-cheat-sheet/
List of HTML elements
http://www.w3.org/TR/html401/index/elements.html
List of HTML attributes for elements
http://www.w3.org/TR/html401/index/attributes.html
List of HTML terms, elements, and attributes with links to details
http://www.w3.org/TR/html401/index/list.html
Semantic Structure of HTML
html-semantics.pdf

Browser and Browser Tools

Firefox Browser
http://www.mozilla.com/en-US/firefox/
Web Developer Toolbar
https://addons.mozilla.org/firefox/60/
Firebug
https://addons.mozilla.org/en-US/firefox/addon/1843

Web Standards

The Web Standards Project
http://www.webstandards.org/
From A Dao of Web Design
by John Allsopp
http://www.alistapart.com/articles/dao/
The World Wide Web Consortium (W3C)
http://www.w3.org/
NYPL Online Style Guide
http://www.nypl.org/styleguide/
explains the markup and design requirements for all Branch Libraries web projects, along with various standards and best practices and has become a standard.
Web Style Guide, 2nd edition
http://webstyleguide.com/
By Patrick Lynch and Sarah Horton covers all the basic elements of creating a Web site, with emphasis on structure and how to design for overall style and professional appeal and usefulness and has become a standard.

Dreamweaver Basics

Getting Started with Dreamweaver (Adobe Captivate Tutorial)
http://www.adobe.com/devnet/dreamweaver/articles/dwcs4_getting_started.html
Define a Dreamweaver Site
http://tv.adobe.com/#vi+f1592v1760
Adding Text and Images
http://tv.adobe.com/#vi+f1592v1756
Styling Text
http://tv.adobe.com/#vi+f1592v1756
Editing CSS in Properties Panel
http://tv.adobe.com/#vi+f1592v1770
Using Pre-built Pages Layouts In DW
http://tv.adobe.com/#vi+f1592v1757
Lynda.com Dreamweaver CS3 with CSS Essential Training
Chapter 6 Working with Background http://www.lynda.com/home/DisplayCourse.aspx?lpk2=502

CSS

Thorough reference for and explanation of CSS.
http://reference.sitepoint.com/css/
CSS Cheat sheet
http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/
Resetting all margins and padding
The discussion: Paul O'Brien
no margin for error
CSS guru, Eric Meyer's margin reset.
v1.0 | 20080212
Browser support chart
http://www.westciv.com/style_master/academy/browser_support/index.html
Using DW layouts with multiple layouts in one site
http://www.adobe.com/devnet/dreamweaver/articles/multiple_layouts.html

Tutorials, Learning Resources

W3 Schools
Find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, SQL, Database, Multimedia and WAP.
http://www.w3schools.com/
Alistapart
An ongoing blog with great articles and resources, including this one for web newbies
http://www.alistapart.com/articles/alaprimer2
Adobe DevNet Center - Dreamweaver
Tons of articles, tutorials and tips on using Dreamweaver and designing for the internet.
http://www.adobe.com/devnet/dreamweaver/
Lynda.com Online Learning
Find the best video tutorials, along with exercise files, on all the tools needed for producing multimedia.
http://www.lynda.com

Working with Images

Photoshop and Fireworks with Dreamweaver
http://www.adobe.com/devnet/dreamweaver/articles/working_with_images.html
Project VII tutorials
projectseven.com_fw_optimize
Background and background tiles tutorial
projectseven_pixel_tiles
projectseven_gradient_tiles
projectseven_gradient_tiles2
efuse.com_background-basics
pegaweb.com_seemless-backgrounds
http://www.adobe.com/devnet/dreamweaver/articles/css_bgimages.html (css background and fireworks to create image)
http://www.adobe.com/devnet/dreamweaver/articles/css_bgimages_pt2.html (positioniong background images)
Bridge workflows
http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0097 (bridge file rename, metadata)
http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0192 (using Bridge workflow)
Fireworks - Importing and exporting images
http://tv.adobe.com/#vi+f1594v1009 (importing and exporting images, Jim Babbage)

Working with Text

Lynda.com Dreamweaver CS3 with CSS Essential Training
Chapter 5 Online Typography http://www.lynda.com/home/DisplayCourse.aspx?lpk2=502
Compare Font Families across platforms
Chttp://typetester.maratz.com/
Status of font availability on platforms and operating systems
http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

Working with Color

Great tool for choosing colors using mono, complement, triad, tetrad, analogic, accented analogic color wheel schemes.
http://colorschemedesigner.com/
Another web based tool for choosing color schemes
http://createafreewebsite.net/html-color-tool.html
Color themes posted by community - great for inspiration.
http://kuler.adobe.com/
Emotions of Color (Charming Flash movie)
mariaclaudiacortes_Colors
Colors found in Nature article
http://www.boxesandarrows.com/view/natural_selections_colors_found_in_nature_and_interface_design
Five Simple Steps to designing with colour
http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_with_colour/
Lighthouse.org info on color contrast for accessibility
http://www.lighthouse.org/accessibility/effective-color-contrast/
Color contrast analyser application for your computer to assist determining colors for readability (MAC and PC versions)
http://www.paciellogroup.com/resources/contrast-analyser.html
Books on color
Color, Environment, & Human Response by Frank H. Mahnke
Designer’s Color Manual by Tom Fraser and Adam Banks
The Art of Color by Johannes Itten
Interaction of Color by Josef Albers and Nicholas Fox Weber
Color; origin, systems, uses by Harald Kuppers

Design theory

Design in Theory and Practice, by Joshua David McClurg-Genevese at Digital Web
http://www.digital-web.com/types/design_in_theory_and_practice/
Andy Rutledge: plenty of thoughts and articles on the web design profession and design prinicipals
http://www.andyrutledge.com/
Read for Visible Narratives: Understanding Visual Organization:
http://www.lukew.com/resources/articles/visible_narratives.html
Colors Found in Nature and Interface Design:
http://www.boxesandarrows.com/
The Web is Not Print:
http://www.cactusflower.org/the-web-is-not-print/
How C.R.A.P. (Contrast Repetition Alignment Proximity) is yor site design
http://www.thinkvitamin.com/features/design/how-crap-is-your-site-design

Fireworks: Prototypes and Wireframes

http://tv.adobe.com/#vi+f1498v1658 (Fluid Design, wireframing, site map, client review workflow)
http://tv.adobe.com/#vi+f1498v1660 (Fluid Design, creating click through prototypes)
http://tv.adobe.com/#vi+f1498v1661 (Fluid Design, wireframe prototype)
http://www.adobe.com/go/lrvid4239_fw (Jim Babbage)
http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0171(FW pages panel)
http://www.adobe.com/newsletters/edge/april2008/articles/article5/index.html?trackingid=CAFWB (prototype, present linked page views in browser)
http://www.adobe.com/devnet/fireworks/articles/mockup_pages.html (FW to create prototype of interactivity)
http://www.adobe.com/devnet/fireworks/articles/rapid_prototyping.html (forms, 9 scale guides, form symbols)
http://www.adobe.com/devnet/fireworks/articles/wireframing.html (wireframing in Fireworks)

Some top web design agencies

Some top web gurus

Inspiration sites

Design, storytelling or interface.
(These are not css and web standards based. They are here for inspiration. Do not copy their structure or code.)

Free Royalty Free Images, Backgrounds and Navigation Images

Pics4learning
http://pics4learning.com/
NYPL Digital Gallery
http://digitalgallery.nypl.org/nypldigital/index.cfm
flickr creative commons
http://www.flickr.com/creativecommons/
Public Domain photos
http://pdphoto.org/
bioscience image bank
http://bio.ltsn.ac.uk/imagebank/
US department of agriculture images
http://www.ars.usda.gov/is/graphics/photos/
wikipedia public domain images
http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources
Community MX
CommunityMX tips and links to free image sites
Navigation Background Images
http://e-lusion.com/design/menu/

Interface and Navigation, Organization, Information Architecture

Designing Interfaces
http://designinginterfaces.com/Introduction
Don Norman's website - father of designing intelligent devices
http://www.jnd.org/
Navigation - our visitors' travel guide
http://evolt.org/navigation/
Good Documents web site
http://www.gooddocuments.com/techniques/techniqueshome.htm
Search Results and Tags - Basis for New Approach to Navigation
http://www.maxdesign.com.au/presentation/webstock/

Interesting navigation

About Us | Site Map | Privacy Policy | Contact Us