Creating a wireframe design can be so many different things. It could be a flow chart of how your user gets from A to B. It could be a 5-second sketch that you drew on a napkin. Or it could be a beautifully detailed vector file depicting exactly how your website or app will function. While a prototype can be a simple or ultra-detailed demo, maybe even a real-life presentation.

I have read many articles about how other designers go about creating the elements of design for wireframing and prototyping. It’s all very personal. It’s very much like being an artist. There is always the initial sketch, to get proportions and the composition right, before refining and then making the final artwork. Some go into a lot of detail for their sketch, others block it in, and then somehow visualise the rest from there. There is no one way to do it.

Designers are no different. Personally, I have used all the methods mentioned above, and all are incredibly effective. I’ve worked with dedicated wireframing applications (JIRA’s Gliffy was particularly useful for a while) but working on a tight budget meant that creating a wireframe in a separate program to Sketch (my primary design program) was extra time spent redrawing the design for the final product.

This is all subjective, but here is what I think works:

Start with a Sketch

The beginning of great elements of design.

Yes, you will miss certain details, yes it won’t be pretty (unless you’re Eddie Lobanovskiy), but the sketch is not necessarily working out how the buttons will look or whether the navigation should go at the top of the page, or on the side. The sketch has more to do with the work flow. Can or should the user be able to access this page from this one? Does the navigation make sense? Basically, a flow chart.

Whether you use post-it notes, a sketchbook or some scrap paper, it should allow you to make mistakes and that you can then rearrange with the greatest of ease.

How often do we hear that User Experience is key to great design? This phase will help with that. You can start testing this as is, without even having to refine it. You can take a photo of each page, and upload them to a prototyping tool, and voila! It’s so basic, there is nothing to detract from the experience and functionality.

Mocking a Wireframe

Keep it simple and focus on the components and their function.

Pick your application of choice. I have almost always gone straight to Sketch. The Internet is overflowing with wireframe design templates, for various platforms, which admittedly I haven’t made full use of. So if you have, let me know if you think they are useful. For me, copying and pasting components is most helpful when you are designing native apps, and you have to replicate navigation bars, sliders, buttons etc.

Ideally at this point, the following should be fleshed out:

• components
• content
• copy (if it’s available)
• and the layout of the app or website.

So that when you start creating a prototype, you and your client, will begin to understand how all the design elements fit together. Does the product still answer its core purpose now that it has all this extra content? There will always be changes in the future, even after a product has reached its final stage, but this is when any major changes should be taking place.

A quick side note:

This is a part of my process that only exists when I have to make a presentation to clients. You are more than welcome to create this for archival reasons, so show the thought process and as something to go back to if changes need to be made. Otherwise, it is not absolutely necessary to have a perfect wireframe mock, especially if it’s not going to be shown to anyone.

The danger with jumping straight into the design is that you can get bogged down with the visual details and possibly mess up the experience. Whenever I happen to find myself nudging buttons a couple of pixels to the left before I’ve even worked out the basic layout, I’ll take a step back and do the wireframe for my own sake. I’ll use the app’s default line and fills, and a simple readable font, then make it look pretty later. It helps to get things back on track.

The Prototype

Marvel App in action.

You can build a prototype at any point during the design phase, but in this instance, I’m referring to the prototype created after the UI design has been completed.

There are so many applications that you can use varying from the most basic, point and click functions, to the ones with fancy animations, layers and transitions. (I mean, just look at this list. Adobe has one too). If your app is going to feature some sweet transition animations, by all means, demonstrate that and make it impressive. Otherwise, if it has a simpler function then keep the prototype simple too.

My personal favourite is Marvel App, because of its integration with Sketch. It is one of the simpler prototyping tools, you load the designs from Sketch, link up the pages and you’re pretty much done. Nice, easy, plus shareable for great design collaboration!

The main benefit of prototyping a wireframe is that it helps your client visualise the product. Up till this point, it’s just been a bunch of scribbles and screens with buttons. They’ll get excited to see it working, even though it’s still in the design phase. It’s a great way to see how they react because you’ll know whether you’re heading in the right direction. I’m quite sure they will not have a problem pointing out the flaws at this point either. Which is exactly what you want.

Talk to your devs!

Get your developers involved at this point! Find out what they think and whether they can actually build your design. Because the last thing they want is for you to come up with a “brilliant” design that you’ve mocked up and promised to the client, but is a design that cannot possibly be built. Then it’s back to square one.

Do what works for you

I don’t always follow this process, and neither will you. Sometimes you’ll have to tailor your process to your client, other times you may be limited by time. You could read into this endlessly, trying out this method or this app or that wireframe kit, but ultimately I’ve found it best to keep it simple.

If you think this is helpful, give it a try and let us know how you went. We’d also love to hear how you go about to make wireframes and prototypes because sharing is caring.

Wireframe and prototyping Resources

Here’s a great article about the differences between a wireframe, mockup and prototype. Plus an excellent list of tools you can use. The Beginners Guide to UX Prototyping

Jira’s Gliffy

As mentioned above; All the wireframe kits!

‍