Cameron Chapman January 20th, 2011

40+ UI Design Tools and Resources

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. [fblike] 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: Screenshot 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: Screenshot Patternry Patternry puts the emphasis on finding solutions to common UI problems, rather than just providing simple inspiration: Screenshot Mephobox 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: Screenshot

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 Lumzy is a handy little online UI interface mockup and prototyping tool. It lets you create working functional prototypes, rather than just wireframes: Screenshot Mockingbird Another interface mockup and prototyping tool, this time with online collaboration tools for working with teams: Screenshot UI Design Framework for Illustrator A set of user interface elements and styles for Adobe Illustrator: Screenshot Android Asset Studio A set of UI elements for developing Android applications: Screenshot Unique Mobile UI Design Elements A free set of UI design elements: Screenshot Android UI Elements Set A free set of classic Android OS UI elements: Screenshot OSX Leopard GUI Set GUI Elements for OSX Leopard: Screenshot ALL In One Web Elements Kit Everything you need for your web layout in layered PSD files: Screenshot iPad GUI Set Everything you need for your iPad app layout in layered, vector PSD files: Screenshot The Pencil Project A GUI prototyping tool plugin for Firefox: Screenshot Concept Feedback Post your designs and concepts and get free feedback from the design community: Screenshot Landing Page Optimization Get feedback from real people on your landing page's 5-second impression: Screenshot


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. DHTMLX A JavaScript UI library and jQuery alternative that provides a number of UI widgets: Screenshot Dojo Another JavaScript toolkit with a powerful set of base APIs as well as rich UI widgets: Screenshot 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: Screenshot Midori A super-lightweight JavaScript framework that packages up many commonly-used UI techniques. Uncompressed, Midori is only 51K, even with indented code: Screenshot Scripty 2 Another framework that with it's newest release supports CSS transitions and transforms for Webkit browsers: Screenshot ZK ZK includes over 200 ajax components, all ready to go: Screenshot jQTouch A jQuery plugin for mobile iPhone application development: Screenshot

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: Screenshot Snippet Library A library of user-submitted and reviewed snippets and code tutorials from a variety of programming lanugages: Screenshot The Javascript Source A handy guide of commonly used javascript and ajax snippets: Screenshot roScripts (beta) Scripts, Snippets and Resources that can be voted on by users: Screenshot Snipplr A good resource with lots of newer scripts and jQuery techniques: Screenshot Code Sucks Javascript snippets with extremely detailed write ups about how they work: Screenshot HTML Goodies Another jquery resource with excellent step-by-step documentation: Screenshot WebResources Depot Included in their large directory of design resources is a number of very useful scripts and snippets: Screenshot Ajax Rain Excellent library of snippets in a categorized and tagged format to make it very easy to find what you're looking for: Screenshot Open Source Scripts Providing Javascript snippets and code since 2004: Screenshot Mini Ajax A collection of extremely elegant snippets: Screenshot Webappers Lots of jquery components including a very good collection of image editing snippets: Screenshot Javascript Kit One of the original javascript snippet libraries on the Internet: Screenshot A few very useful snippets for your website: Screenshot HTML Assets A small collection of basic javascript snippets: Screenshot

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. Slidenote A simple little jQuery plugin that lets you create sliding notifications: Screenshot Editable Grid With only a few simple lines of code, turn HTML tables into components that can be manipulated with advanced options: Screenshot A service for easily generating placeholder images for your mockups: Screenshot Fillerati 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: Screenshot qTip2 A jQuery upgrade for the qTip tooltip plugin. Easily make stylish tooltips for your site: Screenshot (ik) [fblike]

Cameron Chapman

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.


  1. 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.

  2. 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.


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

  4. 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

  5. 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!

  6. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *