40 Free Web and Mobile UI, Wireframe Kits and Resources

Door globecom op zo, 2014-12-28 14:28

In this post, we are presenting an overwhelming collection of Free wireframing and UI design kits that come handy for the designers when they want to mock-up a user-interface.

In order to create a mock-up, designer needs some basic user interface elements and what could be the best than having such basic element available in ready-to-use format.

So, here we are presenting a good collection of Free Web and Mobile UI, Wireframe Kits and Resources for your use. We hope that this assortment will help you get going in the initial phases of your UI designing project.

Android 2.2 GUI

This set contains GUI for android 2.2 (FROYO)

Big Block UI

Big Block UI is a fresh take on common user interface elements. The PSD is well organized and colors can easily be changed.

Stencil kit

Controls stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.

Flex 3 Stencil

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

Browser Form Elements PSD

This set contains Mac Firefox 3 and another for Vista IE7.

Samsung i9000 Galaxy S .PSD

Samsung Galaxy S .PSD (Real .PSD, not rendered.)

Motorola Droid 2

Motorola Droid 2 .PSD (Real .PSD, not rendered.)

Illustrator Template for iPhone

This set contains iphone wireframe elements.

Small GUI Pack

Small Graphical User Interface Elements Pack

Keynote Wireframe Templates

The following vector user interface elements are designed in Apple Keynote, and are fully editable and customizable without needing additional tools.

Flex Darkskin PSD UI

This set contains 16 different PSD file.

Web kit interface layout pack

Free kit of web elements: icons buttons arrows menu bars web boxes ui scrollbar checkboxes.

Sleek Video Player

This is a great starting point for creating your own custom player.

iPhone UI Kits

This psd icludes Switch controller, Segment controller, Page controller, Slider, Simple textfield and Search box and buttons

Colorfill boxes

A set of colored boxes.

Web Browser Elements

A very useful kit contains pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all within an easily editable PSD file.

Mac OS X Interface 2

A beautiful interface stencil kit, this one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.

iPhone PSD Vector Kit

This set contains several button elements as well as six different iPhone interface options.

Squetch Wireframing Toolkit for Illustrator

Sqetch is a little Illustrator-toolkit, consisting of several templates and elements: Browser, iPad upright, iPad landscape, Smartphone, GUI-Elements, Form-Elements

UI Design Kit

This set is totally scalable and made completley with shape objects.

iPad Stencil for Omnigraffle

This set contains backgrounds, title bars, buttons, selectors, and other iPhone UI elements, text is fully editable on lists, title bars, buttons, and scroll wheels.

Android GUI PSD

Photoshop file with elements of Android 1.5 GUI to help open-source community with application mock-ups.

All elements of Maemo 5 GUI in PSD

Download PSD file that contains templates GUI-elements for the platform Maemo. It is very necessary thing for prototyping GUI applications running on the Maemo-devices.

Free Full Layered Facebook GUI PSD Kit

The main idea behind the kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages.

Quommunnication Stencil Kit

A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.

Massive Web UI & Button Set

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

EightShapes Unify

EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool.

Web Form Elements Volume 1

Volume 1 contains a selection of Web user interace elements for forms in Photoshop format.

Photoshop Button Templates

These Photoshop button templates have been separated into individual layers to be easily selectable. You can choose from the following colors: dark blue, light blue, dark green, light green, yellow, orange, red and purple.

iPad GUI PSD

The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.

IPhone GUI as Rich Symbols for Fireworks

This iPhone kit has been designed using Adobe Fireworks. It has several combinations, buttons, backgrounds, etc. It also has some lines of code to transform the simple vector symbols into rich symbols, with some variables.

RIM Blackberry PSD

This download package contains 135 detailed layers for Blackberry app development.

Ultimate iPhone Stencil – Graffletopia

This Omnigraffe iPhone stencil kit contains backgrounds, title bars, buttons, selectors and all other iPhone UI elements. It can be easily resized horizontally by ungrouping, resizing the middle element and then regrouping the elements back into a single button.

iPhone App Wireframe Template

Two versions are available, one in landscape and the other in portrait. Each version includes three pages: page 1 has a vertical screen and notes column; page 2 has a horizontal screen and notes column; page 3 has a three-screen layout that is great for drafting designs.

A4 and A3 Sketching Grid Paper

This downloadable and printable 960-pixel-wide grid makes it easy to create a three-column (320 pixel), four-column (240 pixel), five-0column (192 pixel) or six-column (160 pixel) grid on a single sheet of paper. You have two sizes to choose from, A4 and A3.

960px Photoshop Grid Template

This template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is broken down into six columns of 20-pixel gutters.

Illustrator Template for Blueprint CSS Comps

This Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

960 Grid Template for OmniGraffle

Photoshop Template for Blueprint CSS Comps

This Photoshop document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.

Wireframe with Notes

This wireframe grid is divided into 24 columns, with gutters between each column. The grid is especially useful for designers who work within a CSS framework such as Blueprint.