To be successful, every web and app designer has to communicate ideas to clients in a clear and effective manner. You can’t have clients imagine your ideas, the client has to SEE them. Web site mock ups are the perfect way to pass on your ideas so they can be approved or modified easily and efficiently. Here we have listed the best Graphic user Interface elements in the web. (GUI) From
icons, to
buttons,
menus or
scrolls, you will find everything you need to build your fancy mockup. In the case of icons, there are some of such high quality, that including these in your final designs is a must. Your blog will look a million bucks with these fantastic freebies. So carry on and skim through these wonderful resources created by our community’s finest designers.
Icons
|
Massive set of 120 icons in 16×16, 32×32 & 64×64 pixels in 10 different colors. |
2. Blogging icons by Iconshock
|
This set includes 5 icons in two sizes of PNG files (512px and 256px) as well as the source files (Illustrator). |
|
64 icons in AI, and SVG format. |
|
Sanscons was design specifically for you to use CSS with them. Due to their transparent background, you can apply any color or background image to them for a more custom fit. Styling the icons takes only a basic understanding of CSS. 120 Icons in 16×16, 32×32 & 64×64 pixels in 13 different colors. |
|
To give the greatest flexibility, the icon set packages all icons in PNG, SVG, SWC and Omnigraffle stencil formats. Iconic tries to work with various tools/workflows to make your life a bit easier. 8×8, 12×12, 16×16, 24×24 & 32×32 pixels. |
6. Chalkwork HTML by Mezzoblue
|
Featuring 31 graphical representations of common markup elements, available in 3 sizes and 6 file formats: transparent PNG, TIF, GIF, BMP, Windows ICO, and Mac ICNS. |
7. Vector icons 5 Color set by Gosquared club
|
Each set contains 165 icons and they come in 5 colours that makes 825 icons in total. Each Icon zip pack contains Jpg, svg, and ai files. |
|
36 hand pointer icons of 6 different types with 6 color variants. PNG and PSD format. |
|
There are 108 simple icons included in this set. The icons are available in 32×32 px .png (transparent background) format. |
|
Another massive set of 400 icons in PNG format (10×10 and 16×16 pixels) |
|
Fantastic set that can fit almost any design. #0 icons at 48×48 in PNG format. |
|
275 icons in PNG format 48×4. One of the highest quality icon sets around. This talented designer even includes the source PSD file. |
|
The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds. They come in 48×48 and 64×64 PNG format. |
14. Ultimate icon set by Nishan
|
The free download contains all 79 icons, sized at 256×256 pixels and available in both PNG and GIF formats. Very good detail at such small size. One of the best icon sets featured here. |
15. Exploding boy pixel by Exploding Boy
|
31 free icons which can be used for application toolbars, content management systems, web applications, anything you like. They are divided into four different color sets — blue, pale blue, orange, and grey. They are ultra-simple, straightforward pixel icons. |
16. Blog Icon Pack by SEM Labs
|
More than 200, 48×48 icons. |
|
The set contains 49 free vector icons including PSD which can be useful for both corporate and personal setting. You can use the set for free — without any restrictions whatsoever.The icons are available in the .png-format in the resolution 128×128px. 100% pure shape-based layered PSDs are also included in the package. |
18. Web Application set by Webappers
|
There are 20 icons designed specially for web applications (e.g. Charts, Profile, Search, Add, Delete, Email, Print, Warning and etc…). Icons come in 3 sizes; 48×48 px, 32×32 px, and 24×24 px. All of them are in PNG format with transparent background. |
19. 2experts icons by 2Experts icon set
|
Free 30 Icons set are created from scratch using Adobe Fireworks. The zipped pack contains (48×48, dimensions) PNG images, which you can use for free, on your Websites, blogs, projects etc. High contrast vibrant set. |
20. Markup by Kostenlose
|
Mono chromatic tiny set in GIF format. 10×10. |
|
Here are 113 10×10 grey scale icons in .gif format. |
|
Media Icons is a high quality and free Leopard ready multimedia themed icon collection for Mac and Windows users that like to customize their apps’ icons. |
23. Picol by Picol
|
PICOL is Melih Bilgils project for providing free and open icons for electronic devices. |
|
50+ icons all vector so you may resize, edit, and colorize to your heart’s content. |
25. Token by brsev
|
128 unique icon designs each available in dark and light variants in ICO bundling at 256×256, 32×32 and 16×16 icons as PNG at 128×128. The set also includes one PSD file including the layer styles for each resolution. |
|
Feel free to download this 160-piece set, and use it in on your own projects. |
|
TwoTiny Is a stylee little set of 80+ pixel perfect icons for use in interfaces or other webby application work. 16×16 in GIF format. |
|
18 beautifully made 64×64px icons by this talented and young Mexican designer (under twenty) Comes in PNG format. |
|
20 monochromatic GIF icons at 8×8 pixels. |
|
Huge set of 143 ultra tiny 10×10 PNG icons. |
|
60 icons rendered at 256×256, 128×128, 64×64, 48×48, 32×32, 16×16 pixels in .png, ico and icns formats. |
32. WIP by Xlphs
|
49 icons in PNG format. |
33. Cute blogging by Wicon
|
You can use these icons on your blog. Cute Blogging Icon Set includes Design, Download, Freelance, Part-time, Hire Me, Not Available, About Me, Services, My Blog, Contact. Size: 128, 64, 48, 32px) |
34. Portfolio icons by Iconshock
|
One of the best Portfolio and blogging sets around. Superb detail and semi gloss finish. PNG, ICO and ICNS format. |
|
The package includes 30 PNG menu icons plus the additional source files for further customization. |
36. Web Standard by Templay
|
28 Icons for Webdesigner und Blogger in PNG format. |
|
This is a set of 32 unique icons in various of colours. The icons are available in 4 different sizes (32×32 pixels, 48×48 pixels, 64×64 pixel, and 96×96 pixels) and come as 32-bit transparent PNG files. The icons are also available in vector format (Adobe Illustrator CS4 AI format) |
|
86 icons at 64×64 in PNG and ICO format. |
39. 32px mania by Midtone
|
179 32×32 perfect little works of art. |
|
Includes 85 icons at 32×32px in PSD format. |
41. Kde Icons by Cd9
|
48 Free stock icons can be used in most website and apps. Only png format and size is 24 x 24 px |
Sketching and Wireframing
42. Menus and Buttons by Yahoo!
|
Menus and buttons stencil from the Design Stencil kit in the Yahoo! Design Pattern Library. Template for use in Omnigraffle. |
44. Developers stencil kit by Yahoo!
|
Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers almost everything you need for any kind of app development. This is one of the most massive sets on the list and features Calendars, Carousels, Charts and Tables,Form Elements, grids, Menus and Buttons, Navigation and Pagination, OS Elements, tabs and many more. |
45. Maemo 5 by Ansoni
|
A Maemo5 UI Stencil set for designing GUI’s for the N900. Template for use in Omnigraffle. |
46. GUI Layout and Widgets by Psheridan
|
This is the updated version of our popular Ext JS Omnigraffle stencil. This update contains many improvements and additions, namely that we were able to recreate most Ext JS elements as graffletopia shapes or groups. This is especially helpful for resizing titles, tables cells, and so on. |
47. Controls by Yahoo!
|
Controls stencil from the Design Stencil kit in the Yahoo! Design Pattern Library. Template for use in Omnigraffle. |
48. ipad and iphone design by Da5id
|
Design your application for iPhone, iPod touch and iPad devices with this exhaustive set of stencils. All stencils have been originally created by hand with native OmniGraffle shapes and groups and can be scaled, resized and exported to other vector formats in Graffle. The stencils represent the actual controls and views that are available to developers in the iPhone OS SDK and follow recommended application styles as discussed in the iPad and iPhone Human Interface Guidelines. |
49. Touch Gesture Reference Guide by Luke W
|
The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces. The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures. |
|
The zipped file contains EPS, PNG and Illustrator files for your use. His approach supports such interactions as taps, holds, double taps, flicks and is achieved with circular shapes. |
51. Wireframe symbols by Johnny nines
|
This download contains the symbol library and a full Adobe Illustrator file with scroll bars, lists, buttons, tables, tabs and much more. 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. This file is compatible on both Mac and PC. If you know others that would benefit from this file by all means send it along to them. |
52. Mobile by Yahoo!
|
Cellphone stencil from the Design Stencil kit in the Yahoo! Design Pattern Library. Template for use in Omnigraffle. |
|
This is a stencil on a Nintendo DS Lite. Very helpful if you need to do screen mock ups. Template for use in Omnigraffle. |
54. Carousels by Yahoo!
|
Carousels stencil from the Design Stencil kit in the Yahoo! Design Pattern Library. Template for use in Omnigraffle. |
55. Wireframing kit for Google drawings by Morten Just
|
UX designer Morten Just made this very useful set of stencils for the Google drawings inline app. He states at his homepage five interesting reasons it’s better than Omnigraffle, so you got to check this out. He might be right. |
56. Aqua GUI by Velijn
|
A series of elements inspired by the GUI Design Palette 1.2 and the Mac OS X interface stencils, based upon Aqua, and mainly aimed at making simple windows designs. Template for use in Omnigraffle. |
57. OS Elements by Yahoo!
|
OS elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library. Template for use in Omnigraffle. |
58. Twitter Widgets by Psheridan
|
Twitter and Tweetmeme widgets. Template for use in Omnigraffle. |
59. Windows GUI Design by Omnigroup
|
User interface elements for the Windows operating system, in case you have to design an interface where Aqua widgets are considered a strange and mysterious concept, and liking them is totally out of the question. Template for use in Omnigraffle. |
60. X box 360 Controller by Pancake Show
|
This is a stencil for the Xbox 360 controller. It’s very helpful if you need to do game control design. Template for use in Omnigraffle. |
|
Free Photoshop browser templates for your professional screen designs. They come in 1024×768 pixels and 800×600 pixels size, with all kinds of different browser flavors and with a few extras on top. |
62. Android Sketch Stencil by Mikec78uk
|
Sketch style Android OmniGraffle template. The purpose of the sketch style wireframe is to prevent the intended audience from thinking about visual design and encourages them to focus on the functionality and behavior being proposed. |
|
This is the starter kit employed by the famous design company quommunication uses for their designs, including their star product “Newa” one of the best high end Wordpress themes around. this PSD file contains common design elements for sketching and wire framing like form elements, RSS feed icons, colors, Advertising units, browser windows and grids |
64. Facebook applications stencil Kit by Fjcsar
|
A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications. Template for use in Omnigraffle. |
|
This kit is full 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. |
66. Omnigraffle wireframe stencils by Konigi
|
This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you’ll need to create user interface specifications. |
67. Best Practice UX Forms Stencil v1.1 by Ryan Younger
|
This is the second, more comprehensive release of this stencil which follows best practice UX form design practices, providing three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more. Template for use in Omnigraffle. |
|
Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors. Template for use in Omnigraffle. |
69. Mac OS X Interface 2 by Omnigroup
|
More new major Omni application updates mean a new, cleaner, more Leopardy interface stencil. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision. Template for use in Omnigraffle. |
70. Eclipse Stencil for Omnigraffle by Data Bene
|
Template for use in Omnigraffle. |
High quality GUI elements
|
This is an incredibly realistic depiction of a Blackberry, composed by more than 100 photoshop layer that you can use as separate elements for your mockups and mobile apps. |
72. GUI elements by Artgen
|
This useful PSD file includes a great selection of GUI elements that you can use for free for both commercial and free app development (with attribution). All elements are on their own layers which should make customization really quick and easy. |
|
Excellent resource for your mockups or actual apps. Each element comes in a different PSD layer. |
74. iphone style checkboxes by Tdreyno
|
Nice iphone style checkboxes. |
|
User Interface Element Pack in PSD format, containing 19 elements including Loading Bar, Button in normal and clicked state, Button toggle, close, next, previous and paging icon and slider. |
|
Android GUI PSD is inspired by idea of teehan+lax and is not intended to be used for final implementation. The PSD file comes with tons of resizable basic elements in vector paths, basic screens and a cool resizable phone illustration in vectors. |
|
85 shining icons ready for your next design. Downloads available in svg, and ai files. |
78. MAC OS window elements by David Mcleod
|
Nice PSD file with some MAC OS Window elements. |
79. iphone 3G Stencil by Theresa Neil
|
Includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons… All components are on a transparent background and should re-size nicely. |
|
This PSD file contains 6 different checkbox styles, including rounded-style checkbox, square-style checkbox, button-style, FireRift-style and iPhone-style. |
81. Web designer Mini Kit by Tanya
|
This set includes stuff to make registration fields and menus, checkboxes and ratio buttons, cursors and pointer hands. |
82. Web UI treasure chest by Tanya
|
This PSD layered file, most of whose files are fully editable, contains more than 100 elements for website design. |
|
The Palm Pre offers another way to present ideas that connect clients with their customers. Each element is built with vectors for easy editing and scaling. |
84. iPhone GUI as Rich Symbols for Fireworks by Jcorrea
|
This is an incredible vectorized iPhone GUI Fireworks Library. Each element is a vector rich symbol with variables. |
85. Firefox browser and form elements by Designers Toolbox
|
Complete set of browser elements and form objects for Mozilla Firefox browser on Windows Vista. |
|
You need an active checkbox for your screendesign? A radio button, a select box? And you’re tired of making the same screenshot over and over again? Look no further: These free photoshop form element templates for your professional screen design include all common standard form fields , mouse and link pointer and are optimized for ease-of-use. |
87. iphone starter’s kit by Renee Rist
|
This set comes with several button elements as well as six different iPhone interface options. This pack may be useful for mobile developers and front-end designers who need a professional way to show mock-ups to clients or to work out ideas. |
88. iphone application GUI by Freshbooks
|
One of the best iphone templates out there. Very thorough, includes some controls not available on other packs. |
|
Status bars, bar buttons, icon bar, pull down menus, large buttons, keyboards and many more. |
|
itunes-quicktime style media controls and viewer. Comes in a PSD file. |
91. 20 handmade buttons and UI elements by Nerdburn
|
Each of the elements is in it’s own Photoshop folder, so you can just drag them in to your existing PSD’s. |
|
Massive set of UI elements both in PNG and PSD versions. |
|
GUI kit for Facebook application design. |
94. MobileMe full iphone GUI by Shubham Kedia
|
MobileMe Full GUI Theme (Beta 5). |
|
Incredible list of buttons, form fields, scrolls and everything you need to build your safari mockups. |
|
14 Screens of the android interface (eclair). Screens are in original resolution (320px x 480px), in .psd format. |
97. Google nexus one Template by Ilia Draznin
|
480×800 file with menus, list items, tabs, arrows of the updates Google Nexus one. |
98. Internet Explorer Browser and form elements by Webdesigners Toolkit
|
Extensive list of GUI elements for Internet Explorer on Windows Vista. |
99. Windows 7 active window by Carlos Way
|
Nice Photoshop layered file with all elements of a Windows 7 active window. |
100. Browser Templates by Joel Laumans
|
PSD file with three different browser resolutions; all with easily editable titles, address bars, scrollbars, and favicons. The set contains easily editable browser windows (Firefox OSX, Firefox Windows, and Internet Explorer) in 3 different resolutions (1280×1024, 1024×768, 800×600) all in a neatly organized .PSD file. |
101. Windows XP active window by Carlos Way
|
Perfect XP window with separate layers for reach element. |
102. Windows 7 Taskbar by Carlos Way
|
Perfect Windows 7 Taskbar in PSD layered file. |
|
This set contains almost all ipad UI elemments, including buttons, tabs, menus, keyboard, balloons, etc etc… very useful for designers and developers, it includes scalable and totally editable vector versions (adobe illustrator) |
104. Web designer toolkit by Temmplay
|
Standard Web Interface Elements in PSD. |
105. Browser form elements by Geoff Teehan
|
Included is a set of from elements in PSD for Mac Firefox 3 and Vista IE7. |