A better prototyping tool

A proposition by Colm Tuite ·

Almost a year ago I wrote a post on why I thought wireframing tools suck. The response was pretty positive but I didn’t have the time to do anything about it. Now it’s a year later and there’s a lot more focus on prototyping than wireframing but one thing hasn’t changed; the tools still suck.

So, I’ve started work on a design tool (yes, another one....yawn) that aims to breathe life into your static mocks. Or something poetic like that.

The problem

We all know the limitations of Photoshop when it comes to designing for the web. Static mocks just don’t communicate a design’s functionality clearly enough. Fonts don’t render properly. Native apps usually don’t simulate the web environment closely enough. Yada yada yada.

Pen and paper offer speed but lack visual representation and the ability to link screens together. Also, prototyping on paper is next to impossible.

Recent apps like Marvel allow you to build prototypes from imported Photoshop assets. Some of them look pretty slick but I still don’t think they’re getting at the root of the problem. We need to move completely away from desktop photo-editing apps like Photoshop and toward a more self-contained, web-based, design tool.

Macaw looks like a powerful tool but they seem to be focused on building a WYSIWYG editor that writes code for you. That will probably appeal to the masses but writing code is not something I need help with, I have Vim for that (I love you Vim, don't ever change). I need a tool that lets me design multiple solutions quickly and easily, not a tool that helps me get one solution pixel perfect.

I mostly design in the browser, so I can test prototypes exactly as they will function in the browser. Frameworks like Angular and Framer have made it a lot easier but even still, in most situations I find it too slow. It’s hard to beat the freedom of dragging absolutely positioned elements around a screen.

The solution

There has been an onslaught of prototyping tools trying to fix these problems. I’ve tried a lot of them but most of them have super ugly, cockpit style interfaces that just get in the way. Some of them take weeks to learn. I just want a simple, intuitive design tool that I can start designing in immediately.

We all have different requirements when it comes to the design process. Sometimes we need high fidelity mocks for clients. Sometimes simple wireframes are preferable. Sometimes we need to design full pages but other times we need multiple iterations of a single, isolated component. Some of us work alone, others need collaboration tools. It’s unlikely that one tool could solve everyone’s problems but I think we can find a much more suitable baseline than Photoshop/Sketch.

I’m proposing a simple, intuitive, self-contained, web-based tool that allows you to design functional prototypes quickly and easily. I guess you could think of it as a slimmed-down, web-focused Photoshop with added features like prototyping, animations, collaboration and version control.

Stay updated

Leave your email below and I’ll let you know as soon as I have something live. Don’t worry, I won’t spam you.

I'd love to hear your opinions on this. Shoot me an email or send me a tweet.