• RSS
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • co.mments
  • YahooMyWeb
  • E-mail this story to a friend!

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

Mockup Resources
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

Mockup Resources
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

Mockup Resources
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

Mockup Resources
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

Mockup Resources

OS Form Elements

Mockup Resources

Photoshop Form Elements

Mockup Resources
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

Mockup Resources

Photoshop Button Templates

Mockup Resources

Proof Reading Marks

Mockup Resources

Standard Web Banners

Mockup Resources

iPhone GUI Elements

Mockup Resources

iPhone PSD Vector Kit

Mockup Resources

iPhone GUI PSD 3.0

Mockup Resources

Wireframe EPS and PNG Icons

Mockup Resources
Knowledge management and competitive research community for user experience design on the web.

Form, Button, Windows and Dialogs Wireframe Magnets

Mockup Resources

OmniGraffle Wireframe UI Stencils

Mockup Resources

Graffletopia – Stencils for Omnigraffle

Mockup Resources
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

Mockup Resources
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

Mockup Resources
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

Mockup Resources
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

Mockup Resources

Website Stencil Kit – UI Stencils

Mockup Resources

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
Follow us via RSS Follow us via RSS Email Follow us On Twitter
Share This Post
  • RSS
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • co.mments
  • YahooMyWeb
  • E-mail this story to a friend!
There are 33 Comments › Leave your comment
  1. Adam Wood
    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/

    Reply

  2. Adam Wood
    23 Nov, 2009

    Leah Buley, not Buckley.

    Sorry.

    Reply

  3. Spenser
    23 Nov, 2009

    Very cool collection! Thanks for the effort put into it.

    Reply

  4. Design Informer
    23 Nov, 2009

    This will be very useful to me. Thanks!

    Reply

  5. Katie
    23 Nov, 2009

    This is a great collection, thank you!

    Reply

  6. Waheed Akhtar
    23 Nov, 2009

    These are just awesome resources for any designer. Thanks for compiling them all together.

    Reply

  7. Matthew
    23 Nov, 2009

    Outstanding, a terrific resource.

    Thanks for undertaking the effort involved in compiling this post!

    Reply

  8. Jeremy
    23 Nov, 2009

    Awesome! Im gonna get one of those stencil kits…

    Reply

  9. Max Cameron
    23 Nov, 2009

    I think it would also be worth mentioning Mockups by Balsamiq.

    Reply

  10. Mark Lewis
    23 Nov, 2009

    Great post

    Find some free templates at http://www.omnistaretools.com/free-templates/

    Mark Lewis
    http://www.omnistaretools.com/free-templates/

    Reply

  11. Razem
    23 Nov, 2009

    I second the Balsamiq Mockups.

    Amazing Adobe Air app with sketchy mockups.

    Reply

  12. Cristian Pascu
    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

    Reply

  13. Jasmin Halkic
    23 Nov, 2009

    Very nice resources. Thanks.

    Reply

  14. Jozef Toth
    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 ;)

    Reply

  15. James Clark
    23 Nov, 2009

    Thanks! Was just searching today for some wireframing tools. Found this on Delicious.

    Reply

  16. David
    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.

    Reply

  17. Awesome blog. I have seen some in Firefox themes, mentioned above. Anyway good presentation. Keep it up.

    Reply

  18. andrewbenardski
    23 Nov, 2009

    No doubt! this is awesome…Very helpful! Thanks.

    Reply

  19. Paolo Valzania
    24 Nov, 2009

    Great collection, thank you!

    Reply

  20. Michael
    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

    Reply

  21. Rogerio Fratin
    24 Nov, 2009

    I really want a website stencil!

    Reply

  22. Edison A. Leon
    24 Nov, 2009

    So useful, thank you

    Reply

  23. Valentino
    25 Nov, 2009

    I second http://www.pidoco.com for quick and easy wireframe creation!

    Reply

  24. This resources proves to be a BOON for the creativity people in web- designing….

    Reply

  25. chrisc
    25 Nov, 2009

    Great examples. Will definitely help with mockups!!

    Reply

  26. JK
    26 Nov, 2009

    Where can i buy Iphone UI Stencils?

    Reply

  27. thomas bredenfeld
    30 Nov, 2009

    absolutely amazing link collection! big thank you for the excellent work putting it together!

    Reply

  28. Agentur Siegen
    3 Dec, 2009

    GOOD share…im in the midst of rebranding my site..this gives lots of fresh brain juice…cheers and thanks

    Reply

  29. rob
    5 Dec, 2009

    This is great, thanks!

    Reply

  30. Tim Harris
    5 Dec, 2009

    Great collection and a very useful set of tools!

    Thank-you!

    Reply

  31. Lee Ekstrom
    9 Dec, 2009

    Tremendous resource. Thanks!

    Reply

  32. Deepu Balan
    18 Dec, 2009

    Really useful… Wonderful collection, thanks for sharing…

    -Deepu

    Reply

  33. youtube
    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.

    Reply

Leave a Reply


34 Trackbacks