One thing that I’ve always found incredible about the web design community is how many talented people give back to the community. Granted, for some of them it’s to boost their reputation, and for others it’s a give away to entire people into paying for the super deluxe version, but there’s also a ton of people of there creating stuff just to help out other people. It’s amazing.
Here are ten online resources that you can use, absolutely free, to help you with your next web design or development project. I use most of these on a regular basis, while others are more of fun one-offs. Either way, they’re really cool, really useful, and really free.
Webfonts are great, but getting them to work with different browsers can be quite an undertaking. Thankfully, there are tools like Font Squirrel, which does all the hard work for you. Font Squirrel has two fantastic features: a gallery of fonts you can use, and a tool for you to create your own webfont kit. If you’re interested in breaking out of the handful of “web safe” fonts, Font Squirrel should be your first resource.
This is a really cool tool to help you do four effects with CSS: gradients, border radius, drop shadow, and noise texture. CSSmatic gives you a nice, easy tool to work with, then outputs all the code – including all those pesky browser prefixes – so you can just copy and paste. I would be remiss if I didn’t say that you should know how to do these without fancy online CSS generators, but once you’ve got it down, feel free to save yourself a lot of time by using a tool like CSSmatic.
If you’re anything like me, creating color schemes is something you’ve struggled with. Thankfully, there’s a number of great resources out there to get you inspired and building awesome color schemes, and Adobe’s Kuler is one of the bet. Not only will it help you build a theme, you can also browse through other people’s work, and even export your final selections into Adobe Creative Suite.
One of the really great things to come out of webfonts is the ability to create an icon font, which can scale with a site without all the baggage of SVG. Creating them can be a lot of work, however, but IcoMoon makes it simple. It includes an impressive library of icon fonts for you to choose from, and if you can’t find what you like, you can just upload your own. It’s simple to use out of the gate, but there are also a lot of options available for the typography lovers out there.
Looking for something that works like Photoshop? Check out Layer Styles, which lets you style a box, and then outputs the CSS for you to copy directly into your stylesheet. It handles drop shadow, inner shadow, background (gradient/opacity), border, and border radius. It’s an extremely intuitive and nicely styled tool for anyone who works in Photoshop on a regular basis.
If you’re working with a responsive or liquid layout, testing is absolutely essential. While resizeMyBrowser can’t replicate smart phones and tablets, it can get you on the right path by taking one of your most valuable tools – your browser – and sizing it to the most common resolutions you’ll be working with. And if the resolution you need isn’t on the list, you can create your own preset. This is a very simple, and very useful tool.
I love icons, and use them in everything from navigation to flow charts. That’s why I love IconFinder. Not only does it have an absolutely amazing collection, but it also lets you do something I find totally invaluable: search based on the licensing criteria. So if you want something that’s free for commercial use, you just need to tick a box when you search. You can view icons on different backgrounds, download them in different sizes and file types, and even check out related icons based on collection or similarity. I can’t recommend this web design resource highly enough.
While I can’t say I use CSS3 Patterns Gallery regularly, it’s a really cool idea. It uses some fancy CSS to generate pretty impressive background textures without using a single image. The code is surprisingly tiny. The only caveat here is that browser support is a bit spotty, so do a lot of testing and be prepared to use this as a progressive enhancement.
GenerateWP has a bunch of tools that automate some of the more mindless tasks you’ll run into with WordPress theme and plugin development. They cover everything from Custom Taxonomies (I just wrote about adding custom taxonomies, if you’re curious about learning the long way) to a Shortcode Generator. This is a relatively new one, but they’ve added a few new generators since launching, so hopefully it will continue to be developed as WordPress grows.
If you’re ever gotten stuck trying to remember a selector, or a rule for something, then you know how valuable cheat sheets can be. OverAPI.com has a pretty impressive collection of them, ranging from HTML to Ruby to Regular Expressions. They’re quick, searchable, and even print pretty well.
Finally, we get The Toolbox, which is a smorgasbord of awesome web design and development tools, apps, and widgets. They’ve got a ton of great links here, and everything is tagged and searchable, so if you’re stuck on a project and need some help, The Toolbox should be one of your first stops. It’s also constantly being updated, so check back frequently.
Well, those are my
eight ten eleven apps (I just couldn’t help myself from adding more as I wrote this; there’s too much great stuff out there), but I guarantee there are loads of other great resources out there. If you know of one that I neglected to mention here, don’t be shy about letting me know.