50 Powerful Time-Savers For Web Designers


There are tools that make our lives much easier. However, finding those obscure time-savers which would save time in every single project isn’t easy and requires a lot of time. At Smashing Magazine, we are regularly looking for such useful tools, gather them, review them and eventually prepare for a truly smashing round-up. Such posts are quite lengthy and extensive, but they are always worth checking out.

In this post, you’ll find an overview of useful and handy tools that can help you increase your productivity and improve your workflow. Some tools are more general, the others are more technical, yet we hope that this round-up has something to offer to every one of our readers. Please feel free to leave your comments and share with us which one of the tools you’ve found most useful and interesting.

Useful Time-Savers For Web Designers

House of Buttons1
A growing collection of various buttons spotted in the wild by Jason Long. Very nice and useful collection, and submissions are welcome.

House of Buttons2

Historious makes bookmarking work the way you want it. Bookmark sites with a single click, then come back to Historious and find sites by entering a few keywords!

historious - your personalized search world!4

Browser UI5
The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The Browser UI is easily installed and helps you get around with your Photoshop documents. A quick screencast is available on the site for a quick understanding of how Browser UI works.

Browser UI6

A/B Split Testing Calculator7
A/B Test Calculator shows you a comparison of several versions of a particular web page. In order to discover which one is most effective for your audience, you have to enter ‘statistically significant’ numbers.

A/B Split Testing Calculator8

What deux yeux have teux deux teuxday?9
TeuxDeux is a simple, design to-do app that can be used for your iPhone. If you like making to-do lists, you will love TeuxDeux. This free browser-based app can be used everywhere; this way you have your to-dos ready to hand all the time. Check out the various TeuxDeux features included in this iPhone App shown in the left column.

What deux yeux have teux deux teuxday?10

Fillerati – Faux Latin is a Dead Language11
‘Fillerati’ instead of ‘Lorem ipsum’… something different for a change. Modern browsers such as Chrome, Firefox, Safari or Opera are recommended.

Fillerati - Faux Latin is a Dead Language12

Inline Code Finder13
Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them. It finds inline JavaScript events, inline CSS coding and javascript:-links.

Inline Code Finder14

Share your ideas – Mark (them) Up15!
MarkUp works in any browser without the need of being downloaded nor installed. Simply add the MarkUp icon to your bookmarks bar and share your ideas and thoughts swiftly!

Draw on any webpage. Share your ideas. - MarkUp16

Format, Text, Color and Size – Quick and simple image placeholders. You may want to check Dynamic Dummy Image Generator18, too.


This site helps you adjust your browser automatically, starting with a simple iPhone-sized browser (320×480) to a MacBook Pro (1440×900).
Note: This web application requires JavaScript. Please check your browser’s settings and make sure JavaScript is enabled.


XRefresh for web developers22
A browser plug-in which refreshes the current web page due to file change in selected folders and communicates with browser extension using TCP/IP. This makes it possible to do live page editing with your favorite HTML/CSS editor, especially when working with two monitors at the same time.

XRefresh provides browser refresh automation for web developers23

The so-called ‘Cloud Development Environment’ which lets you connect to your own FTPs. Web-based access to file-system & svn integration. Also includes an Online Code Editor and Cloud Hosting.


LiberKey is a large collection of portable applications that can be run without installation on your local PC nor from any portable media. You may want to check Portable Apps27 as well.


Notes for Later29
This bookmarklet is a web service for remembering websites. It creates a unique bookmarklet30 for your personal browser in which you can simply receive the content you need via email. If you select nothing, you still get the current page’s URL and a time stamp. Registration is quick and painless. No login is required – just an email address.


An easy-to-use desktop application to fill out your Basecamp timesheet and save a lot of time completeing your own personal timesheet.


Slammer – Designer’s Geometry Box34
Overlays any grid you want, anywhere you want. A variety of themes and overlays are presented: Typographic Grids, Golden Sections, Fibonacci series, Rule of Thirds and more! Slammer also includes Rulers, Crosshair, Magnifier, Measurements and Screenshots; watching the movie on the Slammer main page will help you learn more. However, Snow Leopard is required.

Slammer - Designer's Geometry Box35

By dragging the bookmarklet to your browser’s bookmark bar, you will instantly save time in browsing the web and have a preview of the collected links that have been grouped previously. By clicking on the bookmarklet, you can always add a link. URlist not only enables you to create and save link lists easily, but also lets you access those links from anywhere. And creating lists is dead easy. Try it!


A new bookmarking service which allows you to mark relevant content without losing focus. Using a bookmarklet such as this one, enables you to add web pages and clippings to Licorize without leaving nor interrupting the web page you are currently focusing on.


Readability – An Arc90 Lab Experiment40
Readability™ is developed to make reading on the Web more enjoyable and remove any clutter around what you’re reading at the moment. A preview of a given text is available to give you an idea of how the style, size and margin can be adjusted. Installing Readability™ into your Web browser is quite easy…and makes it easier on your eyes!

Readability - An Arc90 Lab Experiment41

Joli: Print to PDF in Google Reader42
Joliprint bookmark provides you an easy and quick way to print a Google Reader post as a PDF. First, you have to create a bookmarklet onto your browser’s bookmark bar, then select a post in Google reader and finally, click on the Joliprint bookmarklet to convert the activated post into a PDF document. Ta-dah! You can check Clipr Bookmarklet43 as well.

Print to PDF in Google Reader44

Spoon lets you run desktop applications with no installs, conflicts or dependencies such as .NET, Java nor AIR. By virtualizing your existing apps, you can turn them in standalone EXEs, MSIs or flash drives. This tool is also very useful for cross-browser testing right within your browser and is provided in two versions: Spoon for Business or for Developers.


Web Development Project Estimator47
A simple tool for web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project. A personal task list can be created, leaving you to decide which ones to include or even exclude. Most importantly, hours and rates of the particular project allow you to calculate the estimated final fee.

Web Development Project Estimator48

Golden Ratio Calculator49
This online tool helps you calculate the width of your containers to achieve the golden ratio. You can have a column with a certain width (perhaps to achieve a nice word:line ratio) and you wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column. Or if you have a container and wish to divide it in two, type in the container width and use the right side measurements.

Golden Ratio Calculator50

My DebugBar51
Companion.JS is a Javascript debugger for IE. The current version is 0.5.5 and contains features such as JavaScript error reporting as well as a console feature which helps inspect JavaScript objects at runtime. Please note that CJS requires a Microsoft script debugger.

My DebugBar52

Cleaning up text for the Web can be very time-consuming and prone to error. In case your client ever ends up delivering content in Microsoft Word or a similar format, cleaning it up is definitely a necessary task to do — if you don’t want to end up with characters that don’t display properly online. By entering a HTML or simple text into the given text box and clicking on the ‘entitify’ button, you instantly have discovered a new tool which helps you escape any nasty characters that should be entities!


Every Time Zone55
This tool shows an interactive chart of time in various cities across the globe. It also includes a slider to see the time in a particular city at any time of the day.


This is a simple tool that helps you save web pages for reading later, when you have time — for instance on mobile devices, iPad or Kindle.


Redmark: the easiest way to mark up a design and track revisions59
Communication is very important and helps designers and their clients come to clear terms with each other. This site offers visual communication in just three simple steps between designers and clients. It is also possible for a client to find a particular designer they need to match their business. A Demo Project is portrayed for a quick view about how the site actually works.

redmark - the easiest way to mark up a design and track revisions60

Awesome Fontstacks61
Fonts have always carried an important meaning to web typography. As we all know, a lot of work is required to match and adjust a satisfactory web font for a website. This site helps you create a font stack bundle and also gives you a preview into CSS coding inclusive.

Awesome Fontstacks62

Framebox: a wireframing tool63
With Framebox, you can sketch your wirframes or just visualize your ideas using UI units such as boxes, headers, buttons, inputs, links, text, text links etc. You can then save it and get a link to created frame, and then send a link to your colleagues.


Drag, drop, share! Droplr is the best way to share files from your Mac OS X on the internet, aiming for simplicity, ease of use and flexibility. This application is also completely free to use with ad supported content. Once the selected file is uploaded, Droplr returns a URL in which a user can share with anyone.


Mockingbird: Website wireframes67
Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

Website wireframes: Mockingbird68

CodeBurner: Reference Tool for Web Developers69
CodeBurner is a suite of tools for web developers that provides reference material for HTML and CSS, integrated with a range of popular development environments.

CodeBurner - Reference Tool for Web Developers70

HTML Soft Hyphenation Generator71
Configurable generator for automatic soft hyphenation in static HTML text without a script.

HTML Soft Hyphenation Generator72

Is email a distraction? SelfControl is an OS X application which blocks access to incoming and/or outgoing mail servers and websites for a predetermined period of time. For example, you could block access to your e-mail, Facebook, and Twitter for 90 minutes, but still have access to the rest of the Web. Once started, it can not be undone by the application, by deleting the application, or by restarting the computer — you must wait for the timer to run out.


MinutesPlease.com – Manage your web time75
This is an extraordinary website that you can have to help you control the time you spend on a particular site. Just type in the URL and the time you are willing to spend on this site – you will notice how fast time flies by!

MinutesPlease.com - Manage your web time76

A fun and easy way to create memory tests and see how much and what exactly people remember on your website.


Neuskool is a personal start page for all your browsing needs with a collection of useful search services, all on one page.


Check My Colours: analyze the color contrast of your web pages81
This tool checks foreground and background color combinations of all DOM elements and determine if they provide sufficient contrast when viewed by someone having color deficits. All the tests are based on the algorithms suggested by the W3C.

Check My Colours - Analyse the color contrast of your web pages82

COPASO: Color Palette tool83
COPASO is an advanced color palette tool that helps you create the perfect color palette.

COPASO:Color Palette Software84

Useful Firefox Extensions

Pixel Perfect Firefox Extension85
This extension allows you to overlay a web composition on top of the developed HTML. Letting the developer visually see how many pixels they are off in development.

SenSEO Firefox Extension – Official Website86
SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

SenSEO Firefox Extension - Official Website87

Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.


Firediff is a Firebug extension that tracks changes to a page’s DOM and CSS and implements a change monitor that records all of the changes made by Firebug and the application itself to CSS and the DOM.

Firediff - incaseofstairs91

Useful References

SEO Checklist92
When it comes to SEO, there are certain elements that need to be in place for any newly-designed or updated website. Have 301 redirects been put into place? Is the robots.txt file authored to allow adequate crawling? This infographic depicts a handy checklist that will help get you through any new site launch or transition.

SEO Checklist93

Typographic Sins94
Typographic Sins (also available as PDF) by James Godfrey and Patrick Wilkey covers 35 mistakes commonly made by novice designers. The website puts them in a neat orderly list, but the PDF showcases them visually. It’s a great reference guide and learning tool if you want to learn better typography design.

Typographic Sins95

Entity Code: a Clear and Quick Reference to HTML Entities Codes96
A website that eliminates the frustration and the wasted time caused by constant need to add those hard to remember HTML entity codes, such as the copyright symbol © or em-dash —, every time you’re developing a new website or writing a new article.

Entity Code - A Clear and Quick Reference to HTML Entities Codes97

Thirty Conversations on Design98
The site creators asked 30 of the world’s most creative professionals two questions: “What single example of design inspires you most?” and “What problem should design solve next?” Their answers might surprise you. And, hopefully they’ll inspire you.

Thirty Conversations on Design99

Essential Interaction Design Essays and Articles100
A list of essays and articles that could be important touchstones and reference points for interaction designers.

Further Useful Tools

You can drag your data which you wish to share online onto the min.us page. Very convenient.

Mr. Data Converter102
Mr. Data Converter will convert your Excel data into one of several web-friendly formats, including HTML, JSON and XML.

PDF Split and Merge103
PDFsam is a free open source tool (GPL License) designed to split and merge PDF documents. Whether it be only extracting sections into a single document or changing the order of the pages. The basic version can be downloaded and simply used on every platform with a Java support.

Last Click

Unsuck It104
What terrible business jargon do you need unsucked? Unsuck It translates management speak to normal language, making your day to day on- and offline slogs through corporate jargon a little easier to bear. You can even tweet your results as they often turn out to be quite funny.

Unsuck It105

Temperature Conversion, Weight Conversion and Length Conversion106
This simple online tool doesn’t do much, but it’s truly beautiful and it’s a pleasure to use. The tools lets you convert length values, temperature values and weight values.

Temperature Conversion, Weight Conversion and Length Conversion107

Coffee Drinks Illustrated108
With the vast number of ordering options and new words with accented characters to pronounce the coffee shop ordering experience can be intimidating. Lokesh Dhakar created a few small illustrations to help himself and others wrap their head around some of the small differences.

Coffee Drinks Illustrated109


  1. 1 http://houseofbuttons.tumblr.com
  2. 2 http://houseofbuttons.tumblr.com
  3. 3 http://historio.us/
  4. 4 http://historio.us/
  5. 5 http://www.browserui.com/
  6. 6 http://www.browserui.com/
  7. 7 http://www.performable.com/calculator/
  8. 8 http://www.performable.com/calculator/
  9. 9 http://teuxdeux.com/
  10. 10 http://teuxdeux.com/
  11. 11 http://www.fillerati.com/
  12. 12 http://www.fillerati.com/
  13. 13 http://robertnyman.com/inline-code-finder/
  14. 14 http://robertnyman.com/inline-code-finder/
  15. 15 http://markup.io/
  16. 16 http://markup.io/
  17. 17 http://placehold.it/
  18. 18 http://dummyimage.com/
  19. 19 http://placehold.it/
  20. 20 http://resizemybrowser.com/
  21. 21 http://resizemybrowser.com/
  22. 22 http://xrefresh.binaryage.com/
  23. 23 http://xrefresh.binaryage.com/
  24. 24 http://kodingen.com/
  25. 25 http://kodingen.com/
  26. 26 http://www.liberkey.com/en/
  27. 27 http://portableapps.com/
  28. 28 http://www.liberkey.com/en/
  29. 29 http://www.notesforlater.com
  30. 30 http://en.wikipedia.org/wiki/Bookmarklet
  31. 31 http://www.notesforlater.com/
  32. 32 http://www.timy.be/
  33. 33 http://www.timy.be/
  34. 34 http://ringce.com/slammer
  35. 35 http://ringce.com/slammer
  36. 36 http://urli.st/
  37. 37 http://urli.st/
  38. 38 http://licorize.com
  39. 39 http://licorize.com
  40. 40 http://lab.arc90.com/experiments/readability/
  41. 41 http://lab.arc90.com/experiments/readability/
  42. 42 http://joliprint.com/2010/10/07/print-to-pdf-google-reader/
  43. 43 http://code.google.com/p/clipr/
  44. 44 http://joliprint.com/2010/10/07/print-to-pdf-google-reader/
  45. 45 http://spoon.net/
  46. 46 http://spoon.net/
  47. 47 http://estimator.astuteo.com/
  48. 48 http://estimator.astuteo.com/
  49. 49 http://goldenratiocalculator.com/
  50. 50 http://goldenratiocalculator.com/
  51. 51 http://www.my-debugbar.com/wiki/CompanionJS/HomePage
  52. 52 http://www.my-debugbar.com/wiki/CompanionJS/HomePage
  53. 53 http://entitifier.sambowler.com/
  54. 54 http://entitifier.sambowler.com/
  55. 55 http://everytimezone.com/
  56. 56 http://everytimezone.com/
  57. 57 http://www.instapaper.com/
  58. 58 http://www.instapaper.com/
  59. 59 http://www.redmark.com/
  60. 60 http://www.redmark.com/
  61. 61 http://awesome-fontstacks.com/
  62. 62 http://awesome-fontstacks.com/
  63. 63 http://framebox.org
  64. 64 http://framebox.org
  65. 65 http://d.pr/hello
  66. 66 http://d.pr/hello
  67. 67 https://gomockingbird.com/
  68. 68 https://gomockingbird.com/
  69. 69 http://tools.sitepoint.com/codeburner/
  70. 70 http://tools.sitepoint.com/codeburner/
  71. 71 http://yellowgreen.de/soft-hyphenation-generator
  72. 72 http://yellowgreen.de/soft-hyphenation-generator
  73. 73 http://visitsteve.com/work/selfcontrol/
  74. 74 http://visitsteve.com/work/selfcontrol/
  75. 75 http://minutesplease.com/
  76. 76 http://minutesplease.com/
  77. 77 http://www.clueapp.com/
  78. 78 http://www.clueapp.com/
  79. 79 http://neuskool.com/
  80. 80 http://neuskool.com/
  81. 81 http://www.checkmycolours.com/
  82. 82 http://www.checkmycolours.com/
  83. 83 http://de-de.colourlovers.com/copaso/ColorPaletteSoftware
  84. 84 http://de-de.colourlovers.com/copaso/ColorPaletteSoftware
  85. 85 http://www.pixelperfectplugin.com/
  86. 86 http://www.sensational-seo.com/
  87. 87 http://www.sensational-seo.com/
  88. 88 http://robertnyman.com/firefinder/
  89. 89 http://robertnyman.com/firefinder/
  90. 90 http://www.incaseofstairs.com/firediff/
  91. 91 http://www.incaseofstairs.com/firediff/
  92. 92 http://www.elliance.com/aha/infographics/SEO-Checklist.aspx
  93. 93 http://www.elliance.com/aha/infographics/SEO-Checklist.aspx
  94. 94 http://www.rayelder.com/teaching/typographic-sins/
  95. 95 http://www.rayelder.com/teaching/typographic-sins/
  96. 96 http://www.entitycode.com/
  97. 97 http://www.entitycode.com/
  98. 98 http://www.thirtyconversationsondesign.com/
  99. 99 http://www.thirtyconversationsondesign.com/
  100. 100 http://www.kickerstudio.com/blog/2010/09/essential-interaction-design-essays-and-articles/#
  101. 101 http://min.us/
  102. 102 http://www.shancarter.com/data_converter/index.html
  103. 103 http://www.pdfsam.org/
  104. 104 http://unsuck-it.com/
  105. 105 http://unsuck-it.com/
  106. 106 http://convert.francepropertyshop.com/
  107. 107 http://convert.francepropertyshop.com/
  108. 108 http://www.lokeshdhakar.com/2007/08/20/an-illustrated-coffee-guide/
  109. 109 http://www.lokeshdhakar.com/2007/08/20/an-illustrated-coffee-guide/

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    now i’ll need a week to try and test all this stuff, i’m quite sure i’ll find something really useful. (kodigen seems quite useful for projects on the fly)
    Thanks S.Mag

  2. 2

    flipping awesome!
    Best list of tools to date.

  3. 3

    Great compilation. I’ll try few of them.

  4. 4

    Lots of useful stuff…. as stated previously, now I’ll need to find the time to try them all out…. Thanks for the list! Cheers!

  5. 5

    Thx for the article !

  6. 6

    Lifesaver list !!!

  7. 7

    Great list! Thanks.

    I’ve covered how to install and use “X-Refresh-Server” in one my screencast. I hope it’ll be useful if I like here.


  8. 8

    Wow, I especially enjoy the Web Development Project Estimator at http://estimator.astuteo.com/. At first I thought, “Why wouldn’t I just use an Excel spreadsheet of my own for this?” But they’ve made it so simple – honestly an example of great UX design. Just type in your amounts, maybe change the list items, print the estimate onto a letterhead, and you’re done. It’s almost irresistible to interact with. That’s great design in action.

  9. 9

    I must say, I am very pleased with the content that your website has. As @cooljaz124 said, this list is simply a lifesaver. I would suggest Text Editors and my best being SublimeText.

  10. 10

    Thanks for mentioning dummyimage.com

  11. 11

    TeuxDeux? I switched to the free service Idonext.com which really saves me time in being far more organized and focused. Plus it allows easy sharing and assigning of tasks to co-workers. I love it!

  12. 12

    Amazing list! Going to check out a lot of these. Thanks!

  13. 13

    glad to be on this list of 50 Powerful Time Savers – that’s exactly why we created it. greetings from kodingen.com! and thx smag!

  14. 14

    Hate to piss in the punch but I wasn’t impressed with this list. A lot of these sites are old news and I didn’t bookmark a single one. Plus, with descriptions like “The Browser UI is easily installed and helps you get around with your Photoshop documents. A quick screencast is available on the site for a quick understanding of how Browser UI works.” I was hardly interested in learning more when you didn’t explain what it did to begin with (“get around with your Photoshop”?).

  15. 15

    Seen some of these go around before but it’s always good to see a few new additions…

  16. 16

    Wow! Great list! You had me with the first 10 time-savers.

  17. 17

    Thanks guys. Amazing list…

  18. 18

    Also might be worth looking at: http://entri.co for document collaboration.

  19. 19

    Outstanding post! Thank you for the great compilation!

  20. 20

    Fresh air to my face! amazing!
    Me encanta chicos!

  21. 21

    this is aweesssoooommmmeeeee thanks!

  22. 22

    Another definite time saver for a freelancer is a usable invoicing and time tracking app. I tend to prefer CurdBee for invoicing and Mite for time tracking..Any other recommendations?

  23. 23

    Apart from a couple of bits and pieces,.I can’t say that I was particularly impressed. Sorry.

    The guide on how to mispronounce names of coffee drinks for dumb septics was funny and annoying at the same time.

    I needed a dictionary to understand “Typographic Sins”; even then I wasn’t sure on what was going on.

  24. 24

    Some great apps. I especially am digging the XRefresh for web developers.

    On that note of updating your code on the fly, I have been scowering the net looking for a program/plugin similar to XRefresh that allows you to edit the html & css within firebug and then save the file… without using Web Developer toolbar and that whole pain staking process.

    Any ideas?

  25. 25

    Directly in fav, its awesome ! Many thanks.

  26. 26

    Pixel Perfect is great! I’m going to find that very useful.


  27. 27

    Vitaly Friedman (editor-in-chief)

    October 19, 2010 1:31 pm

    I am sorry to hear that, Neil. What exactly seems to be the problem with “Typographic Sins”? I haven’t noticed any grammar / spelling mistakes or errors there, and I honestly think that it’s a very useful, handy reference.

    To be honest, I can’t really believe that you haven’t found at least one useful tool from this list. Or am I wrong? If I am wrong, what would you recommend to change to make such lists better in the future?

  28. 28

    Great list thank you :)

  29. 29

    Great list, going to take me a while to get through this thing, pretty sure this is the kind of list google chrome tabs were built for.

  30. 30

    A great consolidated list of useful apps for any web designer of any experience level. This is why I look forward to every SM newsletter!

  31. 31

    This is the best and most useful post I have read for a while!
    So many amazing apps for me to sort through.
    Thanks very much for all these great resources! Most of them I haven’t come across before, so it is a pleasant surprise!


  32. 32

    Wauw, Absolutely Great!

  33. 33

    Fantastic collection of useful tools, thanks!

  34. 34

    Very useful tools, many thanks

  35. 35

    Great article. I hope you get paid for referring XRefresh to a lot of designers.

    Btw, i noticed a typographic error at Web Development Project Estimator.

    A personal task list can be created, leaving you to decide which ones to incluse or even exclude.

  36. 36

    Great compilation

  37. 37

    Wow, fantastic list of tools! I’m definitely going to be using these in the future. Thank you for sharing these with us! :)

  38. 38

    Nice list, but there’s one glaring omission: the ColorZilla CSS Ultimate Gradient Editor at http://www.colorzilla.com/gradient-editor/ . It generates the -moz-linear-gradient, -webkit-gradient and IE filter values you need from a graphical UI gradient editor similar to the one in Photoshop. It’s a huge time-saver.

  39. 39

    I would also recommend covrd.com for making magazine and eBook covers.

  40. 40

    seriously I love you guys. serious. :)

  41. 41

    Awesome! Very useful Tools. Thanks very much! I am also collecting some wonderful wordpress themes. You may be insterested in one one of them, the website is themesfarm.com

  42. 42

    Great post…
    Thanks a lot…

  43. 43

    Thank you, I just corrected the typo!

  44. 44

    I love such lists cause I usually find real goodies in there.Thank you for the post!! :)

  45. 45

    Could you please change the title for this article, I can’t put it in my favorites because it conflicts with the title for this article:
    Just kidding, but you should really consider spending just a few more seconds to come up with a more unique title.

    Besides the “Add to favorites” shananagans I think there are some great ressources among the listed – at least I can individually add them to my favorites :-)

  46. 46

    Giacomo Colddesign

    October 20, 2010 12:13 am

    Nice collection.. thanks for sharing!

  47. 47

    Installed XRefresh on my Mac and now Firefox don’t start anymore ;-(

  48. 48

    a bunch of fantastic tools in there, going to test drive a couple of the golden ratio apps in some logo design work I have in today

  49. 49

    Though recession is over still some people are so frustrated that they even can’t praise good things. by the way Mr. Neil with all respect, any good material from your side. Ah i forgot, there is…your response……

    great list.

  50. 50

    Hi Vitaly,

    I think this addon : https://addons.mozilla.org/en-US/firefox/addon/235272/
    is pretty good implementation of photoshop guides. I have been using it lately and its quite good. It can restore the guides you created earlier for a particular page even after you close the tab or close the browser. Plus there are other premium features too.


  51. 51

    spot on sajad Neil the ultimate bull fighter..hahah

  52. 52

    Great article! Thanx, Vitaly!

    I’m using Zootol (http://zootool.com/) to collect all useful links, pages and images.

  53. 53

    Thanks for the great list of web tools and resources!

  54. 54

    Hugh great list ! :)
    Bookmarked !

  55. 55

    Smashing Magazine, you are my new best friend!

  56. 56

    Really awesome tools. But I have to say, there are waaaaay too many bookmarking sites out there.

  57. 57

    What a list! Thanks so much… very cool stuff :)

  58. 58

    I have been looking for a wireframing tool… Seriously, thanks for this information. It’s really going to help me.

  59. 59

    Andreas Ostheimer

    October 20, 2010 12:31 pm

    This article is one of the reasons I keep coming back to smashingmagazine. Thanks for that. Appreciate this free service.

  60. 60

    Great post guys! this is really useful!

  61. 61

    lolololol blatantly blatant

  62. 62

    Great list, I would add Wazala! as a simple snap-on e-commerce tool and shopping cart for any blog or designer website — http://www.wazala.com/

  63. 63

    This is a fantastic list! Thanks for the resources and keep up the good work!

  64. 64

    why wouldn’t i read Smashing Magazine this long? honestly, this website is so helpful.

  65. 65

    After constant QA of multiple websites I found that iMacros for Firefox works wonderfully. I mostly used it for checking links.

  66. 66

    Amazing collection this is really good post

  67. 67

    Fantastic work, really great resources.

  68. 68

    Awesome Collection!

    Thank You!

  69. 69

    I’d also add patterntap.com. Good article though!

    Keep up the good work!

  70. 70

    Awesome, awesome list. I use many of these sites, they really do save hours on a design!

  71. 71

    Can’t expect any better list! Thank you S.Mag!

  72. 72

    Great article – Got to know many cool new things.

    Would also like to recommend http://textmechanic.com
    It’s a browser based tool that just saves you time for text manipulation when Regular Expression just doesnt do the trick…
    It has functions like “remove empty lines”, “sort text lines”, “add/remove line breaks” and other useful features!

  73. 73

    Best list of useful apps I’ve seen thus far. Great work.

  74. 74

    Great list, I use a lot of these, but I found a few new ones. Thanks!

  75. 75

    This portal really helpful for web designers. mentioned here each n every points which can make more creative…..

  76. 76

    “Such posts are quite lengthy and extensive, but they are always worth checking out.”
    50 items is way too much. I takes too much time to check them out.
    And most of the tools are probably not that good.
    So please test the tools and make a selection with maximum 10 items.
    The interwebs is full with these kinds of posts. Try to stand out.

  77. 77

    Wow, every site is like a piece of art, but a useful one. Thanks, they are very handy! :D

  78. 78

    Great list! Very useful indeed.

  79. 79

    Sorry, not too impressed with this one. The only useful one for me was entitycode.com. Some of the others I already use though, so it may just be me.

    You missed out some great tools on this like Pixus for site dimensions and browser emulation, FireBug Lite for IE debugging and Adobe Connect Now for Client interaction.

    Smashing Magazine is still awesome!

  80. 80

    webdesigners are strange people….there is a powerful editor in nearly every adobe collection and they use sites on the web to do things that this editor already does.

    Many other things are simply useless. SelfControl? kill your damn mail client and close facebook. Thats all.

  81. 81

    Well done! Great list.. I am very overwhelmed, inspired, motivated, etc!

  82. 82

    “Droplr is the best way to share files from your Mac OS X on the internet”

    Apparently you have not heard of CloudApp? http://www.getcloudapp.com/

  83. 83

    Have to say, I like the list overall, but also take exception at ‘Typographic Sins’ being listed as a ‘time-saver’. It’s actually 34 ways to take more time over typography, and gives a very black-and-white view. Some points listed aren’t absolute ‘commandments’, but ‘opinions’ that vary depending on the design guidelines followed. Others, such as rules 13, 14 and 32, may be desirable, but are plain wrong in the context of fluid websites – and not noting this creates unrealistic expectations.

    In the context of collaborative writing, like blog commenting, even more of these ‘sins’ are revealed as having a very narrow viewpoint. Many can’t be actioned unless the text-entry box supports HTML (or BBcode, or similar), which is often a security concern. More importantly, they imply that those who contribute without understanding these ‘commandments’ or the codes needed to achieve them are ‘guilty’ of something. If so, who is really to blame – me for not typing “finish” with smart quotes and a ligature, or Smashing Mag for (I’m assuming – but we’ll see when I post) not using something like http://michelf.com/projects/php-smartypants/ with Wolfson’s ligatures patch (http://pages.cs.wisc.edu/~wolfson/ligatures.html)? Or do you not care enough for the souls of your audience to do that? ;-D

    Edited to add: Smart quotes – I’m impressed. Still no ligature, though – have you doomed my soul to an eternity of torment after all? *chuckle*

    Those are complaints against narrow-minded typographers though, not Smashing Mag. Overall – nice post, and much appreciated!

  84. 84

    This is a great compilation. I like the URList the most… it’s gonna save me lots of time in keeping track of my bookmarks.

  85. 85

    Great stuff! You asked for other time-saving ideas: ImageExchange (by PicScout) is a Free plug-in that can save hours of online hunting for the perfect image – AND you can license it at the same time. http://picscout.com/imageexchange/home

  86. 86

    Hi everyone,

    This is John, co-founder of Minus. Just wanted to give a quick update to the readers here :)
    We have made great progress over the past week fixing bugs and adding new features based on user-feedback, as that is our #1 Priority.

    Please be sure to subscribe to our http://blog.min.us and join http://feedback.min.us
    You may also email me personally at john@min.us

    Some of the new features we implemented so far in the past 1 week alone includes:

    – Increased upload limit to 7MB Per image and added more image type support
    – Ability to download entire gallery in Zip format with 1-Click.
    – Full Safari browser on Mac support with drag-drop function
    – Auto-resizing of larger images for smoother gallery viewing experience, but still keeping the original size for direct image link
    – Added display of upload progress, image size and dimensions under each image in gallery.

    We also have Login & Registration + Image/Uploads tracking in the works for this week so we’ll keep everyone updated.
    Again thanks for the awesome feedback so far and keep spreading the word and sending us your suggestions!

    Follow us on http://twitter.com/mindotus
    Subscribe to http://blog.min.us

    John @ Min.us

  87. 87

    WOW! That’s what any web designer needs..Many thanks guys..
    Well done!

  88. 88

    very useful, great list…thanks

  89. 89

    Thanks so much for this ver helpfull post.

  90. 90

    This is why I love Smashing Magazine, great article with heaps of great tools. A number of these pieces will be printed out and will take pride of place on the walls of the web design agency in Beverley. If you haven’t already, sign-up to the SM newsletter now!

  91. 91

    thanks for help

  92. 92


    John here from Minus. Just wanted to make a quick update for everyone as just yesterday was the launch of http://Min.us (Minus) v1.10, a big step forward for Minus and we’re very excited about this update.

    Minus now supports registration/login along with supporting anonymous sharing. Users can now login and track their Gallery URLs on the go anywhere. We encourage everyone to register and try it out as it only takes a minute!

    On top of that, please continue to send us your suggestions to http://feedback.min.us
    Be sure to subscribe to us via our
    Blog: http://blog.min.us
    Twitter: http://twitter.com/mindotus
    Facebook: http://www.facebook.com/pages/Minus/116014978458263

    Thanks again for everyone’s support and feedback! Please continue to share and spread the word on Minus to your friends and family. Blog, Tweet and chat about Minus; Let’s change the way sharing is done!

    John @ Min.us http://Min.us

  93. 93

    Really great and useful list, Good work!

  94. 94

    Absolutely brilliant. Thank you!

  95. 95

    As usual useful collection, thank you

  96. 96

    So many useful tools, I really love this list. It will take much time to test all of them. Thank you.

  97. 97

    Thank you so much, anything to make my process more streamlined is much appreciated. I can’t wait to get started with all these great tools!

  98. 98

    Nice list! I would also like to recommend this set of tools http://multitoolbox.com/design/ I use it almost everyday.

  99. 99

    I’ve wrote a blog post recently about some Photoshop hints and time savers for web designers – http://weavora.com/blog/2012/10/28/photoshop-time-savers-hints-and-decencies/ Could be useful.

  100. 100

    Another cool placeholder image service is http://instasrc.com. They offer a wide variety of images and the service is blazing fast!


↑ Back to top