20 Free Web UI Element Kits and Stencils

No doubt every web designer has spent many endless hours mocking up web pages, and as such every designer should have a good set of re-usable and uniform Web UI elements that they can rely upon to save them precious time and spare headaches when they are in the initial stages of a web project.

In this article we have 20 completely free Web UI element kits and stencils that are perfect for the initial mockup or wireframe stage of a web design project. Most of the kits are editable and the kits are in either .psd, .ai or .png format, but you will also find some Omnigraffle stencils and some kits in .svg format. So, whatever your preferred format you are bound to find the perfect kit for you.

Modern Web UI Set (.psd)

Modern Web UI Set (.psd)

This free Web UI Set has everything included in the PSD file in well organized in folders, and fully editable using vector layers in Photoshop, from the button shapes, to the gradients, and text. Having every element editable means you can recreate anything you need that is not included in the file, just by using existing items as your base.

Modern Web UI Set (.psd) →

Massive Web UI & Button Set (.psd)

Massive Web UI & Button Set (.psd)

This free UI 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).

Massive Web UI & Button Set (.psd) →

Web UI Element Pack (.psd)

Web UI Element Pack (.psd)

This User Interface Element Pack in PSD format, contains 19 elements including Loading Bar, Button in normal and clicked state, Button toggle, close, next, previous and paging icon and slider.

Web UI Element Pack (.psd) →

Web UI Wireframe Kit (.psd)

Web UI Wireframe Kit (.psd)

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

Web UI Wireframe Kit (.psd) →

Browser Form Elements (.psd)

Browser Form Elements (.psd)

Browser Form Elements (.psd) →

Web Page Elements (for Omnigraffle)

Web Page Elements (for Omnigraffle)

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

Web Page Elements (for Omnigraffle) →

Wireframe Kit (Google Drawings)

Wireframe Kit (Google Drawings)

Google Drawings is still in its early and simple form and didn't have any notable UI kits, until now. These kits have been specifically designed for Google Drawings, and you have a choice of four templates, that include: The main blank template, product detail page, landing page and item list view.

Wireframe Kit (Google Drawings) →

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

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.
The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats.

Sketching & Wireframing Kit →

Wireframe Symbols (.ai)

Wireframe Symbols (.ai)

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

Wireframe Symbols (.ai) →

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

The popular 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: Ad Units, Calendars, Carousels, Charts and Tables, UI Controls, Form Elements, Grids, Menus and Buttons, Mobile, Navigation and Pagination, OS Elements, Placeholder Text, Screen Resolutions, Tabs and Windows and Containers.

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle) →

Ext JS v3.0 Stencil (for Omnigraffle)

Ext JS v3.0 Stencil (for Omnigraffle)

This is the updated version of the Omnigraffle ExtJS stencil Ext JS. This update contains many improvements and additions, namely that the developers have recreated most Ext JS elements as Graffletopia shapes or groups. This is especially helpful for resizing titles, tables cells, and so on.

Ext JS v3.0 Stencil (for Omnigraffle) →

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

This huge kit, from Liquidicity, contains 165 icons and are available in these five colors: Red, green, blue, black and white.

165 Vector Icons in 5 Colours (.ai, .jpg and .svg) →

Flex 3 Stencil (for Omnigraffle)

Flex 3 Stencil (for Omnigraffle)

This Omnigraffle stencil contains all of the Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.

Flex 3 Stencil (for Omnigraffle) →

Twitter Widget Stencil (for Omnigraffle)

Twitter Widget Stencil  (for Omnigraffle)

This stencil includes a selection of useful Twitter badges and widgets.

Twitter Widget Stencil (for Omnigraffle) →

Web Designer Toolkit (.psd)

Web Designer Toolkit (.psd)

Web Designer Toolkit (.psd) →

Facebook GUI (.psd)

Facebook GUI (.psd)

Facebook GUI (.psd) →

Facebook Applications (Omnigraffle)

Facebook Applications (Omnigraffle)

This is a pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

Facebook Applications (Omnigraffle) →

Web Elements Kit (.psd)

Web Elements Kit (.psd)

This huge set of various web elements with 17 easy to modify modules, with each module comes with four different color options.

Web Elements Kit (.psd) →

Flex Darkskin UI (.psd)

Flex Darkskin UI (.psd)

This beautiful and polished free Flex UI skin is available for free from psdthemes.com, but you do need to signup first.

Flex Darkskin UI (.psd) →

WEB UI Treasure Chest

WEB UI Treasure Chest

WEB UI Treasure Chest →

Author: (583 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments