31 Useful UI Resources For Web Developer

 

In previous article: 15 Fresh JavaScript Tutorials For Web Developers, we have introduced some useful tutorials for web developers. Currently there are a subtle set of UI toolkits, libraries, frameworks or patterns that not only greatly simplify application but also save time for web designers. Use these recommended sources to gain knowledge about a particular UI problem or to gain inspiration and insight on best practices, techniques, and examples of exemplary UI designs. Following we’ve prepared 31 UI resource for you to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements. Then hope you can enjoy them.

 

 

ALL In One Web Elements Kit

 

It is an 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. There are 17 modules in total in the package, but every single module have variations that comes with like color options to choose from.

 

 

 

 

Best Practice UX Forms Stencil v1.1

 

This is the second, more comprehensive release of this stencil which follows best practice UX form design practices, providing three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more.

 

 

 

Browser Form Elements PSD

 

It’s a useful set of vector website assets you can use to mock up your client projects, present your work, or get a quick visual while laying out websites.

 

 

 

Browser Screens and Website Elements

 

It’s a useful set of vector website assets you can use to mock up your client projects, present your work, or get a quick visual while laying out websites.

 

 

 

Browser Templates For The Website / Web Application Designer

 

This is a fantastic template file in the Adobe Photoshop .PSD format aimed to save anyone time who designs websites, web applications, or anything else in which the actual browser border is needed in the mockup.

 

 

 

Dijit

 

Dijit is Dojo’s UI Library, and lives as a separate namespace dijit. Dijit requires Dojo Core. Each of the widgets and functionality provided by Dijit is describe in the following sections, though the aforementioned quickstart guides cover some basics.

 

 

Eclipse Stencil for OmniGraffle

 

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

 

 

Facebook Applications

 

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

 

 

 

 

Flex 3 Stencil

 

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.

 

 

 

 

Free Web UI Wireframe Kit

 

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.

 

 

Freebie: Massive Web UI & 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).

 

 

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.

 

 

 

 

 

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.

 

 

Mac OS X Interface 2

 

More new major Omni application updates mean a new, cleaner, more Leopardy interface stencil. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.

 

 

MochaUI

 

MochaUI is a web applications user interface library built on the Mootools JavaScript framework.

 

 

Omnigraffle Wireframe Stencils

 

This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you’ll need to create user interface specifications.

 

 

 

Peter’s DeivantART ID Ver1.3

 

It includes the MINI and Original ID Templates, Total of 15 professional designed template for easy start. It is a fully customizable template.

 

 

 

Peoplepods

 

PeoplePods is a framework that makes it easier to create community or “social” applications. It provides a flexible infrastructure within which members of a site can create, comment upon, and consume content of arbitrary types.

 

 

Quince

 

Quince is a XI and UI pattern library that is sommunity driven and helps you to discover, use, and understand patterns to provide the best user experience. Quickly explore pattern by tasks, tags, and typical UI placement.

 

 

 

Sketching & Wireframing kit

 

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

 

 

UI Scraps

 

UI Scraps is a collection of good, bad and noteworthy user interface designs found by Jason Robb.

 

 

UKI

 

Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with a rich view-component library ranging from Slider to List and SplitPane.

 

 

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. This site will help you in two ways: You can read insightful design pattern articles and browse screenshot examples.

 

Web Browser Elements

 

Download our free standard HTML form elements or browser windows for web browser.

 

 

Web Form Elements & Web Form Elements Vol.2

 

 

 

Web Page Elements

 

Using the open-source “Bitstream Vera” font set and free icons from FamFamFam, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders.

 

 

Web UI Treasure Chest v 1.0

 

It contains more than +100 elements for website design. Full PSD layered file, most of files are fully editable. Big part of this files contains elements like bullets, arrows, scrollers, checkboxes, etc, some typical stuff, but also some lovely elements.

 

 

Wireframe Symbols

 

It contains the symbol library and a full Adobe Illustrator file with all of the elements spread out on the art board. To install this library just drag and drop the file named “Wireframe Symbols.ai” into your Adobe Illustrator Symbols directory. Once you are in Illustrator go to your Symbols Palette and load the library. This file is compatible on both Mac and PC.

 

 

Yahoo! Design Stencil Kit version 1.0

 

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

 

YUI Library

 

The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.