Boilerplates & Other Tools

40+ Useful & Handy Web Designer’s Web Services & Tools

February 15th, 2009

Nothing can be more useful than handy tools you can use “on the fly” in your design process. Whether you’d like diagramming application, create vector images, format or optimize CSS code, generate patterns- you can use dozens of tools to make your life easier. Today we wanted to share with you a comprehensive list of more than 40 online tools that will really make your life easier and on the fly.


1. Are My Sites Up

30 Useful Web Services & Tools For Web Designers

Are My Sites Up is a very simple service to help you keep an eye on your sites and warn you if they go down. With the free service, you may check up to 20 sites, unlimited notifications are sent via email or SMS text message to your cell phone, site checks are performed 25 times per day.

2. Wordle

30 Useful Web Services & Tools For Web Designers

Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. Check out the gallery for some interesting examples.

3. Scrnshots

30 Useful Web Services & Tools For Web Designers

ScrnShots is an easy way to take, find, and share screenshots of web and screen based design. You can upload unlimited screenshots to your account, tag your screenshots for easy retrieval, search screenshots by keywords for inspiration, use the provided links to embed screenshots in your website and many features you will find to be useful.

4. Drop

30 Useful Web Services & Tools For Web Designers

Use drop.io to create and privately share your files by web, email, phone, fax, and more. Drops are protected from search engines so you can conveniently share what you want with whom you want.

5. EmChart

30 Useful Web Services & Tools For Web Designers

Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad. EmChart is very useful for calculating bottom margins, line-heights (which are unitless, but the formula still applies), top margins, and top/bottom padding among other things. It’s also really handy for keeping nested relative font-sizes straight. Built on this formula for computing the EM multiplier is: desired pixel size / current pixel size = multiplier.

6. HTML-Ipsum

30 Useful Web Services & Tools For Web Designers

A handy Lorem Ipsum App. that provide Mac-friendly outputs with: Coda clips, Textmate bundles & Menu bar app.

7. Pixastic

30 Useful Web Services & Tools For Web Designers

Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript. I find this tool very useful when i try to quickly edit an image when my computer is not around.

8. Color Scheme Designer

30 Useful Web Services & Tools For Web Designers

Color Scheme Designer is an online application helps you create color schemes of different types and it may facilitate your looking for the optimal color palette by controlling the saturation and contrast level for the chosen color schemes.

9. Lovely Charts

30 Useful Web Services & Tools For Web Designers

Lovely Charts is an online diagramming application that helps you create professional looking diagrams such as flowcharts, sitemaps, wireframes and more. Try out the demo here.

10. HTM to PDF

30 Useful Web Services & Tools For Web Designers

An online service that convert webpages or raw html code into PDF documents. I remember my first freelance job was to save the user’s input in an online form into pdf document, did it in ASP and worked great but took a lot of time to figure out how to do it.

11. Preloaders

30 Useful Web Services & Tools For Web Designers

An online animated gif preloader that makes you choose the background color code desired, Pick the foreground color code you want, Set the sizes of the preloader, if needed, Choose your animation speed, choose the type of preloader.

12. Down For Everyone Or Just Me

30 Useful Web Services & Tools For Web Designers

A very useful tool to help you quickly check any site if it’s down for you only or for everyone.

13. Klock

30 Useful Web Services & Tools For Web Designers

Keep track of anything with Klok’s simple work timer and visual display of how your days “fill up”. Check out the full feature list.

14. Enkoder

30 Useful Web Services & Tools For Web Designers

The Enkoder helps protect email addresses by converting them into encrypted JavaScript code, hiding them from email-harvesting robots while revealing them to real people.

15. Websnapshot

30 Useful Web Services & Tools For Web Designers

Another great tool for taking snapshots for any web page. Simply enter the Url and Press Snap. Or Drag&Drop it from your browser. Click on the Thumnails to Save. With Auto Save Checked, the thumnails are immediatly saved to your ‘save’ folder.

16. TypeChart

30 Useful Web Services & Tools For Web Designers

Typechart lets you preview and compare web typography while retrieving the CSS. You can easily browse typographic styles, download CSS, compare Windows (ClearType) rendering with Apple font rendering.

17. WTFramework bookmarklet

30 Useful Web Services & Tools For Web Designers

Ever wondered which JavaScript framework was used on a specific website but was too lazy to check the source code for the answer. WTFramework is a pretty simple and straight–forward bookmarklet that can do this job easily for you.

18. Pencil

30 Useful Web Services & Tools For Web Designers

The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

19. Web Development Project Estimator

30 Useful Web Services & Tools For Web Designers

The Web Development Project Estimator is a simple tool that allows web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project.

20. 280slides

30 Useful Web Services & Tools For Web Designers

Let’s you create beautiful presentations, access them from anywhere, and share them with the world.

21. BackType

30 Useful Web Services & Tools For Web Designers

Whenever you write a comment on a blog or other website, BackType attributes it to you. You can also identify and connect with the people who’s thoughts and opinions you value; follow their comments in your Dashboard

22. FeedCompare

30 Useful Web Services & Tools For Web Designers

An online web tool that you can use for comparing FeedBurner feeds and check out your competitors growth.

23. SmushIt

30 Useful Web Services & Tools For Web Designers

Smushit.com is a service that uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images – without changing their look or visual quality.

24. Dexrex

30 Useful Web Services & Tools For Web Designers

Dexrex is the free add-on for archiving IM & SMS text.

25. Jott

30 Useful Web Services & Tools For Web Designers

Jott makes sure you stay on top of everything. You can capture notes, set reminders and calendar appointments, stay in touch with friends and family, and interact with your favorite web sites and services…all with your voice!

26. Fresh Books

30 Useful Web Services & Tools For Web Designers

With Freshbooks you can easily track time and send Invoices and Estimates Online. They make it very easy to track everything related to invoicing. Create project invoices in advance and you don’t have to worry about forgetting one.

27. SifrVault

30 Useful Web Services & Tools For Web Designers

An online Repository of sIFR fonts.

28. SproutBuilder

30 Useful Web Services & Tools For Web Designers

Sprout is the quick and easy way for anyone to build, publish, and manage widgets, mini-sites, mashups, banners and more.

29. Snipt

30 Useful Web Services & Tools For Web Designers

Snipt is your collection of frequently used commands or code snippets.

30. ShiftSpace

30 Useful Web Services & Tools For Web Designers

ShiftSpace (pronounced: §) is an open source browser plugin for collaboratively annotating, editing and shifting the web. Check out all the nice features < a href="http://www.shiftspace.org/features/">here.

31. Wappalyzer

30 Useful Web Services & Tools For Web Designers

Wappalyzer is a Firefox add-on that automatically shows you what software is used on the websites you visit. It identifies most CMS, e-commerce and wiki and message board systems, JavaScript frameworks and more.

32. Favicon generator & editor

30 Useful Web Services & Tools For Web Designers

This tool provides an easy way to convert any GIF, PNG or JPEG to ICO which is supported by all modern web browsers. It also enables you to create favicons from scratch via a handy online editor. Additionally the editor lets you manually tweak generated favicons to ensure the best possible result.

33. BgPatterns

30 Useful Web Services & Tools For Web Designers

This tool provides an easy way to quickly generate tiled patterns. It will allow you to tweak, edit, and resize a wide range of patterns, change its color and more.

34. Kuler

30 Useful Web Services & Tools For Web Designers

kuler is an online web-based application by Adobe that helps you create and share color themes by several options such as “Analogous, Monochromatic, Triad, Complementary, Compound, Shades or Custom”. Users can also collaborate, comment and share color themes based on predefined color formulas or you can create custom themes by using Kuler’s interactive color wheel.

35. FontStruct

30 Useful Web Services & Tools For Web Designers

Is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

36. Vector Magic

30 Useful Web Services & Tools For Web Designers

Convert bitmap images to vector images with a few simple clicks. Just upload your image and Vector Magic will vectorize it for you.

37. Tartan Designer

30 Useful Web Services & Tools For Web Designers

Generate tartan patterns. For scottish lovers and fancy designers!

38. GoldenRatioCalculator

30 Useful Web Services & Tools For Web Designers

If you want to dramatically improve composition of your website design, you might need to consider applying the divine proportion to your design. This tools calculates the golden ratio for your designs.

39. Picmarkr

30 Useful Web Services & Tools For Web Designers

PicMarkr lets you to add custom watermark (image or text) to your images online and free. It is useful when you need to protect your copyrights or if you want to add comments to your photos.

40. TweetDeck

30 Useful Web Services & Tools For Web Designers

Aims to evolve the existing functionality of Twitter by taking an abundance of information i.e twitter feeds, and breaking it down into more manageable bite sized pieces. TweetDeck enables users to split their main feed (All Tweets) into topic or group specific columns allowing a broader overview of tweets.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: ,

69 comments for „40+ Useful & Handy Web Designer’s Web Services & Tools
  1. joyoge designers' bookmark on February 15th, 2009 at 4:10 pm

    useful and helpful list thanks a lot..

  2. Desizntech on February 15th, 2009 at 4:47 pm

    Nice one.. noupe!

  3. Julie Beck on February 15th, 2009 at 5:34 pm

    WOW…this is a fantastic list of resources. thanks!!

  4. Vladimir on February 15th, 2009 at 5:38 pm

    Great collection!

  5. Bryan Kwon on February 15th, 2009 at 5:43 pm

    Thanks a lot, I can see me utilizing some of these.

  6. Ben on February 15th, 2009 at 6:30 pm

    Let’s put Invoice Machine to the list now! http://www.invoicemachine.com

  7. Ben Higham on February 15th, 2009 at 6:57 pm

    Great list! Some really good sites I’ve never seen before.

  8. Jason Wilkinson on February 15th, 2009 at 7:06 pm

    I probably read at least a dozen of these lists everyday.
    This is one is exemplary. Thanks for putting it together and keep up the great work. This site has proven incredibly valuable.

  9. Brandon Cox on February 15th, 2009 at 7:47 pm

    Wow what a list of awesome resources – most are new to me, thanks!

  10. Andy Ford on February 15th, 2009 at 8:06 pm

    Thanks for listing my EmChart amongst all the other handy tools!

  11. Raymond Selda on February 15th, 2009 at 8:08 pm

    Oh my goodness! This is the motherload! Thank you for this post! I’m very happy to be a web developer. Lots of tools here to make our lives easier. Thank you!

  12. Patrick on February 15th, 2009 at 8:24 pm

    I have only one word: woah.

    This is the most useful post I’ve seen in about a month. Thank you!

  13. Cristos Lianides-Chin on February 15th, 2009 at 10:26 pm

    Great post, thanks! I just want to mention that I gave up jott in favor of Dial2Do (http://www.dial2do.com).

    In addition to being free, I’ve found D2D supports more external services (e.g., Google Calendar), and is easier to set up with them. It doesn’t have the built-in task management that jott does, but it integrates great with things like Todoist and RTM.

  14. OrganizedFellow on February 15th, 2009 at 10:44 pm

    Many great tools.
    Of the 40 mentioned, I already knew about 20-25 of them, the rest are totally new to me.

    I really liked Color Scheme Designer.

  15. binocle on February 15th, 2009 at 11:35 pm

    Great collection; usually I am not a big fan of these kind of lists, but this one is really helpful, thanks

  16. Tom on February 16th, 2009 at 12:03 am

    Great list.

    To find what JS Library is used in any site, I’m using
    http://www.sitonomy.com

    It provides also many other useful information.

  17. Furious Nomad on February 16th, 2009 at 12:14 am

    I didn’t know about wappalyzer yet. Also bookmarked the background tile thing and the favicon generator. Thanks.

  18. mojitopl on February 16th, 2009 at 1:15 am

    Veeery helpful! As for a starting webdesigner, some of the aps will serve me well. Thanks!

  19. Patternhead on February 16th, 2009 at 1:57 am

    Sweet, another great list of resources!

  20. Jonathan on February 16th, 2009 at 2:56 am

    Mentioning Fresh Books without mentioning FreeAgent seems an oversight :-)

    freeagentcentral.com

  21. Jeffrey Jose on February 16th, 2009 at 3:23 am

    Nice post, extremely useful. Lots of sites which I have never heard of and used.

  22. Milan on February 16th, 2009 at 3:39 am

    Nice collection, by no BrowserShots?

  23. Diego on February 16th, 2009 at 3:51 am

    Nice collection

  24. Wordpress theme designer on February 16th, 2009 at 3:53 am

    Great collection, I knew some of theses sites and tools, but I didn’t know a lot of them, surely I will be trying some of them in the coming days.

  25. Evan Tictoc on February 16th, 2009 at 3:58 am

    i love this smart list, very useful!

  26. Kevin on February 16th, 2009 at 4:07 am

    Great list, thank you!

  27. jmark on February 16th, 2009 at 4:10 am

    A great resource of tools. Thanks

  28. RobertD on February 16th, 2009 at 4:24 am

    I use Deploy* at http://projectdeploy.org a lot also. I think that’s a great tool and is constantly adding new features which is nice.

  29. Abrishca Digital Media on February 16th, 2009 at 5:13 am

    How good is this list?! So many tools I haven’t even heard of…now, where do I find the time to have a proper look at them??

  30. sunil on February 16th, 2009 at 5:25 am

    nice collection, very useful!

  31. Henry on February 16th, 2009 at 6:53 am

    I will add Browsershots.org to the list

  32. abdusfauzi on February 16th, 2009 at 7:45 am

    a very helpful list. :)

    tweetdeck is fun!

  33. Sabeur on February 16th, 2009 at 8:35 am

    Nice list – thanks

  34. Timothy on February 16th, 2009 at 11:29 am

    I really don’t care for that new color scheme generator. I tend to use the second generation of the same tool (http://colorschemedesigner.com/previous/colorscheme2/index-en.html)

  35. Siulo on February 16th, 2009 at 3:24 pm

    Very big list, thanx a lot. This will help me ;)

  36. PhaoLoo on February 16th, 2009 at 4:51 pm

    Awesome list, I always use #3 #9 and #10. They are really handy and useful, espeacially all are free. Cute!

  37. josie on February 16th, 2009 at 5:15 pm

    VERY useful large list, i had never heard of many of these so thanks! :)

  38. Rohit on February 17th, 2009 at 11:18 am

    Really a nice list, I liked 280slides specially. Keep up the good work.

  39. Technologix on February 17th, 2009 at 12:08 pm

    Thank you a lot :)

  40. Rorweb on February 17th, 2009 at 12:31 pm

    Great list, thanks a lot! Cant believe you left out invoice machine though.

  41. Dave on February 17th, 2009 at 12:41 pm

    Best list I have seen for ages, well done and thank-you. This is reminded me of somethings that came on the radar and then left. Now I have them in a useful list.

  42. logo design guru on February 17th, 2009 at 2:57 pm

    Very helpful tools here. Thanks so much.

  43. eleven on February 17th, 2009 at 3:15 pm

    Great post.
    I just used the favicon generator you just recommended!

  44. eddie on February 17th, 2009 at 6:29 pm

    nice lists,but you missed a ?tag on #30

  45. Rahul on February 17th, 2009 at 7:24 pm

    Thanks again for this very useful list of websites which would be very handy to web designers like me.

    Bookmarked :)

  46. Linux And Friends on February 18th, 2009 at 5:32 am

    Wow,
    This is a cool collection of web 2 links. Thanks.

  47. Bharath Kumar on February 18th, 2009 at 5:45 am

    :)Really great set of Services & tools. Its a handy tool kit for web designers ;)

  48. Joren Rapini on February 18th, 2009 at 10:46 am

    FANTASTIC collection. A lot of these I already used, but I definitely found a couple great new gems here!

  49. mambe nanje on February 18th, 2009 at 3:28 pm

    men, this list is the best link in 2009, will learn to use most of them

  50. Bianca Yvonne on February 20th, 2009 at 3:01 pm

    Very helpful list.
    For anyone looking for another color scheme site, try colourlovers.com
    I personally think it’s much better than kuler, and the community there is fantastic.

  51. blogsarticle on February 20th, 2009 at 5:12 pm

    Sam kinda looks like Jon Favreau.

  52. ismail on February 21st, 2009 at 7:44 pm

    oohh my god. that’s all usefull and wonderfull. all of this sites are here and they are far a click. thanks a lot.

  53. Ryan on March 10th, 2009 at 6:38 am

    Absolutely fantastic set of resources here. Too much, too little time ahhhhhh Great read!

  54. Ivan Pidov on March 10th, 2009 at 8:30 am

    Great collection of tools.

    You’ve forgotten to close the tag here:
    “Check out all the nice features here.”
    :)

  55. Bleyder on March 11th, 2009 at 12:36 am

    Fantastic list! Thanks!!

  56. Ryan on March 11th, 2009 at 3:48 am

    Great list. Don’t we wish we had the time to check them all out?

  57. sean steezy on March 13th, 2009 at 7:38 am

    holy shiz! this is a crazy awesome list. i found myself trying to bookmark every link before I just bookmarked this page… Thanks!

  58. Josip on March 21st, 2009 at 7:40 am

    unbelievably good blog. keep up the great work guys! greetings from croatia.

  59. neville on March 21st, 2009 at 3:22 pm

    Cool collection. Big thanks

  60. bill on March 21st, 2009 at 3:33 pm

    nice post. For number 30 you left out the closing ‘‘

  61. Jamie Allsop on March 24th, 2009 at 2:08 am

    Some of these tools can really make a designers life easier. I am going to give the em chart and favicon editor a try. A tool that I find helpful is Kuler,it is like the colour scheme designer that you suggested and I have found it useful when seeing what colours go well together. Its a shame that there are all these great resources out there and people just haven’t got the time to check them out.

  62. johnmilton on March 30th, 2009 at 11:40 pm

    Hi..
    Cool list,thanks for taking the time to research and posting it on the web it might have taken a while in doing this.
    Anyway the list would be of great help and would serve as a good source of reference for all designers.
    Thanks..
    john..

  63. iInvoicing on April 6th, 2009 at 10:55 pm

    The Invoice Online is company natural of a successful iInvoicing development companies.

  64. Split5 on April 13th, 2009 at 12:17 am

    Great list. Thanks for your great work.

  65. iconz on April 16th, 2009 at 10:28 pm

    This is a very useful list… And I cant stress it enough… i have never seen some of the website published here… Lovely… you get a stumble :)

  66. Budget Web Company on October 20th, 2009 at 4:50 am

    The colour scheme designer looks really useful for coming up with colours that match exisiting logos, branding etc.
    Cheers!

  67. Liz on June 27th, 2010 at 10:33 pm

    Billing Boss from Sage is also a free online invoicing tool, but it currently allows you to create unlimited invoices for unlimited customers. I’ve been saving some money there. Plus they created it with the intention to be simple – web designers can “get in, get out”. Create professional looking estimates, turn them into invoices, and track the cash flow.

    I use their option to email invoices to clients and collect payment online. Or, when I need to collect payment on the spot, I use their mobile payment tool, Payment Boss.

    Full Disclosure: This author has been compensated by Sage. I am their Social Media Consultant but I was using their product well before they contracted me. They found me when I sent them an email giving suggestions about Billing Boss!

  68. Mike Adams on February 25th, 2011 at 5:32 am

    Just came across this list – these are some awesome tools. Is this updated, or is there an updated list somewhere?

    I’ve used BGPatterns, Wordle, and Drop.io before. I stopped using Drop.io in favor of Dropbox eventually.

    I’ve also used html2pdf before, but I recently found another html to pdf tool I like better. The quality is a lot better than most pdf generators I’ve used.

    Thanks again for the list – always nice to see what tools are out there I’m missing, even if I show up to the post late :P

  69. bunty on March 7th, 2013 at 7:22 am

    Insanely awesome !!!