Here are 11 web design resources that have been very helpful to me over the past few years and hopefully you’ll get some use out of them as well!
1. Font Squirrel
This is a terrific website not only for free fonts, but for converting fonts. Different font types work on different platforms, so it’s always best to include many different types in your @font-face CSS3. For example, if you have a font in TTF format, you can upload it to the @font-face generator and Font Squirrel will give you a file to download that includes the font in TTF, EOT Lite, EOT Compressed, WOFF, SVG, and SVGZ! Also included will be a CSS file with the proper @font-face syntax!
2. Ultimate CSS Gradient Generator
Gradients in CSS have some annoying syntax. I often find it easier to use this generator than writing all the syntax myself. There is a convenient colour picker and easy-to-use gradient tool. There are also some nice pre-set gradients for you to play with!
3. dafont.com
dafont.com is my go-to resource for new font downloads! I have probably downloaded hundreds of fonts from this site. There is a very large variety and I personally find it fun to just relax and browse through new fonts or top fonts.
4. Iconfinder
This is an excellent website for all your icon needs! From social media icons of many different styles, to business icons, and much more! Better yet.. they’re all free!
5. deviantART
deviantART has so many uses that I will be hard pressed to name them all here. There are plenty of ways to find inspiration on deviantART, but more importantly, they have a great resources section! Here you will find application resources (such as Photoshop brushes), fonts, stock images, textures, tutorials, and even complete PSD files!
6. 960 Grid System
This is something I should get in the habit of using more myself. The 960 Grid System provides web designers with commonly used dimensions for websites. There are design templates you can work off of to ensure that your columns are all lined up with dimensions that make sense!
7. kuler
Feeling uninspired? Maybe what you need to kickstart your design is an awesome colour scheme! kuler can help! Adobe’s service allows you to browse through other peoples’ colour schemes or make your own using a variety of setups and options. You can start with one colour as your base and then choose a “rule” for what your other colours will be based on. Examples include complementary colours, monochromatic, triad, and more!
8. Notepad++
My favourite source code editor! It has great syntax highlighting, is easy to use, and has plenty of available features. Better yet… it’s free! Unfortunately it’s Windows only. If you use a Mac, two alternatives are Coda and TextWrangler. Coda is not free but has a lot of awesome features including one-click publishing, Safari previews, visual CSS editing, etc. TextWrangler is free but it’s much simpler. Sometimes simple is what you prefer and it gets the job done!
9. CG Textures
Sometimes you really just need a nice texture for your layout. CG Textures is definitely the place to turn to. You may only download a certain amount of images in a 24 hour period (15MB worth), but it is such a valuable resource and if you download a bit every day for a week, you’ll quickly stock up on some excellent textures!
Note that you may not use textures from this website for website/theme templates. You can only use them for a unique website – not one you plan to sell/give away to multiple people.
10. W3Schools
Whether you’re new to web design or are pretty experienced, W3Schools is a great resource for all your coding needs. It can help you learn the basics or provide you with a quick reference to look up syntax if you have a blonde moment (happens to me all the time). If you’re already great with HTML and CSS maybe you should check out the jQuery section? Or maybe PHP? There’s always something to learn here!
11. W3C Markup Validation
This is the website to check your code for errors. It will inform you of unclosed tags, incorrect syntax, and any forms of bad practice. Not only is it helpful for you, but it’s also a way for you to show your clients or other web designers that you have a validated website and you know what you’re doing!
What are your favourites?
Do you have any go-to resources that aren’t on this list? Share them!
Where does font loading fall wiithn actual web standards? Also, is it reasonable to assume that font loading will, in the very least, never get accepted by IE since there would be obvious concerns about font copyrights/licensing? How is the browser loading the font file? I assume it’s being stored somehow, which I would also assume would make most font creators reluctant to have their fonts used in public sites.
W3Schools, deviantART and Iconfinder helps me alot on my projects 🙂