Prototyping wars

לעברית לחץ כאן

One of the most prominent events of the last year was the acceleration of the race for the perfect prototyping software used for mobile and web apps. The race was fueled by the rise of demand for graphic UI development and interactive design.

This can be confusing specially for people who think we already have plenty of prototyping software already available.

The prototype tool is the bridge between the “planning” and “execution” or development of the project. Teams realized that an important part of design is interaction, and the UI designers set fourth to search for an appropriate tool. the increasing focus on animation and behaviors demanded mock-ups that would demonstrate this.

Of course each product demands different inputs from the design team. From my experience, as a GUI designer and animator, people tend to generalize the word ‘prototype’ for different types of solutions.

Rapid prototyping tools have been around for a couple of years, no king among them. They successfully speeded the process of UX prototyping and planning.

The graphic end on the other hand, remains with designers using old tools, or not quite finished tools. the majority of these tools are ignorant to interaction or animation.

What the race for prototyping is looking for is a middle-way between working MVP and a design mock-up.

Of course, thinking of the long term, people will use “development programs” or code languages, to design, not just develop the design or sketch.

So based on all this info, we can divide prototyping tools to three categories:


Ux-prototyping

This is actually an interactive Wireframe.

Rapid prototyping means all the mambo jumbo about a graphic prototyping tool is basically unnecessary. Planning and testing your MVP would most of the time mean skinning it to its basic features. then moving it to development. Without the use of most design elements.

Achieving this, is not an easy task, here is one testimony.

The many tools available include:

Axure

My personal favorite, mainly because of its advanced prototyping tools which able you to create interesting complex behaviors.

Pop

Allows to create interactions between rough sketches or wire-frames. It may be the only mobile-first thinking, prototyping program.

UXpin

Which I have no experience with. is also a graphic mock-up tool, and can create advanced interactions.

balsamiq

A simple yet effective wire-framing tool. this one is popular with PM’s.

graphic prototyping

This is actually an interactive mock-up.

These tools are the one’s we expect to battle today. because they currently create a hole in the creative process. the main advantage of a good graphic prototype tool will be a high level of graphic work combined with the easy ability to create interactions and complex transitions.

of course bringing the gap between the mock-up and the actual MVP will also be a crucial point.

Invision

A great collaboration tool for creative and design teams that aims at the gap between the two. Invision also allows to demonstrate basic interactions, nothing more.

Adobe Comet

Which adobe is calling an “ all-in-one solution” for UI design. after many people misused the photoshop program to create mockups. (mainly because they are comfrtble with it and its powerfull features.) Adobe had to act. After many trials and errors, the rivalry with “sketch” started a process of finally designing a proper design tool for UI designers.

Unlike Photoshop, Comet will be a slim graphic software with its main focus on creating UI. The simple interface, which resembles other UI design programs can be previewed in Adobe’s “Design spaces”. Besides the reformat, Comet is supposed to feature mobile previews, and interaction and animation creation.

For those of you keeping their hopes up I have two words “fireworks

Principle

A Mac program which creates very nice animations.

atomic

A very powerful “All in one” solution for designers, to create interactive prototypes. The program also has some nice collaboration features.

pixate

Accuared by google, is a very cute graphic editor that can create mobile prototype. its also free for download.

Dev-prototyping

AKA Actual Working prototype

There use to be a time when coding meant strictly typing. Today the majority of the work is made through the ease of the graphic user interface. This means that the entire pipeline of the process will eventually use (hopefully) only one program and could create a prototype like one swift motion. This is one of the reasons creating a proof of concept or MVP in mobile is faster.

google android studio, Apple’s Xcode

Both of them free by the way. I think any designer should at least consider a peak at them.

Google Web designer

Also acts as an easy to use website builder, rivaling with sites like webflow.


The Best Prototype tool out there

Every idea has to start with a pencil — you cant skip this -if your looking for the perfect tool that everybody agrees on — go with a paper and pen. It can be relevant to any medium (or any craft). and can translate complex and abstract notions.As an illustrator, animator and designer I found planning on paper to be absolute planning. And Its not just for ‘designers’. My advice is: first of all scribble something!

Furthur reading:

uxdesignweekly — prototyping-tools

Yummygum’s comparison