10 Web Apps for Web Design

If someone asked you what tools you commonly use for constructing web designs, you would probably mention the obvious: your favorite text editor and graphics program, the web inspector in your preferred browser, things like that. But what about those nifty web apps that, though not necessarily an essential, are majorly helpful for small parts of your workflow?

Here are a few useful web apps that help you do things like choose a color palette or add vendor prefixes to your CSS.

Sprite Cow

Sprite Cow makes it easy to get the background-position offset and element dimensions for an item in your CSS sprite. It’s so much easier than trying to figure it out in Photoshop. All you have to do in most cases is click the part of the sprite you want to use and copy the coordinates into your CSS. Most of the time, it does an excellent job at selecting the relevant pixels.

Prefixr

Vendor prefixes enable browser to implement experimental versions of new CSS properties without causing compatibility issues down the line, once they become standardizes. Unfortunately, while current versions of some browsers (like Firefox) may understand border-radius and box-shadow, or whatever CSS3 property you’re trying to use, older versions require the vendor prefix still. That’s where Prefixr comes in. Paste your CSS in, and it will automatically ensure that your styles work in as many browsers as possible. It even handles the weird filter syntax that older versions of IE use. There are also numerous plugins to integrate it with your favorite text editor.

Kuler

Adobe’s Kuler is a tool for creating and sharing color palettes. Its editor lets you choose between Analogous, Triad, Complementary, Compond, Shades and free-form modes.

ColourLovers

ColourLovers works off a similar concept to that of Kuler. It’s all about creating, discovering and saving color palettes. ColourLovers has the advantage of a nice API, and integration with the ColorSchemer app for iOS.

JSFiddle

Need to brainstorm a bit of CSS or JavaScript? Or maybe you want to share something clever you did? JSFiddle is an interactive pastebin site that shows a live preview of any modifications you make, and it keeps multiple revisions as you save your changes.

Noise Texture Generator

Noise Texture Generator does what it says on the box: it makes textured images alike to what you would get using the Noise filter in Photoshop, but with an instant preview.

What The Font?

What The Font? attempts to use its powerful magic to identify the font used in an image you upload. It gives you a list of matches that may or may not be what you’re looking for, but are usually pretty close if not the exact font.

AjaxLoad

Need a throbber graphic for part of your website? AjaxLoad has a ton of options, and it can tailor them to fit your color scheme. They’re all animated GIFs, of course, since support for animated PNG images never took off.

Stripe Generator

Stripe Generator is along similar lines as Noise Generator. It’s an easy way to make stripey background patterns.

ConvertICO

Favicons are usually a pain to make, since Photoshop and most other popular image editors won’t export to the ICO container format by default. ConvertICO is a simple tool that accepts an upload of a PNG graphic and quickly converts it to ICO.

  • http://www.problogdesign.com Michael Martin

    Very nice roundup Matt, I love how many of these one-function websites that are popping up lately. Some of them are just becoming invaluable!

    Prefixr looks very cool and I’ll have to give that a go. I use Ajax Load all the time, and starting to love JS Fiddle (Haven’t used it much myself yet, just experimenting with other people’s code on it!)

    For the favicon generator, I thought my favorite site for that had redesigned! If you add an N to the web address of your one, you get http://converticon.com/ which I always use. I guess that makes remembering the addresses easier, either one will do the trick :D

    • http://www.webmaster-source.com Matt

      Prefixr is good, but it can choke on gradients, sometimes. I had to redo some of the linear gradient syntax I had, because Prefixr didn’t get the WebKit version right. (I primarily use Firefox.) It seems to work fine for everything else, though, and the text editor plugins are very nice. Especially the Sublime Text one, which lets you process a selection instead of the entire document.

      And Sprite Cow is just indispensable.

  • jay

    Would have loved to see some font generators also.Anyway ,thanks for sharing.

  • http://adsbuz.com/ kath

    nice stuff above all i like koler the most just looks with more fun less work