This is my attempt at throwing together a list of some helpful online resources for people looking to mess around with web design. While the learning curve can be a little steep at first, basic web design really isn’t that hard to get a hold of.
Now these are just a handful of examples of the seemingly endless list of online resources available, which is as vast as it is varied. When all else fails, Google!
Inspiration
Sooner or later we all find ourselves stuck in a design vacuum, not really sure how to even start our next design or what we want to try out. The great thing about inspiration is that it can come from many places and in many forms.
- colourLOVERS
A very “artsy” website dedicated to the power and impact of colors and palettes in design. It’s weird, but sometimes even just a certain mix of colors is enough to inspire a great design. This site can become a bit addictive too. - CSS Based
This is a huge database of CSS-based designs that offer a glimpse of how brilliant and amazing web design can be. - CSS Remix
Another huge database of great web designs.
Reference
I’m one of those people that think they can get by on intuition and toss aside the directions. Often enough this leaves me stumbling blindly through my work and a bit confused, which is never a good thing. Having some touchstones or references to work from can save time and reduce inevitable frustration.
- XHTML
W3Schools is a great place to turn too with introductions, tutorials and examples. - CSS
Very nice overview of CSS and a perfect starting point for learning CSS. - CSSplay
Stu Nichols is one of the godfathers of CSS and his site provides examples of how powerful and flexible CSS really is. - Open Design Community
Offering a huge collection of open source web templates, Open Design is also a terrific place to turn to for advice and direction. The community within the forum is made up of designers and developers with varying levels of experience who are always willing to lend a hand and offer encouragement. The templates also offer the chance to “look over the shoulder” of other designers and see how they code. - A List Apart
Awesome articles and tutorials related to the most current standards and techniques.
Graphic Design/Typography
Not all web designs need to rely heavily on images or graphics but in most cases it doesn’t hurt. Creating either small, subtle visual elements or the most artistic design possible means you’ll need to get your hands on some image editing software at some point.
- Adobe Photoshop
OK, I know you’re looking at $649(US) to get your hands on this program, but if you’re really serious about doing web design for any length of time, you should at least consider investing in this one. Remember that older versions are available so be sure to check around. I would recommend sticking to version 7.0 or later. - GIMP
If you’re not ready or willing to lay down fat cash for Adobe Photoshop, the next best option would be GIMP. An open source image manipulation program, it’s able to hold it’s own in features with the industry standard Photoshop. Don’t let the GNU label sway you because this is a serious image editor! - Everystockphoto
This is an expansive collection of free stock photography/images that you can download from and use as part of your web design and possibly even find some inspiration too. - Dafont
Free fonts and dingbats - Steel Dolphin Color Scheme Tool
It can be easy to overlook the color palette of your design, which in all honesty can play an important roll in the overall feel of your design. This tool gives you the ability to select colors and determines the best matches for it.
Coding
This is the nitty-gritty right here; where your inner geek is allowed to shine. Remember open source, because it’s your friend and it means not having to shell out any money for HTML/XHTML editing software. That is unless you want to, but before you do, it could be worth it to at least kick the tires on some really great open source editors first.
- HTML Kit
A full-featured editor with some top drawer editing tools. - Nvu
Currently one of the front runners in Open Source editors that is comparable to Dreamweaver. - PSPad
This is a solid editor with some great features and perfect for anyone who really wants to get into the code itself and understand it.
Hosting
We all need a place to call home and your web design is no different. There was a time when web hosting was a pretty big deal and technically daunting for a lot of people (myself included). But thankfully this is no longer the case and while it helps to know what everything means when it comes to hosting, it’s by no means necessary because there are plenty of hosting providers that make the process relatively painless and inexpensive.
- Ez-DomainNameRegistration
I’ll be the first to admit that the site looks a bit sketchy, but I’ve hosted all of my sites from these guys for at least five years now and I have yet to find any real complaints or concerns. They’ve had reliable support and their prices and features are comparable to many other providers.
Validation and Testing
You’re done slinging code and ready to show the world your creation? Nice. But before you do that, make sure all of the T’s are crossed and the I’s dotted. It’s never a waste of time to double or even triple check your work to make sure things are copasetic.
- W3C Markup Validation
It’s a really good idea to make sure your markup is well written and that there aren’t any loose tags rolling around that might cause problems with your design not working the way it should. - W3C CSS Validation
Just like your markup, validating the CSS should be at the top of the list when it comes to making sure your design is truly finished. Also, by running your code through validation, it helps to point out areas where you might be making repeated mistakes so that you know what to look for in the future. - WebXact - Accessibility (Section 508), Quality and Privacy Check
As web designers, we should be aware of not only how our designs look across multiple browsers, but also how they are being presented to people with disabilities. By law, if you’re running a commercial website, it has to be Section 508 compliant, but it’s also a good idea to make sure non-commercial sites are compliant as well. - Browsershots
Unless you’re lucky enough to have access to multiple operating systems and multiple versions of specific browsers in order to road test your design, you might find this service useful.
