50 Useful UI Design Tools and Resources

written by aext on July 27, 2011 in Graphic Design and Tools and Web Design with no comments

Web User Interface (UI) elements are the crux of the matter for a web designer. A complete set of nice Web UI elements not only signifies the beforehand preparation of the web designers but also demonstrates his interest in designing web UI elements. Keeping this in mind, we thought to compile a post that features highly valuable and outstanding UI toolkits along with best practices, techniques, and examples of UI designs. We hope you will improve your skills by trying these toolkits and using the resources listed in this post. Speak your mind and do let us know what you think about this compilation and which toolkit you like the most.

Echo 3

Echo is an open-source framework for developing rich web applications. From the developer’s perspective, Echo behaves as a user interface toolkit–like Swing or Eclipse SWT.

Echo 3

ZK

ZK is a highly productive open source Java framework for building amazing enterprise web and mobile applications.

ZK

Free Web UI Wireframe Kit

Totally scalable web UI template kit is made completley with shape objects and in some cases converted into SmartObjects.

Free Web UI Wireframe Kit

EightShapes Unify

A beautiful collection of templates, libraries, and other assets for Adobe Creative Suite of products, primarily Adobe InDesign.

EightShapes Unify

DHTMLX

It 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

DHTMLX

LivePipe

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.

LivePipe

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. Simply download and print the PDFs onto magnet sheets, optionally laminate them if you intend to use with dry-erase markers, and finally cut them out.

Wireframe Magnets (DIY Kit)

User Interface

A beautiful collection of User Interface stencils for OmniGraffle.

User Interface

Download a Stencil Kit

Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics.

Download a Stencil Kit

Android 2.2 GUI

A beautiful set that contains GUI for android 2.2 (FROYO)

Android 2.2 GUI

Concept Feedback

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

Concept Feedback

Landing Page Optimization

Get feedback from real people on your landing page’s 5-second impression

Landing Page Optimization

Flex 3 Stencil

This set 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.

Flex 3 Stencil

Small GUI Pack

This set contains small Graphical User Interface Elements Pack.

Small GUI Pack

Midori

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

Midori

Scripty 2

Scripty2 is a powerful, flexible JavaScript framework to help you write your own delicious visual effects and user interfaces.

Scripty 2

Snippet Library

A very useful resources of user-submitted and reviewed snippets and code tutorials from a variety of programming lanugages.

Snippet Library

Eclipse Stencil for OmniGraffle

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

Eclipse Stencil for OmniGraffle

Turquoise PSD

Turquoise PSD Template designed for windows

Turquoise PSD

JQTouch

A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.

JQTouch

The Javascript Source

These JavaScript snippets can be used in conjunction with other scripts to enhance their usefulness. These can save you a great deal of time. Many of these are generic and can be used in most scripts.

The Javascript Source

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.

Editable Grid

Moonify UI

A useful set of free PSD every day for life.

Moonify UI

“Grayness” UI Kit

A useful set of “Grayness” UI Kit.

“Grayness” UI Kit

Simple UI Elements

Simple UI Elements is a clean, well organized PSD file containing common user interface elements for web and app designs.

Simple UI Elements

Solid UI Kit

Solid UI Kit is a fresh design created by Alvin Thong from Sixbase. The download includes a well organized, easily editable PSD file.

Solid UI Kit

Blue and White GUI Kit (PSD)

A beautiful set of Blue and White GUI Kit (PSD).

Blue and White GUI Kit (PSD)

Fluidia

FluidIA is an emerging agile design tool for prototyping rich user interfaces.

Fluidia

JuiceKit for Visual Analytics

JuiceKit is a Software Development Kit (SDK) for building Information Experience™ applications. JuiceKit integrates with Adobe Flex to create components that are easy to implement and aesthetically pleasing. JuiceKit components include controls, visualizations, and utility classes.

JuiceKit for Visual Analytics

Lumzy

Lumzy is a Mockup and Prototype creation tool for websites and applications. With Lumzy, you can easily create your mockups and send them to clients on the fly. Lumzy also features collaboration tools for team editing, a chat engine for deliberating over designs, file versioning and so much more.

Lumzy

The Pencil Project

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

The Pencil Project

Free Sketching & Wireframing Kit

The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Free Sketching & Wireframing Kit

Graphite Navigation

A collection of Graphite Navigation.

Graphite Navigation

Black UI Elements

This set contains free PSD every day for life.

Black UI Elements

“Sepia” GUI Elements

This set contains “Sepia” GUI Elements.

“Sepia” GUI Elements

Add to Cart Buttons

A set of add to cart buttons. As a consistent component of ecommerce design, these should come in very handy.

Add to Cart Buttons

Dojotoolkit

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.

Dojotoolkit

Mocklinkr

Make your life easier and impress clients by using mocklinkr to deliver your static mockups as a linked-up and clickable website.

Mocklinkr

Serena Prototype Composer

Serena Prototype Composer enables IT organizations to quickly simulate process flows and mock up UI screens to help quickly clarify requirements.

Serena Prototype Composer

User Interface Design Framework

A very useful User Interface Design tool for Web Designers.

User Interface Design Framework

Hot Gloo

Hot Gloo is a Online Wireframe Application.

Hot Gloo

MepholioBox

A nice resource to find commonly used design pattern inspiration.

MepholioBox

Mobility

A free set of mobile UI design elements.

Mobility

Pattern Tap

A useful resource to find commonly used design pattern inspiration.

Pattern Tap

Big Download Button

A big green call-to-action download button. Grab the free layered PSD that you can use in your projects, even commercial, with no attribution required.

Big Download Button

OmniGraffle Wireframe Stencils

This is a set of shapes for making wireframes in OmniGraffle version 5.x (Mac OS X).

OmniGraffle Wireframe Stencils

Sleek dropdown menu

A gorgeous button featuring a slick dropdown menu in a wonderfully organised PSD.

Sleek dropdown menu

Pop-up Contact Form

A beautiful Pop-up Contact Form for your next project.

Pop-up Contact Form

Patternry

Patternry is a user interface design pattern library aimed to help solve common interface design problems. With the new Private Libraries users can also build their private pattern libraries.

Patternry

All In One Web Elements Kit

A great collection of elements for your web layout in layered PSD files.

All In One Web Elements Kit

iPad GUI PSD

Very useful collection of iPad app layout in layered, vector PSD files.

iPad GUI PSD

Android UI Elements Set

Useful and free set of beautiful Android OS UI elements.

Android UI Elements Set

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.

OSX Leopard GUI Set