40+ UI Design Tools and Resources

January 20th, 2011

User interface design grows and evolves on a continual basis. To stay current, you need to keep an eye on trends, new resources, and new techniques being implemented and talked about. And you also need to try things out on your own, and come up with original ideas and implementations.
The tools listed below can help you do all of those things. Feel free to share any more resources you’ve found useful in the comment section below.

Pattern References and Libraries

Looking at the solutions others have already come up with for common UI challenges can not only help you find the right existing solution, but can also serve as the basis for coming up with something new and original.
User Interface Design Patterns
An online catalog of articles and visual solutions to common UI design problems. The use very loose categories, and also let you sort by tag or color:


Pattern Tap
A great resource to find commonly used design pattern inspiration. Pattern Tap breaks down UI elements into collections, and also tags individual entries for additional browsing options:


Patternry puts the emphasis on finding solutions to common UI problems, rather than just providing simple inspiration:


Another great resource to find commonly used design pattern inspiration. You can browse by user or website, or check out collections based on individual design elements:


Prototyping, Mockup, and Design Feedback Tools

Any time you’re creating new UI techniques, you’ll want to create a prototype or mockup as a proof-of-concept before committing to a production site. And of course, you’ll need to test these new ideas, too.

Lumzy is a handy little online UI interface mockup and prototyping tool. It lets you create working functional prototypes, rather than just wireframes:


Another interface mockup and prototyping tool, this time with online collaboration tools for working with teams:


UI Design Framework for Illustrator
A set of user interface elements and styles for Adobe Illustrator:


Android Asset Studio
A set of UI elements for developing Android applications:


Unique Mobile UI Design Elements
A free set of UI design elements:


Android UI Elements Set
A free set of classic Android OS UI elements:


OSX Leopard GUI Set
GUI Elements for OSX Leopard:


ALL In One Web Elements Kit
Everything you need for your web layout in layered PSD files:


iPad GUI Set
Everything you need for your iPad app layout in layered, vector PSD files:


The Pencil Project
A GUI prototyping tool plugin for Firefox:


Concept Feedback
Post your designs and concepts and get free feedback from the design community:


Landing Page Optimization
Get feedback from real people on your landing page’s 5-second impression:



Frameworks have become the backbone to virtually any complex UI. Here are a handful of frameworks other than MooTools and jQuery that you might not be familiar with.

A JavaScript UI library and jQuery alternative that provides a number of UI widgets:


Another JavaScript toolkit with a powerful set of base APIs as well as rich UI widgets:


Echo 3
A user interface toolkit that not only allows developers to create component-driven and event-driven API, but also client-side Javascript apps as well:


A super-lightweight JavaScript framework that packages up many commonly-used UI techniques. Uncompressed, Midori is only 51K, even with indented code:


Scripty 2
Another framework that with it’s newest release supports CSS transitions and transforms for Webkit browsers:


ZK includes over 200 ajax components, all ready to go:


A jQuery plugin for mobile iPhone application development:


Code Snippets and Scripts

Why reinvent the wheel? If there’s an existing snippet out there that does just what you need, you can likely find it on one of the sites below.

jQuery Labs
An enormous library of pre-made jQuery components for your website:


Snippet Library
A library of user-submitted and reviewed snippets and code tutorials from a variety of programming lanugages:


The Javascript Source
A handy guide of commonly used javascript and ajax snippets:


roScripts (beta)
Scripts, Snippets and Resources that can be voted on by users:


A good resource with lots of newer scripts and jQuery techniques:


Code Sucks
Javascript snippets with extremely detailed write ups about how they work:


HTML Goodies
Another jquery resource with excellent step-by-step documentation:


WebResources Depot
Included in their large directory of design resources is a number of very useful scripts and snippets:


Ajax Rain
Excellent library of snippets in a categorized and tagged format to make it very easy to find what you’re looking for:


Open Source Scripts
Providing Javascript snippets and code since 2004:


Mini Ajax
A collection of extremely elegant snippets:


Lots of jquery components including a very good collection of image editing snippets:


Javascript Kit
One of the original javascript snippet libraries on the Internet:

A few very useful snippets for your website:


HTML Assets
A small collection of basic javascript snippets:


Miscellaneous Resources

Here are a handful of UI resources that didn’t quite fit in any of the categories above, but that we still felt were worth mentioning.

A simple little jQuery plugin that lets you create sliding notifications:


Editable Grid
With only a few simple lines of code, turn HTML tables into components that can be manipulated with advanced options:

A service for easily generating placeholder images for your mockups:


A unique alternative to Lorem Ipsum. Generate blocks of real text for your mockup. Select to receive your text from a variety of public domain works:


A jQuery upgrade for the qTip tooltip plugin. Easily make stylish tooltips for your site:



Cameron Chapman is a professional Web and graphic designer with many years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Tags: ,

35 comments for „40+ UI Design Tools and Resources
  1. Sheffield Website Design on January 20th, 2011 at 11:44 am

    GREAT! thank you for posting this :)


  2. Vivek Parmar on January 20th, 2011 at 1:21 pm

    wow that’s a huge list of resources on UI tools, straight away bookmarked for regular use. thanks for sharing

    • bharani on November 15th, 2012 at 8:08 am

      as you said…a lengthy list…
      which one you found most use full?

  3. ignar on January 20th, 2011 at 1:51 pm

    This article is unmatched. I will add it to favorite :) Amazing. Thanks

  4. Brad Iroff on January 20th, 2011 at 1:55 pm

    Very nice list! Mockingbird looks cool!

  5. Michael Schlotfeldt on January 20th, 2011 at 3:28 pm

    I love pattern gallery sites. You have a few in the list I have not used. I’ve been doing more and more landing pages for our clients and will need to take a close look at Thanks for the lists.

  6. Paul J on January 20th, 2011 at 5:30 pm

    Nice list, there are some here I hadn’t heard of like Fillerati and Patternry.

  7. Rebecca on January 20th, 2011 at 6:30 pm

    That is a nice list. There are several I haven’t seen before.

  8. Paul on January 20th, 2011 at 6:36 pm

    Great list! Thanks for sharing.

  9. Method 21 on January 20th, 2011 at 8:12 pm

    These never get old to me. I just wish designers as a whole would pay more attention to UI, as opposed to just making things look shiny.

  10. aditia on January 21st, 2011 at 2:38 am

    pencil project for FF really love that one

  11. Rana Mukherjee on January 21st, 2011 at 6:21 am


  12. frank on January 21st, 2011 at 9:41 am

    A great list of resources and well researched too. I use most of these tools in my web development projects. Check out for great patterns and color palletes.

    • shy on January 22nd, 2011 at 10:20 am

      I agree.

  13. free vectors graphics on January 24th, 2011 at 4:21 am

    I like most of Your Vectors Graphics Resources ,Which are available on your blog. I have never found anywhere on the Internet.You have really very sound collection of Graphics.I hope you will add up more graphics resources on your Great Blog in Future,which will help out to others.I am really and gratefully thankfully to you.


  14. Stewart on January 25th, 2011 at 12:31 am

    Love lists like this. Usually spend a whole un-productive day checking them all out but still! Great selection. Thanks.

  15. Chuck on January 28th, 2011 at 6:22 pm

    Great! Thanks

  16. ksaes on January 29th, 2011 at 6:42 am

    Thank you for your article is wonderful

  17. Wolfy on February 4th, 2011 at 10:05 pm

    Always what I need~

  18. Raul on February 15th, 2011 at 10:05 pm

    Another page design:

  19. sarki dinle on March 24th, 2011 at 1:07 pm

    very nice thank you man

  20. Sumit Khaneja on April 22nd, 2011 at 3:23 pm

    Nice collection of UI design tools & resources.
    For website designing & SEO tips & tricks visit

  21. Sumit Khaneja on April 22nd, 2011 at 3:24 pm

    Nice list of UI design tools & resources. Thanks for sharing.

  22. Jasim Muhammed on August 19th, 2011 at 11:38 am

    Great list of tools :))) Thanks

    Especially the scripty2

    I must add one more UI component library here which having user interfaces listing per day inspires designers. It enables multicolor search too

  23. Bondance on August 27th, 2011 at 4:15 am

    Thanks a lot for this collection! Great… ;)

  24. Thomas Fletcher on October 26th, 2011 at 4:33 pm

    Crank Software also provides a great UI development and prototyping tool called Storyboard.

    It is targeted at embedded devices and mobile platforms.

    Thomas .. full disclaimer: I work for Crank

  25. Muhammad Aamir on November 13th, 2011 at 8:58 am

    hmmm new to UI. Let Start With pencil:)(

  26. UI Designer on December 26th, 2011 at 7:05 pm

    Excellent list! Thanks for creating

  27. designerkid on January 23rd, 2012 at 12:02 pm

    Great list! I really love the Unique Mobile UI Design Elements and the iPad GUI Set. Thanks a lot for sharing!

  28. directory on May 20th, 2012 at 6:34 pm

    what a nice article.Espacially i like the slice note.

  29. Rahul on May 31st, 2012 at 1:33 pm

    Nice work. Love it. Thanks!

  30. Pradeep on June 27th, 2012 at 12:18 pm

    thanks a lot

  31. Pidoco on September 13th, 2012 at 2:10 pm

    This is a great list! If anyone is looking for an alternative to Mocking Bird, Pidoco is a great tool with real-time collaboration features and you can even simulate your clickable prototypes on the end device. You can get a free trial at Happy prototyping!

  32. Scott on September 26th, 2012 at 7:46 pm

    We’re looking to update the UIX of our web-based .net enterprise platform and was wondering what prototyping tools / techniques are worth investigating. Performance is a real issue for us as we have significant numbers of concurrent users hitting our server so we can’t afford major graphics overheads or performance will grind to a halt. Thanks!

  33. Waheed Akhtar on December 28th, 2012 at 11:02 pm

    Great list of useful tool here. Thanks for sharing.