Building the Concept
While I was still designing the interface, I tested some of my interaction ideas. If an interaction was too difficult or time-consuming to prototype (and eventually code), I could make adjustments to the interface (how it looks) before I was committed.
This is typical in my work alongside developers. If a product improvement might better the user experience — say 10% — but doubles the design and/or development effort, it might not make sense at that time.
I found great graphic art on Behance (Thanks Maxibon!) to use as placeholder images so I could focus on the most complicated interaction I had in mind. Here’s the end result:
This project provided a great opportunity to get reacquainted with Flinto. Although you can create objects like rectangles, ovals and text within the app, it’s best utilized for designing interactions and animations.
So how’d I prototype the interaction above?
I knew I wanted something similar to Apple’s Cover Flow interaction, but not exactly the same. After some experimentation on my own, I found a tutorial posted by Flinto on building this exact Cover Flow interaction. Just like developers, designers have the web at their disposal with all sorts of tips and tricks to improve their skills and ultimately work faster.
In my initial experimentation, I couldn’t figure out how to pull in the options from the left and right that were not on the screen initially. I thought I could do it using Flinto’s scroll feature, like this:
But, ‘no dice’.
Fortunately, what I learned through the tutorial that you can move images off-screen (off of the art-board) while they remain layers of that art-board:
These off-screen images would be pulled in to the screen if the ‘item-flow’ interaction (as I’m calling it) was moving to the right or the left.
Before moving further, I’ll point out that I was able to import my in-progress designs from Sketch, which meant I didn’t have to re-create everything in Flinto. One of the downsides of the Sketch-Flinto partnership is that the files are not linked; it’s strictly export/import. Changes in Sketch after exporting to Flinto would not be reflected in the Flinto file.
Flinto’s Transition Designer
The transition designer is a powerful tool to… er… transition from one screen to the next. In my case, I don’t want it to look like I’m moving from one screen to the next; I want it to look like I’m manipulating one interaction on a single screen. I start off with two different screens side by side, in the transition designer:
One great feature of Flinto’s transition designer is that if you keep layer names the same across screens, once you ‘connect layers’ it will connect those same layers if you copy that interaction to another screen. By ‘connect layers’, I mean for example, we designate that Object A in Screen 1 is the same as Object A in Screen 2. If Object A is in a different position on Screen 2 than it is on Screen 1, Flinto will do the hard work of figuring out how to move the object during the transition. You can then tweak that movement manually ‘till your heart’s content.
Here’s what it looks like after I connect the center image on the right screen above, to its corresponding image in the left screen:
You’ll notice that the image in the left screen has moved to the same position on the right screen, and its old position in the right screen is hidden. You’ll also notice two layers are now indicated as connected by the blue and red highlighting in the layer panel on the left.
We do the same thing with the ‘off-screen’ images — we connect something that was off-screen in one art-board to something that is on-screen in another art-board which will allow for an object to fly-in from off-screen.
Now It’s For Real
My experiments in Flinto proved the interface and interaction designs I was pursuing were useful and doable for this project.
I finished building the design (and design system!) in Sketch, and imported it into Flinto. I built some basic interactions like scrolling and tapping:
And some more nuanced micro-interactions like the ‘popping’ animation when an item is tapped:
The End Result
Now you might be wondering, what happened to the rest of the case study!
My intent in this part of the case study was show you how you might begin prototyping advanced interactions with a tool like Flinto.
All of the interactions and animations you see to the left were created from scratch in Flinto. See even how the price changes when a new item is selected.
There are definitely some components missing from the overall design — there’s no main menu, for example. And that’s okay for this project, for now.
There are still larger questions to test — like if the selection layout overall is usable and preferred by people or not.
The point of this portion of the case study — and of part two as well — was to explore the more technical side of design prototyping through some of the tools available today.
There are other tools out there and I look forward to sharing with you what I’m learning in Justinmind (I used heavily in 2018), Adobe XD (I’m using heavily in 2019), Figma, Invision Studio and others.
I look forward to your hearing your feedback, tips, and tricks below!