Useful Web Services, Tools and Resources For Web Designers

Advertisement

We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks.

You might have seen some of these tools in our Twitter stream1 or on our Facebook page2, but certainly not all of them. We’ve prepared the most useful ones (yet not necessarily the most beautiful ones) in this handy overview for your convenience. Please share any further tools with us and our readers in the comments to this post. As usual, we express sincere gratitude to all designers and developers out there who create, maintain and improve these tools as their little side projects. You really make the difference, guys. Thank you.

You may want to check out our previous round-up, Time-Saving and Educational Resources for Web Designers3, as well.

Useful Web Services, Tools and Resources

FontFuse: Gallery of Font Pairings4
FontFuse is a font pairing design resource that displays font pairings and hence helps you compare and choose fonts. You can browse through fonts as well as font families, and explore the most recent, most popular and contest-leading font pairings.

FontFuse: Gallery of Font Pairings5

Little Big UI Details6
This site features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day.

Screenshot7

A Sampler Page8
While physical books are traditionally well defined and structured objects, digital books live on screens that vary greatly in their dimensions. In this A List Apart article, Craig Mod dives into the similarities and differences of these media and presents the baseline for designers who want to produce beautiful and readable text on a tablet.

The only script in your HEAD9

Readability: Enjoy Reading, Support Writing10
Another handy little helper that gets rid of the unwanted clutter. Readability allows you to choose your preferred settings (font size, margin and style) and applies them to any website. Drag the bookmarklet with your saved settings into your bookmars bar or folder, visit the website of your choice, click on the bookmarklet and you get a good, comfortable read. Besides, readability offers a way to compensate writers and publishers without punishing readers. 70% of all membership fees go directly to the people who make the content.

11

Prey: Rest Safe12
This tool is small but efficient open-source application that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Prey Project's open-source tracking software13

Ge.tt14
With Ge.tt you can turn any type of file into web content and share it instantly. You just click on and select files and share the files with your friends or publish the data online. You may want to check an alternative, Crate15, as well.

Ge.tt16

Lanyrd: Get More Out of Conferences17
Lanyrd is the social conference directory that lets you keep track of what is going on around you, both as a conference speaker and visitor. You can browse conferences by topic, see who the keynote speakers are and who might like to attend it with you. Follow intereresting conferences by checking out attendees tweets or browse slide, videos and podcasts of past events you might have missed. And you can check SmashingMag’s account on Lanyrd18, too.

Lanyrd - social conference directory19

Dashkards: Dashboard Cheat Sheets For Your Favorite Mac Apps20
The site presents keyboard shortcut cheatsheets for you favorite Mac apps to help you memorize them. Simply add the dashkards to your dashboard and save time.

Dashkards for Mac

Bundler: Manage Your Application’s Dependencies21
Bundler manages application’s dependencies through many machines systematically and repeatedly. You can use the tool with frameworks (it works out of the box with Rails 3) and check out an application with a gemfile for development. A detailed instruction is available on the app’s main web page.

Bundler22

BuildorPro23
BuildorPro runs through your browser, and so the browser becomes your development environment — meaning that every time you change your code by hand or through the visual tools, the changes are instantly reflected in the design window. Currently in beta.

BuildorPro - next generation web design through the browser24

Zerply: Present Yourself Professionally25
With Zerply you can present yourself, discover and connect as well as converse and collaborate. By setting up a professional profile, you can tell people who you are and what sites you use.

Zerply26

Prevue: Sharing Tool for Designers27
Prevue is a free concept sharing tool that helps you upload in a simple and elegant way by organizing and sharing your work with others. Either share individual projects with clients, or turn all your projects and designs into a beautiful and clean portfolio to share with the world.

Prevue28

Git Immersion29
Git is a fast version control system which can be downloaded on this site. Git Immersion is a very detailed guide to Git, with examples and practical tips for developers.

Git Immersion - Brought to you by EdgeCase30

Wirify: The Web as Wireframes31
This tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet 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. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.

Screenshot32

Open with Photoshop Firefox Extension33
If you are looking for nifty time-savers, this little Firefox add-on is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Screenshot34

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

Screenshot36

Compfight: Flickr Search Engine37
Compfight is a Flickr search engine for images licensed under Creative Commons (or other) licenses. They pull their results directly from Flickr and gives you multiple options to restrict your search.

Screenshot38

Browserling: Interactive Cross-browser Testing in Your Browser39
Browserling offers you a graphical web console to do cross-browser testing without leaving your own browser. A helpful way to try out your creations. The virtual browsers run live enabling you to type and click away just as if you were running the actual browser. Paid and free options are available.

browserling - interactive cross-browser testing in your browser40

User Feedback and Concept Testing with Verify41
Verify is the fastest way to collect and analyze user feedback on screens or mockups. See where people click, what they remember, or how they feel about a Web design.

User feedback and concept testing with Verify42

foxGuide: Photoshop Guides Inside Firefox43
foxGuide is a Firefox extension that displays horizontal and vertical guides. These guides appear as thin lines that float over the webpage. You can move or remove them just the way you do it in Photoshop.

foxGuide - Photoshop Guides Inside FireFox44

GridBookmarklet45
The tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.) Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page.

Screenshot46

URLi.st: Share and Sync Your Links47
URList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link to the group of links.

Screenshot48

Spritebox: Create CSS from Sprite Images49
Spritebox is a WYSIWYG tool to help Web designers create CSS classes and IDs from a single sprite image. It is easy and free to use and is based on the principle of using the background-position property to align areas of a sprite image into block elements of a Web page. You may want to check out CSS Sprite Generator50, too.

Spritebox - Create CSS from Sprite Images51

Joliprint52
This is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments. If you’d like an alternative, give Web2PDF53 or Notforest54 a try.

Screenshot55

Entitifier56
Cleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online. Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet.

The Email Address Obfuscation Debate57
Superuser has an interesting discussion about email obfuscation58, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

Does email address obfuscation actually work?59

Quick CSV Data Convertor60
As Web designers, we constantly receive data in Excel and other spreadsheet formats. This works fine when you just need to view the data on your computer. But when you need to upload it to and display it on the client’s website, it becomes a huge pain. This tool takes a CSV or tab-delimited file in Excel and converts it to JSON, XML, ActionScript and other Web-friendly formats instantly. If you want to convert your spreadsheet data to HTML, you might want to give Tableizer61 a try.

Instant Blueprint62
Instant Blueprint is a way to create a web project framework. In a very short time you can get your project up and running with valid HTML/XHTML and CSS. It’s a simple online form where you enter the required information and markup id tags. Then you select options such as, javascript library and document type. This then generates the blueprint you need to get your project going.

Interaction-Design.org: HCI, IxD, UX, IA, Usability, and More63
This website is a growing library of documents, references and useful articles about interaction design. Leading personalities of the respective branches are asked to contribute to every topic including videos and commentaries.

jQuery Deconstructed64
The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools.

Last Click

Humans.txt: We are People, Not Machines65
Humans.txt is an initiative founded by a group of Spanish enthusiasts with the idea to give credit to the humans behind Web projects. Start your own humans.txt now and stick it in the website’s root folder, right next to robots.txt. Fill the file with whatever info about the contributors you like. Be a part of the initiative and help establish the standard for humans.txt.

Spacelog Apollo 1366
This site allows you to explore transcripts of radio communications between the Apollo 13 crew and the NASA personnel back at Houston. You can check out photographs taken from the ground as well as by the crew in space. If you’re interested in space missions and the history of Apollo 13, this is the site for you.

Spacelog Apollo 1367

Google Art Project68
The Google Art Project lets you visit all the great museums around the world and offers interactive 360° tours. High zoom levels give you astounding close-up impressions of the masterpieces, getting that close would probably be impossible in reality. You can even create your own virtual tour and showcase your own great tableaus.

Google Art Project69

Liveset: Now the Concert Comes To You70
This service allows you to watch live concerts on the Web and on mobile devices in HD. Once you’ve become a member, you can claim digital tickets and enjoy the show on your large screen at home, together with your friends or family.

Liveset71

How To Build a Corporate Website (Comic Strip)72
Unfortunately, very sad, yet very true.

Infographics: Graphic Design73

How Would You Like Your Graphic Design?74
A nice Venn diagram that helps you (and maybe your client) resolve dilemma on getting fast, cheap, free and great graphic design. Pick two out of four.

Infographics: Graphic Design75

Footnotes

  1. 1 http://twitter.com/smashingmag
  2. 2 http://facebook.com/smashmag
  3. 3 http://www.smashingmagazine.com/2011/01/18/time-saving-and-educational-resources-for-web-designers/
  4. 4 http://fontfuse.webink.com
  5. 5 http://fontfuse.webink.com
  6. 6 http://littlebigdetails.com/
  7. 7 http://littlebigdetails.com
  8. 8 http://www.alistapart.com/articles/a-simpler-page/
  9. 9 http://www.alistapart.com/articles/a-simpler-page/
  10. 10 https://www.readability.com/
  11. 11 https://www.readability.com/
  12. 12 http://preyproject.com/
  13. 13 http://preyproject.com/
  14. 14 http://ge.tt/
  15. 15 http://letscrate.com/
  16. 16 http://ge.tt/
  17. 17 http://lanyrd.com/
  18. 18 http://lanyrd.com/people/smashingmag/
  19. 19 http://lanyrd.com/
  20. 20 http://dashkards.com/
  21. 21 http://dashkards.com/
  22. 22 http://gembundler.com/
  23. 23 http://buildorpro.com/
  24. 24 http://buildorpro.com/
  25. 25 http://www.zerply.com/
  26. 26 http://www.zerply.com/
  27. 27 http://prevue.it/
  28. 28 http://prevue.it/
  29. 29 http://gitimmersion.com/index.html
  30. 30 http://gitimmersion.com/index.html
  31. 31 http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/
  32. 32 http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/
  33. 33 https://addons.mozilla.org/en-US/firefox/addon/99845/
  34. 34 https://addons.mozilla.org/en-US/firefox/addon/99845/
  35. 35 http://scr.im/
  36. 36 http://scr.im/
  37. 37 http://compfight.com/
  38. 38 http://compfight.com/
  39. 39 http://browserling.com/
  40. 40 http://browserling.com/
  41. 41 http://verifyapp.com/
  42. 42 http://verifyapp.com/
  43. 43 http://foxgui.de/
  44. 44 http://foxgui.de/
  45. 45 http://www.sprymedia.co.uk/article/Grid
  46. 46 http://www.sprymedia.co.uk/article/Grid
  47. 47 http://www.urli.st
  48. 48 http://urli.st
  49. 49 http://www.spritebox.net/
  50. 50 http://spritegen.website-performance.org/
  51. 51 http://www.spritebox.net/
  52. 52 http://joliprint.com
  53. 53 http://www.web2pdfconvert.com/
  54. 54 http://www.notforest.com/
  55. 55 http://joliprint.com
  56. 56 http://entitifier.sambowler.com/
  57. 57 http://superuser.com/questions/235937/does-email-address-obfuscation-actually-work
  58. 58 http://superuser.com/questions/235937/does-email-address-obfuscation-actually-work
  59. 59 http://superuser.com/questions/235937/does-email-address-obfuscation-actually-work
  60. 60 http://www.shancarter.com/data_converter/index.html
  61. 61 http://tableizer.journalistopia.com/
  62. 62 http://instantblueprint.com/
  63. 63 http://www.interaction-design.org/encyclopedia/
  64. 64 http://www.keyframesandcode.com/resources/javascript/deconstructed/jquery/
  65. 65 http://humanstxt.org/
  66. 66 http://apollo13.spacelog.org/page/
  67. 67 http://apollo13.spacelog.org/page/
  68. 68 http://www.googleartproject.com
  69. 69 http://www.googleartproject.com
  70. 70 http://liveset.com/
  71. 71 http://liveset.com/
  72. 72 http://bradcolbow.com/archive/view/the_brads_how_to_build_a_corporate_website/
  73. 73 http://bradcolbow.com/archive/view/the_brads_how_to_build_a_corporate_website/
  74. 74 http://www.coolinfographics.com/blog/2010/12/28/how-would-you-like-your-graphic-design-infographic.html
  75. 75 http://www.coolinfographics.com/blog/2010/12/28/how-would-you-like-your-graphic-design-infographic.html

↑ 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

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

    Thank you! Great resource!

  2. 2

    Thanks for all this useful looking tools. Will cost me a few nights to try them out myself.

  3. 3

    The comic strip and venn diagram are hilarious and true.

  4. 4

    Great list! I used FontFuse for a bit and loved it!

    Not much else to say…

  5. 5

    Perfect! I was scanning SM yesterday for articles like this, happy to see a new one :)

  6. 6

    Thanks for the collection! Awesome :)

  7. 7

    Great list – lots of new stuff!

  8. 8

    Thanks for the recommendations.
    I’ll take one of them

  9. 9

    Thank you very much for these resource. I love it all !

  10. 10

    decent for reference. i would recommend typography courses or personal study in typography over many of these tools. some of the combinations are absurd.

  11. 11

    One minor correction. Just above the Fontfuse: Gallery of Font pairings link there is “Useful Web Serivces, Tools and Resource”. The word “Services” is accidentally misspelled.

  12. 12

    Serivces => Services ? =)

  13. 13

    Great resources! Thanks

  14. 14

    Superb collection of articles. Its very useful.

  15. 15

    Don’t forget about inspirational resources!

  16. 16

    Simply wow! I will be be passing a lot of these tools onto our trainees. Thanks!

  17. 17

    Very awesome list. Have added the ‘open with photoshop’ extension.

    I also found the grid bookmarklet today..not from here though. Its very handy/cool for helping with design.

    Thanks for the post

    Tom

  18. 18

    Handy post, however, and this is unrelated to the post itself, those Corbis adverts on the side are damn intrusive and annoying.

  19. 19

    Steffi - Web Courses Bangkok

    February 8, 2011 8:50 pm

    Very useful links for Web Designers

  20. 20

    Love the Preyproject and there’s a few other resources there I’ll definitely be using. Once again thanks SM :-)

  21. 21

    http://LaunchSoon.com offers a quick way for web designers to create coming soon pages.

  22. 22

    Very very useful links and many of them are unimaginable. Thanks for the List of Tools.

  23. 23

    Good list! But, I missed http://www.psdcleanup.com ! A really good timesaver!

  24. 24

    Color charts are always good to get some ideas (Love the articles btw, i’m new to you).
    http://www.colorsontheweb.com/colorwizard.asp

  25. 25

    Thanks, great list. Spritebox was very helpful :)

    You may also find this pricing table generator helpful too!

  26. 26

    Hmm … FontFuse looks like proof that most people are bad at combining typefaces. Some truly shocking pairings on display there, and even the ‘highest rated’ ones are hardly consistent in their quality.

    Some good stuff elsewhere, though.

  27. 27

    it seems like i’ve been waiting for someone to invent these tools all along, and maybe in a while i’ll wonder how i lived without them. i’m excited to try out some of the in-browser development tools, but wirify gets my vote as the coolest idea in this article. lotsa useful stuff in here, thanks smashing!

  28. 28

    p.s. Realized that the Colors on the web was posted by a user, not from the article, and forgot to mention that I will be sending a copy of that Fast/Cheap/Great chart to 90% of the people “hiring” designers on Craigslist!

  29. 29

    Great list!
    You may also find this interesting http://www.moobileframes.tumblr.com great resources of mobile wireframes, prototypes,sketches and mockups!

  30. 30

    Great new stuff! You missed submitquickly.com a great timesaver for submitting news and site galleries!

  31. 31

    Excellent. Thank you sharing these websites. I took me 3-4 hours to explore all listed websites.

  32. 32

    Nice to see the tools, all under one area. Thank for sharing this. I will bookmark and share this page.

  33. 33

    Awesome resources! Thanks for sharing!

  34. 34

    Thank you for the post! These resources are very helpful. Browserling is great! I can spend more time designing and less time testing my work on different platforms.

  35. 35

    Great article, looking at some of the sites right now, thanks again.

  36. 36

    If you’re looking for CMS themes for your next project, you can try and use our service called Yellow Themes, it’s a theme search engine http://www.yellowthemes.com

  37. 37

    Nice collection of resources. Bookmarked!

  38. 38

    Great article! Anyone doing online searches for images should check out ImageExchange- http://www.picscout.com/imageexchange. It’s a free app that instantly identifies images in the browser and offers one-click connection to licensors for purchase.

  39. 39

    Thanks for the list of great tools…I will have to check a few of them out. As for the font preview, I like to use the Google Font Previewer for Chrome. Seems to work pretty well.

  40. 40

    Alex Kahl @probefahrer

    February 12, 2011 3:51 am

    Builder Pro looks awesome! Now even a no programmer like me can built some nice Designs. I hope to get the beta invite soon, have already 2 ideas to try Builder pro

    Liveset rocks!
    Hopefully they will add some concerts there. I like almost every kind of music – as long it is live :)

  41. 41

    Great article as usual :-) Concerning humans.txt you can also check http://www.humanssearch.com a simple humans.txt reader / directory

  42. 42

    awesome set of resources — thanks!

    one suggestion: it would be helpful if the links to the products / sites you mention opened in a new browser tab, instead of taking me away from this page… that would make it easier to look at the various sites you mention while still reading through the entire post. would facilitate navigating the post and links. thanks.

  43. 43

    Here’s a handy Collaborative Task Manager for people working in teams, you can see live updates as changes are made:

    http://managewith.us

    Thanks,

    Andy

  44. 44

    increnible. my faith in design resource has been restored. thnx SM!

  45. 45

    really amazing some are very useful thanks

  46. 46

    Thank you for all these incredible resources. SM, you are amazing!

  47. 47

    Great article.

    Check out http://www.mojoleaf.com – its a free online web service that uses the Microsoft Reaction Card Method for judging peoples first impressions of your design.

  48. 48

    awesome post
    you guys wanna check out Web Developer extension toolbar. it carry awesome features.
    check out at http://chrispederick.com/work/web-developer/

  49. 49

    Something in there for everyone!! Thanks

  50. 50

    you might want to check out this free site
    http://hirednext.com

    online resume builder / hosting with video pitch, portfolio section, PDF support and much more.

  51. 51

    Great article and good resources. Thanks. All which we need for the webdesign.

  52. 52

    Great resource. Couple of these I’ve never heard of. I am going to give a try right away.

    Thanks SM!

  53. 53

    Thanks for this great list of resources.

    As a self-proclaimed type geek I am a huge fan of the idea of FontFuse, but I’d like to see more regulation of the font pairings that make it into the gallery.

    I’m wondering if anyone has found any good resources for transitioning from print design to web design? I recently made the transition. For as common a transition as it is, I’ve come to the conclusion that it is an area in the industry that is lacking resources.

    That said, one helpful site that I came across is The Photoshop Etiquette Manifesto For Web Designers (http://photoshopetiquette.com/) which is a guide for standardizing the web design process through good file-management practices. The importance of good file management and how it effects the efficiency of the entire process is one of the first things I realized during my own transition.

    A few basics for building programmer-friendly files:
    http://www.elevatedthird.com/blog/building-programmer-friendly-design-files

    Has anyone found any other good resources for designers making the same transition?

  54. 54

    Browserling = awful
    Adobe BrowserLab = #winning, #tigerblood

    All it requires is an adobe id and you can use it for free for a year. By far the best standalone browser testing tool i have found. Supports testing for all major browsers and versions. Side by side comparison and … onion skin comparison.

  55. 55

    Hey there, I’ve been through pages and pages of SmashingMagazine. I can’t begin to tell you how much I appreciate all the tools, resources, tips and opinions that have been laid out for anyone. Plus, it is beautifully done. Thank you so much!

  56. 56

    This is a great collection of resources! Thanks for sharing.

  57. 57

    This post gave us an incredible spike so some readers might like to know that buildorpro.com is (finally!) out of Beta. Buildor Lite is forever free and now runs in Chrome, Firefox and MSIE 7+. Pro is free to students, teachers and original reviewers and is on 50 days free trial to everybody else.

↑ Back to top