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.
You might also like to take a look at these collections of 50 Free Mobile UI Kits for iOS & Android, Free PSD Web Templates, Free HTML Templates, Free Icon Sets, or our latest UI kit round-up from 2016.
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.
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).
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 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) →
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.
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.
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.
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.
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) →
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.
This huge kit, from Liquidicity, contains 165 icons and are available in these five colors: Red, green, blue, black and white.
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.
This stencil includes a selection of useful Twitter badges and widgets.
This is a pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.
This huge set of various web elements with 17 easy to modify modules, with each module comes with four different color options.
This beautiful and polished free Flex UI skin is available for free from psdthemes.com, but you do need to signup first.