This series is supported by Ben & Jerry’s Joe, Ben & Jerry’s new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here.
As designers, we often recycle the same fundamental elements when wireframing or mocking up a design. However, by utilizing a library of reusable web UI elements, we can make the design process on each project more efficient, and cut down on research and design time.
This post covers 10 of the best free web UI kits, resources and stencils from around the web to kick-start the early stages of your next project.
If you’re partial to any particular free web UI kits or resources, let us know about them in the comments below.
1. UI Design Framework
This is a complete design framework that includes a Graphical User Interface (GUI) library with hundreds of vector elements for interface design. Plus, it has a minimal UI icons set with 260 vector icons for Illustrator, and a library with 200 styles to apply in Illustrator. They can be utilized to create more comprehensive wireframes, mockups and deliverables using consistent, well-designed common UI elements.
Each vector element can easily be customized to suit your needs by resizing, coloring and tweaking its appearance, all neatly contained within organized Illustrator panels.
2. Web UI & Button Set
A large, versatile web UI and button set that should have something useful for everyone. It’s available in three different styles with over seven colors and contains elements with three distinct aesthetics: Glossy, satin/light gradient, and one-color. The satin/light gradient set is available in seven different colors (all of which you’ll find in the PSD file).
The individual elements in the set include control buttons, info and text boxes, navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.
3. Sketching & Wireframing Kit
This is a comprehensive and well-organized set of resources for sketching and wireframing that consists 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, which can be easily modified. It can also be downloaded in PDF and EPS formats.
4. Browser & Form Elements
Designers Toolbox is an excellent resource; take note of the free web browser windows and standard HTML form elements. You can choose from several options, including Windows Vista (IE/Firefox), Windows XP (IE/Firefox) and Mac OS X (Firefox/Safari). Once you’ve chosen your operating system and browser, you can then download the required browser window size, ranging from 640×480px to 1600×1200px.
Each form element package includes pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all within an easily editable PSD file.
5. Modern Web UI Set
This is a clean and modern web UI set for use in web design, applications, and print. Its clean, black-and-white aesthetic means it can be used in virtually any situation. Included within the package are navigation elements, buttons, drop-down menus, scroll bars, and login panels. The set was built in a non-destructive way, meaning everything included in the PSD file is 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.
6. UI Design Kit
For those who don’t wish to create interactive or complex wireframes or mockups, this UI kit provides a worthy alternative. You can simply open it within Photoshop and start utilizing the elements included. The kit contains buttons, drop-down menus, scroll bars, navigation elements, speech bubbles, radio buttons, avatars, tabs, checkboxes, text fields, and a search bar.
Included within the package are shape objects, which in some cases have been converted into SmartObjects, so they’re completely scalable.
7. UI Buttons & Icons
Here, you’ll find a selection of 165 high-quality UI icons and buttons, available in AI, JPEG and SVG formats, meaning each element can be easily modified. There are also five different color schemes to choose from. The package contains icons, loading bars, symbols, buttons, arrows, and star ratings.
It’s a well-designed, clean collection that provides a good base to use when beginning any type of UI design, wireframe or mockup.
8. UI Library
le="UILibrary" width="640" height="348" />This is a simple but extremely useful Adobe Illustrator symbol library file with all of the elements organized on the art board. The package contains scroll bars, lists, buttons, tables, tabs, ads, text fields, and loading bars. This library of UI components could be utilized well when creating wireframes or mockups.
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.
9. Web Elements Kit
Here, you’ll find a huge set of UI elements that are easily modified through the layer styles. There are 17 modules in total in the package, with each module containing various color options. You can either use the “all in one” PSD or the individual PSD files for each element. Overall, the set is well organized with each layer labeled, so you can simply drag and drop them into your project.
Each text field is fully editable, with easily customizable colors. Also included is a “How To” help file with information on how best to use the files.
10. OmniGraffle UI Stencils
Try out this set of shapes for creating wireframes and mockups in OmniGraffle. It consists of the basic components you’ll need to create user interface specifications. Included in the package are header and footer variables, buttons, switches, controls, sliders, menus, headings, arrows, tabs, media players, modal windows, a color picker, and pagination elements.
An OmniGraffle UX template is also available (free), which includes shared layers for basic UX document needs, including title page, wireframes, and storyboards. The UX Form stencil is also an excellent resource for OmniGraffle, which provides different button layouts, a progress indicator, captcha code input field, labels, and more.
Are there any other free UI resources you would recommend? If so, let us know in the comments below.
Series supported by Ben & Jerry’s Joe
This series is supported by Ben & Jerry’s Joe, Ben & Jerry’s new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here.
Image courtesy of iStockphoto, kryczka
…
Cheers!…
