20 Free Web UI Element Kits and Stencils

July 21, 2010 - 41 Comments
Illustrator,Photoshop,Vector,Web Apps,Web Design

Join 38,000 of our readers, by following us via our RSS Feed, on Twitter, on Facebook or on Digg

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 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)

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)

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)

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)

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) →

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)

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 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)

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)

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)

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) →

You might also like…

10 Completely Free Wireframe and Mockup Applications →
A Collection of Useful Web Design Wireframing Resources →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
25 UI Inspiration and Design Pattern Resources →
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices →
50 Useful Tools and Generators for Easy CSS Development →
20+ Resources and Tutorials for Creative Forms using CSS →
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials →

22 Comments › Leave yours

Soam
21 Jul, 2010
EPIC POST , my friend.
I was bent on buying them from themeforest.
Finally, the free list comes from you, saving tones of my money man.
Reply
Michel
21 Jul, 2010
Actually, the Yahoo set contains also an Adobe Fireworks (.fw.png) editable file — just a note!
Reply
m4rcosx
21 Jul, 2010
Awesome list! Very useful..
Reply
Ryan
21 Jul, 2010
Phwarrr!!! superb collection :)
Reply
Ramesh
21 Jul, 2010
Nice! Thanks for sharing.
Reply
Vincent
21 Jul, 2010
I just release yesterday a framework for designing application interfaces with Illustrator :
http://www.webalys.com/design-interface-application-framework.php
It included a GUI library with hundreds of vector elements, a minimalist set of 260 icons, 200 graphic styles for Illustrator and 330 swatches. It’s free for commercial usage.
I think it worth be in this list :-)
Thanks,
Vincent
Reply
mobile broadband by AK
21 Jul, 2010
that is awesome and handy to use for any website.
Thanks for such a nice article
Reply
Kaushik
21 Jul, 2010
Thanks man. I was looking for some arrow icons. :)
Reply
Dimi
21 Jul, 2010
Thanks for including my web UI kit. Hope you guys find it useful!
Reply
Edward Daniel
21 Jul, 2010
This is awesome and useful kit too.. Thanks for the share
Reply
Vectorbunker
21 Jul, 2010
Nice Share Thank you..
Reply
Stan
22 Jul, 2010
Great post! Thank you so much for sharing!
Reply
Tom johnson
22 Jul, 2010
Some interesting sets, especially the first one
Would like to see more in vectors though
Perhaps an idea for a project…
Reply
Carp Vlad
22 Jul, 2010
nice post…thanks a lot :)
Reply
curtis
22 Jul, 2010
awesome, thank you!
Reply
Railbot
22 Jul, 2010
That definitely come handy! Thanks for post!
Reply
ArdianYS Free Prestashop Theme
22 Jul, 2010
wow, great collection. Thumbs it.
Reply
Studio Interactive
23 Jul, 2010
Wow, what a great collection.. These will definitely save me a lot of time when coming up with comps for my clients.. Thanks so much for the share!
Reply
Burak
25 Jul, 2010
Thanks a lot super share.Great web kits.
Reply
Marcel
1 Aug, 2010
Thanks for sharing, awesome!
Reply
Dreamweaver Tutoring
4 Aug, 2010
This is a great collection of UI elements. I will give the Google Drawings toolkit a try.
Reply
shellyc
18 Aug, 2010
Konigi (http://konigi.com/tools/omnigraffle-wireframe-stencils) also has an excellent selection of Omnigraffle stencils
Reply