8 Useful Online Tools for Web Designers and Developers

By / Feb 4, 2011 / Tools

Finding stuff to make your life easier is one of our passions. Whether it be freebies like fonts and icons, or tools to help you do your job, we search and find them so you can focus on the important things. For this post, we’ve found some online tools that are useful for design and development tasks, and the best part is…they’re all free to use.

0 to 255

web development tools

0 to 255 is a simple tool that helps web designers find variations of any color.

Spritebox

web development tools

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use.

jsFiddle

web development tools

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.

Frame Box

web development tools

Frame Box is an easy to use online tool for creating and sharing wireframes.

CSS3 Generator

web development tools

CSS3 Generator is a simple tool that creates some cross-browser CSS3 code based on whatever values you want.

ProCSSor

web development tools

ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

Super Conversion Button

web development tools

This little tool let’s you easily create a beautiful, effective call-to-action button in seconds.

wordmark.it

web development tools

Wordmark.it is a tool that lets you quickly preview how a wordmark looks with the fonts installed on your computer before setting out to find new ones.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

  • http://www.dtx.in/ DTX Studios

    Nice collection of tools. Its really helpful.

  • http://webdesignfinders.net/ Andrey Korobitsin

    Frame Box – wow!
    Seems like it will be a good alternative to the Axure I currently use.
    Thank you for useful resources.

  • http://www.chokilala.com chokilala

    ProCSSor’s hyperlink leads to 0to255. Btw, nice collections :)

    • http://henryjones.us Henry Jones

      Fixed. Thanks.

  • http://kaushikpanchal.com Kaushik Panchal

    Thank you so much for the post, I was stuck deciding typeface for an Identity project and Wordmark.it just helped me.

    Thanks again :-)

  • http://iamautocomplete.com Angelee

    thanks for the Css3 Generator, definitely needs it this time..

  • http://iamautocomplete.com Angelee

    But, I’m looking for the transparency.. Ain’t seeing it in the generator, but I’ll keep on looking for other sources. Thanks for sharing these, the first one is also interesting.

  • http://www.leemarriott.co.uk Lee Marriott

    I’m just about to start learning javascript and the JSFiddle tool looks ideal for this. Thanks for this great post.

  • Sruthish

    Really useful and awesome…

  • http://mv-designs.eu Martin V

    Really great collection, wordmark.it and spritebox are just awesome.. instant bookmarks!

  • http://tn-photographics.com Toby

    Thank you for sharing, great collection!

  • http://rolling-webdesign.com Theo

    Nice list, 0 to 255 is new to me, thanks!

  • http://www.anythinggraphic.com Anything Graphic

    Thanks for these great tools! Can’t wait to try Spritebox and the CSS3 Generator to learn some new stuff! :-)

  • http://www.chrismcallister.net Chris McAllister

    Super Conversion Button should save me a lot of time, thanks!

  • http://www.ashmenon.com Ash Menon

    I’m surprised a button generator made it into this list.

  • http://www.mathurvipul.com Vipul Mathur

    Very useful tools… Thanks for shearing.

  • http://knowsomethingabout.blogspot.com Seenu

    Nice collection of tools.

  • http://pixelr3ap3r.com Tommy V.

    Wordmark.it is perfect! I was just flipping through my 2,800 fonts for a client design. This made my day sooooo much easier!

  • Onur

    You need to try http://webarti.com/best-CSS3-button-maker/ too. This is a new CSS3 tool that allows you to create stylish buttons, boxes etc. I think, it deserves to be listed in this collection.

  • http://www.bloggingtechnews.com enursa

    nice tools. Thanks for share

  • http://blendwork.com silvi anggraini

    great tools, thanks for share
    but i love http://www.colourlovers.com/ to find color variation for web page, such as palette or pattern

  • http://www.qweb.co.uk Ric

    It’s a simple one, but for rescaling images http://www.batchimageresize.com is another useful tool for developers. You just throw everything in one zip and upload.