Web Workshop

From DesignWiki

Agenda
Web Development Process

Contents 1 Web Tools 1.1 Browser Tools 1.2 Software 2 Tutorial Sites 2.1 CSS/HTML Help sites 2.2 Web Design 3 Notes from Session 5 4 Notes from session 4 5 Notes from session 3 6 notes from session 2 7 notes, files and books from session 1 8 Typical Page Design Patterns 9 Typical Interaction Design Patterns 9.1 top tabs with left-hand nav 9.2 breadcrumbs

[edit] Web Tools

[edit] Browser Tools

• Firefox
• Firebug
• Web Developer

[edit] 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

[edit] Tutorial Sites

[edit] CSS/HTML Help sites

• Hexadecimal Color Chart Codes
• CSS Beginner Tool at HTMLDOG.COM
• Creative Journal CSS
• CSS Zen garden design
• w3schools
• webmonkey

[edit] Web Design

• boxes and arrows
• useit

[edit] Notes from Session 5

[edit] 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)

[edit] Notes from session 3

Tutorial: Creating an Imagemap in DreamWeaver

[edit] notes from session 2

External Tutorial: Uploading files with Cyberduck

Article on creating and using paper prototypes for testing

[edit] notes, files and books from session 1

Web Redesign 2.0 Kelly Goto

Designing Interfaces Jenifer Tidwell

Predesign report and analysis of site architecture

[edit] 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

[edit] Typical Interaction Design Patterns

[edit] 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/

[edit] breadcrumbs

• Crate and Barrel
• iTunes