Jan 20 2011

40+ UI Design Tools and Resources

Advertisement

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

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

Webcodr.com
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

Placehold.it
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]

About the Author

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.

Comments and Discussions
  • Sheffield Website Design, 20 January 2011

    GREAT! thank you for posting this :)

    @mgpwr

  • Vivek Parmar, 20 January 2011

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

    • bharani, 15 November 2012

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

  • ignar, 20 January 2011

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

  • Brad Iroff, 20 January 2011

    Very nice list! Mockingbird looks cool!

  • Michael Schlotfeldt, 20 January 2011

    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 http://fivesecondtest.com/. Thanks for the lists.

  • Paul J, 20 January 2011

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

  • Rebecca, 20 January 2011

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

  • Paul, 20 January 2011

    Great list! Thanks for sharing.

  • Method 21, 20 January 2011

    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.

  • aditia, 21 January 2011

    pencil project for FF really love that one

  • Rana Mukherjee, 21 January 2011

    Nice

  • frank, 21 January 2011

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

    • shy, 22 January 2011

      I agree.

  • free vectors graphics, 24 January 2011

    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.

    Thanks
    Sachin

  • Stewart, 25 January 2011

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

  • Chuck, 28 January 2011

    Great! Thanks

  • ksaes, 29 January 2011

    Thank you for your article is wonderful

  • Wolfy, 04 February 2011

    Always what I need~

  • Raul, 15 February 2011

    Another page design:

    http://www.onlinetools.es/

  • sarki dinle, 24 March 2011

    very nice thank you man

  • Sumit Khaneja, 22 April 2011

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

  • Sumit Khaneja, 22 April 2011

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

  • Jasim Muhammed, 19 August 2011

    Great list of tools :))) Thanks

    Especially the scripty2

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

  • Bondance, 27 August 2011

    Thanks a lot for this collection! Great… ;)

  • Thomas Fletcher, 26 October 2011

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

    http://www.cranksoftware.com/storyboard

    It is targeted at embedded devices and mobile platforms.

    Thomas .. full disclaimer: I work for Crank

  • Muhammad Aamir, 13 November 2011

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

  • UI Designer, 26 December 2011

    Excellent list! Thanks for creating

  • designerkid, 23 January 2012

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

  • directory, 20 May 2012

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

  • Rahul, 31 May 2012

    Nice work. Love it. Thanks!

  • Pradeep, 27 June 2012

    thanks a lot

  • Pidoco, 13 September 2012

    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 http://www.pidoco.com/free Happy prototyping!

  • Scott, 26 September 2012

    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!

  • Waheed Akhtar, 28 December 2012

    Great list of useful tool here. Thanks for sharing.

search form
 
image description image description