27 Must-Have Starter Kits For Web Designers

Starter kits are great timesavers for web designers and they are particularly useful for those who often create mock-ups for project pitching on daily basis. If you are a designer-cum-programmer think of it as your code snippets

So what’s in a starter kit? We think it varies – depending on what each designer routinely worked with. For GUI designers, keeping a copy of form elements (buttons, checkboxes, tab, drop down menus, etc) helps speed up the process of creating screens and layouts; on the other hand, browser (IE, Firefox Safari) templates with web safe area keep web designers reminded how/where they should prioritize their contents. Experienced designers will usually customize and keep a personal version of starter kit, some might have few too!

In today’s article, we attempt to show you some of the best design starter kit we’ve come to know. You can download (for free) and use them right away, or customize your own copy that will come in handy in future, your choice. Full list after jump.

GUI, Form Elements and Web Components

From form elements like checkboxes, input fields, textareas to web design components like buttons, arrows, icons, badges and more.

Yahoo’s Design Stencil Kit
Probably one of the most complete kit for designers. GUI elements include calendars, grids, menus, mobile (general and iphone), navigation and pagination, tabs, UI controls and more! Comes in several format: OmniGraffle, Visio (XML), PDF, PNG and SVG.

Web Form Elements
With all these tabs, buttons, dropdowns in one single PSD file, it’s sure going to give you a kick start in interface design. Courtesy of sniperyu.

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

Flex Dark Skin
Sleek dark skin interface elements.

Famfamfam Icons
Whether you are designing for web or application, you should not miss these awesome little buttons by Famfamfam.
Shortcut to: Silk, Mini and Flag collections.

Peter’s DeivantART ID
Design ID cards made easy with this PSD template.

Deluxive Creative Pack
Distributed free by Deluxive, this creative pack PSD come inclusive of badges, grid frames, buttons, stickers and more.

Aero Avatar and SIG
Vista avatar and signature template in PSD.

Turquoise PSD
Vista elements.

Browser Screens Templates

If you are designing website in a Photoshop PSD file, it’s important to keep each browser and visible screen in consideration. These following PSD with different version of Firefox, IE and Safari web safe area will come in handy.

Browser Web Safe Area
Web safe area for Safari, IE and Firefox in different operating systems, all in downloadable PSD file.
Shortcut to: Mac OS X – Safari, Firefox. Windows Vista – IE, Firefox, Windows XP – IE, Firefox

960px Photoshop Grid Template
PSD grid template in 960px width to prevent yourself from composing with edges of the screen that may/may not actually be where you plan them to be.

(More) Browser Templates
If you are looking for even more browser templates (PSD), webdesignerstoolkit’s collection should be what you are looking for. These folks has templates for Opera, Camino and classic browsers like iCan, Netscape and Mozilla.

Web Browser Elements
Free standard HTML form elements or browser windows for Windows, and Mac OSX.
Shortcut to: Mac OS X – Safari, Firefox. Windows Vista – IE, Firefox, Windows XP – IE, Firefox

Browser Screens and Website Elements
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.

Quommunication Starter Kit
If you are looking to kick of designing in PSD with a minial and basic PSD as guidance, Quommunication’s starter kit is probably what you are looking for. It comes with color templates, browser web safe area and basic form components all in one PSD.

Cursors

A typical screen capture (print screen) will not include the cursor in the output. If you depend on the cursor to help indicate and describe an image better, these following PSD packs might help.

Polished Graphite
2 sets of different mouse cursors by usedHONDA.

Photoshop Cursor Pack
Useful for those who create Photoshop Tutorials.

Product Design

iPhone GUI PSD 3.0
The image below gives you a clear idea what this PSD file consist. Utmost useful to mock any iPhone development interfaces. Created by teehanlax.

Here’s another one for the older version of iPhone.

iPhone PSD
High resolution iPhone interface.

Here’s for those who are looking for first gen iPhone interface.

Magazine PSD
If you are presenting something in magazine style, you will want to start with this PSD.

Paperbag

T-Shirt

DVD Plastic Case
Our collection of beautiful CD and DVD cases PSD templates.

Documents and Letters

More for Designers

Looking for more design-related downloads? Check out some of our previous posts:

Comments

Fixonet.com June 25th, 2009

It is really awesome..

Good Article…

This will be the best…
JonnyT June 25th, 2009

Awesome article. Just what I was looking for.
Webmaster Tools June 25th, 2009

Thanks for sharing these tools , These tools are really need to for every web designer and graphic designer
Thefinalhome June 25th, 2009

Insane! Love it!
hongkiat June 25th, 2009

Thanks, glad you guys find it useful. Most of them are what initial blank white Photoshop canvas are based on. Pretty handy!
Bobby June 25th, 2009

Great Kit!!!!!!!!!!!!!!!!!!!!!!!!!!!
tugas2khas June 25th, 2009

This is really useful. Sometimes i wonder how you manages to get just what i am looking for at that moment.
robb June 25th, 2009

great post !!
really useful for us web developers !!
abdusfauzi June 25th, 2009

this is a nice web designing collection. should be able to speed up some nasty designing processes, such as the interface and such.
Jad Graphics June 25th, 2009

Great collections of resources.
Gennice June 25th, 2009

OMG! I am truely amazed to see all this stuff put together on a page! Fantastic collection!

Will bookmark and share with everyone!
Dave June 25th, 2009

hi, great collection!

best regards
Web Design Forums June 25th, 2009

Great post! Lots of excellent resources for the working web designer!
Paulo Toureiro June 25th, 2009

This is by far the most incredible set of resources in one place I have ever come across. Well done and thank you so much!
Christopher Elison June 25th, 2009

Beeeauitful! I will definitely put these to good use I think!
TechnologyStolen June 25th, 2009

Thanks for sharing…!
JOhnny Mack June 25th, 2009

Wow, thats some of the coolest tools I ever seen!

RT
http://www.anon-tools.tk
Iwani June 25th, 2009

Ooooo, this is friggin’ amaaaaaazing!! Thanks a lot for this post ^_^
Sneh | LBOI Blog June 25th, 2009

Very useful, amazing resource! Thanks heaps!
resseller host, hosting reviews, cheap rates hosting June 25th, 2009

best resource mate do check some more stuff here

cheap rates logos,Cheap Rates Web Design, free web Templates, Quality Web Design,Quality
logos.psd to html.
Tatiana June 25th, 2009

What is a fold area?
Robby June 25th, 2009

Fantastic!
Some great stuff here, great work.
If you Twitter, please hook up with me so’s I can Follow you and see when you add more excellent stuff like this:
http://www.twitter.com/robbydesigns

,
Teddy June 25th, 2009

Wow, amazing kits, especially the website elements kit and the adobe cursor pack – I usually have to use screenshots to capture the website elements while painstakingly try to extract the cursor icons, but now they come easy with the kits. Terrific list!

p/s: The iPhone GUI PSD is just as awesome!
Semblance June 25th, 2009

This is a seriously 5 STAR gem post. Great work done on this one!! I am RT for sure (and bookmarked). Congrats!
Andrewbenardski June 25th, 2009

Woooww…many thx!!!
Chris Grayson June 25th, 2009

Great stuff.

Wow. I have a nice collection of interface elements I’ve put together over time. Many designers I’ve worked with over the yeas have asked me for a copy of this set. I was just thinking this week how I should organize them into a package and use them for a nice link-bait post on my blog. Hmmm… Now you’ve beat me to it. There are some nice pieces up here. I will be grabbing some. I’ll see how these files look and decide whether I should now bother.

cheers,
Chris
Ehecatl June 25th, 2009

GREAT Coooooool!
Fixonet.com June 25th, 2009

I told that ,,

Its really good article

It can be useful for all…

All the best for further articles…
Eduardo Sasso June 25th, 2009

Awesome collection! Thanks. This is a must have for any serious prototyping.
Frank West June 25th, 2009

A really nice collection, I’ve bookmarked a few of these already for a project I’m working on tomorrow – Thanks!
Rob H June 25th, 2009

Great post, well researched. Some really useful stuff !
alex June 25th, 2009

love youuuuuuuuuuuuuuuuuuuuuuuuuuuu
Michael June 25th, 2009

Neat – but not even close to must have, at all. Some are down-right useless.
Vim June 25th, 2009

good post but i agree with Michael, some of these apps are “down-right useless”
Phaoloo June 26th, 2009

Yeah, you are right when saying they are must-have. Handy, essential tools for web designers.
alarrkdesign June 26th, 2009

very nice …

i can publish this story in my blog?
ebta June 26th, 2009

really nice collections…
thanks, bookmarked..
xavierlee June 26th, 2009

A good collection. I would say that just use the one that you need, I think the author not really want you to use everything here, we all know that we have our own style, we use different tools to design those tools we are comfortable using. This is just a variety of tools that maybe one of these are your must-have-tools.
Alisa Rogers June 26th, 2009

Great blog! Keep up the great and fabulous work!
Johnny Rodriguez June 27th, 2009

one of the best l!st to date
Han Cheng June 28th, 2009

Great tips. Thanks!
GoBusiness101 June 28th, 2009

awesome! Thanks for the info man. Got your site from incomediary
smith web designer assistant June 28th, 2009

Thank you for sharing valuable information.
I am working for web design this information will help me increase my knowledge.

great list.
Johar June 29th, 2009

Flock is my choice
Rahul June 29th, 2009

Very good article for wanna-be web designers as well as for professionals too.
acadterror June 29th, 2009

cool sources :)
AREA 1 June 29th, 2009

Thanks for this article, it’s very useful!
igetmp3.blogspot.com June 30th, 2009

wow..1st time here.
Excellent…so valueable article.thx guys…i found it.
harry June 30th, 2009

Lol ashamed to call myself a designer because most of the thing in this article, I never heard about it before.
Vidiya June 30th, 2009

great effort for web designers :)
Ah Hong July 1st, 2009

Nice one, I was looking for tools to graphic editing. Thanks for sharing :)
Robert July 1st, 2009

Very inspiring post.
PSD HTML July 1st, 2009

IT was very inspiring article i was looking forward myself to become a very professional web designer in the future by reading and learning from your articles……
Remo Harsono July 1st, 2009

Fantastic !
Altis Lo (Beaulife) July 1st, 2009

Wow! Awesome sharing. Thanks for all the recommendations.
Afsin July 2nd, 2009

This is Fantastic!
Natalie July 2nd, 2009

Very cool. I don’t have PSD on my home computer at the moment and I’m glad – otherwise, I would get nothing done today and play with those cool starter kits instead lol
Enk. July 2nd, 2009

Awesome List.. very useful for me.. thanks ! :)
webmasterdubai July 6th, 2009

i really love this post amazing stuff. im not a just a basic designer for me there things will matter a lot thanks again.
shiva bandaru July 8th, 2009

Really great list!
Alexander Gessler July 17th, 2009

Great concept helpers!
Luc Latulippe July 18th, 2009

This is a wonderful collection! Thanks!
pom website design July 18th, 2009

useful logo creation tips here thanks for sharing
gratis geld July 22nd, 2009

Nice article, there are really nice resources in this list.
XK140 July 22nd, 2009

great tips!
Karrero July 29th, 2009

Good!
sniperyu July 31st, 2009

hey , thx for featuring my work in this cool post, lots of great resource and the best thing its free ;)
sniperyu July 31st, 2009

and yes, for more to come from me, feel free to folow me on twitter – http://twitter.com/synchromatik , or/and my deviant homepage (i hope this will not be treated like a spam post ;) )
shani August 1st, 2009

very nice its so good
MKVW August 4th, 2009

VERY NICE!!
Phil E. Drifter August 4th, 2009

This is insane.
Phil E. Drifter August 4th, 2009

My head asplode
Patrickv August 16th, 2009

nice collection loving the T-Shirt
Web Tasarim - Grafik Tasarim September 1st, 2009

this, very thank..

Your site full professional…
squareart September 4th, 2009

Great stuff, thanks for putting together such a cool list of thingies – bound to come in handy!
Åsel September 16th, 2009

Thanks for collecting this useful tools :-)
Ashley Adams : Postcard Printing September 19th, 2009

Very inspiring article………I believe that this will also be useful for some professionals out there. These stuff are simply awesome……thanks for listing them.
Vailancio September 21st, 2009

Very useful thanks
Travis September 26th, 2009

People talk about SEO this or SEO that, but in the end I think a strong GUI and attractive design is the single biggest way to build and maintain a steady stream of traffic.
Florian October 2nd, 2009

It’s a great collection, but I miss the Android PSD Template.

Get it here: http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

Not all like the iPhone ;)
croni von doaweb October 8th, 2009

Moin aus Hamburg! Thank you for sharing valuable information.
love October 15th, 2009

just let love be