Invision App for UI / UX Designers | HU Shahir | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (28m)
    • 1. Introduction

      0:55
    • 2. Overview to invision App

      20:12
    • 3. Syncing Sketch Project with Invision 1

      7:14

About This Class

22b342c1

There are lots of Online tools that allows you to create UI / UX Prototype easily without installing software or any type of application. They are cool and very effective while we design UI / UX and it speed up our process and also have some other advantage at the process of UI / UX Design and testing.

Invision App is one of those online tools that is very popular among wide range of Designers in large tech companies like Google and Dropbox , They use Invision app for creating interactive prototype and also they do user testing , sharing designers into community  that invision app provide for users and a bunch of other cool stuffs that is really worth to know .

In this class we will have on overview to some of the important features of Invision App and we will sync Our Design between Sketch and Invision without copy / pasting or any other thing .

Lets get started :)

Transcripts

1. Introduction : Hey, guys, a tree from Polly in Motion and welcome to dis glass. In this class, we will talk about how to create a prototype using an online prototype tool called Envision App. Invasion app is very, very popular in these days. A man Oreste on. There are some reasons why most of the R est most of the U. N. Weeks designer using vision at for your prototyping and for shearing and taking feet back from the user for user testing tool or all of these things that are needed in U. N you design process and we will talk about how to import your design and sink your design from its cage is straight to envision are without copy pacing without saving on these other time consuming things. So if you're ready, let's get it started. 2. Overview to invision App : Okay, let's talk about invasion and how to create prototype for this user interface you are designed that I've created for the purpose of showing you guys, it's ah, simple. You either have created just to a screen. 3rd 1 is, uh is is ah not so important about to show you guys have to create prototype Andi. Ah, it's not important. If you have to a screen or more than two a screen, the process would be the same. And you have to cancer or how to out how to manage your prototype using esque each as long as you know this sketch doesn't provide Has our doesn't gave has this tool to create prototype built in and batter Maybe in the future operate and and next RV office cage. We would get as some kind of tool that help has that that allows has to create a prototype using s cage building tools and what have going to add up application or without going to other sources we have to provide on. We have to create our prototype inside off SKG itself. On the land cattle mixed ian hand that if you don't similar with adult Experian design It's a new application for always. Tenant board for for Mackinaw Western. Not just for Mac, like a sketch, unlike its cage. But if you don't know ah about Experian design, make sure to check out of my class on a scale shit about Ah, I don't experience designing a newly published Andi. Now that we don't have that tools that that allows us to create a prototype, a inside of esque age, we have to use some. Some other resource is We have to use some Onley reasons, or we can use um, application for Mac that allows us to create our prototype. There's a lot of tool by googling just you, I knew expert type keyboard. You can find lots of sources about prototyping, and most of them are are free and gives you a free trial. You were working on a team and you have to design something, and you have you need to take feedbacks off our designers and artists on the things like a community and things like envision Abbott allows us to create and sheer were designed. True, our team is very a full on on these situations, and it's a vied copy pasting and sending and messaging and and these other things that consumer time and it's not good for a professional work. So in here, you see that I have designed a very simple application. You I and let's go to envision and and here you see that I open envision and it tells me when Free Fert. I don't need that. Just dismiss it by typing. Envision app dot com You will face with this home peach and you see there's a lots of details about about, Ah, envision Abbott Sale and you see that it's compatible with these communities in these sharing ah staffs and most of the greatest companies, like like these companies like like lengthen or Sunni at open the's huge, thick companies use, um, envision up for creating you any makes prototype and design, and that is very cool. So on debt is the things that makes ah envision absolute PR popular among U. N. UX design. And you see that in here we have a bunch of a staff. Ah, we will. We will get some enterprise planning in stuff like that, but we don't need that because to to to use envision out for a large company as you as you see in half work for a large company is a question. Try InVision enterprise. So if you work for for a company, if you have a small start up and you work with a team of the staff, you have to go for a start and enterprise version. Often vision at bat in here. We want to get a start and free forever. It's three for for using into into a small teams. And between it's two or three are is It's free for you. And but by just get ah, clicking on get a star free forever Ah, we can go for Ah, we see that. Ah, get a start. Forms are available. Hey, you just drive your malodorous your name that you get in here. See that have type already and your password on. Then you can continue and all things are set up. That is very cool on and without going, we're going into two large forms without felling those things. You don't need to consumer time. Just fill in these blanks and continue. So as long as I have my account, I can already go to lock in. So now it is our dashboard in innovation. App on weaken. Ah, probably use some of the tools, and here and here is your project. And you see my project in hand If you have a lot of our approach and if you have more projects and they will appear in hand and also you have the categories for all for your prototypes. For boards and favorites, create your first project in you See that A prototype to bring your design to life and tous your idea. Create a project you can create project for those things and your favorite project in him and just dismissed it. This and a simple Andi. It's very simple to create a new project. You see that sign? Ah, plus baton had If I, uh, collecting ham and you see it was your project type, you want to create a prototype or you want to create a collaborative mood. Boards are brand bore our designers to real collection. On. It is a kind of bored before you design it, so it's a process in new a new It's designed that before we want this cage before we want to create the design that actually is any chills. We have to search to our designs, and we have to see what other ours do with their designs. And we just It's like a pattern in programming and software engineering. Like parents. If we go for for design parents, for example, all the Oreste. Most of the artists are using long Shadows and Your Trains an annual design. It's a kind of trainee between ours and between people. Ah, years of e years and years, and it's different from time to time. And because of that, it will allows you to create new boards and try all of your staff on. Put all of your staff together and it's called board and envision map. Envision app that we will get through it in a minute. And in here we have prototype that that we have our already design application. You I on. We want to build interactive market for Web application for mobile or variable experience, for example, designing Ah you I for Apple Watch applications and these other stuff that it's it's created a prototype, and also you can go for a sample as well. So in here and create ah, newborn. Let's talk about aboard a later bed. And let's go for a simple for example, you can you can choose your demo board, for example, me being to do out more mood board, are inside design or were simply social. Let's go for a to do app. Mood board. It's a kind of a kind of trained What should I say it? It's a habit between program Anson and people who are new to coating, and they're just getting star with courting there at the first. They are designing it to do up because it's very simple, and on it would engage too much of time for for those people. And they were starting to do our to do app or are. It's a kind of a world, all the crafts and older artist. Half same thing is the same sample project. Okay, let's Ah, try this board tent clicking here. Wait a moment until opening of this board. Let's see what it is. Okay. Welcome to your simple project. It's Ah, no, it's just got it. And And here you see that to do at most boards to beautiful things will do the most versatile task manager and these kind of titles you have your inspirational elements like colors, color palette. You can go for it. You have your typography and fall, a typefaces can go for them. It's a kind of war, but you just choose between, uh, these typography and be between these phone face. And you have, for example, to do app, moat, ports, more boards, its call for for things that for for designs from our Oreste from other designers that you have, um, all of them in your board that it's called mortarboard to to conserve some of the transom of the parents that they do. You can, actually, and I don't mean to copy it bad you can go for for the way that already gone on and you create some of style. For example, imagine this kind of stroke balance or stroke interactions and these other staff. You can go and that is very cool. And here you see some of the other overviews and also some of them. It's statistics and completing profiles and these other staff that it's very, very helpful, while while you want to do things that that that is already done badly, you want to create some changes, and you want to go for for other things. So it is from your mood board than you can. It's your other suit. Can you condone? Just go for some settings? Are you condone share, Delaying off your project? You can fearsome other people that you have in your connection. Andi. Also, you have Commons and these, ah, things in hand. They can go for it. Just go back and let's talk about today it on pouring out of things like creating new prototype. Okay, at the first, let's go for a sample in a sample. I want to go for mobile app approached. I just try it. So in here you see that the demon project it's already loaded on weaken. Build some prototype using tools that we have a envision app. So ah, once you just import all of your screens into InVision app, all of them. All of the euro screen is appear appearing in here on. You can import your own um, screams by creating new projects, and now it's ah, for simple project will take back to add in a minute. But let's talk about how to out who import your screens. For example, you can drag and drop it. You're a screen anywhere, or your browser can just take it and drop it. Imagine example. It is my screen. I can simply drag and drop it in here in my project, in anywhere we're just. If I drop it in here, imagine. You see that it's Ah, it's creating our board kind of things on the screen, on the screen for that on that is very useful. Helpful? You have your project. You have your different project. Just click on them on you can. You can slick them on, remove them or recon are Shavit or anything? L just lead them, for example. Now we want to build very nice prototype for this sample application, So I want to stall with the historic image on. Once I click in here, you see different screens in here. 27 a screen we have, but we don't want to go on build for all of them. Just three or four is good. We have some tools in here. We have a reprieve, A mule. It's our previous mule that we are now in it. We have a belt molt, and also we have common mode that just leave a common for for our Oreste. That, for example, in the shooting the size of this part of this green, all on any other staff, you have your inspector, that it's in better mode, that saying all of your when you sing all of your source file from escaped and we'll talk about it. You can see some seizes, um, courts and some cease attribute that to help you to develop at your you white design into actual ah, prototype, an actual design and story mortar that all of the stories and also that the Commons and these other versions that you have. So let's store with build Lord, for example. It's good for preview. You want to start with this. And so we want to sell from this, um, second screen because the 1st 1 is the 1st 1 Doesn't need any interaction automatically up yours. Now we have some navigations and some some artist part are two spots. You see that if I delete this, if I'd lead this on, you can create simply a artist spot on balance on things that are need to be interact with the user. For example, in hag simply draw our single around baton On the one side, directing despotic means appear and we can select your destination. For example, what you want. Ah, from user and when users interact with this pattern. What what would happen on on what you want user to see on you? Can you can go for star up image. These are your prototype, the screen that you have in your project and you can link back. They will talk about it. You can have some screen overly. For example, if I click in here, you can select your screen, for example, there that the maybe the compass fall and you can, um, choose the gestures. For example, just tapping or double tap or swipe right there, then how we want to use tap on. Also, we have our position. Which area of your ah screen want a screen that will happen that appear and you have your transition feeling and fit out. Just go for fitting on. You have your BG that how much transparency, opacity you want for this a screen and you can go for reverse transition on clothes ling that we want this and also we can close on clicking outside of overly or fixed position these our staff to save this. And now if I previewed this, you should know as long as he clicking here. You see, that bad screen is appear for me and is a kind of, ah, overly screened at, uh, when you when you click in hand and you click outside of that overly, it just disappeared. That is very cool. It, uh So we have our interactions. For example, weaken, Go for Maybe this interaction Just double click double tap on weaken Go for browse to compose full, maybe compose are it's major school for this, too. And change your screen items like their screen for maybe composed. Let's find composure that a school. Now let's save this and see what what will happen. For example, if I top in here, you see that destroying at have top. Also, let's build another in traction, maybe just for go, for, for contact full or maybe just go for wrathful save this and go to preview. Now we have this, and as long as I click in here, you see that I get all of those things and I can build some some some um back actions as well for my closing. For example, in here I just create any water spot for close on. You can just, um, show their previous screen industries and maybe just tapping transition will be the push saving. Now let's check this. You see that we have this and it can also build for this as well. For the new one on, we can go to compose a blank. Yeah. Now, once I click in here, you see that new blank s screen is a peon, and all of things are are working the same am It is very nice for this that we can build very, very easily these kind of things. And also we have our life here that can share this prototype. And this is a mock up Ah, with with other people's for for user fisting. And you know that a user testing in U. N. UX design process is very, very important. Um, to to do that in the end, in thes process, because it's very important. And you get some feedbacks from outer ah, persons who don't design and no don't con tribute during the design purse off a process. This and we don't talk about this. You can go for for life share by yourself on we have the share nor normal sheer that we can search our connection. When we have our people are our friends or any other arsenal contact we can share with them . And also we can estimate estimates that to remove, I'll just type your number, send it a message will be sent for you. And when you got the message, you can just tap on the link and you see the actual, um, prototype on your Eskimo violist Grunion Interact with that, and that is that is very cool. Onda without just copying them with via USB or putting that into, uh, cloud be service like media fire ultra Dropbox. It is very cool, and it's very nice to have all of them on your while, just with one click sold in hair. We can Ablett ever screen makes the screen, and also you can share it with social media people's you that you have in your account. And you can can figure that the skin of this iPhone mark of in here, for example, you can go for iPhone six black and also you have your status bar. You see that and also you have your foreground and dark light. And also you can change some of the parameters of background and say that knowledge recon go for its currency star you just It's on hold its in progress or approved because you can just put this tattoo due to Ah Away or other people have a persons in your project. So that is that that's a short overview. True day, These elements in the next Listen. We've talked about how to import dis designed and viewed that I've created firm esque each to envision app with this black and Kohl's craft from envision at for free. 3. Syncing Sketch Project with Invision 1 : can. Now, let's talk about how to sink our design from photo shop and escape. So in here, I want to, um, show you from escape bad. The process is the same with the photo shop, has a well, Onda and have created a new project using this tool. I've created new project in here on now. I can you see that I can, on my screen from thes image formats. Our I can sing the project in here. Just let's click on, get a start on. You can sink your file using crafts in bitter from envisioned. So what you need You need to download this blag in once you download the plaque in just double tap on that on you will get in its toll on your OS 10 1 citizen install It will appear in here on. You have two categories. Its Cajun Photoshopped. If you want this for esque, h, you can just, um, click on install in here. I see. Opted because I have already installed that on once you install that it will appear on the S cage in here. I will take to him in a minute. Andi, also you see that I can I can share the data you can. You can on and off that you can duplicate that you can Freehand library sing debater sing version off that and also the prototype that you can create your prototype using the craft inside of SKG itself that will. It's not available now, but but you might get it in the next version. And here we have the photo shop. Ah, flag in. And you can you see that I've or I have newly installed this and I have to restart my photo shop to get the plague in on all of those things that need your permission to accidents and have installed for a sketch. And let's go to s cage. I have my design and what I'm going to do in here. It just ah slicked my to our ports by holding their shift on simply in here. I can just sink with the envision map. Envision app on. Once I click in here, you see the creed or select your approach type. So in here I have my approach type Vince and create your prototype. It will create approach 70 project on the envision on your envision app icon on, Deacon. Ah, select all our ports on active page or you can slip select. Ah. Only selected our ports that in here I have to select only select because I have select already on just saying to envision and wait until the possible finished. Okay, It's processing and loading. You see that our project sink successfully. And so now you see that, um, my project in my design from ST already from s Cage on one thing Keep in mind that in here in sitting you can you can change your account and sign out. It's it's very important to know that I forgot to mention on also, we have a bunch of other things that you can import your vole driver library from your account or documents. You can create their style. And the cool thing about these things are that you can give some some You can get some some things, some data for free and for for ease of use, for example, you don't have to tribe some some, uh, data. For example, if I create a new text in here, you can just give get around them iris for a sample from here, Or maybe just go for name, female or you can go for headlines or article. You see that? What a typing too much because we don't cancer did. Ah, what article? We have to just We want to show the oracle and we want to fell the things and we can also go for a date for currency for email. Also, you can go for countries like this and for CDs for our asses. Baghdad. You don't have to try those things, and you can duplicate your content as well. So on. Let's go to our browser and hazy my project. If I opened a view prototype and see that you can choose your project type. Ah, I'm choosing mobile and iPhone portrait and continue that. And now, if I click on viewer screen and here you see my screens and the second screen, I can create the ultimate like the before Ah, peaches and designed that I have, for example, a I can create log in and also she choose my sick ah second screen home screen and I can choose for Taber and also this one so safe. And now if I go to preview, click and here you see that my screen's appear on Aiken create art a spot in here for this as well. Maybe just going yeah, on It's like to depth previous screen. This reason. Push it back as well. So safe. If I go to pre v millet and clicking here, you see that log in this that school. You can create almost everything that, but you have to import your things in here. And keep in mind that this feature off envision APP is having a limit for free user. You have one chance and one limit off off, using these features and and singing your project singing your project from S cage to envision app for one time if you using free. But if you you can operate for for different plans for a star, for enterprise and these other staff, and it is not too much pricing and two x expensive and it's sport at all for for working and for creating you wine UX design ST fold from s Cajun and pour them into envision ABBA and try creating your approach. So that is from from envision app. And there's a lot off other things going on in InVision app that you. You have to go for it and experiment with those things. Don't forget to. So that is it. Don't forget to check out other policy in motion. U N ux design classes on a scale Sure that there is a lot of classes about you and you is designed motion roughing in graphic design. My name is it Share and see you guys next time.