Like Quertime on Facebook!

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

Filed under 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.

best_web_design_starter_kits

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.
yahoo_design_stencil_kit_best_web_design_starter_kits

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

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

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

Aero Avatar and SIG
In the PSD file you can find all to make Avatar and SIG in Aero style.

Famfamfam.com
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.
famfamfam_best_web_design_starter_kits

Turquoise PSD
Turquoise PSD Template designed for windows vista.
turquoise_psd_best_web_design_starter_kits

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

Free PSD Progress Tracker Bars
5 Progress Tracker Bars
free_psd_progress_tracker_bars_best_web_design_starter_kits

Dark Clean Forms Collection
Beautifully designed dark clean forms collection.
dark_clean_forms_collection_best_web_design_starter_kits

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.
free_psd_media_player_best_web_design_starter_kits

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.
advertising_stencil_kit_best_web_design_starter_kits

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_sketching_and_wireframing_kit_best_web_design_starter_kits

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

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.
web_safe_area_best_web_design_starter_kits

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.
webdesigners_toolkit_best_web_design_starter_kits

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

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.
vectortuts_freebie_vector_pack_best_web_design_starter_kits

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.
free_full_layered_facebook_gui_psd_kit_best_web_design_starter_kits

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.
iphone_gui_psd_best_web_design_starter_kits

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.
android_gui_psd_best_web_design_starter_kits

Magazine PSD
Download Photoshop magazine template in PSD format.
magazine_psd_best_web_design_starter_kits

PSD Paperbag
Download free Photoshop paper bag.
psd_paperbag_best_web_design_starter_kits

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.
dvd_case_template_photoshop_psd_file_best_web_design_starter_kits

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

Author: Jules, Quertime Editorial

Founder of Quertime.com. Connect with him on Facebook, follow him on Twitter or circle him on Google+.

Tags: ,

Comments are closed.