UI/UX Prototype Software

Design

A UI prototype is usually made of a set of wireframes, which is the layouted version of the final product. Furthermore, it is used to show the interface interaction and when animated can help to simulate the actual functionality of the product, which then can be tested by users to find out behaviours and optimize the UX to it’s very best usage.

Low-fidelity: paper & pencil sketches

Medium-fidelity: wireframes and workflows

High-fidelity: realistic prototypes

Below is a list of programs, that I have used and tried out so far. For sure there are a lot more and maybe many I didn’t even come across yet that I am not covering here in this post. However, there’s not one ultimate program and it always depends on your workflow and needs. You really have to find out for yourself which one works best for you, in order to get a project done.

 

Sketch, Adobe XD and Framer are the 3 programs that definitely play in the big league when it comes to layout your prototypes. Overall they work very similar, but of course there are always pros and cons.

 

Sketch

www.sketchapp.com
Price: $99

I tried Sketch a while ago and it was very easy understanding the program and tools and it was no problem to get creating right away.
They really are up-to-date with the creators needs and there are also plenty of plugins in case you need something extra.

 

Adobe XD CC

www.adobe.com/products/xd.html
Price: $10/month

When XD was released I was pretty excited and had huge expectations (given the fact that it’s coming from Adobe and PS and AI etc are pretty awesome), but was very disappointed in the beginning. It just lacked so many tools and features and was not near what Sketch had to offer. However, they are trying to improve the program a lot and it get’s better with each release. The interface is very minimalistic, which is nice to keep a certain order. Like I said before, with all the new releases, e.g. responsive resizing, grid layouting it’s definitely worth to try out!

 

Framer X

www.framer.com
Price: $12/month

Import: Sketch

Recently, the new version – Framer X – was released. I have only played around with it for a bit and it seems very advanced. There are multiple ‘plugins’ that you can install that help with a faster workflow. Like I said, I didn’t have much time working with it yet. What distracted me so far was the dark interface and that you can’t change the state of an object as hidden with one click. (Maybe there’s a way around it.)

 


 

Principle

www.principleformac.com
Price: $129

Import: Sketch

I once worked with Principle, and I actually really liked it. It is quite easy to figure out how it works.
However, it can get a bit messy building ‘connections’ between stages and pages, when you have a lot of interactions.

Recently, I wanted to use it again and encountered the problem that I wasn’t able to import Adobe XD files. This is a huge downside! If you’re working with Sketch though, you will be fine, and of course you can also create your prototype within the app.

 

Kite Compositor

www.kiteapp.co/
Price: $99

Import: Sketch & Adobe XD

When I first installed the trial version of Kite and started playing around with the program it seemed very promising. I think this program has huge potential, because it is a good mix for layouting and animating. Besides, if you encounter a problem support helps out very quickly. I’m definitely excited getting to know this program better!

 

Flinto

www.flinto.com
Price: $99

Import: Sketch

To be honest it’s been a while that I tried out Flinto, so I can’t really comment on the newest versions.
What I remember is that it wasn’t quite the right program for me, due to the tools I needed for the project that I was working on at that time.

ProtoPie

www.protopie.io
Price: $99 <

Import: Sketch & Adobe XD

I just recently stumbled across ProtoPie and I think the way it’s built is really logical and comprehensive. It might take a while to figure out how certain commands work, but once you know them, you’ll get faster.
The reason I stopped playing around with ProtoPie was that when you have a scrollable website you need to set the frame to the content area that defines the viewport. Hence, the rest of the website (that you want to work on) is not visible anymore. Also when you’re working on conditions that trigger movement and such it’s quite difficult to work with the element, because for one you need to know the exact position that it had before, and second it vanishes off the artboard where you can’t see it anymore. In this case key frames would be much easier. Moreover, even though the program has a lot of basic conditions included- you’re still limited, e.g. in the navigation I wanted to have an underline over the text whenever you hover over it, but all that could change was the text font and weight.

 

After Effects CC

www.adobe.com/ca/products/aftereffects.html
Price: $21/month

After Effects is primarily made for motion graphics and visual effects. This means it was not build to create (animated) prototypes and definitely doesn’t offer implementations to simplify your prototyping/animation purposes. No matter the fact it has powerful tools when it comes to creating neat animations, as long as your familiar with key framing.