50 Useful Tools and Resources For Web Designers

Advertisement

An effective, well-organized workflow is an important asset of professional web designers. The more useful and time-saving your tools are, the more time you can focus on important things, thus creating a foundation for timely good-quality results. The problem is that there are just way too many tools, services and resources out there, so it has become difficult to keep track on them and find those tiny little time-savers that will spare you headaches and save time in a long run.

And this is where we come in. Back in old days, Smashing Magazine used to publish lists after lists, with plethora of links that covered different topics all somehow related to web design and development. We have undergone quite a development since then, and are now publishing almost only in-depth articles — written by some of the best professionals in the industry. However, useful, carefully prepared and filtered lists are still useful, and therefore we keep publishing them as well.

Below you’ll find 50 useful tools and time-savers for web designers and developers. Among other things, you will find recently released tools, useful reference sheets, articles and further resources. Such posts are prepared over months, each containing resources found, reviewed or bookmarked by the Smashing Editorial Team. We hope that at least some of them will help you improve your workflow!

You may be interested in the following related posts:

Typography

Meet Your Type: A Field Guide to Typography (free PDF)4
This eBook will help you better understand the foundation of typography and overcome common obstacles and problems when choosing type.

Education5

Web Font Specimen6
This template lets you check the typography by analyzing the HTML-specimen in your browser. The specimen contains whole paragraphs in various line heights and font sizes, different headings, ordered and unordered lists, as well as italic and bold text. You can analyze the body size comparison that reveals aspects of the typeface that can’t otherwise be seen and study single glyphs, measure, grayscale as well as light on dark and dark on light previews. You may want to check out Good Web Fonts7 for the actual specimens of various legible screen fonts.

Screenshot8

Font Anatomy Wallpaper9
This wallpaper (1920×1200) covers the terminology of typography, showcasing indi­vid­ual parts of the char­ac­ters of the alpha­bet.

 Wallpaper: Font Anatomy10

Web FontFont User Guide (PDF)11
This Web FontFont User Guide contains information about typography aimed at different groups of people: web developers, system administrators and website visitors. You may want to consider giving it to your clients or colleagues.

Web FontFont User Guide12

AltFontPrev13
This is a simple JavaScript bookmarklet that lets you view the font stack of any website and then deactivate each font with a single click. It makes it easy not only to make sure everything looks okay when certain fonts aren’t installed on a user’s system, but also to view the fonts included in the website’s font stack in a single click, rather than opening the source code. You can even specify a custom font, which makes it handy when you’re considering changing a design’s current font.

Screenshot14

Typografix15
This tool is an HTML re-processing script for creating beautiful typography. It corrects things like ellipses and smart quotes and adds tags for <script>, <pre> and <code> automatically. The en dash, for example, is created automatically when a hyphen is surrounded by spaces, and the em dash is created when two dashes appear in a row. Typografix is written in C#, requires Windows Installer 3.1 and .NET Framework 3.5 SP1.

Unicode Codepoint Chart16
This chart is broken down neatly by type of character and symbol (and by language in many cases), with a visual reference under each category. From there, just click on the symbol or character you want and you’re brought to a page with detailed information about the character, along with a browser test page, an outline (in SVG format) and a variety of encodings and character sets (HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8, etc.).

Bookmarklets

Quix17
We have covered Quix several once already, but when one talks about bookmarklets, it is just necessary to mention Quix as well. Wouldn’t it be nice to have a powerful command line in your browser, some kind of shell that lets you use handy commands and shortcuts for a quicker and more productive workflow? That’s exactly what Quix offers. The tool is a clever extensible bookmarklet that lets you both access your bookmarks and perform various operations on other websites.

Screenshot18

WP-Toolbar bookmarklet19
This tool will save a lot of clicks as you edit or update posts on your WordPress-powered blog. The bookmarklet gives you quick access to the entire administrative back-end directly in your browser’s window. There is also a GreaseMonkey script20 that automatically loads the toolbar when you visit a particular website.

Screenshot21

Print Friendly Bookmarklet22
This bookmarklet strips advertising, navigation and all things that you don’t want to have when you decide to print out a page. It formats the content of an article or a document for great readbility and generates a minimal and clean PDF for printing.

Print Friendly and PDF23

Bookmarklet Combiner24
This tool creates a master bookmarklet which can either run all bookmarks at once or display a menu at some area of the page. Nice service for users who wants to avoid using a special folder only to hold all bookmarklets.

The Printliminator25
The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.

Bespin Bookmarklet26
Using the Bespin Bookmarklet, you can replace any textarea you encounter with a Bespin editor, making editing the text much more pleasant.

CSS, HTML and JavaScript Tools

eCSStender27
Extensions built with eCSStender simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work — even in IE6.

eCSStender28

CoffeeScript29
This is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

Screenshot30

#grid31
#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views.

Screenshot32

Primer CSS33
This tiny generator works online and has only one function: it extracts from an HTML page (copying and pasting will do) a framework of classes and IDs that can be used as the foundation of an external style sheet. This can be wonderful if you work by first doing the structure in HTML, and then the forms and colors in the style sheet.

Screenshot34

CSS Usage35
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. Each time you run a scan, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

CSS Usage36

JS.Class: Ruby-style JavaScript37
JS.Class is a set of tools designed to make it easy to build robust object-oriented programs in JavaScript. It’s based on Ruby, and gives you access to Ruby’s object, module and class systems, some of its reflection and metaprogramming facilities, and a few of the packages from its standard library. It also provides a package manager to help load your applications efficiently.

JS.Class: Ruby-style JavaScript38

JS Bin39
JS Bin is an application specifically designed to help JavaScript- and CSS-developers to test snippets of code, within some context, and debug the code collaboratively. JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code, new tabs doesn’t). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

JS Bin40

jQuery 1.4.2 Visual Cheat Sheet41
jQuery Visual Cheat Sheet is a updated version of the useful jQuery Cheat Sheet. It includes all the reference you will need for jQuery 1.4.2 API.

jQuery 1.4.2 Visual Cheat Sheet42

Turbine43
Turbine is a collection of PHP-powered tools that decrease CSS development time and help you avoid headaches. Among other things, it has a simple syntax, automatic packing and gzipping of multiple style files, OOP-like inheritance and templating features as well as a shell for experiments and debugging.

Turbine44

Jo: JavaScript Application Framework for HTML545
Jo embraces JavaScript’s object model and leverages CSS3 to handle as much of the presentation and animation as possible. It also provides a consistent and modular event model between objects and plays nicely with other libraries like PhoneGap46.

Jo: JavaScript Application Framework for HTML547

Sencha: HTML5 Mobile App Framework48
Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touch screen devices.

Sencha: HTML5 Mobile App Framework49

Aloha Editor, The HTML5 Editor50
Aloha Editor is an advanced browser-based editor that is faster than other editors and provides you with better and richer formatting in real-time in your browser.

Aloha Editor - The HTML5 Editor51

JavaScript Regex Syntax Highlighter52
Do you want RegexPal-style regex syntax highlighting on your webpages? This library takes care of it for you, so you can spend more time writing regular expressions and less time deciphering them. Currently, JavaScript regexes only are supported.

JavaScript Regex Syntax Highlighter53

OpenStack Open Source Cloud Computing Software54
The goal of OpenStack is to allow any organization to create and offer cloud computing capabilities using open source software running on standard hardware. OpenStack Compute is software for automatically creating and managing large groups of virtual private servers.

OpenStack Open Source Cloud Computing Software55

sweet-template56
Sweet (Simple WEb front-End Template) is a lightweight JavaScript template with high performance. It’s small, fast, easy to use, and, most important, extensible. It also can be integrated with jQuery.

sweet-template - Project Hosting on Google Code57

jQuery Deconstructed58
The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools. It breaks the physical JavaScript into visual blocks that you can easiliy navigate. Each block opens to reveal its internal code. Clickable hyperlinks allow you to follow program flow.

jQuery Deconstructed59

Alloy UI60
Alloy is a UI metaframework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.

Alloy UI61

Google JavaScript Style Guide62
This document provides a set of conventions (sometimes arbitrary) that hold the style guidelines used for Google code. It covers general good practices for open-source projects and well-written and well-documented code. It covers a lot of ground, from “use camelCase for variable names” to “never use global variables” to “never use exceptions.”

gleeBox63
Gleebox provides a way to navigate web pages via keyboard. For instance, it allows you to hit the ‘G’-key and every link on the page will be highlighted. This application is available as an extension for Firefox and Google Chrome.

shellinabox64
Shell In A Box implements a web server that can export arbitrary command line tools to a web based terminal emulator. This emulator is accessible to every browser that supports JavaScript and CSS and does not require any additional browser plugins.

Juicer: a CSS and JavaScript packaging tool65
Juicer is a new command line tool that helps by resolving dependencies, merging and compressing files. It can check the syntax, add cache busters to and cycle asset hosts on URLs in CSS files.

Jake: A Build Tool for JavaScript66
Jake is a new build tool built entirely in JavaScript that runs on top of the CommonJS. As its name suggests, it is based on the existing and already popular Rake tool and benefits from the same simplicity.

Closure Compiler67
The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

Useful Online Tools and Services

ComparePSD (Win only)68
This tool lets you compare two Photoshop files side by side and see every little difference. Look for differences by layer or by effect. You get a scaled view of the files, so you can see them next to each other and pick out differences more quickly. ComparePSD is available for Windows only and is free to download and use.

Screenshot69

Secure Passwords Generator70
The tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).

Screenshot71

SwatchSpot: Random Color Swatch Generator72
This tool creates random color swatches to inspire you. Lock in the colors you like and shuffle away the ones you don’t. Once you’re done, grab the color codes or download your palette.

Random Color Swatch Generator | SwatchSpot73

Yuuguu: Instant screen sharing and web conferencing74
This tool provides instant web-conferencing, online meetings and collaboration and enables you to work with your customers, partners and colleagues right away, without a single download. The free version allows for 100 minutes per month of web conferencing.

Yuuguu: Instant screen sharing and web conferencing75

Web Form Recovery Firefox Plugin76
Lazarus securely auto-saves all forms as you type, so after a crash or server timeout you can go back to the form, right click, “recover form”, and breathe a sigh of relief.

Lazarus: Form Recovery :: Add-ons for Firefox77

Which loads faster?78
This tool lets you see two websites load side by side in real time. Then it shows how long each took to load and the percentage difference.

Screenshot79

Faary80
Faary is an online form builder that operates with the help of text lines, and the form is generated as such. The tool creates an HTML form with CSS, which can be downloaded as a ZIP archive.

Screenshot81

Scr.im82
Scr.im lets you use a shortened URL to give out your email address safely and securely on forums. Just enter your email address on Scr.im and it will give you a link to a page with your email address, with security to prevent bots from viewing it.

83

Name Checklist84
This tool will help you find out if your brand name, username, domain and vanity url are still available online or they are already taken.

Find your name the easy way!85

Quora – Web Design86
Quora is a continually improving collection of questions and answers created, edited, and organized by everyone who uses it. You can follow web design, usability and related discussions and ask your questions as well.

Quora - Web Design87

Todo.txt Command Line Interface88
If you’ve got a file called todo.txt on your computer right now, this script is for you. You probably don’t want to launch a full-blown text editor every time you need to add an item to your to-do list, or mark one that’s already there as complete. With this simple shell script, you can interact with todo.txt at the command line for quick and easy, Unix-y access.

Todo.txt Command Line Interface89

Note and Point90
This gallery highlights beautiful Keynote, PDF and PowerPoint-slides on the Web (mostly Web design-related) which is great for inspiration if you are thinking about creating beautiful and attractive slides for your next presentation.

Screenshot91

ManyBooks92
This site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats.

93

Tweetment94
This service allows you to design sexy web pages for your tweets.

Tweetment95

Browser Cover Generator96
This simple tool generates a browser preview of an uploaded image and can add address bar URL, window title, shadow, status bar and various browser skins to the image.

Linkification Firefox Plugin97
Linkification Converts text links into genuine, clickable links. To view and set options, you can use the Linkification right-click context menu.

Useful References and Guides

Design Is History98
This resource showcases the evolution of design through time. It was created as a teaching tool for young designers just beginning to explore graphic design and as a reference tool for all designers. As a designer it is important to understand where design came from, how it developed, and who shaped its evolution. The more exposure you have to past, current and future design trends, styles and designers, the larger your problem-solving toolkit. The larger your toolkit, the more effective of a designer you can be.

A History of the Site99

User Interface Style Guides100
This page features some useful links to style guides used by large websites, corporations and news agencies (e.g. the BBC Style Guide101), including editorial guidelines, quality guidelines and online standards.

Screenshot102

Trademarkia103
Trademarkia is a free search engine for U.S. federally registered trademarks on the Internet. They provide up to the minute contextual information about the current use of interesting business names, slogans, and logos through pictures, commercials, and conversations from Flickr, Google, Youtube, and Twitter for each U.S. trademark filed with the United States Patent and Trademark Office (USPTO) since the year 1870.

Trademarkia104

Icon Reference Chart105
This chart, created by Jon Hicks, was created to collect the sizes, formats and the related information about icons used on different devices. At the moment it covers browsers, Android, iPad, iPhone, iPhone 4, Linux, Mac OS X and Windows. And you can also download a template for iPhone and iPad icons. Useful.

Icon Reference106

OpenWith.org107
OpenWith is a directory of existing file extensions and free tools to open them. You’ll find a free program for just about everything you would ever need to open, including source code, data files, disc images, spreadsheets and video files.

Screenshot108

ScriptSrc.net109
This site puts all the latest versions of script tags from the various JavaScript libraries in one place. Whether you use jQuery, swfobject, Chrome Frame, MooTools, Ext JS, YUI, Prototype, Dojo or Scriptaculous, you’ll find the most recent script tags here.

Screenshot110

Colours In Cultures Chart111
This map shows how colours are perceived in different cultures and nations across the globe.

Colours In Cultures112

Guidelines and standards manuals113
Handy examples of guidelines and standards manuals used by companies and brands online. Also check Branding & Corporate Identity Design114 page.

Identityworks: Tools - Guidelines and standards manuals115

Code Standards and Front-End Development Best Practices116
This document outlines de-facto code standards in professional modern front-end development. The primary motivation of the document is code consistency and best practices. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. Nice and useful overview.

Code Standards and Front-End Development  Best Practices117

Essential Tools You Always have Handy When Fixing a PC Problem?118
This forum thread features must-have tools that you should keep loaded on your thumb drive when asked to deal with a family member of friend’s personal computer issue.

SuperUser119

Project Management For Dummies120
Because of the ever-growing array of huge, complex, and technically challenging projects in today’s world, project management has become a critical skill. This page provides a nice project management cheat sheet that will help you handle your project management assignments, such as confirming a project’s justification, developing project objectives and schedules, and maintaining commitment for a project.

Project Management For Dummies121

Expression Engine Reference Chart122
A quick and useful reference guide for ExpressionEngine users. A PDF-version is available as well.

Quick Reference Chart123

Computer Hardware Chart124
A detailed and handy hardware chart for notebook RAM, desktop RAM, CPU sockets, hard drives, ports, processor card slots, processor card sockets, peripheral cards, desktop card slots and power connectors.

Computer Hardware Chart125

Corporate Identity / Logo Usage Guides126
A collection of documents that illustrate how organizations and companies ensure that their branding remains consistent online and in print.

ASCII: The Pronouncation Guide127
ASCII stands for American Standard Code for Information Interchange. Computers can only understand numbers, so an ASCII code is the numerical representation of a character such as ‘a’ or ‘@’ or an action of some sort. The non-printing ASCII characters are rarely used for their original purpose. This page features an ASCII character table and includes descriptions of the first 32 non-printing characters and the guide to their pronouncation.

Name Pronunciation Guide128
Inogolo is a practical, easy-to-use website devoted to the English pronunciation of the names of people, places, and miscellaneous stuff. The site contains a searchable database of names with both phonetic and audio pronunciations in English.

Usability and User Experience

Hand picked UX related resources129
UXMARKZ is a collection of hand picked UX related resources, updated daily. You will find interesting sites, articles, videos, images and slideshows from the field of interaction design, usability, information achitecture, user interface design and other. All submissions are moderated.

UXMARKZ - Hand picked UX related resources130

UX Myths131
This ressource is supposed to help you build your website based on evidence, not false beliefs. UX Myths collects the most frequent user experience misconceptions and explains why they don’t hold true. And you don’t have to take their word for it, the site shows you a lot of research findings and articles by design and usability gurus.

UX Myths132

User Interface Design Patterns for Ideas and Inspiration133
A user interface design pattern library. It is a collection of Web design patterns and best practices which helps you to find inspiration and design interfaces with great user experience. It is also a user interface gallery full of real world examples of our patterns.

User Interface Design Patterns for Ideas and Inspiration134

Last Click

How Do I Win Rock Paper Scissors Every Time?135
Now, that’s a handy resource: have you ever gotten tired of being crushed by Rock, cut to shreds by Scissors, or smothered by Paper? This graphic has information compiled about Rock, Paper, Scissors (RPS) from the World RPS Society, the masters of Rock, Paper, Scissors, to help you overcome your opponents and understand the strategies needed to win Rock, Paper, Scissors every time.

How Do I Win Rock Paper Scissors Every Time?136

The Universal Packing List137
This tool generates a custom packing list for your journeys. You have to provide some basic information about the journey and a packing list appears immediately.

The Universal Packing List138

Ex-blocker139
The Ex-blocker is a plugin that hides any information about your ex online. The tool is available as a Firefox and Chrome extension.

Ex-blocker140

Not Beans Again141
An online tool that finds a recipe from your ingredients. Enter what you have got in your fridge to the “Ingrediometer” and see if the tool can come up with a recipe for you.

Not Beans Again - find a recipe from your ingredients142

A Coder’s Guide to Coffee143
As most software and creative professionals know, coffee is an important technology for boosting mental acuity and maintaining peak on-the-job performance. But did you also know that coffee can be a damn tasty beverage? All you need is the appropriate amount of disrespect for the mainstream coffee industry and a desire to enjoy a better beverage.

A Coder’s Guide to Coffee144

Flipboard145
Flipboard is a free personalized social magazine for your iPad. It allows you to quickly flip through news, photos and updates your friends are sharing on Facebook and Twitter. The emergence of tools like this is what will make iPad a truly useful and handy device for many people.

Flipboard146

Related Posts

You may be interested in the following related posts:

Footnotes

  1. 1 http://www.smashingmagazine.com/2010/06/28/50-powerful-time-savers-for-web-designers/
  2. 2 http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/
  3. 3 http://www.smashingmagazine.com/2009/06/29/45-incredibly-useful-web-design-checklists-and-questionnaires/
  4. 4 http://www.fontshop.com/education/
  5. 5 http://www.fontshop.com/education/
  6. 6 http://webfontspecimen.com/
  7. 7 http://www.goodwebfonts.com/
  8. 8 http://webfontspecimen.com/
  9. 9 http://font.is/2009/07/wallpaper-font-anatomy/
  10. 10 http://font.is/2009/07/wallpaper-font-anatomy/
  11. 11 http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  12. 12 http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  13. 13 https://code.google.com/p/altfontprev/
  14. 14 http://samrayner.com/archives/altfontprev/
  15. 15 https://code.google.com/p/typografix/
  16. 16 http://inamidst.com/stuff/unidata/
  17. 17 http://quixapp.com/
  18. 18 http://quixapp.com/
  19. 19 http://iamnotagoodartist.com/other/wordpress-admin-toolbar-bookmarklet/
  20. 20 http://www.kulturbolschewismus.de/2010/03/03/wordpress-admin-toolbar/
  21. 21 http://iamnotagoodartist.com/other/wordpress-admin-toolbar-bookmarklet/
  22. 22 http://www.printfriendly.com/
  23. 23 http://www.printfriendly.com/
  24. 24 http://w-shadow.com/bookmarklet-combiner/
  25. 25 http://css-tricks.com/examples/ThePrintliminator/
  26. 26 https://bespin.mozillalabs.com/bookmarklet/
  27. 27 http://ecsstender.org/
  28. 28 http://ecsstender.org/
  29. 29 http://jashkenas.github.com/coffee-script/
  30. 30 http://jashkenas.github.com/coffee-script/
  31. 31 http://hashgrid.com/
  32. 32 http://hashgrid.com/
  33. 33 http://www.primercss.com/
  34. 34 http://www.primercss.com/
  35. 35 https://addons.mozilla.org/en-US/firefox/addon/10704
  36. 36 https://addons.mozilla.org/en-US/firefox/addon/10704
  37. 37 http://jsclass.jcoglan.com/
  38. 38 http://jsclass.jcoglan.com/
  39. 39 http://jsbin.com/
  40. 40 http://jsbin.com/
  41. 41 http://woorkup.com/2010/06/13/jquery-1-4-2-visual-cheat-sheet/
  42. 42 http://woorkup.com/2010/06/13/jquery-1-4-2-visual-cheat-sheet/
  43. 43 http://turbine.peterkroener.de/
  44. 44 http://turbine.peterkroener.de/
  45. 45 http://grrok.com/jo/
  46. 46 http://www.phonegap.com/
  47. 47 http://grrok.com/jo/
  48. 48 http://www.sencha.com/products/touch/index.php
  49. 49 http://www.sencha.com/products/touch/index.php
  50. 50 http://aloha-editor.com/
  51. 51 http://aloha-editor.com/
  52. 52 http://stevenlevithan.com/regex/syntaxhighlighter/
  53. 53 http://stevenlevithan.com/regex/syntaxhighlighter/
  54. 54 http://openstack.org/
  55. 55 http://openstack.org/
  56. 56 http://code.google.com/p/sweet-template/
  57. 57 http://code.google.com/p/sweet-template/
  58. 58 http://www.keyframesandcode.com/resources/javascript/jQuery/deconstructed/
  59. 59 http://www.keyframesandcode.com/resources/javascript/jQuery/deconstructed/
  60. 60 http://alloy.liferay.com/
  61. 61 http://alloy.liferay.com/
  62. 62 http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
  63. 63 http://thegleebox.com/
  64. 64 http://code.google.com/p/shellinabox/
  65. 65 http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool
  66. 66 http://cappuccino.org/discuss/2010/04/28/introducing-jake-a-build-tool-for-javascript/
  67. 67 http://code.google.com/intl/de-DE/closure/compiler/
  68. 68 http://pixelnovel.com/comparepsd/
  69. 69 http://pixelnovel.com/comparepsd/
  70. 70 http://www.pctools.com/guides/password/
  71. 71 http://www.pctools.com/guides/password/
  72. 72 http://swatchspot.com/
  73. 73 http://swatchspot.com/
  74. 74 http://www.yuuguu.com/home
  75. 75 http://www.yuuguu.com/home
  76. 76 https://addons.mozilla.org/en-US/firefox/addon/6984/
  77. 77 https://addons.mozilla.org/en-US/firefox/addon/6984/
  78. 78 http://whichloadsfaster.com/
  79. 79 http://whichloadsfaster.com/
  80. 80 http://faary.com/
  81. 81 http://faary.com/
  82. 82 http://scr.im/
  83. 83 http://scr.im/
  84. 84 http://www.namechecklist.com/
  85. 85 http://www.namechecklist.com/
  86. 86 http://www.quora.com/Web-Design
  87. 87 http://www.quora.com/Web-Design
  88. 88 http://ginatrapani.github.com/todo.txt-cli/
  89. 89 http://ginatrapani.github.com/todo.txt-cli/
  90. 90 http://noteandpoint.com/
  91. 91 http://noteandpoint.com/
  92. 92 http://manybooks.net/
  93. 93 http://manybooks.net/
  94. 94 http://tweetment.com/
  95. 95 http://tweetment.com/
  96. 96 http://www.browsercover.me/
  97. 97 https://addons.mozilla.org/en-US/firefox/addon/190
  98. 98 http://www.designishistory.com/
  99. 99 http://www.designishistory.com/
  100. 100 http://konigi.com/wiki/user-interface-style-guides
  101. 101 http://www.bbc.co.uk/guidelines/index.shtml
  102. 102 http://konigi.com/wiki/user-interface-style-guides
  103. 103 http://www.pageplane.com/basic_design/the_ultimate_research_tool_for.html
  104. 104 http://www.pageplane.com/basic_design/the_ultimate_research_tool_for.html
  105. 105 http://hicksdesign.co.uk/iconreference/
  106. 106 http://hicksdesign.co.uk/iconreference/
  107. 107 http://www.openwith.org/
  108. 108 http://www.openwith.org/
  109. 109 http://scriptsrc.net/
  110. 110 http://scriptsrc.net/
  111. 111 http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
  112. 112 http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
  113. 113 http://identityworks.com/tools/guidelines_and_standards_manuals.htm
  114. 114 http://www.logoorange.com/branding-corporate-identity.php
  115. 115 http://identityworks.com/tools/guidelines_and_standards_manuals.htm
  116. 116 http://molecularvoices.molecular.com/standards/
  117. 117 http://molecularvoices.molecular.com/standards/
  118. 118 http://superuser.com/questions/98423/what-are-the-essential-tools-you-always-have-handy-when-attempting-to-fix-someone
  119. 119 http://superuser.com/questions/98423/what-are-the-essential-tools-you-always-have-handy-when-attempting-to-fix-someone
  120. 120 http://www.dummies.com/how-to/content/project-management-for-dummies-cheat-sheet.html
  121. 121 http://www.dummies.com/how-to/content/project-management-for-dummies-cheat-sheet.html
  122. 122 http://expressionengine.com/user_guide/quick_reference.html
  123. 123 http://expressionengine.com/user_guide/quick_reference.html
  124. 124 http://www.geekologie.com/2009/07/22/computer-hardware-2.jpg
  125. 125 http://www.geekologie.com/2009/07/22/computer-hardware-2.jpg
  126. 126 http://www.scribd.com/group/15-corporate-identity-logo-usage-guides
  127. 127 http://ascii-table.com/pronunciation-guide.php
  128. 128 http://inogolo.com/
  129. 129 http://uxmarkz.com/
  130. 130 http://uxmarkz.com/
  131. 131 http://uxmyths.com/
  132. 132 http://uxmyths.com/
  133. 133 http://patternapp.com/
  134. 134 http://patternapp.com/
  135. 135 http://www.chacha.com/content/infographics/How-do-i-win-rock-paper-scissors-every-time#
  136. 136 http://www.chacha.com/content/infographics/How-do-i-win-rock-paper-scissors-every-time#
  137. 137 http://upl.codeq.info/
  138. 138 http://upl.codeq.info/
  139. 139 http://blockyourex.com/
  140. 140 http://blockyourex.com/
  141. 141 http://www.notbeansagain.com/
  142. 142 http://www.notbeansagain.com/
  143. 143 http://blog.moertel.com/pages/coders-guide-to-coffee
  144. 144 http://blog.moertel.com/pages/coders-guide-to-coffee
  145. 145 http://www.flipboard.com/
  146. 146 http://www.flipboard.com/
  147. 147 http://www.smashingmagazine.com/2010/06/28/50-powerful-time-savers-for-web-designers/
  148. 148 http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/
  149. 149 http://www.smashingmagazine.com/2009/06/29/45-incredibly-useful-web-design-checklists-and-questionnaires/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    About graphism tools, I made an online ruler tool, only with Javascript & CSS (with a drag & drop ruler, in pixel, inches & centimeter). See here an example with smashingmag : http://abricocotierfr.appspot.com/ruler?q=http://www.stumbleupon.com/

    1
  2. 2

    Thanks for the huge list of resources…………They really help in saving our time as well as increases the productivity in a professional manner…

    I liked the printer friendly tool very much….

    Hope to see some more resources in the list soon… :)

    0
  3. 3

    This is a totally awesome list. Thank you so much. Hadn’t heard of scrim – I’m all over it. :)

    0
  4. 4

    Maxime De Greve

    July 26, 2010 5:07 am

    Nice list!

    0
  5. 5

    Quicklycode is the best website for references and guides!

    0
  6. 6

    Jonathan Goldford

    July 26, 2010 5:33 am

    This is a great list. Bookmarked.

    0
  7. 7

    How about changing the Smashing magazine logo??

    0
  8. 8

    Zlatan Halilovic

    July 26, 2010 5:49 am

    holy mother of God! This is spectacular!

    0
  9. 9

    Anyone using ecsstender with any success?

    0
  10. 10

    Goddamn do I love you, Smashing.

    1
  11. 11

    What a great collection, I’m definitely bookmarking these for future ideas. They all have a ‘professional’ feel to them too.

    0
  12. 12

    I object !

    there should not be 50 tools in one post. it made my head twist.

    i think anything more than 20 is starting to bore.

    0
  13. 13

    A great list that is no doubt going to help me immensley – niiice!!!

    0
  14. 14

    Wooow !
    Great List ! Thanks ! Bookmarked & Shared !!!
    I love flipboard app, it’s very useful to read tweets.

    0
  15. 15

    I get most of them but “x-blocker” ? I mean don’t get me wrong, I might actually find it useful but a web design tool? Woot!

    0
  16. 16

    Last time I tried it my browser froze, apparently it’s not as good as it was hyped out to be. This happened on a quad core machine.

    The real value of such a tool would be the possibility to make a website that’s compatible with older browsers, older browsers tend to reside on older machines, even if they optimize it better I’m not sure if it will ever work on a 1.6 GB Celeron running a 4 year old Windows XP with IE6.

    -1
  17. 17

    Wow, pretty awesome compilation of resources here, smashmag, you’re simply amazing, thank you very much for this post.

    0
  18. 18

    Nice list, but OpenStack as a CSS, HTML and JavaScript tool?

    That might confuse non-infrastructure people a bit. OpenStack is a tool for making/managing your own private or public cloud.

    Michael

    0
  19. 19

    Excellent article! Thank you for the list of resources.

    0
  20. 20

    Vitaly Friedman

    July 26, 2010 7:45 am

    Oops, sorry, I wanted to add it to the “Last Click”-section, but it accidentally landed in the wrong section. Fixed it now!

    0
  21. 21

    I am interested to read mostly about typography and I would like to know if the listing of the websites here is random or they are actually listed as, first, the most important/cool one, second the less important one, etc. Thanks !

    0
  22. 22

    Great article! You forgot one tool probably, it’s still in alpha version, but it’s the best one currently. jsFiddle : [http://jsfiddle.net] it’s very similar to jsBin but much much more advanced and thorough.

    0
  23. 23

    awesome list. nothing i love more than delicately crafted pretty tools.

    0
  24. 24

    Vitaly, great list! I would add IzzyMenu.com here, a free XHTML/CSS menu builder.

    Thanks!

    0
  25. 25

    Couple typos in the “Print Friendly Bookmarklet”

    print our(T) a page. It formats the content of an article or a document for great readbility and generate(S)

    Nice article, never knew about a lot of those!

    0
  26. 26

    Wow. Some great tools here I’d never heard off… you are not ‘Vitaly Friedman’, you are ‘Vitaly Superman’. Thank you for putting this together. Excellent List.

    -1
  27. 27

    Great List! Thanks Vitaly… :)

    1
  28. 28

    Bratu Sebastian

    July 26, 2010 6:57 pm

    Nice list, the tools are amazing for web designers!

    1
  29. 29

    Great post.

    -1
  30. 30

    Vitaly Friedman

    July 26, 2010 11:38 pm

    Oh, I am sorry about that. The typos are fixed now.

    2
  31. 31

    hi,
    I concur with Bassem. You forgot jsFiddle : [http://jsfiddle.net] , which supports all kinds of JS libraries : Mootools, jQuery, EXTJS, YUI, Prototype, DOJO and Raphael. Discussions on the piece of code are possible. Python based.
    HTML, JavaScript AND CSS can be added (whereas JSBin, afaik, dont allow CSS).
    Great article, BTW.

    1
  32. 32

    really great tools and resources!
    Ill never have to write “body” again (PrimerCSS), I will always win rock, paper, scissors (How Do I Win Rock Paper Scissors), and I will never again stumble upon the devilishly grinning facebook avatar of my ex!
    Thanks a lot ;)

    -1
  33. 33

    Wow.
    Danke!

    0
  34. 34

    Its a great resource for any web designer or developer. I will tweet this definitely.

    1
  35. 35

    Here are some other projects related to open source cloud computing:

    http://ostatic.com/blog/5-cost-efficient-flexible-open-source-resources-for-cloud-computing

    0
  36. 36

    I’ll bookmark this post, Vitaly your awesome, thanks for this stuff, more blessing for you man.. XD

    keep sharing!

    -1
  37. 37

    styleneat.com?

    Nice list, I somehow missed flipbaord until now!!

    -1
  38. 38

    Fantastic list! I would add SpiderPic (http://www.spiderpic.com) to find stock photos for your designs for the best price.

    0
  39. 39

    Interesting.. Thank you! i use and would add online font tool from here: http://intelligencestorm.com/intelligencefont/

    0
  40. 40

    Perhaps you should look for an editor that fixes spelling as you type …
    Ressource is usually spelled resource.
    UX Myths
    This ressource …

    0
  41. 41

    I’ve actually seen swatch spot in some other collection of these, somewhere… and was astonished that anyone would consider it over kuler:

    kuler.adobe.com

    0
  42. 42

    Awesome work !! Thanks a ton

    1
  43. 43

    Flood!!
    Awesome post

    0
  44. 44

    Thanks for the legwork. Hadn’t heard of some of these. Nice list.

    0
  45. 45

    There are a lot of useful resources that I’ve never come across here. The Web Font Specimen resource is particularly useful, as I tend to spend ages looking for the correct font on my web work. The tool seems very easy to use and very helpful.
    I think a few more design resources could be added to this list, for example resources on image and colour.
    I use adobe kuler when decided on colour schemes as they are easily importable to Photoshop, and offer inspiration to the beginning of the design process.

    0
  46. 46

    good list, in the js section you missed php.js – a library that offers common php functions translated into javascript – a complete list of functions can be found here:
    http://phpjs.org/functions/index

    0
  47. 47

    Great, very useful post, thx

    0
  48. 48

    Hey,

    I am a graphic designer myself and I loved the 50 Useful Tools & Resources you posted… Really Helpful… Great Work… Keep up !!!

    Spare a second visit buymicrostock.com/

    Best,
    Nick Jones

    0
  49. 49

    A bunch of unique tools and resources!
    I love these!

    Thanks Vitaly.
    I’d love to see more of these kinds!

    0
  50. 50

    Hey,

    I am a graphic designer myself and I loved the 50 Useful Tools & Resources you posted… Really Helpful… Great Work… Keep up !!!

    Spare a second visit buymicrostock.com/

    Best,
    Nick Jones

    0
  51. 51

    Meet your type is fantastic! Great sense of humour included ;)

    0
  52. 52

    Nice post Vitaly!
    Let’s hope to be in the next series of tools with creonomy.com/

    0
  53. 53

    height s of awesomeness :)

    0
  54. 54

    Really great article! Loads of information! Bookmarked and featured this post in my Tweets of the Week!

    0
  55. 55

    How did you miss Instapaper (under Bookmarklets)? It’s gotta be one of the most used services out there, especially with the free(& paid) iPhone Apps.

    Great Article otherwise.

    Cheers

    0
  56. 56

    Thanks to Smashing Magazine. The tools here are very useful and good use for inspiration. Keep up. We’re everyday visiting you.

    - jroxsol.com
    Web Design Philippines

    0
  57. 57

    LOVEIT. Thank u so much for a great list. JQuery rules. I also like faary. For my contact forms, I use quickwebform.com. Do you know any other contact form creator?

    0
  58. 58

    Thank you!

    -1
  59. 59

    One of the best articles I read in the last few months. Accurate descriptions for each tool and a lot of fun in the “Last Click” section. Perfect read for a rainy Tuesday.

    0
  60. 60

    Simply awesome!!!! Really helped me a lot for my design resources collection. Thanks Freidman

    0
  61. 61

    If you want to handle projects, clients, time tracking, proofing then you have a good choice named Proofhub. I am using this and I want that everyone should take an advantage.

    0
  62. 62

    If you want to handle projects, clients, time tracking, proofing then you have a good choice named Proofhub. I am using this and I want that everyone should take an advantage.

    0
  63. 63

    Awesome list, thanks I have compiled a list as well of my own if any of you are interested:

    voltagenewmedia.com/graphic-design/list-of-resources-for-web-graphic-designers/

    0
  64. 64

    Nice post. Being as an designer, I understand how useful these tools are and how helpful stuff these resources provide.

    I would also recommend you to include an invoicing app in this post as an invoicing app is mandatory app to run a business and a designer is required to use one to manage his invoices and payments. I personally use http://www.invoicera.com to invoice my clients and to keep track of my projects and expenses. This really made my work so easy.

    0
  65. 65

    Great list!

    An interesting addition would be a web-based code editor, like http://codey.co/ or http://shiftedit.net/

    0
  66. 66

    Wow, very extensive list. I will definitely spend time examining each of these tools. I can see how the ex-blocker will make you more productive lol

    0
  67. 67

    Hatim Zuzzer Shamsuddin

    March 19, 2013 11:56 pm

    This is one of the Best Post regarding the tools and resources for Web Designers!
    Awesome Work!

    1
  68. 68

    This is a fantastic article! I am a (fairly recent) big fan of Smashing Mag, and an enthusiastic beginner to the world of web development. I noticed that this post was from 2010, and I just wanted to say that I hope that this list gets updated to the latest and greatest tools that are out there, especially with HTML5 and CSS3. Thank you for the great work!

    0
  69. 69

    Awesome post Vitaly.
    I loved how you have jotted down the best tools and mentioned their important aspects. One more such tool is proofhub, which helps designers to share their design drafts with the clients and get approvals and feedback as comments directly on the file. Here’s more what it can do: http://www.proofhub.com/

    0

↑ Back to top