Web Workshop
From DesignWiki
Agenda
Web Development Process
Contents |
Web Tools
Browser Tools
Software
- Dreamweaver, your new best friend
- CyberDuck a nice lightweight, stable FTP client
- TextWrangler text editor for quick touch ups to site content
- Graphviz automated graphing software, good for quick and dirty sitemaps
- Omnigraffle more intense graphing software, good for client presentation sitemaps
Tutorial Sites
CSS/HTML Help sites
- Hexadecimal Color Chart Codes
- CSS Beginner Tool at HTMLDOG.COM
- Creative Journal CSS
- CSS Zen garden design
- w3schools
- webmonkey
Web Design
Notes from Session 5
Notes from session 4
External Tutorial: Slicing Images in Photoshop CS3
Resources
- CSS Zen Garden
- Firebug (for viewing styling of page segments)
- Save Complete (for saving the complete contents of a web page to see how the photoshop file was sliced)
Notes from session 3
Tutorial: Creating an Imagemap in DreamWeaver
notes from session 2
External Tutorial: Uploading files with Cyberduck
Article on creating and using paper prototypes for testing
notes, files and books from session 1
Web Redesign 2.0 Kelly Goto
Designing Interfaces Jenifer Tidwell
Predesign report and analysis of site architecture
Typical Page Design Patterns
- http://www.kirupa.com/ http://www.apple.com/ and http://www.aigacolorado.org/ use a 3-column layout with header and footer
- http://www.mcadenver.org/ and http://aiga.org/ use a 2-column hybrid layout with enlarged header and footer
- http://www.bmwusa.com/ uses a letterbox layout over 5 columns Mercedes-Benz also uses a letterbox, as do most car manufacturers
- http://www.nytimes.com/ 5 main columns over a 21 (yes, a 21) column grid
Typical Interaction Design Patterns
top tabs with left-hand nav
- http://www.coloradowatertrust.org/
- http://www.yahoo.com/
- http://www.macys.com/
- http://www.landsend.com/
- Pottery Barn
- http://www.target.com/
breadcrumbs
- Crate and Barrel
- iTunes
