Interactive UI Prototype with Flinto | HU Shahir | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (15m)
    • 1. Introduction

      0:54
    • 2. What is Flinto

      2:09
    • 3. Intial Setup

      4:03
    • 4. Adding Screens

      4:52
    • 5. Test it on Iphone

      2:51
    • 6. Good bye

      0:19

About This Class

You’re a UI Designer and want to test your designs with interactive hotspots and links on an actual device like iphone or android smartphones ?

Creating interactive prototype help UI and UX designers to test their Designs and prototypes right on an actual device to help create most attractive and best design and Most of UI and UX Designers create interactive prototype while they working on a project .

 

In this short class we use a Web application platform called Flinto to create interactive prototype .

We take some screen that are already designed and created and then we will add those screen into flinto and then we learn how to create link between them , adding icon , transitions ,changing device mockup color test it on browser and also how to installed on Smartphone for testing .

 

Feature of this class :

1-      Easy to follow .

2-      No need for advance understanding of graphic software .

3-      Project file and assets.

4-      Completely project oriented.

Let get started J

Transcripts

1. Introduction: are you a u x and Y designer and want to test your design with interactive order spots and links on an actual device like iPhone or Android Smart phones. Then this classes for you creating interactive prototype help You I and UX designers to test your design and prototype arrived on an actual device to create most attractive and best design in discharge class. We use a republication platform called Flintoff to take screams that we have designed all greedy. And then we can create artist with food in Korea weighing, create transition and then preview it on draft, sir, and also tested on an actual device. It will be very cool class, Let's get a story and they're creating our interactive prototypes Infl intell. 2. What is Flinto: Okay, guys, in this section, we want to create our prototype interactive. We want to create an interactive prototype and test it on actual device like iPhone. Okay, for discourse I'm using. Flint o Flandreau dot com is a very best and very simple interactive prototyping tool for a mobile application and for Web that allows you to create and design their interactive screens and interactive staffs with online and built in tools that you can. Once you create that, you can just create your splashes screen. You can create icons. You can just put a transition between each other staff that we'll talk about it in the next lesson Spoken. How to use Flynn Toe If lento is offer to kind of services to kind of subscription, the 1st 1 is Flint O for Mac, it is very advanced version. If you have a Mac and you want to create a very based prototype and it is just for professional use, you can use feeling to format. It has a lot of future. For example, creating transition for batons. This kind of things that you can do in Flint to light flint to light is that smaller version off this Flint O. Okay, if you have a Mac, you can download the trail version of it on. You can work for a professional use for commercial use, and these other staff has you watching here. It's just next generation of prototyping tool. What custom animation gestures and its cage import SKG importers mean that when you design your you I in escaped, you gonna pour it with this floater format, But in this course, we will use a very small aversion Flint to light. It's very good. It's very simple to use, and the only thing that you have to do is creating a 30 days free trail account to start using flanker Fergus. I'm just clicking on a star, a three day free trail, and here you have to type your Emily otters and choose a password. Didn't click on the start using flame toe and on all the tools. And all the things are appear on the screen in the next list, and we will start using flint or to create a bar. A prototype 3. Intial Setup: okay, We're Hyman f lento and I have created account in hand, and the first thing that you have to do it is creating your prototype. And here have just created a prototype name and title. And let's click in him once you collect this environment disappear and that it's very simple to use. For example, in here we have settings. We have preview. We have sharing and stall. We have at a screen that we can add a multiple screen, do this area, and also we can cling to Dropbox services to Dropbox to use our files in our screens that we have in Dropbox. Okay, the first thing that I want to do is go to setting been sitting. There's a lot of things going on in here. The 1st 1 is direct manage sites recommended Size is the size of the screen that you have to provide for to use Flint O. And when you test is to the actual device and your screens are not in the same Erez elation , you will not get a good result. Okay, your screen must be in this size, and if your screens or another size and Flynn toe killer app to fit on the screen and it's not getting good result and it's not good at all. The first thing that is very important is the title off your app. What is your application about in this case, we have tried polygon motion polygon motion on in here We have icon recommended size is 120 by 120 that we have designed it in a photo shop and just double click to this and select your icon that we've created. Okay, okay. And I can't just select the icon PNG You see that I select my icon is appearing here and you have your star up image If you have ah, Star Amendment, for example Splash screen. We can all say for that when you open the app this screen as appear first, then your other screens and and here we don't want to changes. Just the default wine is good, But if you want to change that, you can change it in here. And you must provide an image with this reservation. Okay. And here we have our share of you. For example, when you previewed at it when you preview your prototype, what type of status bar You want to see? For example, in here we have black opaque. We can use white translucence like this. We can use black two resolutions. But in my case, I use white transitions. It's all it's very good. And, uh, default device. Frame a style from a stall and body off your iPhone and device. And you have black. You have white, your gold or Nan. I'm just using white. White is good. Okay. And also tap highlight. Show him for miss taps and highlight active taps, and we will take to it in the next lesson. Okay, actions in the actions. You can just dip Lick ate the prototype that you have made in their flame toe and also weaken Delay this prototype in here once all the thing is good. Just click Unsafe change on all the changes are made for you. Okay. And also one hour. Things that I forgot to say is that when you click a new prototype and here you have to slake your title. What did your day application name that we have discussed about it and sending you can change it into sitting also and also your device which device you want to. For example, I want iPhone sex. Next was four or other devices, for example, iPad on. Keep in mind that when you select your device all the screen size, all the icon sites, all these kind of thing, it's fit to that device into dad platforms on your orientation mode, portrait or lined escape and also the status bar that you can change it later on in the settings in here, we have more options that you can just create a password for your prototype. On that, once all the sitting is Dan, you can just click on the Create Prototype and you were prototypes created and listed in here in the next Listen, we will add it some screams, and also we will add some transition between different you element. 4. Adding Screens: Okay, let's drop our screen right here in this prototype to create transition and also link between these s craze to drop our screen. Go to your folder on that in my kazyna in here. I have all of my I'm just simply hold there, Right click mouse pattern and ragged in here. Also, this is screen and this a squeak. Once you drag it, you see all of your screen writing here on day. Now you can change settings. You can change all the things in here between these s screams. Okay, I'm starting with logging peach. And when I click on the logging P along in Baton, it must be linked to this home page and how to create that? It's very easy in Flint o. Just hold on to right click Mouse Baron and creates a hottest bar right in the log in battle. Once you create that, you can now link it, link it in here to this speech, would have any holding the neck, like without any other thing. Just going here and click that that once you click that if I just click on a preview And now when I click to the log in. You see that it's drive me to the home page and that it's very cool. Okay. And once you create the hardest part now, just clicking here, Andi, In here you can create transition. For example, if I choose, dissolve and go to preview. And when I click in here, you see a dissolved transition. If I choose, for example, push left this kind of transition very cool, you see? And also push right push app You can flip out like this, for example, is very cool. Nice. And we can do a bunch of other things. And you can also use link back. For example, if I good preview and go to Logan. Okay? And now our Logan Peters created. And if you have, for example, you have created and other forms, for example, if someone create an account, you can just click and all spotting here and linked to address queen, it's very easy at all. Okay, let's create another horse. Spar in DeMeo. And when I click on the media bad in Hamburg meaning a baton in here. Icahn, When I click that it drives me, it must drive me to diss mean you okay? Like hour long Be just hold on direct like miles battle and drac a rectangle around it, this icon and link it to this peach. OK, and I want a transition off push right for this because almost every absolute see that when I click on the hamburger bad and it has a push right transition that makes up so beautiful and most attractive. Okay, let's preview at markets are locking peach. I just click on log in and you see our only screen. Once I click on Umberger Icon, you see that my menu is a pure in here on day. It doesn't have any transition back, but we'll created, for example, if I click back on that, it the almost queen must be a pure also. Okay, let's create that, For example, create a hottest bottom here for this and link it back to this. Okay, outlets preview that log in So Romeo. And when I click back to that that kind of thing, but with without any transition. But I'm just creating that transition for that log in menu. And when I back like in there, you see that kind of transition that is very, very nice. Okay, For example, let's create another artist bar for Log out. Okay, just like a log out. And when someone clicks on the lookout, it must be drive to desk, log in page and let's preview rap. That's a log in page. Okay, um, broker icon. And when I clicked lug our it just go back to that log in page. Okay? It's very beautiful. Yeah, And then I really lean dry, creating these prototypes because very interactive. And it's very good at all who can do a lot of things. For example, if you have another screen for your profile, just drop your screen like this. If you have 100 off a screen, you can just drop it simply in hair and create a link between them and create transition. Thes other staff to create your you. I design interactive prototypes. OK, in the next listen, I will show you how to test these prototypes right on your browser and also in your iPhone 5. Test it on Iphone: Okay, lets test dese prototype on actual device and also in a browser with iPhone Mow cop. Okay, I'm going in hand share and install and in sharing install. If you want to pistons to the actual an actual device, you have to type your ML. For example. You have just type at this email and click sin when you click sin. It's in a link to your M ill, and once you click on that email, it just created a bookmark for you. And prototypes appear on your home screen. When you click that you can just make an interaction with that and you can just test it that I will show you how to do that. Okay, he was the quick links. For example, if I click on that open in New Tab and in here, I have my prototype with the iPhone body, and I can change a iPhone style wide gold like this, and I just see how my up look to every device with different colors in him and just click Logan pH. You have menu like this, and you have log out. All the things said happen. It's very beautiful, okay? And the in here. I have my story. For example, if you share all of your prototype every time you just see your story, the data views and all the actions and hear that it's very helpful. Why are you create changes over time? For example, new versions, You create some changes and these kind of a staff on also in here you can just should your password to create a kind of protection for your prototype that on the other person can choose that without any password. Okay. And it's very cool for your security issue. Okay, Liz, it is that on actual device, OK, a Rheiman, my iPhone. And you see that I've got on a meal, that canteen a link off my porch type. When I click on Dad, you see that Just going to safari on the There's an arrow that called at two bookmark when I click on at to bookmark it, just go to add to almost green and click on add to only screen. OK, Once you click, there is ah, this configuration is appear. For example, if you change a name off your app and these kind of stuff and once I click OK, you see that icon in my screen. And when I clicked on that you see made with Flynn to and you see your log in page ride on your iPhone on, it's very cool. And when you click on the hum burger icon menu, you see that our mean you have its own transition and I can just drag it. Aban going toe log out page logging on all other staff. 6. Good bye: I hope you enjoy from this class. And also don't forget to put review and also post your at class project posted and give feedback from an extracted from me and also from other is to its check out other Polly in motion courses on my name is You should trade from polygon motion and see you guys next time.