Recently I was given the opportunity to try something different within my job and stray from my normal line of work which mostly consists of writing content, account managing and general digital marketing. I was asked by my creative director Tom to assist with the UX and design aspect of a project.
Our Balsamiq trial was coming to a close and we thought it was a good time to consider other options. We were looking for:
- A lightweight wireframing tool
- That was not going to break the bank
- But was also user-friendly enough for a basic novice like me to get their head around it quickly.
- From personal experience we wanted it to be separate from the design stage, just a simple platform to experiment with layout ideas that would encourage as much feedback from the client as possible.
We settled on 3 different wireframe tools that had good reviews and free trials. Balsamiq was used as the mediator because that is where I had all my previous wireframing experience; then MockFlow, Wireframe.cc and UXPin.
MockFlow
The first prototyping tool I used was MockFlow. Probably the most similar to Balsamiq, it includes a functions library where you can drag and drop elements, very easy.
Initial thoughts
When you first enter the software and start your new wireframe you are confronted by many, many different styles of mock ups to choose from. There is a ‘hand drawn’ style, a Mac OSX desktop and even an apple watch format; you really are spoilt for choice. All in all there are about 38 different categories to choose from. You can even make a customised pack with all your favourite elements in one place. You can take elements from multiple packs and use them on one wireframe, you’re not restricted to just one pack. For example, I took a lot of the layout options from the iOS and Mac categories but mostly used elements from the Hand drawn UI. But it doesn’t stop there. On Mockflow you can also make animated banners and ads, a sitemap and even create the website (but you do need to upgrade for that).
You can even make a customised pack with all your favourite elements in one place
Another nice touch is that Lorem ipsum is embedded into the blocks of text as well as lines of scribbles but is all down to personal preference. Some other great little extras that you don’t think about until you need it, like the fact that it has specific icons such as captcha and it also has the most recent update of fontawesome; Balsamiq is still using the old version. It can also convert your wireframes into HTML, PowerPoint and pdf which makes it incredibly shareable.
Pros and Cons
One thing I didn’t like about MockFlow is the smart guides are basic and not very accurate. Honestly, it felt like it shouldn’t be that much of a hassle to get the boxes in-line but for my own peace of mind I ended up drawing lines and using them almost like a ruler. Another point against MockFlow is that even though I loved the variation and how much choice I had, the function library is huge meaning you do get lost in it. Furthermore, you can easily forget where you’ve searched and then can’t find certain elements again. The fact that the search bar isn’t very responsive doesn’t help, which means you do need to be there fairly MockFlow savvy to navigate your way around. It might not be a great choice if your project is time sensitive. But I would recommend investing some time beforehand to familiarise yourself with the software if you are interested. Overall I thought the program was rough in comparison to Balsamiq but this was until I used wireframe.cc.
Wireframe.cc
Wireframe.cc markets itself as a minimal wireframing tool and I would recommend this to anyone who wants to start with something simple. From reading other people’s reviews of the tool I would say almost 100% of users felt the same. Whilst some people applauded the tool for its simplicity, others were not as impressed. With one review stating that they could get the same effect with a whiteboard and pen.
Initial thoughts
What struck me first when getting acquainted with Wireframe.cc was the interesting feature that you can change between three standard layouts; the iPhone, the iPad and the desktop. These layouts can even be changed halfway through prototyping as it formats it automatically. I use the term ‘format’ loosely, what it really does is change the shape of the box you’re working in and your elements don’t move. But if that feature was to be fine-tuned it would be a real asset for wireframes of responsive sites. The smart guides are far more responsive than MockFlow plus Wireframe.cc also has lorem ipsum embedded as the only text option. You do have the option to copy and paste but it doesn’t seem to work so is unfortunately obsolete.
after using a program like Balsamiq and MockFlow overall I found the program to be frustratingly basic; it barely does anything
Pros and Cons
Nevertheless, one of my favourite features of this program is that the canvas is fixed, so you can’t move it by accident (which I do more than I care to admit). This means that you are working on a solid foundation constantly. Another one of its saving graces, which I haven’t seen another program do, is that you can change the background to grids, dots and columns and change the sizes of these things too. But even with all these great features, which make it such an easy tool to use, after using a program like Balsamiq and MockFlow overall I found the program to be frustratingly basic; it barely does anything. You only have ten elements to shoehorn your layout into. Sorry Wireframe.cc.
UXPin
Please, if you decide to use UXpin either find someone who uses the right version of the tool to explain it to you in person or be prepared to clear your schedule. I don’t count myself a quitter but sometimes you just need to hold up your hands and say sometimes it’s not for me. This is what happened when I attempted to make a very basic wireframe in UXPIn. There are over 1000 elements in UXPin so I’m not surprised that this was the most complex but, overall, this really was on another level in comparison to the other three.
Initial thoughts
I naively jumped straight in like I had with all the other tools and quickly realised I had no idea what I was doing. You really do need to read all the information before you can start designing anything. I spent a good hour watching tutorials, reading other blogs about navigating UXpin and asking the UXpin help system. On the bright side the UXPin help system is pretty good and easy to follow but unfortunately, I had nothing to compare it too because all the other tools were so straightforward in comparison that I never had to look at theirs.
I naively jumped straight in like I had with all the other tools and quickly realised I had no idea what I was doing
Pros and Cons
When I got over the seemingly major hurdle of getting to the designing canvas, so I could actually start designing, I found out you couldn’t copy or paste. This is a problem when there is no option for lines of text that I could see. Now at this point I had had enough. I called over my Creative Director, Tom to have a look and see if he could figure out where to input text as he has had far more experience using tools like these than I have. Even he was unable to solve the problem and so I’m left believing that I need to manually type each line out? It still remains a mystery.
Summary
In conclusion, I would have to say that for future projects I would stick with Balsamiq. Out of all the tools that I have used it is the most responsive, shareable and easy to use. It has a home, hand-drawn style which all the elements follow. Now, some could say that makes it limiting but it just makes the whole designing process so much faster when you’re not concerned about what style of element should go where. Personally, when designing in other programs I found myself more drawn to that style because that is what wireframes have evolved from. Saying that multifaceted programs like UXpin are such an asset to a project. I’m sure it is an amazing program and from the tutorials, it looks very impressive but it was far too complex for me and what our company is looking for from a wireframe.
I would recommend to anyone who is interested in UX to try out other programs and tools on the market because it is such an integral part of the design process and means that you are getting the most feedback from clients. So many of them have free trials which makes it easy to discover what best suits you. If you are interested in UX design process’ and how your company could benefit from some of the aspects highlighted in this blog. Please get in touch with us we would be more than happy to share our design process with you!