6 min read
For most product designers today, interaction design has become an indispensable skill. Everything is interactive. Designs with interaction, motion design, and microinteractions are some of the more challenging design aspects to convey to stakeholders, and designers need to have many tools at their disposal in order to demonstrate their vision.
Every design tool available to designers takes a slightly different approach; none of them are perfect. Designers have to choose between infinite design freedom requiring advanced design and coding skills and somewhat limited software with which design concepts can be presented very quickly.
The Flinto prototype file presented in this tutorial can be downloaded at the end of the article.
Interaction design is a very important component of the design process, and being able to demonstrate microinteractions during the product throughout—whether it’s to the team or clients—takes on critical importance. It has been discussed in several articles on the Toptal Design Blog:
- Better UX Through Microinteractions
- Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes
- Boost Your UX with These Successful Interaction Design Principles
Step 1: Design the App
Most digital products are designed with a “mobile first” approach, so we’re going to prototype a mobile app. Flinto creates cool UI animations quickly and easily, and mobile dashboards are a good example in order to understand how Flinto works.
We will design a simple, one-screen application prototype displaying the status of a cryptocurrency portfolio from scratch. This app will have two types of graphs: a linear graph and a bar graph, one simple screen and one modal window.
Let’s start by designing the home screen. The design process in Flinto does not differ from well-known applications such as Sketch or Adobe XD; however, it is a lot more limited. You can use Flinto’s Sketch integration to import your Sketch files—if you change something in Sketch, you can import the file again and update your existing design.
Flinto’s Workspace and Its Tools
At first glance, the Flinto interface seems to be very similar to other applications. This is the screen that appears first after creating a new document. All document settings are in the right sidebar. It is worth enlarging the working screen by extending its window. In this article, we will use the default file settings for the iPhone 8.
Something else to pay attention to are the tools. Rectangle, oval, text, vector, and image are all that are available. However, do not underestimate their strength—most modern interfaces can be designed by using them.
App Design in Flinto
Now we have a basic overview, we can start designing. Most of the interface will be designed using only the Rectangle tool. The exception here is a line chart that we will create with the Vector tool.
Note that all points of the graph can be distributed evenly using the Distribute Horizontally tool by selecting them all:
The main screen of our application contains one line graph with the axis of the weekdays and the axis of values as well as five smaller bar charts. Note that the entire design is larger than the iPhone 8 screen area—this will be used later.
After creating the project’s general wireframe, it’s time to begin styling the individual elements. All the tools needed to control the style parameters of any element are in the right sidebar:
Step 2: Creating Mobile Dashboard Interactions
Once the design process is done we can start creating interactions. The design created so far is larger than an iPhone screen. This means the content needs to be made scrollable. In order to do that, all layers except the background and add button layers have to be grouped using the Scroll Group tool available in the top toolbar.
Right now, the content is scrollable in all directions. To make content scroll only vertically, use the right sidebar and check Vertical scroll only. The prototype can be previewed using the Preview button available in the top toolbar.
Now let’s create a simple tap interaction for the action button in the bottom right corner. Select all layers that make up the button, then use the Behavior tool available in the top toolbar.
This tool allows you to create different states for any element and animate between them—as many states as needed can be added. However, to provide feedback to a tap with a slight pressing down motion on the button, only two of them are required. The first (initial) state cannot be changed, and appears as it was designed previously. To add another state, use the Add button available in the behavior designer next to the initial state. After adding the next (new) state, you can change the appearance of any element.
To simulate the tap feedback on the button, only the size has to be changed, so the button in the new state is slightly smaller. If desired, any parameter such as corner radius, border, or color can also be changed. To preview the animation between these states, select the cards. To trigger the animation by a user’s tap on the button, draw a link (using the Draw Link tool) between the initial and new states:
The interaction can be previewed by using the Preview button. At this point, we don’t have a return action back from the new state to the initial one. To fix it, select the new state card and check the Timer Link (right sidebar), as in the example below. It will automatically switch back to the initial state (you can also control the timeout and the target).
This is what the interaction looks like in the Preview:
The final interaction to be designed is the chart interaction. It requires the same techniques that were used previously in this tutorial, but it’s a little more complex. First, group all layers that are part of the chart: both axes (values and days), line chart, title, and the portfolio value in the top right corner. Then use the Behavior tool on the group:
Each state represents a different value for a different day on the chart. For each state, the chart line, the dot indicator and the day change their positions. All states are linked to each other with the Draw Link tool:
In order to change the displayed value of the portfolio while navigating through the days, a small design trick is needed. In design mode, duplicate the value text layer five times (one for each state) and use different numbers for each layer. Then in the behavior designer, change the layer opacity to show only one of them per state. Et, voila! The prototype is now ready:
Next Steps and Prototyping in Flinto
Flinto is very intuitive and doesn’t require advanced skills in order to create a simple interactive prototype. Though it has its limitations (you can’t work on real data or create really complex prototypes easily), its main advantage is the ability to prototype and present ideas quickly.
If you would like to learn more about Flinto, here are some online courses:
Flinto also lets you share your work easily by uploading it to Dribbble—it’s very useful if you are looking for feedback from other designers. If you appreciate this tutorial, please share your work on Dribbble with the Toptal Design Blog hashtag: #ToptalDesignBlog
Understanding the Basics
What is mobile design?
Mobile design refers to the design of user interfaces adapted strictly to various types of mobile devices. It also requires the design of user interactions and experiences other than those on desktop devices.
What is a mobile first strategy?
Mobile first strategy is a design process for responsive applications in which the creation begins with a project for mobile devices. Usability on mobile devices is put in first place.
What is the purpose of a dashboard?
The main purpose of the dashboard is to display various data in a legible and user-friendly way. Most often, it is based on the analysis of data and their conversion into charts, tables, and timelines.