Published on <a href="https://blog.prototypr.io/two-tools-one-prototype-a-comparison-of-invision-studio-and-framer-c9aa60c6905b?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Nitin Sampathi <img alt="" src="https://cdn-images-1.medium.com/max/666/1*x-nu8UcyP50Y79zUsXOgNA.gif">One prototype took less than an hour, the other took about three.
Warning: gifs incoming!
Speed is a crucial aspect to design. As designers, we need to rapidly produce and iterate through ideas. Technical chops are important, but knowing when to pull them out is the better skill to have. This comes from an understanding of what each tool provides, an understanding of what the problem is, and knowing exactly what needs to be communicated to your team.
I explored two ways to create the same design in order to see how much I could communicate in different amounts of time.
<img alt="" src="https://cdn-images-1.medium.com/max/1000/1*W0eTzEMELO-8XAzK4cmaeA.gif">
Do you need to get across the specifics of a user interaction—the intricacies of a swipe or the exact animation of an element? Then you might want to create something of higher fidelity. Or, can you get away with something quick, that gets across the gist, and you’ll worry about everything else in code? Making the right decision can either save you hours of wasted work or take longer and expel any confusion as to how a design should be executed.
<h3>InVision Studio</h3>
With InVision Studio, we don’t need code to create dynamic interactions. This prototype doesn’t involve just clicks or taps, this interaction was “tweening” shapes and animating properties based on the user’s input. It was dependent on a full swipe of the screen and animated to a certain state—plus it took less than an hour.
<img alt="" src="https://cdn-images-1.medium.com/max/464/1*B63ojtpnXtARWkLM8dcQiA.gif">
This prototype involved two artboards, a swipe-up trigger, and a ‘motion’ transition.
<img alt="" src="https://cdn-images-1.medium.com/max/872/1*3cjZs2o72ApwcJWj2q3wcQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/448/1*xtfDnafRJZ9hO_HXkH9zQQ.png">
If time isn’t on your side and your team can figure out specifics while ‘designing in code’ then a lower fidelity tool might be the way to go. <a href="https://twitter.com/karaann">Kara Pernice</a> from the <a href="https://www.nngroup.com/">Nielson Norman Group</a> says that<a href="https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/"> the benefits of a low-fidelity prototype</a> are that they’re easier to change, so if we wanted to switch to a bottom swipe, that would be relatively easy to do before the next user test. And, most importantly, they’re quick, so there is more time to focus on design of the interface or including the right content.
<h3>Framer</h3>
However, with code we can control any and all aspects to our design. This level of fidelity is helpful when you want to communicate anything and everything to your user or developer. Not only can you pass along design assets, you can pass animation values and even some logic. But, this level of communication comes at a cost — time. If you’re in code, expect to debug for longer than you would like to. With this increased clarity in the expectations of the design, our prototype says so much more that our design from Studio.
<img alt="" src="https://cdn-images-1.medium.com/max/464/1*v16A5F9kG1fOLl6o9N8SyQ.gif">
<h4>We’re listening to a real swipe</h4>
By setting an event listener on the <a href="https://framer.com/docs/#events.properties">.Swipe event</a>, we have access to the <a href="https://framer.com/docs/#events.properties">gesture event properties</a>. In this prototype we’re listening to where on the device the user begins swiping, where the user ends swiping, and transitioning between states during the swipe.
<img alt="" src="https://cdn-images-1.medium.com/max/733/1*lbcq_11fSQV0QJqbKcFQgg.gif">If the user doesn’t swipe far enough, it won’t open the device
<pre>swipeLength = 300</pre>
<pre>Device.on Events.Swipe, (event) -&gt; # Where the swipe starts startSwipe = event.touchCenterStart.y # Where the swipe should end swipeEnd = startSwipe — swipeLength</pre>
<pre> # Where the swipe is currently currentSwipe = event.previous.y</pre>
<pre> # Use Utils.modulate to animate layer properties between two values based on currentSwipe Overlay.opacity = Utils.modulate(currentSwipe, [swipeEndAnimation, startSwipe], [0,.7], true)</pre>
<h4>We’re using real animation</h4>
By using states and easing properties we can really fine tune our animation. When the device isn’t open, but attempted, we want our interface to not only return to its original state, but do so gracefully.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*VNsCprQIZqgvMyFRFXOiMA.gif">
<pre>swipeLength = 300</pre>
<pre>Overlay.states.closed = opacity: .7 animationOptions: curve: Bezier(0.25, 0.1, 0.25, 1) time: 1.2</pre>
<pre>Overlay.states.open = opacity: 0 animationOptions: curve: Bezier(0.25, 0.1, 0.25, 1) time: .4</pre>
<pre>Device.on Events.SwipeEnd, (event) -&gt; offsetSwipe = event.offset.y * -1 if (offsetSwipe &lt; swipeLength) device.animate(“closed”) else device.animate(“open”)</pre>
<h4>We’re focusing on the little things</h4>
Take a look at how Google handles the real lock screen and look closely at how alerts are handled. They have multiple states, the text moves ever so slightly, and they can be really complex when dealing with multiple alerts. Only in code can you begin to worry about all of the small details. And it’s those small details that takes designs to a new level and really brings a user delight.
<img alt="" src="https://cdn-images-1.medium.com/max/480/1*7ZvJLFXWLouPhH8G_SBc3w.gif"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*XCD8-ZyJkEOz7Kw8ZdXbJA.gif">The actual lock screen (left), The Framer prototype (right)
<pre>Device.on Events.Swipe, (event) -&gt;</pre>
<pre># The airplane is visible at all times so only animate its y position Airplane.y = Utils.modulate(currentSwipe, [swipeEndAnimation, startSwipe], [8,16], true)</pre>
<pre># The text needs to disappear halfway into the length of the swipe Alert_Text.opacity = Utils.modulate(currentSwipe, [startSwipe - 150, startSwipe], [0,1], true)</pre>
<pre># The text also needs to have a slight parallax effect Alert_Text.y = Utils.modulate(currentSwipe, [swipeEndAnimation, startSwipe], [-10,16], true)</pre>
<pre># The background of the alerts never scales down completely, it only scales down about 50% Alert_BG.height = Utils.modulate(currentSwipe, [startSwipe - 150 , startSwipe], [40,80], true)</pre>
<h4>Takeaway</h4>
Being able to create dynamic and interactive prototypes is important and that level of fidelity does serve a purpose, but it may not always be needed. By understanding the needs of your team and your developers, designers can accurately choose the tool that helps communicate what they need to communicate while saving time and effort.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*G_93ip_ubTH7GW83xWB-JA.gif">The <a href="https://dribbble.com/nitinsampathi">dribbble</a> shot<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c9aa60c6905b" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/two-tools-one-prototype-a-comparison-of-invision-studio-and-framer-c9aa60c6905b">Two tools, one prototype. A comparison of InVision Studio and Framer.</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Two tools, one prototype. A comparison of InVision Studio and Framer.

Top Stories