Proto.io is also page-based: you can have multiple screens within a single project and create transitions between screens.Easy to make a quick mock-up because of the extensive library of standard UI elements, many of them customizable.Playback speed seems to be more normal for simpler prototypes. It’s not too bad on the web, but it’s way too slow on a device. The animations are less fluid, though, because I had to attach many interactions containing custom JavaScript calculations to the scrollview.
FLINTO INTERNET LINK ANDROID
They can run the prototypes in the iOS or Android app.ĭifferences between this prototype and the app On a device: You can make (free) Reviewer accounts for clients and give them access to a project.(These links can also be opened in a mobile browser, and added to the iOS home screen as an ‘app’.) You can also present your work to the general public in Proto.io Spaces. On the web: Easy – you can generate a public link, like this one.This is rather annoying: you have to click and then every time you want see the result of the changes you made. (I had an error caused by a variable containing a negative value.) Previewing while creating the prototype Be sure to check the console of your web browser when something doesn’t work. Important to note is that these JavaScript expressions can fail without warning. The provided single-line text field was too small for the lengthy calculations so to have an overview I kept them in a text file on my computer. But because everything works by drag-and-drop, clicking buttons and selecting values from lists, it can be a bit overwhelming sometimes to find the setting you need.īecause of the nature of the IF prototype – different objects moving at different speeds – I had to add several custom JavaScript calculations. Proto.io is a surprisingly powerful web app it has many, many functions. Web-based, with players for iOS and Android.
FLINTO INTERNET LINK FOR MAC
Proto.io, Pixate, Framer, Facebook’s Origami, RelativeWave’s Form, Principle, Flinto for Mac and Tumult Hype 3 are the tools I tried.
But they’re great for trying out new interactions, or for tweaking the timing of an animation. Prototyping a complete app in a tool like this would be crazy, though it would be too much work (you might as well build the real app). Layer-based toolsĮvery asset, interface element, or in other words, layer can be made tappable, swipe-able, draggable… but also animated. Granted, in some of these tools you can have animations or scrollable areas within a page, but you cannot use them to emulate every interaction possible in real native apps. It’s a bit clunky, but it’s a good way to make quick mockups when you’re still figuring out the flow of an app (which and how many screens are needed, how they would appear, where buttons should go, etc.).Įxamples of page-based tools are: Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP, Marvel, Balsamiq, Red Pen and Keynotopia. Page-based tools generally also have a choice of different transitions between screens, like fade in, slide in from the right, slide up from below, etc. You tap a button somewhere on one screen to go to another screen. In a page-based tool, you lay out different screens, and then you make hotspots or buttons to connect them together.
The majority of tools only let you connect static pages, while only the more complex ones let you animate different objects or layers within a given page. Why did I select these eight? I discovered that recreating something that is this animation-heavy (icons moving around in different directions and at different speeds) is not even possible in most prototyping packages.
See how these recreations behave compared to the real thing: I recreated the IF by IFTTT user onboarding in eight different high-fidelity prototyping tools to get an idea of the differences between them: Proto.io, Pixate, Framer, Facebook’s Origami, RelativeWave’s Form, Principle, Flinto for Mac and Tumult Hype 3.
0 kommentar(er)
