Useful Resources, Tools and Services for Web Designers

Advertisement

Productivity is a crucial asset of professional Web designers and developers. We regularly look for new resources, tools and services to make the search of these ever-growing techniques easier. Once we have a reasonable number of useful resources, we prepare them in a handy overview for your convenience. In this post we present some of the useful resources and tools for designers and Web developers.

Please don’t hesitate to comment to this post and let us know how exactly you use these tools in your workflow. Please do avoid link dropping and share your insights and your experience instead. A big thank you to all designers and developers out there for releasing and producing useful, valuable resources for all of us to use. We sincerely appreciate it.

Useful Resources and Websites

Method & Craft1
Describing itself as “the DVD extras of design,” this site offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers.

The DVD Extras of Web Design2

DesignersMX3
This site is dedicated to finding out which tunes keep designers around the globe rolling and get their creative juices flowing. Just sign up, log in and share your own compilation of fresh beats and bright tunes.

DesignersMX: Which Tunes Keep Designers Rolling?4

Little Big Details5
This site features tiny details that help improve the user experience of websites and mobile apps. You can also share your favorite little things on the website. The collection is very useful — with more design examples submitted regularly.

Screenshot6

Shady Characters7
This blog, owned by Keith Houston, aims to shed light on the history of both well-known and outlandish marks of punctuation. It’s an interesting study in the stories behind the punctuation we use every day.

The Secret Life of Punctuation8

An Illustrated Guide9
This project reviews some of the notable picture books. Guide’s authors, Catherine and Matthew Buchanan, have collected many of them from the last decade. The books are categorized according to cover art styles and reading level.

An Illustrated Guide10

CV PARADE11
This website celebrates the art of the résumé — a great collection of different and unique CVs that might be useful for you if you are about to polish your own CV.

CV PARADE12

Comic Sans Criminal13
The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to this site which lays out the reasons why Comic Sans is misused and offers some helpful alternatives.

Death to Comic Sans14

Where Do You Want To Work Today?15
A simple way for freelancers, contractors and other nomadic workers to check out some great places where they can work in a different environment for a change.

Where do you want to work today?16

Node Cloud17
NodeCloud is a resource directory gathering sites related to Node.js and ordering them by their Alexa traffic, allowing to evaluate relative popularity of a project.

Node Cloud18

WeekendHacker19
This site provides a mailing list you can issue a cry for help for one of those tiny projects that cross your path — whether you’re a designer, developer, or both.

WeekendHacker: A Place for Small Collaborative Projects20

The Phraseology Project21
Here you can submit a letter, word or phrase which is then turned into a beautiful design by the website’s founder, Drew Melton, or his colleagues.

Phraseology Project22

Designers & Books23
This projects presents short reviews of books that esteemed members of the design community identify as personally important, meaningful, and formative. Designers introduce one or more books that have influenced their ideas and values. You’ll also find members who have created must-read lists for different disciplines in design.

Inspirational books for designers and artists24

Quotevadis25
Quotevadis is a Tumblog that offers quotes from creative and intelligent individuals from both past and present. An excellent replacement for the dusty old “about:blank” page in your browser.

Quotevadis: Inspiring and Interesting Quotes26

Let’s Swap27
In case you’ve had a particular artistic piece hanging around for a while, you could try swapping it with other artists for prints, books, zines, original artwork, tshirts, sculptures, or any other objects.

Let's Swap28

ideeeas29
This project collects brainwaves from people who have brilliant, fancy ideas on any topic. There are posts with popular or useful social ideas that could make the world just a little better.

Screenshot30

A Working Library31
A great book cover definitely makes for a graceful entrance, but the thought of it disappears as you start reading the book. This website aims to explore the ways we read — without being overtly conscious of the cover design.

32

The Godfounder33
A blog which showcases details that make Web apps successful, in particuliar little details that show designer’s attention to users’ needs.

The Godfounder Blog - Virality in Web Apps34

FPO: For Print Only35
A blog dedicated to both visual stimulus and detailing of the development and production of printed matter such as annual reports, books, business cards, stationery suites, collateral materials, posters, packaging and anything else where ink meets substrate.

FPO: For Print Only36

What Software and Hardware Do Professionals Use?37
A useful resource for people who love to keep discovering new tools. Browse these nerdy interviews and guaranteed, you will come across some new wonders, especially because every interviewee explains why they have chosen a particular tool.

What Software and Hardware Do Professionals Use?38

Browser Details for Tech Support39
When in doubt, send your customers to the website Support Details. Their data will be automatically read out of the browser and sent directly to you via email or will be saved. The free service uses Flash but can also complete its task without it.

Browser Details For Tech Support40

The UX Bookmark41
A resource for HCI and human factors professionals, usability engineers, interaction designers as well as information architects. You can submit a link if you feel that it would benefit the UX Design Community.

The UX Bookmark42

Web Font Hosting Services Reviewed43
A good overview of web font hosting services you can always look up when in doubt:

Web font hosting services44

Android Patterns45
Design patterns, which are basically reusable solutions for recurring problems, can be found in many design niches. Recently, they’ve also turned up in user interface designs for Android apps. Android Patterns publishes a comprehensive set of interaction patterns that can help you design Android apps.

User Interface Patterns For Android Apps46

Useful Tools, Libraries, Plugins

Rapid Prototyping with flickrBomb47
flickrBomb is a jQuery plugin that helps you quickly fill your prototypes with relevant content, and not just dull gray placeholder images when making a website.

Rapid Prototyping with flickrBomb - ZURB Playground - ZURB.com48

Unix Terminal/Console/Curses Tools49
A nice list of 28 tools for the UNIX Terminal and Console. Some are little-known, some are just too useful to miss, some are pure obscure. You can use your operating system’s package manager to install most of them.

Cool, but obscure unix tools :: KKovacs50

.htaccess tester51
A very simple tool that lets you test your .htaccess rewrite rules. Simply fill in the URL that you’re applying the rules to, place the contents of your .htaccess on the larger input area and analyze if the rules are doing what they are supposed to do.

Simple htaccess tester - A bite of bits52

CSS Lint53
CSS Lint is a useful tool to help you detect problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

CSS Lint54

Log.io55
Here is a way how to perform real-time log monitoring in your browser. Harvesters watch log files for changes, send new log messages to the server, which broadcasts to Web clients. You can then create stream and history screens to view and search log messages.

Log.io - Real-time log monitoring in your browser56

Popuload for Adobe Photoshop57
Rather than idly waiting for each processing task in Adobe Photoshop to finish, you can spend that time browsing the latest news feeds. Popuload has been programmed to detect when any Photoshop loading bar appears; it then appends to that loading bar window throughout the duration of the processing time.

Popuload for Adobe Photoshop58

Asciiflow: ASCII Flow Diagram Tool59
A simple Web based ASCII flow diagram drawing tool which allows you to draw boxes, lines, arrows and type and then export it straight to text or HTML.

Asciiflow - ASCII Flow Diagram Tool60

Microjs: Micro-Frameworks and Micro-Libraries61
Microjs helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!62

Showoff63
Demonstrating your ongoing projects could be a huge pain. In general, your best option is to upload the files to a server somewhere. You could prepare a video or send over a huge package of files or just .zip it somewhere on project collaboration website. But what if you just want to quickly show someone a project you’re working on without sending over the large files? This tool aims to solve this problem. If you’re looking for an alternative, you might want to consider LocalTunnel64.

Showoff.io: Easily Share Localhost65

Meld66
A visual diff and merge tool that lets you compare two or three files and edit them in place (diffs update dynamically). You can also compare two or three folders and launch file comparisons.

Meld67

Convert Unix Time68
A Unix timestamp (or epoch time) is the number of seconds that have elapsed since January 1, 1970 00:00 UTC. The mission of this site is to convert your timestamp into a human readable format and vice versa. You also might want to check out Epoch Converter69.

Convert Unix Time - convert and create your unix timestamp70

Drush71
This Drupal tool lets you install, download and uninstall modules and much more without even opening a Web browser.

Drush the Ultimate Drupal Productivity Tool72

Bones73
A WordPress development theme that was created after years of editing and reusing the same template to develop custom sites. A nice, well organized boilerplate for developers of WordPress themes or designers using WordPress in their projects.

Bones - A WordPress Development Theme Themble74

Fructose75
Fructose is a subset of Ruby that’s designed to be compiled into PHP 5.x. The generated code should run on any PHP version above 5.0. Most major Ruby features are supported, including operator overloading and blocks. Eventually, most of the Ruby standard library will be available to Fructose programs via libfructose.

Fructose76

loads.in77
By simply entering the URL here, you can test how fast a webpage loads in a real browser from over 50 locations worldwide.

loads.in - test how fast a webpage loads in a real browser from over 50 locations worldwide78

WriteMaps79
WriteMaps is a Web application that allows you to create, edit, and share your sitemaps online.

WriteMaps80

Wirify81
Wirify is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet also helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks.

Screenshot82

Lorempixum83
Hand-selecting and inserting placeholder images in a layout can be a hassle. This tool takes care of that task by providing you with placeholder images for every possible usage, whether for Web design or print layout. Using it is simple: visit the website, pick the URL, define dimensions and category, and insert it in the layout. You can use the “Placeholder Generator,” which lets you specify the size, category and color settings of the placeholder image.

Lorempixum84

f.lux85
This tool makes your display adapt to the lighting of the room you are in, all the time. During sunset, your screen mimics room light, and in the morning the tint resembles sunrise and its natural light. Configuring f.lux is easy: simply tell the control panel what kind of lighting your office has and where you live. The rest is taken care of automatically. The free tool is available for Windows, Mac and Linux.

Follow the Sun86

Solarized87
Solarized is a free custom palette of sixteen colors (including four background tones, four “content tones” and eight accent tones). The content and accent tones are visible on both the light and dark backgrounds and are based on established color theory principles.

Solarized: Precision Colors for Your Code88

Useful Services

PayPal Fee Calculator89
A PayPal ‘percentage fee’ is determined by which country you are registered in and how much you receive every month via PayPal. The PayPal ‘fixed fee’ is determined by which currency the payment is sent in. This calculator helps you keep an overview of fees as well as currency conversions.

PayPal Fee Calculator90

courteous.ly91
A helpful way of letting people know your real time email load and when sending mails works best for you.

courteous.ly: publish your email load92

ifttt93 (if this, then that)
This tool allows you to create simple “if then” actions based on common activities, and lets ifttt automate them. By triggering an email when the weather forecast predicts rain, this can help remind you to take your umbrella with you. The service is currently in private beta, but you can request an invite.

If-Then Statements for Online Tasks94

Unsubscribe.com95
A fast way of unsubscribing from any mailing list by simply clicking on the emails you no longer wish to receive.

Unsubscribe.com96

minutes.io: Take Notes Quickly and Easily97
minutes.io lets you take notes in your browser even when you’re offline and waits until you’re online again so you can send and share with others right away.

minutes.io — take it easy!98

Doodle: Easy Scheduling99
A great way to mutually agree when to meet by simply creating a poll, inviting participants and cofirming the date and time. Free of charge and without registration.

Doodle: easy scheduling100

Focus Booster101
A simple and elegant application designed to help you eliminate the anxiety of time and enhance your focus and concentration.

focus booster - home; try the pomodoro technique102

Typography Insight iPad App103
Typography Insight is an iPad application that introduces new methods for learning and teaching typefaces. The project stemmed from my love for typography and evolving mobile platforms

Typography Insight - New ways of learning and teaching typefaces104

FontDeals105
This service is like Groupon, but for fonts. Various font deals from various type foundries are offered at lower prices.

FontDeals - The world's first font bundle site106

Last Click

Weave Silk107
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

Screenshot108

Keyboard Shortcut Skins for Macs109
For all of you out there who are shortcut lovers, here are some amazing custom-fitted color-coded keyboard skins that will help you fly through Photoshop, Aperture, Final Cut Pro, and many more.

Keyboard Shortcut Skins for Macs110

Ro.me: Three Dreams of Black111
“3 Dreams of Black” is an interactive film by Chris Milk and some friends at Google that showcases the creative potential of WebGL. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. This is why we &heart; the Web.

Screenshot112

(vf) (il)

Footnotes

  1. 1 http://methodandcraft.com/
  2. 2 http://methodandcraft.com
  3. 3 http://designers.mx/
  4. 4 http://designers.mx/
  5. 5 http://littlebigdetails.com/
  6. 6 http://littlebigdetails.com
  7. 7 http://www.shadycharacters.co.uk/
  8. 8 http://www.shadycharacters.co.uk
  9. 9 http://anillustratedguide.com/
  10. 10 http://anillustratedguide.com/
  11. 11 http://cvparade.com/
  12. 12 http://cvparade.com/
  13. 13 http://www.comicsanscriminal.com/
  14. 14 http://www.comicsanscriminal.com/
  15. 15 http://desksnear.me/
  16. 16 http://desksnear.me/
  17. 17 http://www.nodecloud.org/
  18. 18 http://www.nodecloud.org/
  19. 19 http://www.weekendhacker.net
  20. 20 http://www.weekendhacker.net
  21. 21 http://phraseologyproject.com/
  22. 22 http://phraseologyproject.com/
  23. 23 http://www.designersandbooks.com/
  24. 24 http://www.designersandbooks.com/
  25. 25 http://quotevadis.com/
  26. 26 http://quotevadis.com/
  27. 27 http://letsswap.it/
  28. 28 http://letsswap.it/
  29. 29 http://ideeeas.com/
  30. 30 http://ideeeas.com/
  31. 31 http://aworkinglibrary.com/
  32. 32 http://aworkinglibrary.com/
  33. 33 http://blog.thegodfounder.com/
  34. 34 http://blog.thegodfounder.com/
  35. 35 http://www.underconsideration.com/fpo/
  36. 36 http://www.underconsideration.com/fpo/
  37. 37 http://usesthis.com/
  38. 38 http://usesthis.com/
  39. 39 http://www.supportdetails.com/
  40. 40 http://www.supportdetails.com/
  41. 41 http://www.theuxbookmark.com/
  42. 42 http://www.theuxbookmark.com/
  43. 43 http://sprungmarker.de/wp-content/uploads/webfont-services/
  44. 44 http://sprungmarker.de/wp-content/uploads/webfont-services/
  45. 45 http://www.androidpatterns.com
  46. 46 http://www.androidpatterns.com
  47. 47 http://www.zurb.com/playground/rapid-prototyping-with-flickrbomb
  48. 48 http://www.zurb.com/playground/rapid-prototyping-with-flickrbomb
  49. 49 http://kkovacs.eu/cool-but-obscure-unix-tools
  50. 50 http://kkovacs.eu/cool-but-obscure-unix-tools
  51. 51 http://htaccess.madewithlove.be/
  52. 52 http://htaccess.madewithlove.be/
  53. 53 http://csslint.net/
  54. 54 http://csslint.net/
  55. 55 http://logio.org/
  56. 56 http://logio.org/
  57. 57 http://www.popuload.com/
  58. 58 http://www.popuload.com/
  59. 59 http://www.asciiflow.com/
  60. 60 http://www.asciiflow.com/
  61. 61 http://microjs.com/
  62. 62 http://microjs.com/
  63. 63 https://showoff.io/
  64. 64 http://progrium.com/localtunnel/
  65. 65 https://showoff.io
  66. 66 http://meld.sourceforge.net/
  67. 67 http://meld.sourceforge.net/
  68. 68 http://www.convert-unix-time.com/
  69. 69 http://www.epochconverter.com/
  70. 70 http://www.convert-unix-time.com/
  71. 71 http://3wavesmedia.com/blog/drush-ultimate-drupal-productivity-tool
  72. 72 http://3wavesmedia.com/blog/drush-ultimate-drupal-productivity-tool
  73. 73 http://themble.com/bones/
  74. 74 http://themble.com/bones/
  75. 75 http://www.fructoselang.org/
  76. 76 http://www.fructoselang.org/
  77. 77 http://loads.in/
  78. 78 http://loads.in/
  79. 79 http://writemaps.com/
  80. 80 http://writemaps.com/
  81. 81 http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/
  82. 82 http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/
  83. 83 http://lorempixum.com/
  84. 84 http://lorempixum.com/
  85. 85 http://stereopsis.com/flux/
  86. 86 http://stereopsis.com/flux/
  87. 87 http://ethanschoonover.com/solarized
  88. 88 http://ethanschoonover.com/solarized
  89. 89 http://www.rolbe.com/paypal.htm
  90. 90 http://www.rolbe.com/paypal.htm
  91. 91 http://courteous.ly/
  92. 92 http://courteous.ly/
  93. 93 http://ifttt.com/
  94. 94 http://ifttt.com
  95. 95 http://www.unsubscribe.com/
  96. 96 http://www.unsubscribe.com/
  97. 97 http://minutes.io/
  98. 98 http://minutes.io/
  99. 99 http://doodle.com/?locale=en
  100. 100 http://doodle.com/?locale=en
  101. 101 http://www.focusboosterapp.com/
  102. 102 http://www.focusboosterapp.com/
  103. 103 http://typeinsight.org/
  104. 104 http://typeinsight.org/
  105. 105 http://www.fontdeals.com/
  106. 106 http://www.fontdeals.com/
  107. 107 http://weavesilk.com/
  108. 108 http://weavesilk.com/
  109. 109 http://photojojo.com/store/awesomeness/photo-app-keyboards/
  110. 110 http://photojojo.com/store/awesomeness/photo-app-keyboards/
  111. 111 http://ro.me/
  112. 112

↑ Back to topShare on Twitter

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.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Thomas Petersen

    June 17, 2011 4:38 am

    Once again, thanks for including Weekendhacker on the list.

  2. 2

    Toni Podmanicki

    June 17, 2011 4:38 am

    Nice collection, as usual! Tnx!

  3. 4

    Thanks for sharing. Very useful :D

  4. 5

    Great collection! I really like the loads.in tool! I never knew this existed until now! Very useful :)

  5. 6

    I love this site. However sometimes I would prefer something like a top ten instead of huge list which will take me about a whole day to examine.

  6. 7

    Thanks! Great collection.

  7. 8

    Just mentioning this again – others might find it useful –

    http://font-combinator.com

    It lets you quickly try out font combinations of headers and body copy. It uses Google Fonts currently.

    [Thanks for the tweet this morning!]

  8. 9

    Superb compilation of sites here! Quite a few of these I have never run across before too. I could definitely implement these into my everyday practices while working.

  9. 10

    Something really useful to spend time. I have not seen them all yet, but, I completely loved the ones I saw. :D

  10. 11

    One of the best posts I have seen on SM in a long while. Awesome :)

  11. 12

    Also, agendah.com is useful for webteam meetings

  12. 13

    A very great compilation. I like the http://duckfiles.com – an unique PSDs for web designers. Absolutely free for commercial use.

  13. 14

    Excellent Collection, Craft & Method is very useful…Thanks for sharing… :)

  14. 15

    It’s a very good list!

  15. 16

    Wow, what a great list!
    Thanks especially for the link to convert-unix-time – i need the converting from timestamps (from mysql-tables) every day! :-)

  16. 17

    Thanks you guys, really appreciated that thegodfounder found its way into the list. The first time in SM yeah!

    • 18

      I enjoyed reanidg your work! GREAT post! I looked around for this but I found you! Anyway, would you mind if I threw up a backlink from my site to your site?

  17. 19

    As for pomodoro technique you might want to have a look at http://pomo.me
    Beta, but very promising.

  18. 20

    If Smashing Magazine comes with a list post it’s one of those posts that if we lived in a user unfriendly www where I had to click 153 times on bookmark to bookmark it I wouldn’t be bothered about that.

    Aaah… perhaps a bit exaggerated the above… nonetheless an amazing and indeed very useful list.

  19. 21

    Again another list of great and very useful resources. I always think I will forget half of them in a while. That’s a shame, because I could really use them for upcoming projects. Is there a categorized collection of these tools anywhere? That would be really handy as a tools reference.

  20. 22

    Great resources, awesome post!

  21. 23

    Wow. That’s a great list. Thanks for posting. I’ll definitely be using some of these at my site.

  22. 24

    Great list of useful links which makes the a better web.. ;)

  23. 25

    wow.. great collection, thanks!

  24. 26

    Amazing post, ive been waiting for this type of quality content from SM for a long time now. Thanks :)

  25. 27

    Great post, love the content.

    This is going to take quite some time to read and play!

  26. 28

    “you’re a comic sans criminal” is great. need one for papyrus.

  27. 29

    As always is so nice to read your blog, and feel the amount of time you spend making this collection that we the Designer really enjoy. Keep up the good work and thanks so much for this.
    Saludos from Spain.

  28. 30

    A nice script for creating coming soon pages: http://www.LaunchSoon.com . It’s easy and fast.

    You can also check out the gallery, for inspiration:
    http://www.launchsoon.com/gallery.php

  29. 31

    A new one to add to the list is the brand new music streaming site turntable.fm : something that I’ve created a Fluid web app of just to run separate from my browser. Great for any developer or designer.

  30. 32

    Thanks, Got alot …

  31. 33

    pretty much amazing!

  32. 34

    Reading this post from last 4 days! ;-)

    Really this would help me lot!

    Thank you SmashingM.

  33. 35

    Thank you for publishing this great article. Keep these kinda articles coming please! :-)

  34. 36

    a really usefull collection ..

  35. 37

    List of Media Queries Snippets. http://www.nmsdvid.com/snippets/

  36. 38

    Nice list.. some really useful sites in there. Another useful site for webdesign newbies is webmastergenerators.net . It is a decent directory for webdesign tools.

  37. 39

    Can someone send me an invite code for designersmx?

  38. 40

    Great collection. Keep coming them. If you want your website to be designed then you can also visit bloomtools for amazing and eye catching designs.

  39. 41

    Nice to see Bones make this list. Thanks for the support :)

  40. 42

    Many new to me and want to explore.
    Thanks.

  41. 43

    Hi Guys great stuff…I’m traditionally a designer but drifting into the world of drupal what do you have in that domain.

  42. 44

    Thanks, Really useful

  43. 45

    Thanks for sharing ideeeas.com ! :-)

  44. 46

    Very useful post.. Nice and useful collections of sites..

  45. 47

    Michael Raffaele

    June 26, 2011 5:50 pm

    Really nice collection, I especially love the Little Big Details website. Such a great idea.

  46. 48

    Like the look of Support details but I think Browserprobe is better http://www.browserprobe.com

  47. 49

    Sweet collection besides the Typographic Insight App for the iPad…waste of money.

  48. 50

    Thanks a lot!

  49. 51

    Now that’s what I needed. Tnx for the information. IMHO, other stories are a bit less interesting. Please don’t be offended, simply try to keep quality at this level :)

    Brand Writeman

  50. 52

    That’s an amazing source of information. Thanks a ton for sharing such a useful and of course very helpful post. Especially for web designers. I will surely follow you blog.

  51. 53

    Another good tool is http://www.mobosurvey.com. You can create surveys (or forms), distribute and analyze data in real-time. Our features include numerous ways for you to publish the survey to your audience. To name a few, you can embed your survey onto your website. You can distribute through QR code. You can easily include a banner on the side of you website and when the banner is clicked, the survey will appear as an overlay on your webpage.

  52. 54

    Excellent resource

↑ Back to top