Top 15 Web and Mobile GUI Kits and Wireframe Templates

“If there’s any object in human experience that’s a precedent for what a computer should be like, it’s a musical instrument: a device where you can explore a huge range of possibilities through an interface that connects your mind and your body, allowing you to be emotionally authentic and expressive.”

– Jaron Lanier

Technology just would not be where it is today, if it were not for graphic user interfaces. They are pivotal to the popularization of computers, as you no longer had to be an engineer or scientist to actually use one.

Early development for GUIs began in the 60’s, when Douglas Endlebart headed a team of researchers at the Stanford Research Institute to invent an interface for them to use on the On-Line System. The interface used text-based hyperlinks, which where manipulated with the use of a mouse – the mouse itself being designed by Bill English.

This system, in turn, formed the basis for the first ever GUI, which was used on the Xerox Alto, marking the first use of a graphic user interface on a device.

The first commercially available GUI saw the light of day in 1981, with the release of the Xerox Star workstation. It introduced various technologies that would later become standard for personal computers, such as folders, two-button mouse, Ethernet Networking and email.

In 1984, Apple released the Apple Macintosh 128K, which further improved on concepts seen a year earlier on the Apple Lisa, such as the menu bar and window controls. It became the first truly popular personal computer, and the extremely user friendly GUI played no small role in this.

In 1995, Bill Gates’ Microsoft released Windows 95, and it is this operating system that put Microsoft on the map, and is probably one of the main reasons that computers are as ubiquitous as they are today. Once again, thanks in no small way to the GUI.

With the release of the iPhone and iPad, designers started focusing on graphic user interfaces for mobile phone technology as well, and in some way, perhaps, mobile trends influence PC ones. This is perhaps most evident in Microsoft’s latest OS, Windows 8, which is designed to be used both on touchscreen devices, as well as standard keyboard and mouse ones, a sure sign that the post-WIMP (windows, icons, menus, pointing devices) era is nigh.

To help you stack up with provisions for this new age, we have decided to make a list of some of the coolest web and mobile GUI kits and Wireframe templates, so you will not have to go around clicking left and right in search for the right kit or template for your project.

1. Foundation 5 Template for Sketch

Image Source

Foundation 5 is a great collection of symbols for quickly mocking up web applications. It is made by Stephen Way and released under the MIT license, and the symbols are done in an absolutely great flat style design.

2. Snow UI Kit

Image Source

This kit is a set of awesome user interface elements, all of which are unobtrusive, and can blend really well on a light, minimalistic website. Each layer is grouped and organized, making them really easy to use, and the set comes in a free version. Attribution is required if you want to use the kit, but you can either pay for it, or join MediaLoot if you do not want to source the website.

3. Full Windows 8 GUI Theme Pack

Image Source

Made before Windows 8 was launched, this pack contains over 100 GUI elements, all done in Photoshop using vector shapes and released in .psd format, so that you can easily modify them, so as to suit your designs. Also, the file is well organized, with separate layers for each screen, meaning that it is really easy to use.

4. Bootflat UI Kit

Image Source

Flat design is definitely where it is at these days, so the more flat elements you have, the better. Bootflat, as its name suggests, is a flat Bootstrap UI kit, made available in .psd format, so you can edit and customize each element to make it better suited to you web design needs.

5. 3D Web UI Kit

Image Source

Available in both .psd and .png formats, this kit, for a change, does not contain flat designed elements, but glossy ones. The pack is made by SpeckyBoy in partnership with MediaLoot, and although the elements might be a bit out of style, only working within a trend can become extremely boring, and 3D elements still have a place in design, we thing.

6. Lion UI Kit

Image Source

A pack of some of the most used UI elements from Mac OS X Lion, done by Jonatan Castro.

7. Vector Wireframe Kit

Image Source

Giles Newman, the person responsible for this Wireframe kit, states that “wireframing for websites and apps is pretty much at the core of my day-to-day work”, so he has a pretty extensive library of UI elements he gets to call upon whenever he needs to. Because he finds it so useful, he decided that he might as well lend others a helping hand, and made it available for everyone.

8. Webpage Wireframe Stencil

Image Source

The Webpage Wireframe Stencil kit includes all the elements you might need to create a website or UI wireframe. Among the elements you will find in this kit are navigation, sub-navigation, sliders, image holders, custom icons, form elements, and more.

9. Eclair UI

Image Source

The Eclair UI is a great stencil of the Android 2.1 and 2.2. It includes lists, menus, status bar, icons, and portrait.

10. Awesome UX Kit

Image Source

This fantastic kit is a set of 26 Adobe Illustrator wireframe templates, and two custom brushes, all designed by George Vasyagin. It is completely free to use, and although it is currently only available for iPhone, there will be a PC and tablet version soon.

11. App Wireframes Kit

Image Source.

Made by Vlad Cristea, this wireframe kit is made to help you when starting a new app design project, by aiding in the creation of prototyping. The kit contains several UI elements, all of which are in both .psd and .ai format.

12. WireKit

Image Source

WireKit is a set of Photoshop shape layers to “make designing your next iPhone app just a little easier”. It features two styles, each coming with over 60 of the most common UI elements.

13. Free Blueprint Wireframe PSD Kit

Image Source

Sure looks cool, doesn’t it.

14. E-Commerce Steps UI

Image Source

We’ve mentioned in a previous article how important check-out forms are, so we thought that adding an e-commerce UI on this list only seemed appropriate.

15. Basiliq

Image Source

The makers of Basiliq sure know how to market it. The copy for this UI kit is absolutely awesome, so we’ll just go ahead and quote:

“300 (maybe even more) little bits and pieces and bells and whistles. You can assemble anything from them. From the mobile YouTube UI to a model WWII tank. We’ve double checked to make sure you’re covered. Current version is incompatible with assembling several abyssal fish species and Higgs boson. We’re working hard to fix it in next release, thank you for your patience.”

That concludes our list of the top web and mobile GUI kits and wireframe templates. We hope you find the items on our list useful, and that they will help you in creating awesome apps and websites. Don’t forget to tell us what you think of our list, and any other cool kits and templates you might want to share, in the comment section below.