Design

Introduction

The following is a collection of design tips, tricks, resources, etc.

Best Practices

• User-Friendly SEO
• 10 Excellent SEO Tips That Will Improve Your Web Design
• 10 Basic SEO Tips Every Web Developer Should Follow
• 25-point Website Usability Checklist
• 10 Useful Usability Findings and Guidelines
• 15 Common Mistakes in E-Commerce Design
• Drop-Down Menus
• Breadcrumbs
• “About me” Pages
• 404 Error Pages
• Module Tabs
• Social Network Design
• Web Form Validation
• Designing Social Interfaces: Overview and Practical Techniques
• Progress Trackers in Web Design: Examples and Best Practices
• Email Newsletter Design: Guidelines And Examples
• The Definitive Guide To Styling Web Links

Tips and Tricks

• 2009 Web Design Trends and How-To’s
• Why Programmers Suck at CSS Design.
• 10 Steps To The Perfect Portfolio Website
• Showcase Of Well-Designed Tabbed Navigation
• Design To Sell: 8 Useful Tips To Help Your Website Convert
• Best Web Gallery - A showcase of some excellently designed web sites.
• Table Layouts vs. Div Layouts: From Hell to… Hell?
• 8 Layout Solutions To Improve Your Designs
• Beautiful And Creative Logo Designs For Your Inspiration
• 30 Brilliant Typefaces For Corporate Design
• 5 Simple Tricks To Bring Light and Shadow Into Your Designs
• How To Use Help Elements To Improve Your Designs
• The Art of Building a Successful Social Site - Discusses and dissects the mechanics behind StackOverflow.
• 12 Tips For Designing an Excellent Checkout Process
• 50 Totally Free Lessons in Graphic Design Theory
• Beautiful High-Quality Free Fonts For Your Designs
• 20 New High Quality Free Fonts
• 40+ Helpful Resources On User Interface Design Patterns
• 10 Ways To Make Your Site Accessible Using Web Standards
• How To Improve Your Branding With Your Content
• 10 UI Design Patterns You Should Be Paying Attention To
• 45 Incredibly Useful Web Design Checklists and Questionnaires
• Clever PNG Optimization Techniques
• PNG Optimization Guide: More Clever Techniques
• Designing CSS Buttons: Techniques and Resources
• Designing “Read More” And “Continue Reading” Links
• Vital Tips For Effective Logo Design
• 35 Excellent Wireframing Resources
• 25 User Experience Videos That Are Worth Your Time
• 30 Beautifully Dark Websites – Part IV
• Design and Build Email Newsletters Without Losing Your Mind (and Soul)
• 35 Beautiful E-Commerce Websites
• Color Theory for Designers, Part 1: The Meaning of Color
• Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
• Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II
• Designers These Days…
• Web Design Checklist - Contains a breakdown of HTML5 and CSS3 supported features across all browsers.

Foundations

• Bootstrap - The system used by Twitter. Resources: Understanding Your Options, Bootstrap on Rails, How to Customize, Stepping out with Twitter Bootstrap, jQuery UI Bootstrap.
• Foundation - The system used by ZURB.
• Golden Grid System - An elastic grid system.

E-Commerce

• Fundamental Guidelines Of E-Commerce Checkout Design
• E-Commerce Copywriting: The Guide to Selling More
• Tips for Creating an Excellent E-Commerce Website

Artists

• CampSteve - I discovered Steve while at the Mountain.rb conference. Check out his galleries.
• Struckture - A high school friend who is also a designer and builder of PC machines.

Themes

• Magento - A free e-commerce theme.

Icons

• Icon Finder - Find well designed icons.
• Icons Etc. - Royalty free and attractive icons for your web site. There are many styles to choose from with many different categories for each style.
• 50 Fresh Useful Icon Sets For Your Next Design
• RSS Icon Set
• Birdies: Cute Free Twitter Icons For Your Blog
• All the Small Icons You’ll Ever Need
• Crystal Clear - A collection of symbolic graphics.
• Simplicio - Another set of free icons.
• Practika - A free set of 11 fairly useful icons in various sizes.
• Flavour - A set of some 450+ icons that are free to use.
• Tools Icons, Horror Icons and Twitter Icons
• The Graphs: A Free Icon Set
• Finance and Applications: A Free Icon Set
• Calendar Icons - 12 icons that can easily be used to represent months of the year.
• Project Icons
• Quartz Icon Set
• Ruby Icons
• Credit Cards
• Glyphish - “Designed and carefully optimized for use on toolbars and tab bars in iPhone apps, they’re also perfect for Android apps, websites, t-shirts, tattoos and more.”
• Standard - A set of standard, grey, icons.
• Token - Stylish, black, icons for general symbols and uses.
• Alcohol - 20 32×32 modern looking general use icons.
• Vector Kitchen - Several cartoonish kitchen related icons.
• Woo Function - 178 operating system related icons.
• Shopping Bag - A series of icon variations of a shopping bag.
• Sixpack Status Icons - A set of icons related to statuses.
• Yummy - A set of food related icons.
• Elegant Icon Pack
• Medical - A set of 60 medical-related icons.
• Starfish E-Commerce Icons - 32 icons.

Tools

• Web Design Resources - A complete index of tools to be considered for your development. A good place to start for building your own toolkit.
• Kuler - A handy tool to have for those that need a little help when it comes to picking color schemes in web design.
• Color Scheme Designer - Another tool for picking color palettes.
• Colour Lovers - Another web site for picking color palettes.
• 960 Gridder - A layout tool for your site.
• Load Icon Generator - Choose from several different animated icons and customize them for own purposes. Great for lengthy AJAX processing indicators.
• Connect-a-Sketch - A tool for building out quick sketches and connecting them in dynamic ways.
• Font Dragr - Drag and drop fonts into this interface to get a quick glimpse of how they act and look.

Testing

• DebugBar (a.k.a. IE Tester) - An IE plug-in that allows you to debug JavaScript, view the DOM, etc. It also allows you to test various versions of IE from one instance of IE.

Services

• 99 Designs - Pay a modest prices for design work on logos, themes, business cards, etc.

Resources

• Wikipedia Commons - A general source of freely available media. Make sure to read the disclaimer though.
• Yahoo! Stenci Kit - As the name implies, a collection of stencils to help get you jump started in your design.
• ThemeForest - A collection of web themes in PSD, HTML, WordPress, etc. format.
• Soundsnap - A collection of sound effects.
• FlashDen - A resource for buying and selling flash components as well as audio tracks, fonts, and much more.
• Flipping Book - A nice flash-based page flip widget that can be tied into any web app.
• iStockphoto - A treasure trove of media that can be bought and sold. When buying the media for use in other uses, it comes royalty free.
• DelliStore: A Free Professional CSS/XHTML/PSD-Template