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…
Reply
JonnyT June 25th, 2009

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

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

Insane! Love it!
Reply
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!
Reply
Bobby June 25th, 2009

Great Kit!!!!!!!!!!!!!!!!!!!!!!!!!!!
Reply
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.
Reply
robb June 25th, 2009

great post !!
really useful for us web developers !!
Reply
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.
Reply
Jad Graphics June 25th, 2009

Great collections of resources.
Reply
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!
Reply
Dave June 25th, 2009

hi, great collection!

best regards
Reply
Web Design Forums June 25th, 2009

Great post! Lots of excellent resources for the working web designer!
Reply
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!
Reply
Christopher Elison June 25th, 2009

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

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

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

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

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

Very useful, amazing resource! Thanks heaps!
Reply
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.
Reply
Tatiana June 25th, 2009

What is a fold area?
Reply
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

,
Reply
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!
Reply
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!
Reply
Andrewbenardski June 25th, 2009

Woooww…many thx!!!
Reply
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
Reply
Ehecatl June 25th, 2009

GREAT Coooooool!
Reply
Fixonet.com June 25th, 2009

I told that ,,

Its really good article

It can be useful for all…

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

Awesome collection! Thanks. This is a must have for any serious prototyping.
Reply
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!
Reply
Rob H June 25th, 2009

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

love youuuuuuuuuuuuuuuuuuuuuuuuuuuu
Reply
Michael June 25th, 2009

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

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

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

very nice …

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

really nice collections…
thanks, bookmarked..
Reply
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.
Reply
Alisa Rogers June 26th, 2009

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

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

Great tips. Thanks!
Reply
GoBusiness101 June 28th, 2009

awesome! Thanks for the info man. Got your site from incomediary
Reply
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.
Reply
Johar June 29th, 2009

Flock is my choice
Reply
Rahul June 29th, 2009

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

cool sources :)
Reply
AREA 1 June 29th, 2009

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

wow..1st time here.
Excellent…so valueable article.thx guys…i found it.
Reply
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.
Reply
Vidiya June 30th, 2009

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

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

Very inspiring post.
Reply
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……
Reply
Remo Harsono July 1st, 2009

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

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

This is Fantastic!
Reply
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
Reply
Enk. July 2nd, 2009

Awesome List.. very useful for me.. thanks ! :)
Reply
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.
Reply
shiva bandaru July 8th, 2009

Really great list!
Reply
Alexander Gessler July 17th, 2009

Great concept helpers!
Reply
Luc Latulippe July 18th, 2009

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

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

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

great tips!
Reply
Karrero July 29th, 2009

Good!
Reply
sniperyu July 31st, 2009

hey , thx for featuring my work in this cool post, lots of great resource and the best thing its free ;)
Reply
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 ;) )
Reply
shani August 1st, 2009

very nice its so good
Reply
MKVW August 4th, 2009

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

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

My head asplode
Reply
Patrickv August 16th, 2009

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

this, very thank..

Your site full professional…
Reply
squareart September 4th, 2009

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

Thanks for collecting this useful tools :-)
Reply
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.
Reply
Vailancio September 21st, 2009

Very useful thanks
Reply
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.
Reply
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 ;)
Reply
croni von doaweb October 8th, 2009

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

just let love be
Reply
Stephanie December 26th, 2009

Love it! Thanks!
Reply
Namit Gupta December 26th, 2009

Thanks a lot for sharing such useful resources.
Reply
mosermu December 26th, 2009

thank you very much :–))for cool templates and links…
Reply
Dave K December 26th, 2009

THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
THERE IS NO FOLD!
Reply
Mobilcin, Mobil Ödeme Sistemi. January 9th, 2010

this is thank you.

your web site very good and your web site professional..
Reply
Daniel February 8th, 2010

Thanks a lot. This will definitely help me on starting my next project.
Keep it up!
Reply
Paginas web Guatemala February 22nd, 2010

The Yahoo Toolkit is amazing!! Best Regardssss!!!!
Reply
Tshirt Factory February 25th, 2010

Great post, thank you so much for the information!!!
Reply
nev February 27th, 2010

very useful thanks
Reply
Orospu Liseli March 4th, 2010

wow thumbs up! great post
Reply