I haven’t always gone through a formal wireframing phase with new projects. I have come to learn that this is a mistake, at least for me. At times, I thought that sketching could replace wireframing. Maybe for some it can, especially if you create high fidelity sketches, but I’ve never had the patience for it. I want to jump right into something that feels as close to the finished product as possible, which I still believe has value.
I recently embarked on a mission to find a user experience tool that suited my needs better than the Adobe tools I was using. Being a well balanced designer and developer, I wasn’t sure what that tool would look like, I only knew I had to find it.
The products I tried
Axure - A Powerful desktop client (pricey, but closest to selling me) with JavaScript-like events to create interactions, responsive prototyping, custom element creation and more.
UXPin - A lightweight web based UX tool with an excellent user interface.
Justinmind - A desktop client that seemed promising at the onset, but after 10 minutes of widgets sticking and the interface freezing up, I decided that this software needed some work.
Balsamiq - An excellent option for simple static wire creation. I bought a copy of this a long time ago, but got tired of and distracted by the quirky interface, which for some might allow you to focus more on the design, but for me does the opposite.
Hotgloo - Similar to UXPin with a larger feature set and an inferior UI.
Adobe Photoshop - Tools like photoshop are becoming a viable option for wireframing as applications like InVision and Marvel make it easier to prototype, but the lack of an element library and the ability to create multiple views makes it difficult to work quickly.
Adobe Illustrator - A better choice than photoshop with quick view and vector creation, but even with symbols, there’s still not enough of a dynamic element library to work quickly with.
Adobe InDesign - I find Indesign to be unintuitive and oddly focused on print for wireframes. I know a lot of people would disagree with me, but there it is.
Major Takeaways
No good solution to responsive wireframe creation. Every application forces you to create new elements, copy and stretch them in a new view, and then link the 2 views to create the appearance of responsiveness. This is a pretty piss poor solution if you ask me. If I want to make a change to an element, the last thing I want to do is make that change in 3 places.
No middle ground between power and ease of use. Applications like Axure are incredibly powerful, but are about as easy as paying your taxes. The interface requires a big time investment to become a master. The simpler tools, like UXPin take minutes to get started, but force you to work like they want you to work. They have a very limited and prescribed feature set. They also prevent you from working without an internet connection, which wasn’t a deal breaker for me, just another negative.
Terrible code output. One of the most disappointing aspects of working with any wireframing tools is the code that is output in order to create your prototype. Don’t ever expect to be able to use this code. In fact, it’s probably better if you don’t look at it all.
Lack of reusability. These applications are meant to create one-off wireframes. None of them provide a solid foundation for something to be built on top, partly due to their inadequate code generation.
I spend almost 2 days struggling back and forth between different pieces of software, weighing the pros and cons, constantly changing my mind and second guessing myself. I realized finally that none of them had what I needed.
what I needed was to work directly in a browser. Creating paper sketches was enough of a layout foundation for me to work quickly in a browser without wasting too much time, responsiveness takes care of itself, the browser handles your default element library (and you can easily create your own), interactions are written in my good friend JavaScript, and the code is thoroughly reusable. Plus, you can easily push a prototype to Github pages for free, and share it with your client or your mom. In my opinion, coding should be a requirement for UX designers (especially web), even if they do eventually settle on using another tool.