Design Your Own App in Sketch (Tutorial)📱

we live in a crazy world these days where you can pretty much get anything you want off your phone now I can pull this thing up and open up any app and get information instantly you know if you're probably watching this YouTube video on your phone right now through your YouTube app so it's pretty crazy how we can do this stuff but I think a lot of people don't realize it what goes behind the build' of these apps like you know there's a whole like prototyping phase there's a whole wire framing phase this design is development there's QA there's all these different components that people don't really understand in I think I want to help you guys understand what goes behind the design behind an app so today I want to just sort of scrape the surface of designing an app and sketch sort of getting you familiar with some of the tools and just a you know basic fundamental principles of layout so let's go ahead and jump into sketch all right so I've got sketch open here and as you can see it looks a little bit different than Photoshop if that's where you're used to designing in we've got a lighter interface here different kind of look and feel and our layers on the left so that's a little bit strange if you're used to Photoshop let's go ahead and get started here so let's go to file new from template and we're just going to open up this iOS UI design just to sort of have as a reference while we're designer app there's a lot of these elements that are already kind of designed for you that exist in you know your typical like iPhone iOS kind of screen so it's good to have this open as we design different things to kind of just use it as a reference for sizing and we might need to pull in one of these for one of the pages in our app so it's kind of have this handy might come in useful adder so let's go to file new and let's make a new artboard so if we go to concert' the artboard we're going to click on our iPhone 7 size right here and that put in a screen sideways so let's change the orientation with this little guy in there so this is basically I get iPhone 7 sized screen so we're going to sign on top of this all right what do we want to make our app about that's the question let me look around my room 50 inspiration I see a camera I see some coins I see a stick of deodorant is definitely not going to do our app about deodorant others a cactus on my nightstand let's do that lets do a cactus app I don't know I don't have the best ideas but we're just going to roll with this so let's go ahead and enter some text so insert text and let's just type cactus or maybe cacti cacti plural for Texas and a period yeah I think it is so cacti is something more like an app anymore now we want to figure out what a good spot color would be for this app so maybe we can actually make it sort of like a cactus color so I grabbed this little period and sketch gives you some like global colors to work with some to gain so we'll just use this like kind of ideal that's cool cacti now let's see let's go I usually go to pixels to get some like free stock images so definitely check this place out if you want some really quick kind of placeholder imagery let's do a cactus here we go see we're getting some good photos I kind of want to do like a good image in the background here so like this would be like the app kind of splash page where you're getting started so let's grab one of these photos I like this one let's go ahead and copy this thanks texels for the photos go back to sketch and we'll just paste this in there there we go so you want like a nice like soft focus kind of not too distracting image so we can throw it in the fax so basically this bitmap layer is our image so we just call this image and then here's our top cacti logo now I want to make this white so it stands out more so I'm just going to select this part click the color over here and go to life and that's looking cool I think I need to darken this image so that this can be a little bit more legible so let's grab if you click on the top where the name of this is this basically selects the artboard let's click that and then go to our background color and just make it 100% black is what we're going to do is we're going to take our image which is on top of our board and we're going to turn the opacity down see that it's got about like 60 see like a 60 or there 61 I hate not giving like something an even number alright cool so we have our logo here maybe we'll make a little bit bigger and you know this could essentially be like a background image or maybe it's a looping video I've seen a lot of apps that do that but we're really using this as a way to kind of immerse the user it is like the vibe of the app so immediately it kind of looks like a cactus out I know it's silly but we're kind of playing out this green color which is cool but now we want to have we want to put some sort of call to action so when the user gets to this page it's like splash maybe there's a button that they can kind of get started so let's go to insert shape and go to rectangle we're just going to drag this rectangle at the bottom here and see it kind of snaps to the edge like that perfect we're going to go back to our protective border off or to put our fills and grab this color again this is going to be our button what's cool is you can type in your pixel height here so maybe I just want like a 65 down so now we want to add some text for this call to action so it's going to insert text you just click on the canvas and that's way too big so let's do like a 18 point let's put get started now I'm just going to grab this dragged it down see how these like smart guides kind of happen like Photoshop it's really nice when your line things up little snap the centers so already it's already kind of centered in there for me so we'll just group these two if I hold shift click on both of these you have selects both layers we're going to right click we're going to click want to group these go to a group selection so now it made a new group of these two things I typically like to do that when I'm in like Photoshop or illustrator or any early design software just because you want to organize your files in a way that like when you come back to this file later it's going to be nice and clean and kind of all layered nicely and labeled so like maybe another designer has to come in to this file you don't want to have like a messy file so I'll go ahead and name this with buttons I'll be like BTN underscore get started get there now we know for sure that that's our button and I can just grab it moving around whatever and it's good to go so now we have this kind of like splash screen you know means down let's add like a subtext here so copy this since we already created it paste this up let's see cacti what is this thing up share pack this share cacti with your friends I don't know who I don't know who would use this but we're just going to pretend and then I'm just going to select both those and just make sure they're aligned yeah there these are your alignment tools up here so you can kind of like Center things make sure everything's lined up properly cool so we have this uh we have this little splash screen and kind of a get started called action I might actually change the color of this because it kind of vibrates on top of that maybe we'll select the same color and just bring it down yeah that seems to work better for me visually the white was just a little it was a little hard to see on top of that color alright so we have our first screen we're gonna go ahead and click on our artboard we're going to name this splash alright now that we've got this splash page design let's go ahead and just duplicate this and make a good Explorer or like a home page for a wrap maybe that's where you can kind of find and discover new kind of unique looking cactus with your friends or something I don't know that's kind of like the theme that we're going with here so let's just go ahead and get rid of all this and let's make our background a nice grey color and this is where our iOS elements are you come in handy so we're just going to come in here and grab this navigation bar and we're just going to paste it right in there just bring it up to the top here this is actually a symbol so if we go in here we can click this delete these and I'll get into symbols in another tutorial but essentially this has an override setting so if I tweak any of this information here let's say if I'm going to change a carrier put Cody that's not Cody that's Cody see how it updates it right away so essentially like this is like a way that you can quickly change things that you've already designed without compromising the design elements so it just changes the information for you but we're going to go in here and we're going to change this background color to our teal color I grabbed this one you go to our teal color cool and return to instance will take you out of this symbol back into our artboard thing so again I know too low confusion right now but in another tutorial I'll show you what symbols are and kind of get more in depth with that but let's go back to an artboard and let's let's put our logo in here so copy that and paste it in and let's just drink this guy down to like 30 and this is kind of like the main home screen so we want to have our branding kind of present here so people can kind of build some recognition with the brand and just kind of like embed that logo in their head a little bit so this will always be there let's kind of Center there cool so this is like our navigation bar maybe we'll put like a little hamburger icon here actually let's just do that really quickly let's put a align and let's make this about two maybe three yeah I'll do three and then we'll make this white and let's just round the ends of this this stroke so we can click on this little gear icon click n swimming around and then I'm just going to duplicate this bring it down about seven pixels let me do that again and then I'm going to right-click I'm going to group the selection we're going to call it ICN menu and that will be our sort of navigation menu I might even bring this whole thing down a little bit c25 who knows that's 15 25 there we got a little smaller cool so that's that's how somebody would get to the menu now let's make a let's make a card here so that kind of scroll through and find some cactus so it's going to in turn shape rectangle and I'm just going to drag this kind of card right here and I'll get rid of this border we'll make this white and see sketch all kind of like you'll see it'll allow you to kind of position this see about eighteen or twenty twenty looks good and then we'll just make sure this is the line right in the alignment tool and it looks like it is and let's just make this radius to kind of play off this like round logo we'll just make these corners rounded about about five eight you know see how kind of rounded those that might be too much let's go back like six yeah it was a little aggressive but um yeah we have this card here now so what I can do is make this a little bit bigger and I want to put it like a featured hero image here so like you know somebody uploaded a photo and they're showing off their cactus and may you click on this card to learn more information so let's go to texels and grab a cactus image let's see which one's cool so maybe choose ready I think I'll do this one let's copy this and let's go back to sketch and let's just paste this on and I know it's huge right now if it's a big image but if I click both of these the rectangle and our bitmap I can hit mask and see how it puts it in like cookie cutter we'll just grab our image our image later and just kind of shrink this down and it's nice and cropped in there we'll bring this up this is our hero image cool now we have this little information area down here that we can put like a title some descriptive stuff here so let's put um let's grab this text copy it a little paste it on top here we'll just make this our darker color and we're just going to say rare desert cactus this probably isn't rare at all but we'll just pretend it is well left align it I always like to when I'm putting titles in here I like to kind of shove them in the corner here I'm going to hold shift and go one two three that push to 30 pixels to the right shift one two three down so now I know it's 30 pixels from the edge of that so the spacing is all consistent I may take so 20 though cool now I'm going to copy this I'm going to drag down alt shift and I'm going to make this a little bit lighter so your subtext and maybe this is just like the location of where it's being sold so let's say like oh it's mark and then we're going to make this a little bit smaller maybe like a 16 and probably like a regular wait they're six picks of the left so this rare desert cactus is for sale in North Park not really though and I'm going to bring this up a little bit this this card so I'll select my card just going to drag this up cool now I have this card maybe I want to add a feature where somebody could bookmark or save this thing or maybe like it I don't know because we have this image if I put an icon on top of here there's a chance that you wouldn't be able to see this icon if it was you know a different type of image that was a little bit busier so I think a way to combat that is if you insert a shape here just like an oval make a circle at about like 35 by 35 I'll make it like a black fill and I'll put this opacity down to like like 70 basically what I'm doing is I'm creating a little container for my icons like sitting so that I know that it will always be legible no matter what image is behind this so let's push it over 10 and bring it down 10 and let's go ahead and make a little a little icon so go to insert vector and we'll zoom in to our circle here and let's make like a little bookmark icon so let's click and drag it's kind of following see and kind of giving these nice little smart guides and getting this too and it signs in the middle for you and now we have a little cool like on here so let's make this a white icon and if you click on this gear you get more options I want to around the edges here so I click this little drawings gives me a nice rounded kind of edge here so that I kind of match the logo just everything else we've been doing I'm going to make this about three is way too much to two seems good and I'm just going to Center this within that circle zoom out just kind of see how it reads at school yeah maybe you want to like you want to bookmark this this is cactus come to minis back up a little bit make sure it's 30 pixels on two three and I'm going to group this entire thing entire card so that I can duplicate it so right-click group selection and then you have a little eyeball here on the layer so you can turn on off oh look I forgot the icon there so make sure I put that in there I'm going to call this card if you want to get even crazier you can go into this and make subfolders select grab path to and oval that's my icon all right that right click that click group selection call this ICN bookmark group these right click route selection text name this image and then now I have a nice organized group here and I can just duplicate this bring it down and I believe those 25 from iron cores I 1 to 20 go and we'll just change this image just because let's go grab this one this looks good emo selfie of a cactus copy that come in here and just delete that paste this in make sure we put this on top of the mask again and we'll shrink this guy down and because we remember that we put it 30 pixels away we can just fit from the top one two three and now we have a cool little home screen where you can discover some cactus thanks again for watching guys hopefully enjoyed this video if you did please subscribe and uh bring you some more videos [Music]

Channel: Cody Brown

Views: 179,685

Keywords: app, design, mobile, sketch, bohemanian coding, visual design, ui, ux, user interface, interface, clean, modern, contemporary, graphic design, iphone, ios, pexels, stock, cactus, cacti, responsive, application, how to, tutorial, diy, photoshop, adobe, illustrator, after effects, how-to, education, cody brown, designer, vlog, series, channel, hipster

Id: vnvdgar0744

Length: 19min 13sec (1153 seconds)

Published: Wed Aug 16 2017

Reddit Comments

[u/ele_blues]

I'm new on Sketch, but great video, thanks for sharing :)