How to design an app | Medical Students Making an App - Episode 4

Key Takeaways

hello guys welcome back to another episode of the we're making an app Series where Ben and I talk to you about the behind the scenes process of building cut and paste a surgical log book for medical students an app that we're building over the next few weeks in today's video we're going to be talking about how to design the app and hopefully I'll be showing you that this is quite a straightforward process that doesn't need to be as complicated as it sometimes seem to people who haven't done it before there are loads of tutorials on YouTube and around the rest of the internet about the specific apps that we're going to be using for this the point of these videos isn't to give you the nitty-gritty of how to use the apps you know click this button click that button this is how you use the pen tool it's more about a high level overview about right if you've got an idea for an app how do you take that idea into a product and what steps do you need to do how do you go about it and if you do end up doing this then of course you can find more detailed tutorials about how to use sketch or Envision or any of the other things we're going to be using anyway once you've got the idea in your head about what you want your app to do which was pretty much the level that we were at we then need to design what we think the app is going to look like so for cut and paste we just started out with some sketches Ben spent an afternoon drawing boxes on a page on a piece of A4 paper that we stole from one of the printers at the hospital Dre boxes like a box for the home screen a box for the log book page a box for the ad operation page and little boxes inside there's that right on the homepage we want a button that links to the log book on the operations page we want to show all the little items on the ad operation page we want a box asking for the patient ID that sort of thing designing an app is to put it very very bluntly just drawing boxes on a page and I know this is probably going to annoy any legit designers who watch this video although whom am I kidding no legit designers are going to be watching this video but for our purposes for the purposes of essentially lay people who are not experts in design or anything like that who just want to get something from idea into reality designing an app is effectively just drawing boxes on a page and we start by doing these by pen and paper and then once we've done that we can transition into converting them into an into a digital copy of the designs so after Ben spent a few hours with his with his pen and paper drawing these boxes we had a little session where we discussed some of the ideas and suggested some ways in which it could be improved and some things that we didn't quite want anyway once we had the sketches The Next Step was to convert them into the actual computerized design the app that we used for this doesn't really matter the point is we just need some kind of software for the computer that can draw boxes on a screen the one that I personally like using is called sketch it's available only for Mac it's a specific web design or app design tool and I think it costs about £40 for the student discount license if you don't want to pay any money that's absolutely fine you can use something called figma figma which is also really good and it's a web based thing so you don't have to install anything you can use it on Mac and windows or you can even use things like PowerPoint and word because PowerPoint and word let you draw boxes on the page secondly another important point is that there's no need to start from scratch I think a lot of times when people who haven't done this sort of thing before think about designing an app or designing a website they think about the blank screen the blank piece of note pad paper that they're going to have to write their code on and maybe that was true 105 years ago when you you picked up an HTML book and you have to write everything out from scratch like HTML body head and all of that stuff that's not really true in this day and age in 2017 there are so many good free resources out there that there's very little point in actually starting anything from scratch so although designing an app is just drawing boxes on a page it's nice if those boxes look look pretty like if you've got a text field or if you've got a keyboard or if you've got an image it would be nice for it to look like how it would on an iOS device or an Android device and luckily there are people on the internet who very kindly have given away templates of these boxes for iOS for Android so we found one on the internet and it just comes with a series of components it gives you all the boxes it gives you buttons of different colors so in that sense designing this app designing cut and paste was just a matter of taking this existing template and then dragging and dropping the right buttons and the text Fields onto a separate document and changing the text of it yeah of course there's more to it than that if you want to become a full-time designer and actually do this properly but we're not full-time designers we're just medical students doing this as a side project and I imagine if you're watching this video you're probably in also in that position whereby you've got your own full-time thing going you just maybe want to learn how to design an app as a side project and in that case there is absolutely no need to reinvent the wheel there's no point starting from scratch you might as well get a template off the internet there are loads of free ones you can get nicer ones if you pay a few pounds for them but there are loads of free ones just customize them to suit your needs and then you have something ready to go and in about 2 hours of drawing boxes on sketch and copying and pasting components from this template into our actual document we managed to create a pretty reasonable looking design hopefully you like it we think it looks quite nice and it took a few hours of Ben drawing boxes on a piece of paper and then a few hours of me and Ben sort of collaborating on sketch on a single computer and drawing boxes on this app so hopefully it doesn't look too shabby and hopefully this video has shown you that designing an app is not as hard as it initially seems and once you've got an idea in your head you just convert it into a paper sketch convert it into an online document and then you're pretty much ready to go so thank you very much for watching this video stay tuned for the next video in the series in which we'll talk about how we prototyped the appp how we made the screens go from one to the other thank you for watching please give it a thumbs up if you like the video please subscribe if you haven't already and I will see you in the next one bye