I put together a rather extensive list of resources in a few different important categories for a friend of mine so I thought I would help her by compiling just about everything you might need to get started as a web designer.
Unlike other “top 50…” lists, this one covers a broad range of topics, covering a range of important aspects of the web design process.
BRANDING/MARKETING
Firstly, a great list of answers from Quora for what a brand is http://www.quora.com/What-is-a-brand
A slideshow of the amazingly succinct, witty and easy-to-follow book by Marty Neumeier, “The Brand Gap” http://www.slideshare.net/coolstuff/the-brand-gap
Using game theory to increase the use of a system via “game mechanics” http://techcrunch.com/2010/08/25/scvngr-game-mechanics/
Need to convince a user to make a decision, say click a button or fill out a form? Learn how to use persuasion triggers in web design from this article. http://www.smashingmagazine.com/2010/11/29/persuasion-triggers-in-web-design/
How to write your web “copy” for maximum readability and use on your website. http://www.slideshare.net/robinana777/writing-for-maximum-readability-on-the-web
TYPOGRAPHY
Curious what a font is? Similar to whatdafont, whatfontis is an even more powerful font searching and discovery tool. http://www.whatfontis.com/
Vertical rhythm is a typographical phenomenon that when used properly, increases readability of a website. Scale and Rhythm is an “app” that helps you find the perfect vertical rhythm within a given set of font sizes, headings and styles. http://lamb.cc/typograph/
WhatTheFont: a great type discovery tool. Upload a picture, pick the letters, get that font’s name. Voila! http://new.myfonts.com/WhatTheFont/
TypeTester is a great way to test large bodies of type on a web page, for legibility, clarity and more. Very useful tool with some cool features. http://www.typetester.org/
Typedia: a Typographic Encyclopedia http://typedia.com/
An intriguing new way to find fonts. Type in a set of characters, hit go and BOOM, a mix of font styles appears in front of you, in fancy CSS3 graphics and animations. You can then find out what the font is and where to get it. http://tty.pe/
Typekit is one of those “duh, everyone knows about it” sort of things, that not everyone really knows about. It allows you to use all kinds of beautiful fonts on your site, but unlike other resources like Cufon or sIFR, it embeds them into the page and makes them completely selectable and searchable. They provide both free and paid versions. This site uses TypeKit! www.typekit.com
A great Quora article on how to pair fonts http://www.quora.com/What-are-some-best-practices-for-pairing-fonts
An amazing list of free Blackletter fonts that have been digitally recreated from historically accurate originals! http://moorstation.org/typoasis/blackletter/index.htm
THE final word on typographic forums—'nuff said. www.typophile.com
Amazing fonts and pairing guides by the world renowned Hoefler & Frere-Jones http://www.typography.com/fonts/index.php
A great selection of fonts by a great and amazing Font catalogue: FontShop! http://www.fontshop.com/fonts/
An awesome type foundry and type browsing website https://ourtype.com/#//
A very high-quality selection of completely free fonts www.fontsquirrel.com
The (so called) web’s top 500 free fonts! http://www.fonts500.com/
Another great Village type foundry http://www.vllg.com/
ANOTHER very very great type foundry, high-quality designer fonts http://www.houseind.com/
A nice list of pre-made font pairs that work well together http://www.will-harris.com/typepairs.htm
CSS/CODE
Fan of CSS? Learn every nitty gritty and amazing secret here. http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
A great, ever-expanding Quora question for CSS best practices http://www.quora.com/What-are-some-best-practices-for-CSS
40+ free high quality CSS/HTML templates (from 2010) http://www.1stwebdesigner.com/freebies/free-css-html-templates/
A bunch of great downloads from CSS-Tricks, an amazing site in its own right. Everything from sliders to accordions with PHP, CSS and Javascript stuff http://css-tricks.com/downloads/
Speed up css coding with smart stylesheets using a CSS PreProcessor http://www.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/
Tired of Internet Explorer’s poor CSS3 support? Here’s a great javascript workaround: CSS3 Selectors for IE! http://selectivizr.com/
DESIGN
The most popular and very valuable 960px grid system! Very flexible and amazingly easy to use. www.960.gs
A newly emerged and very useful grid system, that now incorporates increasingly important mobile styles, right into it! http://cssgrid.net/
Learning the grid system (above) with a great in-depth article. http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/
A bunch of W3c valid CSS/XHTML templates! Woohoo! Some of them are even for WordPress. http://www.templateworld.com/free_templates.html
A giant collection of Open Source CSS based design layouts. 2,080 designs and counting! http://www.oswd.org/
Some very nice photoshop backgrounds, templates and tutorials, in .psd format. http://www.psdgraphics.com/
A giant, and I mean giant, collection of jquery drop-down menu styles. http://apycom.com/
Simple: over 250 great rust textures http://psd.tutsplus.com/articles/web/over-250-of-the-webs-best-rust-textures/
An article on “Systematizing the graphic design process” http://www.webdesignerdepot.com/2009/10/systematizing-the-graphic-design-process/
7 Steps to a more effective and productive design process http://spyrestudios.com/7-steps-to-a-more-effective-and-productive-webdesign-process/
Are you stuck on how to approach design in a formulaic way? Here’s an article on “understanding visual hierarchy in design” http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/
UI/UX
Want to do quick prototypes of a website before designing it? Check out mockingbird. It has UI elements and a powerful and easy to use system. Prototyping is a standard and for good reason: it allows you to quickly visualize the skeleton of a site, uncovering problem areas before you spend time and money designing it. https://gomockingbird.com/mockingbird/
Simple in its goal: best practice to design the perfect html navigation bar http://woorkup.com/2010/08/09/best-practices-to-design-a-perfect-html-navigation-bar/
The Golden Ratio, or “phi” has been touted as a wonderful design principle since it was first invented in Greece. It has been shown that nature uses this ratio time and time again, and it has been employed by major designers to improve the aesthetic quality of a product. This site allows you to design a “golden ratio” for your layout, giving you the added benefit of this natural number. http://goldenratiocalculator.com/
ICONS
Want to just find an icon? Icon Finder is like Google for icons. http://www.iconfinder.com/
Default Icon is a huge resource of very clean and simple icons. You can use it for your site or for a basic mockup, to get things started. http://www.defaulticon.com/
A giant list of icons for sale http://www.iconplant.com/
GENERAL/MISC
A great site for finding deals on design stuff http://www.mightydeals.com/
Like IconFinder, VectorFinder is like Google for vectors. Very similar sites, perhaps the same people are behind them? http://www.vectorfinder.com/
Are you into animation? Sometimes these can be useful regardless, but are especially great if you do any sort of storyboarding or styleboards. They are printable templates for all kinds of storyboarding scenarios http://www.printablepaper.net/category/storyboard
A great site for mashups and api integration, for those with an entrepeneurial or experimental spirit, wanting to create useful new web apps. http://www.programmableweb.com/
A cool site for making interesting tag cloud designs http://www.tagxedo.com/app.html
Launchlist: a webapp that creates a “launch list” for your project, so you don’t forget one of the important steps to cover before launching a brand new site. Just awesome! http://lite.launchlist.net/
Another list for launching a site, but this one is AFTER you launch. Both in conjunction are create some very powerful resources! http://sixrevisions.com/website-management/things-you-should-do-immediately-after-launching-a-website/
A bit less concrete yet very useful and “higher-level” concept of organizing information, created by some of the guys behind Basecamp @ 37signals. http://37signals.com/papers/introtopatterns//index
Some repeats, but still very cool: http://www.smashingmagazine.com/2010/10/19/50-powerful-time-savers-for-designers/
Placehold.it is a site for generating blocks of images of any size, quickly and easily. If you want to do mockups, showing different sizes of content, you can quickly make a new image (yes a real image) by typing in the dimensions into the url. It even has more advanced parameters to change the color and font! http://placehold.it/#
A great resource with “9 ways to take your site from one to one million users” http://thinkvitamin.com/web-apps/9-ways-to-take-your-site-from-one-to-one-million-users/
TUTORIALS/INSPIRATION
A great site for finding very high quality photoshop tutorials http://www.photoshoplady.com/
House of Buttons is a site full of user-submitted content showcasing cool buttons, nothing else. Very awesome indeed. http://houseofbuttons.tumblr.com/
20 More useful adobe illustrator menu tips (part of the VectorTuts “round-up”) http://vector.tutsplus.com/articles/web-roundups/20-more-useful-adobe-illustrator-menu-tips/
A big ol' compilation of “greatest hits” tutorials http://www.blog.spoongraphics.co.uk/articles/blogspoongraphics-design-tutorials-greatest-hits-2010
DESIGN COMMUNITIES
Dribbble, started by famous CSS-centric web designer Dan Cederholm and software engineer Rich Thornett, is a show-and-tell for creatives using small screenshots (400x300pixels) www.dribbble.com
Forrst is another multi-syllable play-on-word communities, but also encompasses developers. It’s a great site with clean design and a very cool format to help show off code and design and to get feedback. Currently it’s membership only, which requires an application. http://forrst.com/
PHOTOGRAPHY
LightingDiagrams is a great web “app” that lets you building lighting diagrams for your next photo shoot. Lighting diagrams are great for making sure you have the right lighting scenario for a given subject, such as portraiture or product shots. http://www.lightingdiagrams.com/
DIYphotography is a great resource for DIY photography. They offer diagrams and ideas for creating lighting studios to lighting contraptions, as well as inspiration and other resources like light experiments, photography set-up and more. Tons of great ideas and cool experiments going on there, with new stuff every day! http://www.diyphotography.com