11 Awesome Free Online Tools for Web Designers & Developers

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.

1. Font Squirrel

Font Squirrel takes the pain out of webfonts

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.

2. CSSmatic

CSSmatic helps you create CSS3 styles without the pain

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.

3. Kuler

Adobe's Kuler will help you develop color schemes for your projects

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.

4. IcoMoon

IcoMoon lets you create icon fonts the easy way

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.

5. Layer Styles

Layer Styles lets you setup your CSS in a Photoshop-like environment

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.

6. resizeMyBrowser

Test your responsive or liquid design easily with resizeMyBrowser

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.

7. IconFinder

Find the perfect icon with IconFinder

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.

8. CSS3 Patterns Gallery

CSS3 Patterns Gallery gives you beautiful background patterns without images

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.

9. GenerateWP

GenerateWP helps you tackle some advances WordPress functions

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.

10. OverAPI – Cheat Sheet Collection

OverAPI.com features a nice collection of web development cheat sheets

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.

11. The Toolbox

The Toolbox - web design resources

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.

5 Responses to “11 Awesome Free Online Tools for Web Designers & Developers”

  1. dev

    I will definitely have fun browsing “the toolbox” , lots of stuff available there.
    the thing I don’t like about Kuler is you can’t conveniently copy the theme colors and automatically apply them to a website layout. (but it is an adobe site so I guess you’d expect it to be for an Adobe product.)
    good list.

    • David

      Yeah, Kuler isn’t perfect, but it’s still very good. If you use swatches it’s pretty darn convenient though.

      I’m also a big fan of Color Lovers. Great color schemes there.

    • David

      Thanks Max. Have you used this? It looks quite cool.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>