Wireframing is one of the best parts of starting a new web design project. You have a blank canvas and you are allowed to let your creativity rein free. Your design may eventually be spoiled by the clients added input… but for that short time …
Anyway, today’s post is a collection of useful resources for web design wireframing, prototyping and mockups. There are templates for, possibly every browser in every size, there are form and button templates for all browsers and a hell of a lot more.
Web Safe Area .psd Templates
You can download from a choice of Safari (MAC OSX), Firefox (MAC OSX, Win XP and Vista) and IE (Win XP and Vista) in almost every possible screen resolution: 465×320, 625×440, 849×608, 1105×800 and 1425×1040.
Photoshop Browser Templates
All of these free Photoshop browser templates come in 1024×768 pixels and 800×600 pixels size s. You can also choose from a wide range of browsers: Firefox, Safari, Camino, IE, Opera and even Netscape (!).
Browser Templates For The Website / Web Application Designer
This .psd browser templates package consists of IE, Firefox and Safari, in the following sizes: 800×600 pixels, 1024×768 pixels, and 1280×1024 pixels.
Photoshop Browser Templates from joel laumans
This package has the Firefox browser (MAC and Win) and IE, with easily editable title, address, scrollbar and favicon, in the following resolutions; 1280×1024, 1024×768 and 800×600.
Vector Browser Screens and Website Elements
OS Form Elements
Photoshop Form Elements
The download package contains all common standard form fields , mouse and link pointer for the following operating systems: MAC OSX, MAC Classic, Win XP and Win Classic.
Browser Form Elements PSD
Photoshop Button Templates
Proof Reading Marks
Standard Web Banners
iPhone GUI Elements
iPhone PSD Vector Kit
iPhone GUI PSD 3.0
Wireframe EPS and PNG Icons
Knowledge management and competitive research community for user experience design on the web.
Form, Button, Windows and Dialogs Wireframe Magnets
OmniGraffle Wireframe UI Stencils
Graffletopia – Stencils for Omnigraffle
This site offers a huge collection of web and interface stencils for Omnigraffle, a quick page-layout and website mockup tool. You can download Omnigraffle here: .
EightShapes Unify
EightShapes Unify is an extensive and comprehensive collection of Adobe InDesign templates, libraries, and other assets for web mockups.
Design Stencils – Yahoo Design Pattern Library
The Yahoo! Design Stencil Kit is by far and away the most complete mockup package in this post. Downloads are available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG).
Browser Sketch Pad – UI Stencils
The collection of UI stencils and sketchpads are not free resources (they sell for $17), but were far too cool to not be included this post.
iPhone Stencil Kit – UI Stencils
Website Stencil Kit – UI Stencils
You might also like…
10 Completely Free Wireframe and Mockup Applications »
10 Online Tools and Apps to Help Optimize and Format CSS »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
Subscribe via RSS or Follow us on Twitter
Share This Post
There are 33 Comments › Leave your comment
Leave a Reply
34 Trackbacks
- A Collection of Useful Web Design Wireframing Resources | TopRoundups
- Did you know ... ?
- links for 2009-11-23 | Visualrinse | Design and Development by Chad Udell
- links for 2009-11-23 | Digital Rehab
- Collection d’outils graphiques pour réaliser vos wireframings
- Descubrimientos del 24 Noviembre 2009 | Blog de unique3w
- links for 2009-11-24 « Köszönjük, Emese!
- links for 2009-11-24 | Starving Designer :: Be Awesome!
- links for 2009-11-24 « Giri’s Blogmarks
- Iona.LABS » links for 2009-11-23
- Iona.LABS » links for 2009-11-23
- links for 2009-11-24 « 個人的な雑記
- links for 2009-11-24 « Mandarine
- Mes favoris du 24-11-09 au 25-11-09
- | CssGalleries
- Sammlung nützlicher Ressourcen für Wireframes : Seminare: Redesign der Website der FH Aachen
- links for 2009-11-25 « Ex Orbite
- 精品阅读（13）20091127 -- 寂寞如哥
- links for 2009-11-28 « undefined
- Colección de recursos web vectoriales - Primate Blog
- 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November @ SmashingApps
- » EverydayUX morsels (December 4th – December 5th) | EverydayUX: Everyday User Experience by alex rainert
- OmniDownloads | 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November
- FreeDownloadSecrets.com » Blog Archive » 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November
- links for 2009-12-06 « sySolution
- Heti események | I build websites
- 60 Amazing Resources for Designers :: Reflex Stock Photo Blog
- 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November | The Apple Tech Blog
- A Collection of Useful Web Design Wireframing Resources : Speckyboy Design Magazine | Rumball Motors Interactive
- End of Year Link Compilation | CssGalleries
- stevenwalling.com » Blog Archive » My Lifestream for January 1st
- FRONTAND » Archiv » Wireframes (web based tools) - Webdesign, Internet, Marketing
- is this ARG? » Blog Archive » isthisarg.org Social Media Digest for January 25th
- IMAP | Daily Digest for January 26th
RSS via Email
We are a proud member of the...
23 Nov, 2009
Very helpful.
Just one more to add:
Leah Buckley uses a 6-up UI template- basically just a page with 6 browser window boxes. Good for quick, iterative design.
Here’s a pdf of the template:
http://www.uie.com/images/blog/buley_ui14/2009_11_01-buley-6-up-template.pdf
and here’s the blog post where I first discovered them:
http://www.uie.com/brainsparks/2009/11/11/ui14-session-sampler-leah-buleys-a-ux-team-of-one/
23 Nov, 2009
Leah Buley, not Buckley.
Sorry.
23 Nov, 2009
Very cool collection! Thanks for the effort put into it.
23 Nov, 2009
This will be very useful to me. Thanks!
23 Nov, 2009
This is a great collection, thank you!
23 Nov, 2009
These are just awesome resources for any designer. Thanks for compiling them all together.
23 Nov, 2009
Outstanding, a terrific resource.
Thanks for undertaking the effort involved in compiling this post!
23 Nov, 2009
Awesome! Im gonna get one of those stencil kits…
23 Nov, 2009
I think it would also be worth mentioning Mockups by Balsamiq.
23 Nov, 2009
Great post
Find some free templates at http://www.omnistaretools.com/free-templates/
Mark Lewis
http://www.omnistaretools.com/free-templates/
23 Nov, 2009
I second the Balsamiq Mockups.
Amazing Adobe Air app with sketchy mockups.
23 Nov, 2009
FlairBuilder (http://flairbuilder.com) is also a tool that comes with lots of built-in interactive widgets so you don’t need to mockup them again and again.
And it also lets you add custom behavior and functional logic, making the wireframes interactive.
Cheers,
Cristian
23 Nov, 2009
Very nice resources. Thanks.
23 Nov, 2009
I created a website style guide photoshop template which is free to download. It is a fully layered, well documented, blank Photoshop PSD template, with all design elements, typography tags, comments, ads, poll and many more
http://mogdesign.eu/blog/free-website-style-guide-photoshop-template-my-guest-post/
enjoy ;)
23 Nov, 2009
Thanks! Was just searching today for some wireframing tools. Found this on Delicious.
23 Nov, 2009
It’s Mac, not MAC.
MAC is a makeup company. It’s also a networking term. One thing it isn’t, however, is the name of a line of computers from Apple.
Stop it. It is never MAC. Ever.
23 Nov, 2009
Awesome blog. I have seen some in Firefox themes, mentioned above. Anyway good presentation. Keep it up.
23 Nov, 2009
No doubt! this is awesome…Very helpful! Thanks.
24 Nov, 2009
Great collection, thank you!
24 Nov, 2009
Hi!
Great collection of resources and stencils. It might be helpful to list the tools for the stencils too in these ressources list.
With http://www.pidoco.com you can use these listed stencils to create clickable wireframes for websites and user test your concepts online.
Shall we start another list? :-)
Michael
24 Nov, 2009
I really want a website stencil!
24 Nov, 2009
So useful, thank you
25 Nov, 2009
I second http://www.pidoco.com for quick and easy wireframe creation!
25 Nov, 2009
This resources proves to be a BOON for the creativity people in web- designing….
25 Nov, 2009
Great examples. Will definitely help with mockups!!
26 Nov, 2009
Where can i buy Iphone UI Stencils?
30 Nov, 2009
absolutely amazing link collection! big thank you for the excellent work putting it together!
3 Dec, 2009
GOOD share…im in the midst of rebranding my site..this gives lots of fresh brain juice…cheers and thanks
5 Dec, 2009
This is great, thanks!
5 Dec, 2009
Great collection and a very useful set of tools!
Thank-you!
9 Dec, 2009
Tremendous resource. Thanks!
18 Dec, 2009
Really useful… Wonderful collection, thanks for sharing…
-Deepu
30 Dec, 2009
Thanks for sharing this information. I found it very informative as I have been researching a lot lately on practical matters such as you talk about it.