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

Enter your email address to get my wireframe kit
and email updates:

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

Enter your email address to get my wireframe kit
and email updates:

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.

Print Friendly