Like Quertime on Facebook!

40 Must-Have Starter Kits for Web Developers and Product Designers

Updated on by in Web Design

Starter kits containing useful tools and resources are very important for designers. They are particularly helpful when creating mock-ups for the future web and application projects, and are a great time saver. For example, it will be wise for GUI designers to keep form elements like tabs, menus, checkboxes and buttons to expedite the process of creating layouts and screens. Web designers, on the other hand, should keep browser screen templates with different version of Firefox, IE and Safari web safe area to prioritize their web contents.


Today we’ve gathered some of the best starter kits for web designers, GUI designers as well as product designers. They are all free for download and easy to use, so why don’t you bookmark this post as we believe that these starter kits will definitely come in handy for your upcoming projects!

Web Design: Form Elements, Wireframing, UI and other Web Components

Yahoo! Design Stencil Kit
Yahoo! Design Stencil Kit is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG). The kit provides very comprehensive design elements including menus and buttons, form elements, UI controls, OS Elements, tab and much more.

Browser Form Elements PSD
Browser Form Elements PSD set for Mac Firefox 3 and Vista IE7.

Peter’s DeivantART ID
This is a great set of Photoshop PSD files that anyone can use to create custom deviantIDs.

Deluxive Creative Pack
This creative pack PSD includes useful badges, buttons, stickers, grid frames and more.

Aero Avatar and SIG
In the PSD file you can find all to make Avatar and SIG in Aero style.
The site offers a variety of icons such as Silk icons, Mini icons, Flag icons and Mint icons. They are useful for web or application design.

Turquoise PSD
Turquoise PSD Template designed for windows vista.

Apple Style Navigation Menu
Clean ready to use web navigation menu. The used font is Lucida Sans. Menu comes in three flavors!

Free PSD Progress Tracker Bars
5 Progress Tracker Bars

Dark Clean Forms Collection
Beautifully designed dark clean forms collection.

Small Blue UI Kit
A small ui kit, made in blue color. Here you have a limit selector, toggle, buttons, loading bar.

PSD Layout for Flash / JavaScript Gallery
Ready to use design for Flash or Javascript Gallery. Replace the text, place your own graphics and enjoy.

Free PSD Media Player
The psd file contains media player elements in 3 different flavors.

Best Practice UX Forms Stencil v1.1
A comprehensive release of stencil that follows best practices for UX form design, providing three different ways to lay out forms, each with its own benefits. This version also provides different button layouts, a progress indicator, a Captcha code input field, labels and more.

Form Elements UI Kit
Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library.

Advertising Stencil Kit
A set of very useful advertising stencils.

Free Sketching & Wireframing Kit
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.

Free PSD Calendar Mockup
Simple, clean calendar mockup. The download contains a layered PSD resource file. The used font is Lucida Sans.

tNOS2- Polished Graphite
Download 2 sets of different mouse cursors.

Browser Screen Templates

Web Safe Area
Web safe area for Safari, IE and Firefox in different operating systems, all in downloadable PSD file.

960px Photoshop Grid Template
This PSD grid template let you make sure you have a wide enough template when designing mock-ups to prevent yourself from composing with edges of the screen that may/may not actually be where you plan them to be.

Webdesigners Toolkit
This site offers free Photoshop browser templates for your professional screen design come in 1024×768 pixels and 800×600 pixels size. For both sizes, the safe viewing area is marked in a separate layer. Browser components are also separated onto individual layers so you can adjust them or switch them off them as you like.

Web Browser Elements
This site provides free standard HTML form elements or browser windows for Windows, and Mac OSX.

VectorTuts Freebie Vector Pack
This is a exclusive freebie Vector Pack from VectorTuts. It’s a useful set of vector website assets you can use to mock up your client projects, present your work, or get a quick visual while laying out websites.

Social Networking

Free Full-Layered Facebook GUI PSD Kit
The idea behind this kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, sparing you from drawing all the comps and letting you customize all the text, buttons and data as you need.

Facebook Applications
A sizable collection of elements for creating wireframes for Facebook applications.

Product Design

iPhone GUI PSD
Based on iOS4, it includes all the elements you need to design proof-of-concepts or production ready assets.

Android GUI PSD
This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. Most of the elements and phone illustrations are done in vector paths and so are easily resizable. Android Sans was used for the text.

Magazine PSD
Download Photoshop magazine template in PSD format.

PSD Paperbag
Download free Photoshop paper bag.

DVD Case Template Photoshop PSD File
You only need Photoshop CS/CS2/CS3 to open it and tweak the layers. You can fully customize both artworks and stuff. If you want to change the box color, look on the “dvd case” group and tweak them with Hue/Saturation.

Document PSD
Document/Letters for photoshop ( PSD file).


This post is published by writer / editor. Connect us on Facebook and follow us on X Twitter.

Tags: ,

Comments are closed.