A variety of useful web design resources
Index of Video Tutorials
Web Design Magazines/Resources
Firefox Extensions for Web Desingers
Creative/Communication Brief
- Communication Brief - Class/Project Guidelines
- Creative Brief Worksheet - gotomedia (rtf)
- How to write a website creative brief
- Writing a creative brief
Information Architecture
- Information Architecture - Class/Project Guidelines
- Information Architecture: Creating Order Out of Chaos
- IA Survey
- IA and interaction design - A visual vocabulary
- Defining Information Architecture Deliverables
- Boxes and Arrows
IA Process, Sitemaps, Wireframes, and Additional Resources and Examples
- A process for website sucesss (The process at Free Range Studios with sitemaps, wireframes, content inventories)
- Redesigning the Expression Engine Site (article on design process from wireframes through final design)
- 35 Wireframing Resources
- Wireframes (blog/magazine)
- Sample Site Maps and Flow Charts
- Wireframe Examples
Usability
- Usability experts are from Mars, graphic designers are from Venus
- The Myth of Usability Testing
- Usability Review of Charity Websites
- 30 Usability Issues To Be Aware Of
Content Stategy
- The Discipline of Content Strategy
- A complete beginner's guide to content strategy
- Content Templates to the Rescue
SEO
- Google Webmaster Guidelines
- Google Search Engine Optimization Starter Guide (pdf)
- The beginners guide to SEO
- http://searchenghinewatch.com
- http://sempo.org
- http://www.highrankings.com
Design Principles
Design Showcases
- CSS Beauty
- css Zen Garden: The Beauty in CSS Design
- The Best Designs - The Best Flash and CSS Web Design Gallery
- The FWA
- Communication Arts - 2010 Interactive Annual
- AIGA Design Archives
- ColourMod Galleria
- light on dark | archive
- CSS Elite
- Best Web Gallery - Flash + CSS Gallery
- Styleboost
- Design Shack Gallery
- DOPE Awards // Flash Website Awards
Fonts and Web Font Hosting Services
- Google Web Fonts (free web fonts and font hosting)
- The League of Moveable Type (open source web fonts)
- Typekit (huge library of great fonts, varying pricing options for commercial fonts)
- Font Squirrel (free fonts for commercial use)
- Fonts.com
- Fonts Live
- Font Spring
- Web Ink
- Font Deck
- Dafont.com
Compare Fonts, Learn About Typography
- TypeTester.org
- Web Fonts Gallery
- The Web Font Awards
- Typekit Blog
- Typographica
- Thinking With Type
- CSS Font Sampler and Survey
- Font Matrix
Articles about Typography on the Web
- 10 Common Typography Mistakes (article)
- Typographic Contrast and Flow (aticle)
- Is “Good Web Typography” No Longer an Oxymoron? ( article)
- Web Typography: Educational Resources, Tools and Techniques (article)
Color Resources
Image/Stock Resources
- Comp Fight (Flickr Search)
- iStockPhoto (cheap, high quality stock)
- Stock XChng (free stock photos)
- Blue Vertigo (stock photos, fonts, and other resources)
Grids
- Grids_Are_Good (PDF)
- Five simple steps to designing grid systems — Mark Boulton
- Designing With Grid-Based Approach - Smashing Magazine
- 960 GS
- Fluid 960 Grid System | 16-column Grid
- The Grid System
- Grid Designer 2
- Gridding the 960 ~ Authentic Boredom
- Design By Grid | Home
- Grid System Generator
Size
- The 8(71) Most Common Screen Resolutions of 2010 (PDF)
- Units of Measure - Points, Pixels, Ems, and %
CSS Positioning Video Tutorials
- CSS for Positioning - Introduction
- Block and Inline Boxes
- The CSS Box Model
- Understanding Document Flow - Static, Relative, Absolute, and Fixed Positioning Techniques
- Working with AP Divs
CSS Demos
- Image Replacement Technique
- CSS Rollover Menu Using Lists (simple)
- CSS Menus Using Lists and Layout Techniques (advanced/experimental)
- CSS Rollovers - Background Position Shift/Sprite Technique
- Forcing a Scroll Bar
- Vertical and Horizontal Centering
- CSS Image Investigations - Width, Overflow, Background
CSS - Getting Started
- Mastering CSS Coding: Getting Started Article
- W3 School Tutorials (HTML & CSS)
- HTML Dog: HTML and CSS
- CSS Property List (W3)
- CSS Properties (HTML Dog)
CSS Background Images
- Background Image Specifications at the W3
- Large Backgrounds
- Full Page Backgrounds
- Stacking Order of Multiple Backgrounds
CSS Layout and PSD to CSS Resources
- PS to CSS - Sample Layout - PSD, HTML, CSS
- From Photoshop to XHTML/CSS - 13 Tutorials
- 30 + PSD to CSS/HTML Conversions
- CSS Layout Samples - Code Sucks
- CSS Layout Samples - Layout Gala
- CSS Layout Samples - Intensivstation
- CSS Layout Samples -CSS Layout Generator
CSS3
- CSS3 Please
- CSS3 Mastery (Net Tuts)
- CSS3 Tutorials
- CSS3 Info
- CSS Properties Index
- Can I Use? (Overview of browser support of HTML 5 and CSS3)
- Using CSS3: Older Browsers And Common Considerations (article)
- Push Your Web Design Into The Future With CSS3 (article)
Web Accessibility
Cross-Browser Review/Compatibility Resources
- Browser Lab from Adobe
- Browser Shots
- Multiple IE
- IE CSS Bugs You'll Get Every Time
- CSS Differences in IE 6, 7, and 8
- How to Create an IE only stylesheet
- IE6 upgrade warning
- Modernizr (CSS3 and HTML5 feature detection)
- HTML5 Shiv (compatibility for IE6-8)
jQuery
HTML5
- New HTML5 structural tags (class notes)
- HTML5 Facts and Myths (article)
- HTML5 and the Future of the Web (article)
- HTML5 Cheatsheet (pdf)
- HTML5 Boilerplate (HTML/CSS/JS template)
- Modernizr (CSS3 and HTML5 feature detection)
- HTML5 Shiv (compatibility for IE6-8)
Media Queries and the Mobile Web
- Mobile First Presentation by Luke Wroblewski (pdf)
- How To Build A Mobile Website (article)
- How To Use Media Queries for a Mobile Version of your Website (article)
- Responsive Web Design (article)
- Mobile Web Design Tips and Best Practices (article)
- HTML 5/CSS3 Media Queries in Dreamweaver (article)
- Resolution Specific Stylesheets (article)
- Hicks Design (fluid design example)
- W3C Media Queries (documentation)
- css3-mediaqueries-js/ (@media cross browser compatibility)
- jquery.mediaqueries.js (link media= cross browser compatibility)
- jQuery Mobile
Forms
Content Maagement Systems (CMSs)