60 User Interface Design Tools A Web Designer Must Have

June 30, 2013 · 56 comments

by Sonny M. Day

user interface design tools

The success of web applications and websites depends in how well designed the User Interface is. Designing a good user interface however is a very challenging process.

A designer’s concepts and design decisions always affect the end users of the web site, application or generally any user interface or service he has designed. That is why, the dream of every designer is to deliver high quality, enjoyable and valuable experiences for the users. To achieve this goal, it is necessary that a web designer have a collection of web user interface resources and building blocks in his arsenal.

There is a variety of User Interface resources that allows you as designer to access, redefine, and create a well crafted User Interface. These tools are quite useful for designers whether they are going to design a clients website or a resell-able website template. In this article I am presenting a collection of User Interface Design tools that a web designer can use to realize his design goals.

Let us explore these things and further our own craft. Be fascinated! And afterwards I encourage you to check our some of the amazing WordPress theme designs in our updated collection.



User Interface Design Tools

1. ForeUI

ForeUI is an easy-to-use UI prototyping tool, designed to create mockup / wireframe / prototypes for any application or website you have in mind. With ForeUI, your prototype project will be skinnable. Easily change the look and feel of your prototype by simply switching the UI theme.

2. LivePipe UI

LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible.

3. DesignerVista

Design Professional Quality GUI Mockups using tremendous number of native controls, widgets, clip art, icons, etc. available right in the application. Practically anything you might want to put on a GUI screen is already available, and in high quality art in DesignerVista

4. Napkee

Napkee lets you export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button.

5. iPhone Mockup

iPhone Mockup lets you create user interface for an iPhone app in a drag and drop system.

6. Eclipse Stencil for OmniGraffle

This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle.

7. Gliffy

Gliffy free wireframe software makes it easy to create website wireframes and to share web mockups with anyone.

8. Small GUI Pack

Small Graphical User Interface Elements Pack.

9. Wireframe Magnets (DIY Kit)

This DIY magnet template is based on the Konigi wireframe stencils and includes 3 sheets of elements that might be useful in whiteboard prototyping.

10. Flex 3 Stencil

Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors etc.

11. Facebook Applications

A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

12. Patternry

Patternry is a user interface design pattern library aimed to help solve common interface design problems.

13. User Interface Design Patterns

User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.

14. Pattern Tap

Pattern Tap is here to satisfy and encourage the inspiration needs of interface design peers and peeps. It aspires to be the one stop pattern shop for your next inspiration need.

15. User Interface Design Framework

A free User Interface Design tool for Web Designers.

16. Lumzy

Lumzy is a quick mockup and creation and prototyping tool.

17. Android Asset Studio

The launcher icon generator will create icons that you can use in your Android application, from a variety of source images. To begin, simply enter the input details below. Output will be shown below.

18. Mephobox

Great resource for finding design pattern inspiration. You can browse by user or website, or check out collections based on individual design elements.

19. Mobility UI Design Elements

A free set of UI design elements.

20. Mockingbird

Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

21. Serena Prototype Composer

Serena Prototype Composer makes it possible to simulate how an application will look and function before any code is ever written.

22. Fivesecondtest

Fivesecondtest helps you fine tune your landing pages and calls to action by analyzing the most prominent elements of your design.

23. Android UI Elements Set

Free set of classic Android OS UI elements.

24. Massive Web UI and Button Set

This set contains all of the following elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the psd file), all of these for free.

25. Best Practice UX Forms Stencil

This forms contain different button layouts, a progress indicator, captcha code input field, labels and more.

26. The Pencil Project

The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

27. Mocklinkr

Use mocklinkr to convey your static mockups as a linked-up and clickable website to impress your clients.

28. MockFlow

MockFlow helps to design interactive UI mockups for Desktop Software, Rich Internet Apps and Web sites.

29. OSX Leopard GUI Set

The package includes fully editable vector Photoshop sources and a customizable Fireworks PNG file, the original fonts that were utilized for the making of the GUI are also included.

30. iPad GUI Set

Everything you need for your iPad app layout in layered, vector PSD files.

31. iPlotz

iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.

32. ALL In One Web Elements Kit

Complete set of web elements you may find very useful for your upcoming project. A huge set of various web elements, easy to modify trough layer styles.

33. Javascript Kit

One of the original javascript snippet libraries on the Internet

34. Concept Feedback

Post your designs and concepts and get free feedback from the design community.

35. Webappers

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


DHTMLX is a JavaScript library that provides essential functionality for building cross-browser, Ajax-based user interfaces. Develop impressive web applications faster with a set of ready-to-use UI widgets.

37.HTML Goodies

Jquery resource with excellent step-by-step documentation.

38. Dojo

Dojo saves you time, delivers powerful performance, and scales with your development process. It’s the toolkit experienced developers turn to for building superior desktop and mobile web experiences.

39. Code Sucks

Javascript snippets with extremely detailed write ups about how they work.

40. Echo 3

Echo behaves as a user interface toolkit–like Swing or Eclipse SWT. AJAX technology is employed to deliver a user experience to web clients that approaches that of desktop-based applications.

41. Snipplr

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

42. Midori

Midori is an ultra-lightweight JavaScript framework that gets the job done without getting in your way.

43. roScripts (beta)

Scripts, Snippets and Resources that can be voted on by users.

44. Scripty 2

Script2 is a powerful flexible Javascript framework to help you write your own delicious and user interfaces. .

45. Snippet Library

A library of user-submitted and reviewed snippets and code tutorials from a variety of programming languages.

46. ZK

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

47. jQTouch

A jQuery plugin for mobile iPhone application development.

48. Hot Gloo

The Online Wireframe Application.

49. qTip2

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

50. WebResources Depot

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

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

52. Open Source Scripts

Providing Javascript snippets and code.

53. HTML Assets

This is a collection of free Javascript code snippets. It has scripts setting the default focus on page elements (useful for HTML forms), scripts to auto-jump to the next form field when the current form field is full, and scripts to display the current date and time, reload the web page, print the web page, view the page source, close the browser window, and go back to the browser’s previous web page.

54. Mini Ajax

A collection of extremely elegant snippets.

55. Webcodr.com

A few very useful snippets for your website.

56. Editable Grid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.

57. Cacoo

Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. It can be used free of charge.

58. Slidenote

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. It’s also available as a WordPress plugin.

59. Denim

DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

60. Placehold.it

A quick and simple image placeholder service.

If you have a plan for selling products and services I’ll recommend you are using a WordPress landing page theme or some WordPress ecommerce themes. Also don’t miss these best wordpress themes if you’re looking for a great theme for your website.

Author : Sonny Day

Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.

{ 48 comments… read them below or add one }

Website Domain August 6, 2013 at 1:34 pm

I quite like reading through an article that will make men and women think.
Also, thanks for permitting me to comment!


Kumaravel Somasundaram July 16, 2013 at 6:18 pm

I am Kumaravel, developer of DesignerVista mockup software. Thanks for including our mockup software on the list. We appreciate your time and effort.



Mehdi Zaidi July 9, 2013 at 8:12 am

Great list of tools for web design. I was looking for new User Interface design tools that I can easily operate. Thanks for sharing your knowledge.


Devendra June 4, 2013 at 3:08 am

hi ,

i have a requirement to design layouts for Badges. These layouts must be having provision to drag and drop images and text on it.


Devendra June 4, 2013 at 3:09 am

please suggest me some good tool which i can integrate with asp.net


Flash Website Designer May 24, 2013 at 9:08 pm

If some one desires expert view regarding blogging and site-building after that i advise him/her
to go to see this web site, Keep up the fastidious work.


Unaiz May 22, 2013 at 9:58 am

Great List…! thanks for sharing with us


GeekDesign May 15, 2013 at 2:39 pm

Here is an other free useful tool for web developer to create web projects easier and faster than before ;-)


Elazar gilad March 24, 2013 at 11:36 am

Hi great content
lots of new UI designer tools that i can use,


John December 4, 2012 at 4:09 pm

Another great free placeholder image service is http://instasrc.com. Their service is blazingly fast and they offer multiple image categories along with greyscale or normal filters.


Catriona September 12, 2012 at 3:44 pm

This is a great list! I’m looking forward to trying out some of these tools. If anyone is looking for more wireframing tools, you can also check out our collaborative online tool – Pidoco. Free trial at http://www.pidoco.com Thanks!


Paul August 25, 2012 at 7:05 pm

Excellent list of tools for web designer. Specially I liked the tools you suggested to develop mockups. Thank you so much for sharing.


Olivia Moss August 15, 2012 at 5:06 pm

I am using the Mobile Website Builder for WordPress by DudaMobile. It’s very easy to use and really effective. It made my site mobile friendly in just 3 steps. All I had to do was just download & install the plugin and press the “Create your mobile site now” button. It took me to the dudamobile website, where I can customize the Mobile site according to my need. And it’s a very easy WYSIWYG editor. Then I published my site and Bingo !!! I had a mobile site just like that. Guys you can check out the plugin yourself here : http://wordpress.org/extend/plugins/mobile-website-builder-for-wordpress-by-dudamobile/


Franz Sorilla July 23, 2012 at 10:41 am

Hi! I’m from iPlotz. Thank you for including us on the list. We truly appreciate it.


Richard L. Burton III July 9, 2012 at 9:01 am

I’m surprise that http://www.FeedbackFrom.us isn’t on this list? It provides a way to solicit feedback for UI/UX designs.



freenet March 29, 2012 at 8:32 am

Wow! This is a really cool list. Bookmarking this page now, I’m sure this will come in handy for my next project. Thanks for compiling this list


Website Development March 27, 2012 at 11:00 am

Hi love your site thanks for sharing some really good ideas for web development, which fits in great with a simple online marketing strategy. Over the months that have gone by, my partner has been working very smart adapting many of the steps outlined by you…


Jeff March 21, 2012 at 12:56 am

Excellent information, most of them I haven’t heard before. This is gold. Cheers


stein March 20, 2012 at 2:37 pm

great list and very useful as a web designer :)


Caroline February 9, 2012 at 2:48 am

Really COOL list! I feel like a kid in a candy store :) So much to try or buy…
To add to that list- prototyping-wise, I’ve recently tried Keynotopia templates and they rock :) for rapid prototyping + wireframing interactive apps (w/o writing code for those who aren’t gifted in that area). Thanks again!


Dubai Web Design January 20, 2012 at 2:37 pm

Excellent list! I haven’t even known about 70% of them. Your post just went into my bookmarks.
Thanks a lot.


Max January 17, 2012 at 10:58 am

Check out Application Craft http://applicationcraft.com

It’s got an IDE that does drag-and-drop / WYSIWYG UI building as well as code editing. Here’s a case study that Phonegap did on them : http://phonegap.com/case_study/phonegap-application-craft-pain-free-mobile-app-development/


George T. Wiliam August 12, 2011 at 12:03 pm

Thanks Buddybud,

Will put it to good use!


Wivita April 26, 2011 at 3:37 pm

Thanks for this list! Very Helpful :) Bookmarked.


Kaye April 15, 2011 at 8:31 pm

Very nice list! This will really help me out. Thank you!


Eric Bieller April 9, 2011 at 11:29 pm

Definitely some good resources.. Some much better than others. I especially love the iPad and iPhone kit. I use those pretty much every day. I also lover PatternTap to help find inspiration and solutions.. I’ll checkout some of the other ones here though.. Some seemed pretty useful.. Thanks for sharing!


Lars April 10, 2011 at 1:24 pm

Thanks a lot for your feedback Eric.


Spencer from Faq Agent March 28, 2011 at 5:22 am

Wow. That is A LOT! Thanks for sharing though. One question though, which one of these is the best one to use for php websites?


SoftwareTools March 27, 2011 at 10:34 am

If you are looking for ones specific to “Mobile and Tablet” find the top 10 at


Hassan kh March 22, 2011 at 3:40 am

WOW This is a Great list Thanks sharing


fajas colombianas March 18, 2011 at 5:19 pm

Bookmarked these tutorials. Thanks for compiling them.


Holyblogz March 15, 2011 at 11:27 pm

it is such a great list and thanks for sharing. I have been using few of those – lumzy prototyping tool… that’s awesome. iPlotz is also a good one.


Pia March 15, 2011 at 6:12 pm

This is a fantastic list. Thanks for taking the time to share.


Norbert Ladner March 15, 2011 at 10:29 am

Many thanks for sharing this. Great work. I will try them for sure.


Lars March 15, 2011 at 6:01 pm

You are welcome Norbert!


DaveBowman March 15, 2011 at 9:42 am

All useful stuff, but not all of them are UI design tools , of course. What “toolkit of commonly used javascript and ajax snippets” has to do with creating a nice and easy *design*, I can only guess. Well, probably it’s a new genre of itself – dumping the contents of one’s bookmark folder on to a page.


Kevin Thomson March 15, 2011 at 9:23 am

Great list! Also check out balsamiq which is a great wireframe mockup tool!


Lars March 15, 2011 at 6:03 pm

Thanks for the tip Kevin! I will check it out.


Logosfera.ro March 14, 2011 at 6:19 pm

I’m a big fan of jQuery but I haven’t heard of jquery labs until now. Thanks.


Jason Hull March 14, 2011 at 4:44 pm

Well… I bookmarked this one! Thanks!


Dominique Labonté March 14, 2011 at 1:36 pm

Thanks for this great collection of tools!
I will give a try to some of them for sure.
I also really like Balsamik Mockups (balsamiq.com/products/mockups)


Bobbie March 14, 2011 at 12:22 pm

Wow! Thanks for sharing these website resources. They all are wonderful and I plan on checking most of them out.


Lars March 14, 2011 at 10:26 pm

Thanks Bobbie!


Pestbarn March 14, 2011 at 9:39 am

Nice list! Although, it seemed kind of weird to me that jQuery Mobile isn’t included but jQTouch is. jQuery Mobile is an official mobile javascript framework, with an excellent documentation.



N Lamont March 13, 2011 at 3:28 pm

Thanks – a superb collection, and I’d only heard of a couple. Very grateful.


webdesigner March 11, 2011 at 11:37 am

Great tutorial it is very helpful for website designers.



juan iconshock March 10, 2011 at 5:30 pm

hello friends, thanks for incluuding one of our gui sets :)
feel free to include any of our freebies at http://www.themeshock.com
You can be sure there are tons of quality frebies there !!


LED Bulbs March 10, 2011 at 7:54 am

You tutorial is very easy to follow looking forword for more :)


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 8 trackbacks }

Previous post:

Next post:

Web Analytics