69 Comments
no. 11

Free Photoshop Wireframe Kit

In my previous post Making of: BillErickson.net Redesign I showed you the wireframe I created for my client. Many people asked me about the PSD I’m using to build my wireframes.

So, in this post, I’m going to share with you my very simple wireframe kit I’ve been using for a long time. I created it a couple of years ago and I’ve updated it many times since then. I always tried to keep it as simple as possible and avoid too many details.

Here is a quick preview of what this wireframe kit includes:

  • Notes
  • Images & video
  • Form fields
  • Headings, paragraphs and bullet lists
  • Navigations
  • Ad banners
  • Common website elements like: search box, email sign up form, etc.

Download the Photoshop Wireframe Kit

Free Photoshop Wireframe Kit (ZIP, 930 KB) Download

There is no special license on this wireframe kit. Feel free to modify it and share it with others. Simply, do whatever you want with it.

How to use it?

This is simple. If you have two monitors or a really big screen, it’ll be very helpful. I usually open a blank Photoshop document in one of my screens and the wireframe kit PSD in the other one. Then, I simply drag the elements I need from one document and drop them into the other one.

As you can see, all elements are black in my wireframe kit. You can easily change the background by managing the opacity of the element. This way, you can show that some parts should be more prominent or less prominent. Also, you can change the shape’s color by double clicking on the black square next to the layer name in the “Layers” panel.

Make sure to avoid too many details in your wireframe. I even try to avoid any text inside the wireframe graphics and I leave all notes in the yellow boxes on the side. The less detailed wireframe you create the more freedom you will have during the visual design phase. So, be careful to not limit yourself at this stage.

Here are some quick Photoshop hints on how to make your work faster:

  • While holding the Apple or Alt key and clicking on the element you can quickly select the layer you need.
  • You can quickly change the layer’s opacity by pressing 1 – 9 (0 is 100%) on your keyboard.
  • Check “View -> Snap” and make sure you have checked all options under “View -> Snap to”. It’ll help you to better align the boxes.
  • Create your own static elements by selecting a few layers and then choosing “Convert to Smart Object”.

Examples

Here are some examples of wireframes I created using this simple kit:

JayBaer.com

phoenixrealestateguy.com

Why Photoshop?

Yes, everyone asks me this question. Why am I using Photoshop to build wireframes?

I know, there are so many applications to help you build the wireframes and even let you collaborate on the same project with your clients or colleagues. I’ve tried many of these apps and I’m not saying they’re bad. Somehow, I always ended up using my wireframe kit and doing everything in Photoshop.

Here are a few advantages of using Photoshop:

  • If you feel very confident in Photoshop, it’s just much faster than learning new software.
  • You’re not limited to design elements offered by the software. You can create just about anything you want and decide how these elements should look. Then, you can bundle them into smart objects and use them again in other projects.
  • You can use real pixel dimensions that you can later base your actual design concept on. Of course, the wireframe is not about pixel perfect layouts but it’s very handy if you can actually build your wireframes based on a 960 or 1140 template.
  • If you have more than one wireframe page, you can keep them in separate layers and then use “Layer Comps” and “Smart Objects” to save your time.
  • You can easily export it to almost any file format. If you want some quick feedback from your client, export it to PDF and your client can add his comments to the document and send it back to you.
  • You can customize it and make your wireframes look original.

And here are some disadvantages of building wireframes in Photoshop:

  • You need to spend some time to build your wireframe kit – looks like this is not a problem for you anymore :)
  • It may not be that fast if you’re not a Photoshop ninja.
  • The more complex design elements are not that easily scalable. You need to resize elements often by moving single vector points. That’s the only thing that bothers me while working on wireframes in Photoshop. It would be perfect if I could quickly resize the smart objects and prevent some elements inside it from scaling.
  • Collaboration with other people on the wireframe might be more difficult. Only you and other people who know how to use Photoshop can actually edit the wireframes. I think this should go under the advantages ;)

Have fun!

I hope you’ll find my wireframe kit useful. I’d like to hear your opinions about using Photoshop for wireframing. What software do you use?

Download the Photoshop Wireframe Kit

Free Photoshop Wireframe Kit (ZIP, 930 KB) Download

There is no special license on this wireframe kit. Feel free to modify it and share it with others. Simply, do whatever you want with it.

Written by Rafal Tomal.

Learn More About Web Design

Sign Up and Get Free Email Updates

Free content. Unsubscribe at any time. No spam.

Comments

  1. I always regrettably skipped the wire framing step for most sites because i didn’t want to use a separate software and didn’t want to take the time to build my own library. Now i don’t have an excuse. You are a real friend to the web community.

  2. Rafal, hats of to you for sharing your design process in the Bill Erickson tut and then making the wireframe available to the community. You rock!

  3. Thanks for these Rafal. These will be very useful. Thanks for the useful tips as well.

  4. Great resource. Thanks Rafal :)

  5. Thanks Rafal!!! I will try this out on my next project…I’ve been thinking I need to start doing more wireframing (because I suck at sketching thumbnails) and this will be perfect. :) Thanks!

    • Sketching is good for quick ideas and while doing some research.

      Wireframes will let you show best ideas to your client and get the feedback without spending too much time on it. I love this design process.

  6. Many many thanks Rafal for sharing this!

    You for sure listen to comments and now sharing this kit. Going download it and start exploring. This gonna help lot of budding designers, once again thanks – you rock man ;)

  7. Thanks Rafal for the wireframe.

  8. Thanks for sharing! I used to make mine in Photoshop, then switched to Mockingbird but clients seem to get all confused about widths’s and sizes. Plus saving time is a good point. Thanks for brining me back to this option!

  9. Thanks a lot Rafal. And the Photoshop CS6 version make life really easier since it support paragraph style. Before that’s bugs me a lot.

    • I’m planning to upgrade my Photoshop to CS6 soon. I never have time to upgrade my software ;) I usually upgrade every 2-3 versions.

      I’m sure it’ll improve my design workflow.

      • Sure and especially when you use photoshop for wireframe it change everything. Before I alway try to find a way to use Indesign and Photoshop layer comps to make the process faster but many Dev prefer the normal photoshop file.
        But now with layer comps and style awesome time in perspective.

  10. You’re so generous! Thank you – this is going to be a huge timesaver.

  11. I use Gimp 2.6.12 on Linux Mint.

    I had to drag the elements from the layers pallet to my new window and I can only make limited changes to the element’s size and shape. I can change the elements colour and opacity.

    The wire frame is still a really useful tool though, and can be used by people on a tight budget ;-)

    Thanks Rafal

  12. Makes me wish I was a Photoshop man, but I’m not…
    I did try Photoshop but I struggled so now I use Fireworks.
    Love the examples of wireframe to final layout… good to know how you guys work.

  13. Thanks Rafal, this is just what’ve needed for some time now!

  14. Just found your site, cool wireframe. Never thought of using it on my designs, but hey might as well give it a try and see how fast I can create a layout. Thanks for this Rafal, amazing site you got here :)

  15. Rafal, thanks for sharing your knowledge! But what about Adobe Illustrator?

  16. Thanks for this wonderful kit. This is a big time saver.

  17. Nice wireframe, thanks for sharing.

  18. nice tool ! for designer

  19. Thank you so much for creating and sharing this, Rafal. You’re a gem!

  20. Thanks so much, Rafal. This is going to save me tons of time :)

  21. Just wanted to chime in that this template works great with Fireworks, better than with Photoshop in my opinion.

    Not sure why more web designers don’t use Fireworks, but that’s a blog entry in and of itself.

  22. This is something I’ve been meaning to do myself for quite a while. Instead I may just convert this kit to Illustrator.

    Thanks for this, very much appreciated. :)

  23. cool to get some initial inspiration, but some iphone and ipad (apple) symbols would be great! may be i will do one myself :-) but thanks for sharing anyhow!

  24. Hi Rafal Tomal,

    Very nice job on the wireframe kit. I have wanted to make my own for a long time and you did leg work.

    I owe you a tall beer!

    Thanks,
    Bob

  25. Finally. Been looking for this a few days now.

  26. Thank you for the great tool.

  27. Hey, big thanks for this, Rafal. Great to see some pointers for people starting out. Cheers!

  28. Hi Rafal – thank you SO much for this! It’s really very kind of you. I’m learning to customize Genesis child themes and end up just changing the CSS and PHP on the fly and then seeing how it looks. I know that going through the design process first, especially in Photoshop, would save me time in the long run. I’m thinking I’m about to be disciplined. :-)

  29. Hello,
    Thanks so much for this kit! I also wanted to mention another free plugin that would go well with it is GuideGuide to set up guides quickly. I also really enjoy the legibility of your site.

  30. Hey great template, thanks for sharing!

  31. Nice I was looking for something like this. I gave a few apps a shot but just kept coming back to PS :P ..Thanks!

  32. Hi~
    Thank you so much you open psd kit ;)
    I worked Web page many help your kit ;)

Trackbacks

  1. [...] Jeżeli lubisz prototypować w photoshopie, warto się powyższym zainteresować. Ot taka ciekawostka. http://rafaltomal.com/free-photoshop-wireframe-kit/ [...]

  2. [...] Free Photoshop Wireframe Kit [...]

  3. [...] Photoshop Wireframe Kit (Photoshop) [...]

  4. [...] Free Photoshop Wireframe Kit [...]

  5. […] sketches to the client. First, I convert my sketches into a digital wireframe. I use Photoshop and my own wireframe kit PSD for […]

  6. […] Photoshop stencil kit is designed by Rafal Tomal, it was developed two years back but since then, it has been updated […]

  7. […] Rafal Tomal with CopyBlogger Media has an excellent wireframe kit that he’s created in Photoshop.  He’s offering this resource at no cost along with some hints to get you up to speed quickly.  http://rafaltomal.com/free-photoshop-wireframe-kit/ […]

  8. […] 免费的Photoshop线框套件 拉法尔TOMAL与我们分享一个很简单的线框图工具包,他创造了一个几年前,从那时起更新了很多次。以下是这是什么线框套件包括一个快速预览:票据;图像和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅,像普通的网站元素:搜索框,电子邮件注册表格等 […]

  9. […] Free Photoshop Wireframe Kit (Rafal Tomal) […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>