Animating the prototype | Medical Students Making an App - Episode 5

hello everyone and welcome back to making an app um this is episode 5 in the last episode Ali talked a little bit about how we start to make the Prototype um so the Prototype allows us to quickly design our app and when it's done we'll be able to get quick feedback from people just to give us an idea of uh whether it's been good what works well whether the flow seems to transition well so the next step and the final step of our prototype is to bring it to Life by creating animations so when you click on a button it goes to a page that you expected to go to so from our you can see that there are five main tabs at the bottom so the next step is to add these animations that we've been talking about and so we're going to use a program called Envision which is a free to use app as you can see I've created an account and I've uploaded our sketch onto this program so that we can link the various pages together through things called hotspots what I will try and do today is just show you how we link the basic pages together so just to create a few animations and a few links between what we've created so far from the homepage we want to make several links so the links to the various sheets at the bottom as well as to add an operation so let's just go through the ADD and operation flow which is the main part of our app so firstly I'll click and drag one of these hotpots this immediately asks me where I want it to link to so from here I'll click to add an operation page one once this link through will ask me what animation I want so for this one we want to slide up from the bottom so we simply pick slide up that's done so the next step is to let's follow this through so if I click shift and click this hot spot that I've now created you can see that it takes me through to the first page of the operations list now on here the next step would be to go to the next page for example so we're just going to run through the series of screens uh we have four screens in total uh which go between each stage of adding an operation so each time I'm clicking and dragging across the next button um and once I've done that I'll click through and it will run through to the next page and at the very end once we've completed all the details for this operation we have this save and exit function and the idea is once we click this it will bring us a report card this is the first time I've used this Envision software and it's taken me about 15 minutes just to make a basic run through using the designs that we've made this has been surprisingly easy to use and in terms of making a prototype then it seems like there's two major steps one is just to design what you think it will look like you can even use something like PowerPoint or Microsoft Paint if you need to just something to get your design on paper next we have all these different slides that we can use and we just want to create these links between them so using this Envision software has been really really easy to use it's literally a click and drag to create a button and once you click on that button you can link two p together and the beauty of Envision is we can download it through to our iPhones so you can actually test it using the device that you want to ultimately have it on so hopefully you've seen how easy it is to actually make a prototype so the designing stage takes a bit more time but the actual linking it up and making an animation out of it and really bringing the whole thing to life it's very easy to do uh you can do it in an afternoon once you've downloaded made an account and learned just basic functions of the software that you're using so thank you very much for watching I hope you've enjoyed watching me fiddle around with vision for the first time that leaves the next step which is just to code the thing so this we assume will take a lot longer and will involve a level of coding that I'm going to be learning for the first time as well so stay tuned for the next video where hopefully we'll go through some of the starting blocks for coding the app thank you very much for watching I hope you enjoyed it and we'll see you in the next episode [Music] bye