How to create a wireframe

If you work for a large company, chances are you don't have to create wireframes that often, since you probably have a huge design and UX team to make your ideas look really super good. However, if you work for a small company, or for a small team within a large company (like me), you will probably have to occasionally draw up some (rough) mocks yourself. 

If you're asked to draw up a wire, your initial reaction is probably to panic. Do not fret, I am going to tell you how to produce this wireframe.

Will your wireframe be beautiful?
No. No, it will not be.

Should you show your design friends this wireframe?
No, no you should not. Because they will make fun of you. 

But the purpose of a wire isn't to be beautiful, it's to communicate an idea about the function of your product, or a new feature you want to implement. A wireframe's purpose is to get the idea across, NOT to paint the next Mona Lisa. Think of a wireframe as that old, beat-up Subaru you drive when your spouse is using your brand new Tesla. It might not be pretty, but it's going to get you to your destination, which is all that matters.


Steps to creating a (mediocre) wireframe:

  • Sign up for a tool to help you make the wire. There are lots of tools for this (just google it). However, my tool of choice, for no other reason than I've used it for years, know how to use it, and already have an account set up, and all my images are already stored there, is Lucid.
  • Draw out your wire on a white board - or paper - first. It's just a lot easier to quickly get your ideas organized with "pen and paper" (Pen can be white board marker and paper can be white board). 
  • Open up Lucid, start a "New Document" and choose "Blank Wireframe". Then you can pull in containers from here, and add assets as needed. See screenshots below. Drag widgets into place where needed. Add text where needed. Take screenshots of your current product and cut out pieces that need changed, if that's what your trying to demonstrate. Regardless of the tool you're using, it should be intuitive to add images, text, etc. 
  • Do not worry about the visuals. Do NOT try to make this look like a final product. You will fail (unless, again, you have a design background, in which case, kudos to you). This is not a comp. It's a wire. And the point of a wire is to express product functionality. So keep it simple, add image placeholders, etc. rather than actual images. If you really need an image and don't know where to find it, google image search it, screenshot the portion you need, and add it to your wire.

In summary: 

  • Wireframe = a basic outline to demonstrate functionality of a product. Some people call this a mock.
  • Comp = full-fledged, beautifully designed image of what the final product will look like, including full imagery, colors and fonts that will be used, etc., that is crafted by an actual designer. Confusingly, some people also call this a mock.