Web Design Resources

Below you can find some of the websites, tutorials and tools I recommend for my web design students.

Grid Design

---

• 5 Simple Steps To Designing With a Grid
• TheGridSystem.org
• 960 Grid System
• Learn about the grid-layout in web design
• Grid-based design: column techniques
• WIRIFY: turn any web page into a wireframe in one click

Web Typography

---

• The Google Font API helps you add web fonts to any web page.
• Google Font Directory gives developers a choice of high-quality fonts when using the Font API.
• A Guide to Google Font API
• I Love Typography
• 6 Ways To Improve Your Web Typography
• TypeKit
• 10 Principles For Readable Web Typography
• Expressive Web Typography
• Tools for Web Typography
• The Essential Guide to @font-face

Color Tools

---

• kuler.adobe.com
• www.colourlovers.com/palettes
• Tools for Evaluating Your Design’s Colors

Useful Articles

---

• Non Profit Website Design: Examples and Best Practices
• Copyright on the Web
• 10 Big Myths About Copyright
• Web Design Trends 01
• Web Design Trends 02
• Web Design Trends 03
• Web Backgrounds Trends

Useful Tutorials

---

• Adobe Design Center

Podcasts and Video Tutorials

---

• tv.adobe.com
• www.lynda.com
• thinkvitamin.com
• doctype.tv

Web 2.0:

• the-visual-design-of-web-20
• web-20-tutorials
• Web icons in Web 2.0

Photoshop special effects:

• 70-beauty-retouching-photoshop-tutorials
• Rainbows, Glows and Light Effects
• Creating_a_page_curl_in_photoshop
• Photography Techniques
• 50-stunning-photoshop-text-effect-tutorials

Tutorials on how to create patterns:

• Ps Hero Complex patterns pt1
• Complex patterns pt2
• Design Sponge
• Digital Arts
• Tutorials 2.0

Icons:

• iPhone icon tutorial
• Web icons in Web 2.0
• Web icon tutorial
• 40-tutorials-for-creating-highly-detailed-icon-designs
• Icon Design: Avoiding Common Mistakes
• Icon Design: Basic principles explained

Website Backgrounds:

• Website Backgrounds Trends& Tutorials
• Photoshop Tutorials for Textures and Backgrounds
• Examples-of-big-backgrounds-in-web-design

Photoshop Brushes

---

• Blendfu
• BrushKing
• DeviantArt: Photoshop Brushes
• Brusheezy
• PS Brushes.net
• Obsidian Dawn
• QBrushes.com
• myPhotoshopBrushes.com
• FBrushes
• Designers brush
• Gfxfever.com:Photoshop Brushes
• In obscuro: Brushes
• GetBrushes
• Adobe – Photoshop Brushes
• 50-free-photoshop-brush-sets-for-modern-design-trends
• 20-beautiful-vintage-photoshop-brush-sets

Inspiration

---

• http://www.commarts.com/Webpicks.aspx
• http://www.digitalthread.com/webdesign
• http://www.webdesignermag.co.uk/website_awards.html
• http://www.bestcssgallery.com
• http://www.beautifully-webdesign.net
• http://www.cssbeauty.com
• http://www.thefwa.com
• Showcase of Restaurant Websites
• Showcase of Restaurant Websites 2

E-commerce Inspiration

---

• http://www.nike.com
• http://www.miniusa.com
• http://www.converse.com
• http://www.tazo.com
• http://www.threadless.com
• http://ippolita.com/catalog/index.php
• http://www.freddyandma.com
• http://www.axio-usa.com
• http://www.oneill.com

Facebook Fan Pages Design

---

• Facebook Developers
• fbml-templates.net
• Hyperarts
• All Facebook
• How to Develop a Facebook Page That Attracts Millions of Fans
• How to Use Facebook for Business and Marketing
• How to Create a Facebook FBML Template
• Google Analytics for Facebook Fan Pages
• How To: Build a Facebook Landing Page for Your Business
• Smashing Magazine Showcase of Facebook Pages

Project management sites:

---

• http://www.freshbooks.com
• http://www.basecamphq.com
• http://www.billingsapp.com
• http://www.clockingit.com
• http://www.getharvest.com
• http://www.iggsoftware.com/ibiz
• http://bubbl.us

Submit your web designs

---

• 30 places to submit your web designs