{"id":4552,"date":"2009-06-25T00:44:23","date_gmt":"2009-06-24T16:44:23","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=4552"},"modified":"2023-06-29T14:18:01","modified_gmt":"2023-06-29T06:18:01","slug":"27-must-have-starter-kits-for-web-designers","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/27-must-have-starter-kits-for-web-designers\/","title":{"rendered":"27 Must-Have Starter Kits For Web Designers"},"content":{"rendered":"

Note:<\/strong> This post was first published on the 25th June, 2009.<\/p>\n

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

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

In today\u2019s article, we attempt to show you some of the best design starter kits we\u2019ve come to know. You can download (for free) and use them right away, or customize your own copy that will come in handy in the future, your choice. Full list after the jump.<\/p>\n

GUI, Form Elements and Web Components<\/h2>\n

From form elements like checkboxes, input fields, and text areas to web design components like buttons, arrows, icons, badges, and more.<\/p>\n

Yahoo\u2019s Design Stencil Kit<\/a><\/strong><\/p>\n

Probably one of the complete kits 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.<\/p>\n

\"yahoo<\/a><\/figure>\n

Web Form Elements<\/a><\/strong><\/p>\n

With all these tabs, buttons, and dropdowns in one single PSD file, it\u2019s sure going to give you a kickstart in interface design. Courtesy of sniperyu.<\/p>\n

\"web<\/a><\/figure>\n
\"web<\/a><\/figure>\n

Browser Form Elements PSD<\/strong><\/p>\n

Browser Form Elements PSD for Mac Firefox 3 and another for Vista IE7.<\/p>\n

\"Browser<\/figure>\n

Flex Dark Skin<\/a><\/strong><\/p>\n

Sleek dark skin interface elements.<\/p>\n

<\/a><\/figure>\n

Famfamfam Icons<\/a><\/strong><\/p>\n

Whether you are designing for web or application, you should not miss these awesome little buttons by Famfamfam.<\/p>\n

Shortcut to: Silk<\/a>, Mini<\/a> and Flag<\/a> collections.<\/p>\n

\"famfamfam<\/a><\/figure>\n

Peter\u2019s DeviantART ID<\/a><\/strong><\/p>\n

Design ID cards made easy with this PSD template.<\/p>\n

\"id<\/a><\/figure>\n

Deluxive Creative Pack<\/a><\/strong><\/p>\n

Distributed free by Deluxive, this creative pack PSD comes with inclusive badges, grid frames, buttons, stickers and more.<\/p>\n

\"deluxive\"<\/a><\/figure>\n

Aero Avatar and SIG<\/a><\/strong><\/p>\n

Vista avatar and signature template in PSD.<\/p>\n

\"vista<\/a><\/figure>\n

Browser Screens Templates<\/h2>\n

If you are designing a website in a Photoshop PSD file, it\u2019s important to keep each browser and visible screen in consideration. The following PSD with different versions of Firefox, IE, and Safari web safe area will come in handy.<\/p>\n

Browser Web Safe Area<\/a><\/strong><\/p>\n

Web safe area for Safari, IE and Firefox in different operating systems, all in downloadable PSD file.<\/p>\n

Shortcut to: Mac OS X<\/strong> \u2013 Safari<\/a>, Firefox<\/a>. Windows Vista<\/strong> \u2013 IE<\/a>, Firefox<\/a>, Windows XP<\/strong> \u2013 IE<\/a>, Firefox<\/a><\/p>\n

\"browser<\/a><\/figure>\n

960px Photoshop Grid Template<\/a><\/strong><\/p>\n

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.<\/p>\n

\"960px<\/a><\/figure>\n

(More) Browser Templates<\/strong><\/p>\n

If you are looking for even more browser templates (PSD), webdesignerstoolkit\u2019s collection should be what you are looking for. These folks has templates for Opera, Camino and classic browsers like iCan, Netscape and Mozilla.<\/p>\n

\"webdesignerstoolkit\"<\/figure>\n

Web Browser Elements <\/a><\/strong><\/p>\n

Free standard HTML form elements or browser windows for Windows, and Mac OSX.<\/p>\n

Shortcut to: Mac OS X<\/strong> \u2013 Safari<\/a>, Firefox<\/a>. Windows Vista<\/strong> \u2013 IE<\/a>, Firefox<\/a>, Windows XP<\/strong> \u2013 IE<\/a>, Firefox<\/a><\/p>\n

\"Windows<\/a><\/figure>\n

Browser Screens and Website Elements<\/a><\/strong><\/p>\n

Exclusive freebie Vector Pack from VectorTuts. It\u2019s 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.<\/p>\n

\"browser<\/a><\/figure>\n

Cursors<\/h2>\n

A typical screen capture (print screen<\/a>) 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.<\/p>\n

Polished Graphite<\/a><\/strong><\/p>\n

2 sets of different mouse cursors by usedHONDA.<\/p>\n

\"tNOS2\"<\/a><\/figure>\n
\"tNOS1\"<\/a><\/figure>\n

Product Design<\/h2>\n

iPhone GUI PSD 3.0<\/strong><\/p>\n

The image below gives you a clear idea what this PSD file consist. Utmost useful to mock any iPhone development interfaces. Created by teehanlax.<\/p>\n

\"iPhone<\/figure>\n

Here\u2019s another one for the older version of iPhone.<\/p>\n

\"iphone<\/figure>\n

iPhone PSD<\/strong><\/p>\n

High resolution iPhone interface.<\/p>\n

\"iphone<\/figure>\n

Here\u2019s for those who are looking for first gen iPhone interface.<\/p>\n

\"iphone<\/a><\/figure>\n

Magazine PSD<\/a><\/strong><\/p>\n

If you are presenting something in magazine style, you will want to start with this PSD.<\/p>\n

\"magazine<\/a><\/figure>\n

Paperbag<\/a><\/strong><\/p>\n

\"paperbag\"<\/a><\/figure>\n

DVD Plastic Case<\/a><\/strong><\/p>\n

Our collection of beautiful CD and DVD cases PSD templates.<\/a><\/p>\n

\"dvd<\/a><\/figure>\n

Documents and Letters<\/strong><\/p>\n

\"documents<\/figure>\n

More:<\/h2>\n

Looking for more design-related downloads? Check out some of our previous posts:<\/p>\n