Simple Guidelines for Prototyping & Wireframing for Web Apps

Creating a wireframe 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 demo or ultra detailed, maybe even a physical representation.

I have read many articles about how other designers go about wireframing and prototyping, and it’s all very personal. It’s 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 and others block it in and then somehow visualise the rest. 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 redrawing the design for the final product.

Again this is all subjective, but here is what I think works.

 

Start with a Sketch

Sketch-1_optim

The beginning of great things.

Yes, you will miss certain details, yes it won’t be pretty (unless you’re this dude), 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 then to rearrange them.

How often do we hear that the User Experience is key to a 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

Wireframe-demo_optim

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

Pick your application of choice, I have almost always gone straight into Sketch. You can get wireframe templates all over the Internet, which I haven’t made full use of to date, 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.

This is so that when you start creating a prototype, you and your client will begin to understand how everything fits 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 here is where any major changes should happen.

As a side note here: 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

Prototype-Demo_optim

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 done 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, and even Adobe has one) Again, it’s all personal choice. 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!

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.

Also, 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” idea, that you’ve mocked up and promised to the client, but is something that cannot possibly be. Then it’s back to square one to 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 make wireframes and prototypes, because sharing is caring.

Resources

Here’s a great article about the differences between a wireframe, mock up 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!

About Sher Rill - Sher Rill is an Illustrator and Graphic/UX/UI designer at Macropod. She has a background in Multimedia Design and once (a very long time ago) entertained the idea of being an optometrist , but the creative fields were her true calling. Sher Rill's main goal in life is to paint and draw day in, day out (somewhat competently), and her greatest fear is one day being told that she'll need to get a 'real' job.

Leave a Reply

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