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.
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!
Advertisement
User Interface Design Tools
1. Patternry
Patternry is a user interface design pattern library aimed to help solve common interface design problems.
2. 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.
3. 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.
4. User Interface Design Framework
A free User Interface Design tool for Web Designers.
5. Lumzy
Lumzy is a quick mockup and creation and prototyping tool.
6. 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.
7. Mephobox
Great resource for finding design pattern inspiration. You can browse by user or website, or check out collections based on individual design elements.
8. Unique Mobile UI Design Elements
A free set of UI design elements.
9. 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.
10. Serena Prototype Composer
Serena Prototype Composer makes it possible to simulate how an application will look and function before any code is ever written.
11. Landing Page Optimization
Fivesecondtest helps you fine tune your landing pages and calls to action by analyzing the most prominent elements of your design.
12. Android UI Elements Set
Free set of classic Android OS UI elements.
13. 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.
14. Mocklinkr
Use mocklinkr to convey your static mockups as a linked-up and clickable website to impress your clients.
15. MockFlow
MockFlow helps to design interactive UI mockups for Desktop Software, Rich Internet Apps and Web sites.
16. 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.
17. iPad GUI Set
Everything you need for your iPad app layout in layered, vector PSD files.
18. iPlotz
iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.
19. 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.
20. Javascript Kit
One of the original javascript snippet libraries on the Internet
21. Concept Feedback
Post your designs and concepts and get free feedback from the design community.
22. Webappers
Lots of jquery components including a very good collection of image editing snippets.
23. DHTMLX
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.
24.HTML Goodies
Jquery resource with excellent step-by-step documentation.
25. 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.
26. Code Sucks
Javascript snippets with extremely detailed write ups about how they work.
27. 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.
28. Snipplr
A good resource with lots of newer scripts and jQuery techniques.
29. Midori
Midori is an ultra-lightweight JavaScript framework that gets the job done without getting in your way.
30. roScripts (beta)
Scripts, Snippets and Resources that can be voted on by users.
31. jQuery Labs
An enormous library of pre-made jQuery components for your website.
32. The Javascript Source
A toolkit of commonly used javascript and ajax snippets.
33. Scripty 2
Script2 is a powerful flexible Javascript framework to help you write your own delicious and user interfaces.
.
34. Snippet Library
A library of user-submitted and reviewed snippets and code tutorials from a variety of programming languages.
35. ZK
ZK includes over 200 ajax components, all ready to go.
36. jQTouch
A jQuery plugin for mobile iPhone application development.
37. Hot Gloo
The Online Wireframe Application.
38. qTip2
A jQuery upgrade for the qTip tooltip plugin. Easily make stylish tooltips for your site.
39. WebResources Depot
Included in their large directory of design resources is a number of very useful scripts and snippets.
40. 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.
41. Open Source Scripts
Providing Javascript snippets and code.
42. 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.
43. Ajax Rain
Excellent library of snippets in a categorized and tagged format to make it very convenient to search for what you’re looking for.
44. Mini Ajax
A collection of extremely elegant snippets.
45. Webcodr.com
A few very useful snippets for your website.
46. 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.
47. 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.
48. 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.
49. 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.
50. 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.
{ 29 comments… read them below or add one }
You tutorial is very easy to follow looking forword for more
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 !!
Great tutorial it is very helpful for website designers.
thanks
Thanks – a superb collection, and I’d only heard of a couple. Very grateful.
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.
http://jquerymobile.com
Wow! Thanks for sharing these website resources. They all are wonderful and I plan on checking most of them out.
Thanks Bobbie!
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)
Well… I bookmarked this one! Thanks!
I’m a big fan of jQuery but I haven’t heard of jquery labs until now. Thanks.
Great list! Also check out balsamiq which is a great wireframe mockup tool!
Thanks for the tip Kevin! I will check it out.
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.
Many thanks for sharing this. Great work. I will try them for sure.
You are welcome Norbert!
This is a fantastic list. Thanks for taking the time to share.
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.
Bookmarked these tutorials. Thanks for compiling them.
WOW This is a Great list Thanks sharing
If you are looking for ones specific to “Mobile and Tablet” find the top 10 at
http://www.toolsjournal.com/tools-world/item/152-top-mobile-and-tablet-wireframing-tools
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?
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!
Thanks a lot for your feedback Eric.
Very nice list! This will really help me out. Thank you!
Thanks for this list! Very Helpful
Bookmarked.
Thanks Buddybud,
Will put it to good use!
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/
Excellent list! I haven’t even known about 70% of them. Your post just went into my bookmarks.
Thanks a lot.
Really COOL list! I feel like a kid in a candy store
So much to try or buy…
for rapid prototyping + wireframing interactive apps (w/o writing code for those who aren’t gifted in that area). Thanks again!
To add to that list- prototyping-wise, I’ve recently tried Keynotopia templates and they rock
{ 8 trackbacks }