In my bookmarks bar, I’ve got a folder named “Tools” where I put all the useful widgets and sites I come across.

The list was getting quite long so I decided to clean it up a little, and I thought it would be interesting to share the result. Without further ado, here are the sites, bookmarklets, and apps I use regularly in my design work.

---

Readability

Readability Read Now is a nifty bookmarklet that extracts the content of a page and displays it in a nice, readable layout. I don’t use it as much now that I send most of the content I want to read to Instapaper on my iPad, but it still comes in handy from time to time.

---

Space Ipsum

Space Ipsum is a space-themed Lorem Ipsum generator. Because space is cool, and latin is not.

---

Gridr Buildrrr

Another basic tool that every designer will eventually need, Gridr Buildrrr is a simple (you guessed it) grid builder.

---

Ultimate CSS Gradient Generator

When Alex Sirota designed the Ultimate CSS Gradient Generator he was nice enough to use the same gradient building UI as Photoshop, so it’s one less interface to figure out.

---

CloudApp

CloudApp has become an integral part of my workflow. Its basic use is uploading a file by dropping it on the CloudApp menubar icon, but the real gem is the Photoshop integration. In one keypress, you can take a screenshot of the currently open document and upload it to the cloud. Very useful to share what you’re working on!

---

DropMocks

When I need to share a single file with someone, I use CloudApp. But when I need a quick way to share a gallery, nothing beats DropMocks. Just drag and drop your images, copy the URL, and you’re done!

---

MarkUp

OK, I must confess I haven’t actually used MarkUp much, but it’s such a cool tool that I wanted to feature it here. It lets you draw on any website, and then share the result with a unique URL!

---

ProCSSor

Whether you’re one of those weirdos who like to debate over the various merits of different styles of CSS coding, or you just need to clean up a CSS file, ProCSSor will make your life easier. It lets you easily reformat CSS files, plus it has a beautiful UI.

---

CSS3 Generator

Look, I trust you when you tell me vendor prefixes are important. But don’t ask me to type them out myself. The straightforward CSS3 Generator will take care of the grunt work for you.

---

Layer Styles

Similar to the CSS3 Generator, but Layer Styles uses the exact same UI as Photoshop. Can be pretty handy when you’re looking for the quickest way to convert a PSD mockup in HTML/CSS code.

---

CopyPasteCharacter

Out of all the tools in this list, CopyPasteCharacter is probably the one I use the most frequently. It’s drop dead simple: you have a grid of unicode special characters (like arrows, smileys, etc.), and you just click one to copy it to the clipboard.

---

BrowserUI

BrowserUI is a set of Photoshop actions that add a browser frame around any image.

---

Type-a-file

Listen up, people: it’s (almost) 2012, and there’s simply no excuse to have ugly typography on your site anymore. Especially with a great site like Type-a-file, which gives you 8 pre-made type styles to use on your site.

---

FontFriend

“I like that site, but I wonder what it’d look like with a different font…?” If you’ve ever thought this, FontFriend is your, umm, friend. This bookmarklet lets you preview any site with any one of the Google Webfonts.

But wait, there’s more! Drag and drop any font file from your desktop to the bookmarklet’s UI, and it will actually use that font on the current page! No, I don’t know how it works either. My guess: magic.

---

Unused CSS

No matter how careful you are when coding your stylesheets, you’re bound to introduce some unnecessary elements. Unused CSS lets you know which CSS rules you can safely remove.

After running it on this site, it seems like 45% of my rules are useless. So either there’s something wrong with that tool, or I’m a really, really bad CSS coder. I’ll let you decide which one it is…

---

Cubic-Bezier

I haven’t actually used Cubic-Bezier yet in a real project, but I have to include it because it just looks so cool.

---

Dabblet

Lea Verou, the CSS master behind Cubic-Bezier, recently came out with Dabblet. It’s a very simple UI to write, preview, and share snippets of HTML and CSS.

---

SymbolAssist

So CopyPasteCharacter wasn’t enough for you, and you’re back for a double dose of Unicode goodness? SymbolAssist got you covered, with 30 different arrows, and yes, that includes the ☞ pointing-finger one.

---

WhatFont

Extra! Extra! Designer’s secrets exposed! Font selection revealed!

That’s the headline that the Design Times would print if such a publication actually existed, because that’s what WhatFont does. Hover over any section of a page, and this bookmarklet will tell you what font is being used there.

---

IdentiFont

Alternatively, if WhatFont isn’t enough, IdentiFont got your back. It’s a font search engine, and it’s got a very useful “find similar fonts” feature.

---

WhatTheFont

Last but not least, WhatTheFont is another font identification tool, and this one works very well. Upload an image, identify the letters, and it will do the rest. It’s even got an iPhone app so you can identify fonts on the go (and impress your date!).

---

NoisePNG

You can do a lot with CSS3, but one thing you can’t do (yet) is bring the noise. NoisePNG does only one thing, but it does it well, providing unlimited quantities of noise for your designs.

---

Patternify

I saved the best for last: Patternify is a tool that lets you create pixel patterns in the browser, and export them as base64 code that you can include straight in your CSS!

And it also happens to be my very own modest contribution to the webdesign ecosystem

---

There you have it. 23 tools that will make your life easier, or at least waste half an hour of your day.

But I hear this Internet thing has gotten pretty big lately, so I wouldn’t be surprised if I failed to mention one or two sites… Feel free to let me know in the comments if I missed your favorite tool!