Comprehensive Free Web-based Wireframe Tools Comparison
I am a software engineer during the day, and after work, I make products for my own. Most recently, I worked on an open source project (CaptainDuckDuck). During the development phase of this project, I had to sketch the UI and figure out how I wanted the components to show up on screen. First, I tried good old paper and pen, but it quickly got out of hand and I ended up with a messy paper full of lines and texts. Then, I started looking for a wireframing software. As I was working on an open source project, I was looking for a tool with a free tier. I evaluated multiple options and I thought it might save hours of frustration and move you towards picking the right tool, so I decided to share this experience with you.
Before we start, I have to mention this, this is not a paid article and there is no right or wrong choices. It really depends on your taste. The comparison is summed up in the following table:
Mockflow
This is one of my personal favourite tool. The UI library includes various sets, including Bootstrap elements, hand drawn UI, Android and iOS, Microsoft elements, Semantic UI and many more. You can also create user flow, i.e. you can create hotspots in the UI where a click can take you to a different screen. This is great for user testing. However, there is not much support for transition animations.
FluidUI
This is another good one. Although, there is a full support and a good library of elements for creating UI, FuildUI’s main focus is creating user flows. This enables you to test your product before you write the first line of code. There is a good set of transition animations (slide, fade, etc) as well as a good set of gestures including swipe, tap, long press and etc. Judging from their demo page, FuildUI is mainly designed for mobile apps.
NinjaMock
NinjaMock only supports hard drawn UI. But it does a pretty god job of that. The UI itself looks a bit old, but don’t let that turn you down as it’s quite functional and efficient.
MockingBird
Mocking bird is one of the simplest tools out there. It doesn’t even require you to create an account if you just want to try it out. The free tier keeps your project saved for 7 days. In terms of functionality, it’s probably safe to say it’s a simpler version of NinjaMock. Similar to NinjaMock, it does not have native elements, and it mainly focuses on hand drawn UI.
Moqups
Moqups is one of the top tools on my personal list. The functionalities it offers range from UI design to flow design. The UI element library is quite rich. Similar to MockFlow, it has a rich set of elements from iOS, Android, Bootstrap and etc.
Balsamiq.cloud
Balsamiq is one of the oldest players in this field. Although, their focus is mainly on hand drawn sketches. The UI library is quite extensive and, to be honest, the end result feels much better than some other tools with native components. This is probably my favourite tool if I want to focus on creating a rough wireframe without focusing on the look of it.
Wireframe.cc
Wireframe.cc is among the simplest tools available. The UI is quite clean. It does not offer many UI components. But on the plus side, this lack of a massive UI library has made the tool very simple to use. Your options are limited to a handful of elements such as text, rectangle, circle and etc.
Final Words
As I said in the beginning, the final choice very much depends on your taste. I have included screenshots of a simple UI made using each tool. Hopefully this will give you an idea of how each tool will feel like.
Finally, did I miss anything? Please feel free to comment below if I missed an important feature or limitation.
