How to Build Prototypes Using InVision | Martina Pérez | Skillshare

How to Build Prototypes Using InVision

Martina Pérez, UX Designer based in London

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (26m)
    • 1. Introduction

      1:55
    • 2. Class Project and Resources

      1:31
    • 3. Process

      1:32
    • 4. Creating the InVision Project

      0:49
    • 5. Checking the UI Design File

      1:07
    • 6. Choosing the User Flows

      0:46
    • 7. Preparing the Designs

      1:12
    • 8. Sending the Designs to InVision

      0:38
    • 9. Login Flow: Adding External URL and Automatically Redirect To

      4:19
    • 10. Channels Flow: Fixed Header and Screen as Overlay

      7:26
    • 11. Check Overview Flow

      0:34
    • 12. Revising Prototype

      1:41
    • 13. Sharing Prototype

      1:58
    • 14. Closing

      0:23

About This Class

In How to Build Prototypes Using InVision you will learn how to use inVision platform to create prototypes, for both, mobile and web. You’ll be able to create a prototype, add your design screens, add hotspots to your screens, add some fancy transitions between screens, create more complex interactions such as go to a new screen after 10s or go to an external link when clicking a button, how to gather feedback from your team and how to update your design screens directly from Sketch by making use of the Craft plugin.

Prior experience is not required to join the class, although some previous experience with a digital design tool is more than welcome.

Transcripts

1. Introduction: Hi, My name is Martina and I am a UX designer based in I have more about 70 years of experience working on interaction design. Today, we're gonna be talking about how to build prototypes using emission with digital tools that let you give interactivity your designs. My favorite thing about products is that it helps you to make your stepping the science come alive. It's extra method to communicate your decides to stakeholders the product into the devil. I think that it's really important that everybody working on a little and vitamin get a sense of how to show the direction and navigation with the Sinus pains in a little product or service. From a designer point of view, it's extremely useful to make sure the usual flow is correct. To protect diversity in aviation between screens, for inconsistency in the elements off the interface you brought up. This course is more practical than theoretical. Just to give you a sense of the actual York. The idea is to learn by doing and stating, so we're ready to switch between a state and ambition. These cars will you do the times to get some hands on experience of video you don't need any previous experience to take the class. Even if you don't know how to use escapes for the show, it's OK. You can download the Senate's queens. I will lead you all of the process. So you're predicting this class is to be a little like you will have to to some user scenarios to create some users flows to change some elements off the face, and after that you will build a prototype. You we share with the rest of the students to get something. By the end of this class, you should have a really great grasp off the process, the tools, what you can do and how you can really quickly paid prototypes. Thanks for joining the glass, and I'm really looking forward to talking with you. Let's get it. 2. Class Project and Resources: for our first let's summon when I talk about what is the class pride and wealth resources you need in order to get it started as a class project, you will build the prototype. You will have to decide the platform, which can be that this stop, tablet or mobile. Later, you will share it with the rest of the students to get something back. All resources needed to be liberal. The type are free and available online. If you know how to use a sketch or Photoshopped, create an account in ambition With this aniline plant for the wheeled interactive prototypes, you can create an account for free and the free plan off us one prototype for good. Then you have to download a sketch or photo shop. These are designed tools to create your user interfaces, both programs or for a free trial version. Next, you have to download. Now you I kid, this is a free multi platform. You like it. Designed by ambition, the fighters have a level for its gets and photo shop. At last, you have to download craft blagging. This is our plugging created by ambition as well, and it's very common to send your out votes from the skates and photo shopped to your ambition account. And they're they're amazing features that will be explaining through the glass. If you don't know how to use the skates or Photoshopped, create an account in ambition and downloaded the Sinus screens you will see already maybe sang screens to be liberated type. So now download all resources I have mentioned. And if you have any problem, please leave argument to a start with will see the process off this class, see them. 3. Process: Hi there. This is here will explain. Ensure the process that will follow to build a prototype. So at first you need to create you're projecting ambition. Second, you will have to decide which blood for you we create a brother die for either they stop tablet or mobile. Third, we will explore the design fight, and we will take a look at the U I that we used to be liberated type. If you feel inspired, you can be designed the up using the file. It's a template, or you may also think off a new concept and design it from scratch. It's up to you. Then you will think off between 2 to 3 goals that uses might have when using the product. And based on those goals, you will pick up producer flows. After that, you will break down the use of flows, which will give us the step singer screens we need to create a prototype. For example, you may think off a user who is interested in great in an account or editing their profile . And when breaking down the use of flows, you will ask yourself questions like, for example, what new Redskins do I need to the sign. In order to show the entire user flows where another question could be, wouldn't u S states do I need for the elements in the layout? You will also need to prepare the science in escaped. And next you will send your eyeballs toe ambition. Once ing ambition in the blood for you will create the interactivity, the hot spots and the transitions between the screens. At the end, you will review your brother type and you will share it with the rest of the students to get some feedback. 4. Creating the InVision Project: Now we're gonna create that were first projecting ambition. If you haven't created your ambition a come get please supposed to video and do it before moving forward. But if you have already created your account, click the button which is at the top off the page. And there are three options available here. Prototype board in Freehand Select Prototype and click. Create new prototype. You just need to type the name off the project and choose the platform you want. You can build a prototype for this. Stop tablet, Ismar Watch and Mobile. I'm gonna build a prototype for android phones. But please choose whatever platform you prefer. Next we have to wait for a moment and you will see that we've got our first project in ambition. Leave a comment on which platforms you will be liberated. I for in the next video we will take a look at our the same file 5. Checking the UI Design File: So now it's time to open the recent file you have downloaded. If you haven't, please do it now and let's carry on. Take a look at the content off the you I fight. We got several screens here. Sixth inning off their boards loving sign up story. Full walk through home story comments, history, Customized channels Channel overview, calendar time lying M Profile from the profile. Usinor's going open settings. If you said stop the menu, they get the menu. We also got sent feedback language. It's a scream. What is the up about? It looks like the Arctic Summer Sea, where you service may see the latest news space on the interests. What did you say Sington. When using the APP, think off delusion might want or need. When you see the product, the mother wants Sina check their profile or leave a comment with five goals that users might have when using the brother. In the next video, we will decide the usual flows. We will prototype 6. Choosing the User Flows: here. I'm gonna talk about user flows. It's thing to choose the use of flows. You want a prototype. For instance, I've thought off the next use of scenario. It's about an existing user so useful who is already registered in The APP, wants to lower in to check new channels. He's upto anything but especially interested on food channels. He's also interested in taking his stats. So think about it. What do you sell? Flows. So I need in order to be able to show this use or scenario. So I user has to looking explore channels and click Food Channel and then he has to world to check overview. Leave a comment with the usual flows you will design before going to ambition to be a prototype, we will prepare the signs. 7. Preparing the Designs: before sending the are mostly mission. We have to prepare the science we need to organize the adverse. Think off what is needed in order to complete the use of flows, think off the direction between the elements off the face and finally position the elements in such a way that the product I works as expected. So now that you know what you said flows at your prototyping, it's time to organize the design fight. Let's duplicate the page, which contains Thea Edwards off the platform you have picked. In my case. I'm duplicating the mobile our boat. We will organize theater bolts by sections, and we will remove everything we don't need. Draft everything you need to this time for each of the use of flows. Do you need today saying any extra screening place close to each other? They screens that are part off the same section. For instance, all the skins or flogging Segni navigation between the screens? Will you still be able to go back to the previews? A scream? What happens when users tied their names in a text field? That's the content off the resigned feet. With your juicer flows, you may make use off a mind map to organize all of this 8. Sending the Designs to InVision: So, in addition to prepared very signs, we have to send their boards to ambition. Have you installed a graph plugging it? So click the first icon in the craft, plugging to the prototype and click sink. The section can take a couple of minutes. Once the process is completed, go to ambition and check. The daily signs have being uploaded correctly. If you are not in the mood to use the craft plugging, just export your adverse US images, go to their projecting ambition and then drop the sciences screens into it. In the next video, we will create our first hot spots in the prototype. 9. Login Flow: Adding External URL and Automatically Redirect To: So the first floor we're gonna build is loving. We need to display the inning off the user when the use of name takes field is clicked. Same for the password. Then they usually click. Get started. What tongue? In order to look into the app, we are gonna build all the skins that are needed to complete this user flow. First, we will work on their the logging a scream. The expected behavior is when user types his name on the use of name, text field. The name should be displayed on it. To do so. Duplicate your are Bert. Go to the craft playing and choose the data option. Then select custom type names. I will choose female immediately. We will get a random female name in the interface. So now we're gonna work in the second screen which is password duplicate their border gang . I create a circle and I selected then in craft duplicate, select horizontal and pretend the password is six characters long when user taps get this started. But on the background color off the baton should change to a darker color. One thing you can do is to go and check adobe cooler which is a free tool from adobe toe. Get different combination off huge based on the main color. I select shades and paste my main orange color. Get the one you like the most. Go back to escape and give that color to the get started button. Next thing do is that I need to name my screens on such a way. I recognize them when I'm in. Emission one Logan 011 Low insider to then export the for ARD boats we have created Let's go to emission and dropping in tweet, and you can also update jury screens using the craft carrying. No, we are in ambition. Opened the first the screen and click build mode to create your hot spot. Click and drag around the decided area. Link toe one Logan Soto and let's save it. Create the hot spots for the password and get it started. Battle in link to do well, we seem brackets. This is screen, which is the current a screen where you are goto Review mouth. We may also want that when a user clicks need help, a page east opened. Let's create the hot spot to link the desk within your screen link toe external, you are ill and write the girl off the page. Leave the option. Open any window by default. Click safe. Go to preview mode, click the link and check that the new page is opened correctly. The next step off the user flow is to go to the home page. Let's soaping his kids to check out the homered world. It looks like Mourners are needed in the home page to enable users to scroll through their contents. Let's populate their home with some more content. Using duplicate, optioning craft blogging, we can duplicate content easily. For example, we cannot for extra onions with a marching off 30 pixels, click duplicate content. Now you will see that the content is duplicated. Let's do it a bit more dynamic. Using again the craft plugging click data custom type headlines select technology for the 1st 1 Cooling motivation philosophy. M Beauty. Let's same sorts of the date off. It's a story. It makes sense to order it from the newest today. All this and let's send the copy. And let's also modify the labels for the stories in order to get the more aligned with the new headlines with just created Next, remove the first the screen in the home we will not needed anymore. Changed the name off the home Toto Home Export the Home R obert and important in the prototype. The intention is that when user clicks get started button, it leads him to the home page. But good half added day in between a screen with a brace estate off the get started button . So how can we do that? Let's go. To build mouth, click automatically redirect toe and choose home in after option right 500 milliseconds. Click preview mode loving before clicking on the button. Click the button and you will see that automatically create redirected to the home page. 10. Channels Flow: Fixed Header and Screen as Overlay: the second floor that we're gonna build is when you said goes to tenants section and exploit so we can scroll through the home pate. Now we want the feather to be a sticky. When we scroll through it, click build mode in fixed feather, click and drag until the end of the feather click preview mode, and you will see that now you can scroll and the feather with remain a sticky at the top of the page. Next to step in the user flow is to go to the channels screen. To do so, we need to click the menu and open it. Create the hot spot toe, open the menu linked to menu click preview mode. Click the menu icon and the menu asking is displayed as we will need the world to the menu from other screens. We will create ah, hot spot template. Do the following click the option include Hot Spot in template. To create a template, click, create new and write a name for your hot spot template. In this case, I'm writing menu. If you realize the color changes from Blue tour in now, we want the menu to be closed when you say clicks somewhere else. Create the hot spot in the remaining A space off this green and select linked to home. What happens when I scroll through the home and click the menu? It looks a bit weird. The reason is because we have exported the menu with the home screen on it. Let's amend is go to escape. Duplicate the Our boat removed the home screen off the menu Arab. Or, as you can see, the Bagram is taking the entire with off their boat under the last step. Take how much with occupies the menu. It's getting 600 pixels DoubleClick until you reach the menu group. There is a mosque there changed the with off the mask to 600 pixels. Now you can get rid off the home, change the name off their board and name it as your original one. Export a menu in imported into ambition. Seems you use the previous arbor name. It got replaced automatically. Now, if you click menu, you see a white the space, so basically you don't see the home behind it. Let's try to mollify these click build mouth linked to a screen as overly and choose navigation position. Top left Goto Preview mode. Now, when you click menu icon, the menu asking is displayed, but we still see a wide space. Let's go back to skate, select the R word and take the background color insane. The much format to be nd in order to export a much with a transparent background, exporting much an important digging into the prototype. You can see for yourself that seeing you use the same name, the screen has been replaced, and we got it. Click menu this. Place the menu over the home screen. When a scrolling and clicking, you can see that the menu is perfectly located. If you want, add some transition effects. Click build mode. Click. Many hot spot as transition you can select is live in left. Go to preview mode to check the effect to improve the transition. You cannot a background over the home in the text field. Off background type. 70% 8 Click safe. Now when you click the menu icon, the menu is shown with your overlay background. We have added the transition off the menu. Next, the step is working on channels. First, I need to open the menu and click channels to display that the screen. Go to manual screen and great the hot spot over channels text. Create a hot spot for the full with off the menu and adjust the hate properly. Generals heard some menu icon, but we already created a hot spot template for the menu. How can we had that hot spot to this particulary screen? Click here and you will see the menu click. Apply template to multiple screens, select the channel page and click down. Now, as you realize, you see a green rectangle over the menu Hot spot. If you go to preview and click, the menu will be displayed. Next step in the usual flow is to see what Sanders I have on the popular top. I need to create a new top for popular. I will duplicate my are Bert and give you the name popular channel. I will take my rectangle, copy em pasted. I will position it on the center and off the screen and changed the name to popular. Now I can get rid off the previous stop. I also need to change the name off following and place it where the previous one waas channels will be different from the ones I'm following. A tunnel might be motivation or they're traveling other animals or foot to change the pictures. You can make use off the graft playing. Now. The next thing we have in the user flow is to go to a channel bait. We will take our General Bates toe the right side pretend users will go to the Food Channel , take the foot picture to have just created and replace it for the one you have in the interface. Take a look at the news. They don't have much sense. In this context. We will change the headlines helping us with the craft. Blooding in Google also changed the name off the publications. After that, export a magician import them into ambition. Or you can just update your project using craft blogging again in India's young go to the channel screen. What we want is go to the Popular channel, create the indirection toe so click popular goes to popular. We need to add a new hot spot on following to be able to navigate between taps. Okay, so now we can navigate between them. We can also change the transition between tops instead off in spend, use a slight life and on the popular top, select a slight right. As you can see, the feather is no moving along with the taps, but we don't want this. What we want is only the content to be moved and the feather to remain a sticking, so to do so directly fixed feather until the position where they feather finishes on the two screens on following and unpopular. Now you can check the result, and you will see that only the content is moving. It's time to click for channel to open the foot the screen. But before these, if you notice I cannot open the menu on this page, go to build mode, select menu and applied to a screen. Remember to click down. Check that it works on both screens. In addition to that, we have to change the link toe to last Scream visited. If you don't do so, you will return to the home page instead off the channels page. Next, you need to click the food item, create a hot spot and linked to Food Channel. Once I click, it's open, and if I click the menu, I get the menu on the screen. There is no way scroll, so no need off doing anything else 11. Check Overview Flow: the last user flow is the world toe overview to see stats the usual flow. It starts in the food channel. Scream uses. Want to check the overview section to see their starts in the up? If I am in the Food Channel, what I need is to go back Click Menu Icon and Goto. Overview. So to do that, open the manual screen click build mode and create a hot spot over the text overview link toe over of your screen, and then you can see that when you click over viewed, you will get the overview section. 12. Revising Prototype: now that everything is the prototype, we can both proliferate the type and said that everything is working properly. The navigation is correct and the content is consistent across the sex feeds. Let's check that the prototype works according to the user flows. We have to find logging is stay starting screen, click user, name them password. Click it started and check that it leads you to the home page. Open the menu and click channels by the fold. You will see channels followed at the moment, but you can click popular channels. You can also winter on the Food Channel. Open the menu again and click overview where you will see the usually starts. If you realize that the bottom off the menu, you can see the name off. The use of Thomas is neither, but we have made use off a female name to loving Elsie Girl. This is not consistent, especially if you are thinking off using this prototype on some usability testing sessions because you will confuse juices. So let's go back to escapes tremendously. Deli tales. We can also change the profile photo and put a woman instead. Remember using the craft playing if you want to do these changes quickly. Open craft, custom photos, people in click until you get when you like. Other thing we can do is to change the device we are using in the prototype click settings . We get multiple options. We only see here Andre Devices, because we have selected on under it prototype at the beginning, you can change it here and choose, you know, another device. 13. Sharing Prototype: Whenever you are building a prototype, you need to share it with your stakeholders or with it in you've got several options to share. The prototype first squad is the cycle of shedding. You can share the prototype by Table Aslak or be hands. In this particular case, we will share the prototype by clicking share Batam. You can invite others to the prototype by type in their emails, or you can also get a public link. Just click. Share this project by a public share link. If you click links settings, you will get the options to share the prototype. The first is you are ill. You can set up a low commenting on the screens alot access to all the screens in prototype , and you can also add a password if you share the prototype with a team about hiding the hot spots skins that are shown by default. If you click more options, you can select a start the shelling at in select a particular screen where you want the users to start hot spots enabled. Mean uses. Consider defying hot spots at the very beginning. Prevent hot spots mean the hot spots will not be busy well for uses, which might be very handy when you see your brother type for you, sir. Testing sessions. Think about this. You don't want to tell the uses where they have to click in the interface to complete a particular task. I'm gonna send the prototype to my personal email. So now I'm gonna open the prototype from my mail. If you realize as soon as you open the prototype, you see the first hot spot. If you don't see that first, you can click anywhere in the screen and the hot spots will be highlighted. But in this case, the starting a screen should be the lowing a screen, not the menu. Let's sense these and check that it works. 14. Closing: So we reach the end of this class and I hope you feel like you got the better understanding how to build prototypes and what's the process to do. So if you wanna practice more, what you can do is to build a brother, die for the potential user flows. And if you haven't any, did appreciate your prototyping the principality to get some feedback from others. Thank you so much for taking this class. I hope you enjoy it.