8 Useful Online Tools for Web Designers and Developers

By / Feb 4, 2011 / Tools
shares

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.

22 Comments

  1. DTX Studios
    February 4, 2011

    Nice collection of tools. Its really helpful.

    Reply
  2. Andrey Korobitsin
    February 4, 2011

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

    Reply
  3. chokilala
    February 4, 2011

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

    Reply
    • Henry Jones
      February 4, 2011

      Fixed. Thanks.

      Reply
  4. Kaushik Panchal
    February 4, 2011

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

    Thanks again :-)

    Reply
  5. Angelee
    February 4, 2011

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

    Reply
  6. Angelee
    February 4, 2011

    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.

    Reply
  7. Lee Marriott
    February 4, 2011

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

    Reply
  8. Sruthish
    February 4, 2011

    Really useful and awesome…

    Reply
  9. Martin V
    February 4, 2011

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

    Reply
  10. Toby
    February 4, 2011

    Thank you for sharing, great collection!

    Reply
  11. Theo
    February 4, 2011

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

    Reply
  12. Anything Graphic
    February 4, 2011

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

    Reply
  13. Chris McAllister
    February 4, 2011

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

    Reply
  14. Ash Menon
    February 6, 2011

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

    Reply
  15. Vipul Mathur
    February 6, 2011

    Very useful tools… Thanks for shearing.

    Reply
  16. Seenu
    February 8, 2011

    Nice collection of tools.

    Reply
  17. Tommy V.
    April 13, 2011

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

    Reply
  18. Onur
    June 2, 2011

    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.

    Reply
  19. enursa
    June 4, 2011

    nice tools. Thanks for share

    Reply
  20. silvi anggraini
    July 23, 2011

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

    Reply
  21. Ric
    May 27, 2013

    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.

    Reply

Leave a Reply