How to Design & Prototype a Mobile App - Adobe Xd Tutorial

what's up y'all Farseer today we're gonna go over how to design and prototype a mobile application using Adobe XD now before we take a look at what we'll be creating in this video I just want to give a huge shout out and thank you to Adobe for sponsoring this video and supporting the channel it really does mean a lot and I'm sure my subscribers will agree with me because it allows me to create more videos for the community and speaking of the community I'm actually going to host a little game for us over on Twitter so basically you're going to use Adobe XD which is free to try so I'm not asking you to spend any money you're going to use this tool you're going to design at least two screens from an application that I know you have an idea for so design that application preferably mobile but you know I'm lenient do whatever you want and prototype those together and if you just want to upload the screens that's fine but I highly encourage you to use the preview tool within Adobe XD that I'll show you a bit in this video in order to create a workflow video of your application take that video upload it to your Instagram page and make sure you tag me at Farr Swift as well as Adobe at Adobe students.the both of the links will be down in the description make sure you tag both of those because what I'll be doing is taking my top three favorite and giving you guys feedback what I like about the design what I don't like about the design and we're gonna post those top three on Twitter as well as over on Instagram I just thought this would be a fun little way to get the community interacting designing that app idea that I know you have all while having some fun so go ahead and download Adobe XD follow this tutorial so you learn how to design and prototype using Adobe XD and that will allow you to pursue your app idea and not just participate in that game that I have going on but also take the next step within the software development process for your app idea because it goes from idea to design to development to deployment so in order to take that from idea to design this is the tool that you want to use and then you're going to just go from there and you'll eventually have an app on the app store on the website whatever you want so I hope you've already pause the video and download Adobe XD because without further ado let's take a look at this app alright so this app is actually called coffee dev it is actually an iOS application that serves as a portfolio for iOS developers I know it sounds a little bit confusing but it's really not it's essentially you know how Instagram is to photographers because that's somewhere you show off your pictures coffee dev is to iOS developers because it's somewhere that they show off their applications and designs so to take a better look at the workflow of this application remember how I mentioned something about preview it's basically this up here because I already have everything prototypes in here we come up to here I'm going to go through I'm already a dev you log in and this is the profile of it so as you can see we have the portfolio we have a example app one example app two and as you can see these are essentially identical or they're exactly identical and we did that using repeat grid that we'll go over in this video and if you also notice when I'm scrolling up and down this is a fixed element we're basically when I scroll up and down it is stuck to the screen stuck to the storyboard so it gives it a more realistic feel because the footer nav never scrolls up and down along with the feet and I was saying you're able to create a movie with this preview because you just come right over here and you were recording essentially this screen so are you able to click through you see here's the about it gives you the about of farst night iOS developer and then you can come over to the Search tab and search for other developers you know here's the essentially the explore page here's a feature developer and that's kind of the idea and although you see these five storyboards on the screen this storyboard right here is the only one that we will be designing in this video in order to keep this video as short as possible however if you do indeed want all five of these screens what I'm going to do is upload these to myself restore and I'm going to offer them to you for free for now so if you want go ahead and download those and import them into Adobe XD in case you just want to play around but I do highly recommend just focusing in on this tutorial so you can learn how to design and how to prototype using Adobe XD otherwise you'll be a little bit lost alright so now that we've seen the app that we're going to create let's get started what we're going to do is come over to Adobe XD and we're going to be designing for the iPhone 8 so on this drop-down arrow instead of selecting iPhone 10 which it may be selected by default come down here to iPhone 6 7 & 8 and select that for this and just click on the iPhone there and it'll come up with an artboard scaled to your phone ate screen size and before I get started on any of the design I like to come up to file and get the Apple iOS UI kit so I'm going to click on that it'll take me to the UI resource tab on Adobe XD and actually this is the first time this has ever happened to me it's a good thing that they're updating the kit but right now we can't access the iOS kit from here I guess or maybe let's download for right there this is a previous version of the Apple design resource kit we're going to come down here download for Adobe XD and we're going to open up the UI elements so that would be here this one is for iPhone X as you can see I guess you can kind of see we want to open up UI elements and design template guides and this is the reason for that it has all of the stock iOS UI elements as you can see down here we have a Mojang keyboard regular keyboard phone keyboard we have navigation footer bars we have status bars we have anything under the Sun that you'll see in a typical iOS application and for this instance what we need right now is this status bar to get things rolling so I'm going to command C to copy it bring it on over to my storyboard in command V we're going to pull this up here line it up to the top although we can't see it that's not at the top but since we can't see it let's adjust that let's select the artboard let's say fill let's make it grayish for now just for now and something else that I also generally like to do is come down to grid give it a check instead of layout I actually like to have it on square layout I've actually never used a layout to be honest with you I just normally would use square and I would change the square size to 15 because I like to have a 15 pixel buffer between any of my UI elements and the border here so it's not hugging the borders not too close but for this instance I'm not going to use the grid so I'm going to uncheck that and first things first what are we going to do we're going to import the background image for our profiles I already went to this website called in splash comm you can get free photos over there that you can use in whatever work that you need at least as far as I understand it for this I know it's okay so I have a lot of those images downloaded here this one I'm gonna click and drag it's going to be a little bit too big for the screen here but that's okay because we can just come over make it a little bit smaller bring it up here and I want this image to be about I don't know maybe 300 pixels high and if you are wondering how I know that you can see this is height this is the width I'm going to center that up and as soon as I click out of the artboard you can't see that hang off of that picture so this is going to serve as our background kind of I also have this transparent ish layer that goes over this but we're going to hold off on that because I want to show you why I had that transparent layer and if you haven't noticed our status bar here is nowhere to be found that's because whatever is above here is on top here so since this image is above the status bar it's on top of the status bar so we just have to click and drag boom and there we have it so now we can get on with our profile picture we're gonna make this about I don't know 100 by 100 no let's make it 150 by 150 I don't know it's gonna be kind of hard to get what I want to do here just type in 150 150 and I'm gonna lock it so the ratio stays the same so basically what that means is if I come up here I can drag it and it'll stay the same if this was unlocked the ratio will be Auto AK you see so that's why this locking mechanism is good I'm actually gonna hit command Z a few times to get it back to normal I'm going to actually import my profile picture into here which is this one right here I'm going to just click and drag click and drag it's as simple as that it centers it up for you and for the border what I'm actually gonna do is make that one of my app colors which is kind of like a yellow goldish and then the other out color is like a force green so I'm going to get the hex code for that and then I'm going to click on border and I'm gonna paste the hex code right in here hit enter I'm good to go but that's hardly noticeable so I'm gonna make it about two pixels deep that seems pretty good to me but also I don't know if you could tell let's see one you see how it kind of fills up the inner side of the circle right there I'm going to click this button right here make it be on the outside of the circle make it appear a little bit bigger make sure this is all nice and centered I don't know maybe have it about 20 pixels away and maybe about 15 pixels away from the status bar there and then we have to add our name our occupation in our location right down here so let's hit T to get up the text bar and we're going to type in forest night oops since that is my name command a to select all because I want to make this Rockwell font I think yeah that looks good then I'm going to make this 22 and I'm also going to make this white I'm going to Center it up right under my profile picture and I'm essentially going to do the same when it comes to the text for the occupation and the location so let's go ahead and have a quick little speed through there alright now that I have those lined up kind of where I want it I maybe I want to bring this name down a little bit to be about 15 I think each of these are about 15 away from each other this from that and that from this so what I also want to do is take this line tool and create a line to kind of have a little bit of a separation in between occupation and location we're gonna make this little thicker to be about two and of course we're gonna make it white make sure it looks good all centered up I mean that looks okay but let's let's actually make this more like 16 height above this up a little bit now that looks good to me so if you're wondering why I want to have that slightly transparent layer that is because as you can see from the lighting of the keyboard it kind of distracts you from reading the location this text right here because it's just a little bit the inner inner it's just interfering with it it's imagine if that background was even lighter than it already is that would really deter you from reading what you need to actually read that's why we're going to come over to the rectangle tool and in all honesty if you come and hover over these you can see rectangle are if you are on your keyboard that also selects a rectangle tool we're going to make it the same exact size as the picture but we're going to throw this down here to be just over the page we're gonna give this the color that greenish color that I was talking about here is the hex code for that and then we don't want to necessarily take this down like that I mean that does look good but that's that's a little too easy what we want to do is leave that at max want to come down here I do want to take off the border first we want a background blur it and we're going to set that background blur because you can't even tell what the background is to about five yeah I think five looks good we're gonna drop this brightness down to zero just have a nice little neutral and then bring this up to I don't know 90 this is basically the color this is this color that shows up here as you can see there's like no green all green so we're gonna bring that at about 90 I think that's good and obviously you can read these very clearly at this point so double thumbs up now we need to add a little bit more text we need to add our portfolio tab right here in our About tab right here so let's hit T on the keyboard bring out the text what'd I say we're typing portfolio and I kind of want this a little bit bigger maybe about 22 and I want this to be about right there and how about I line these up so they actually look a little bit good not before changing this actually down to 20 I think that's a little bit too big at 22 and that looks pretty good to me except we're missing one thing and that is to indicate which one we're selected we can't have boast like that once we either want to be looking at the portfolio or the About section in this instance we're going to be looking at the portfolio so under about we're going to make this a gray color I like to have gray 888 that looks like a nice undertoned gray kind of doesn't really pop out at you which is kind of the point we're going to have this since it's like to have a little bit of a like a like a tab underneath there just a little line I don't know what to call it let's make this about four thick and you can obviously tell that this is our selected section okay moving on down let's select the rectangle tool we need to have that higher button you want to take the border off here I'm going to ooh one thing I forgot to do come up here border or you see how this color is of the border I want to add this color to my palette and then this green I also wanted to add to my palette as well boom so when I come down here and I want to use that color again I can just select it instead of going through the whole hex code deal again I also want to add a shadow to this so let's add that there maybe darken it up a little bit what do you think I think that looks good and a lot of this has to do with the personal preference of how you want your app to look like for this instance the higher button is essentially a call to action so by incorporating the shadow it kind of raises it above everything else so we want to make it look like it's a button that you can press and that you want to press so that's why we integrate the shadow into that particular button now it's on to the interesting part and that is actually having the portfolio section of this application this is probably my favorite part so let's go ahead and get the rectangle tool and make a little rectangle here I don't know do I want a 60 by 60 maybe that's not a 60 by 60 60 60 let me like that keep it in place and I don't you know I love rigid corners on particular things not this though so let's kind of pull that in a little bit and I think that looks decent let me take off the border there and let me pull in my coffee logo not actually my coffee logo but it'll do for now so that looks that looks fine not exactly I wish it was a little bit more zoomed in and I can do that but for this instance I'm not going to just know that if you want your logo to be whatever size you want you import the actual image you can make it bigger and then you have to mask the layer so look into that if you want it a little bit different size but for right now I'm happy with it let's move this over to 15 off like I said I have to like to have about 15 buffer and 363 because that gives it a nice little buffer from what is above it all right we have to title this application so we're gonna of course the title that coffee dev I'm gonna select all we're actually have to do a little bit of work to this so let's take all of that out make it zero just make this twenty-eight and let's make this sign painter because that's essentially the logo font so let's move this on over be the same like three sixty three but I also want this to be like like ninety off give it a little bit of room and I want this to be the nice yellowish goldish color and it doesn't look too good against the gray but if we take over here we fill in the background with this green then I think it looks pretty good so now we want to have a little bit of a description with this and that's going to be more text but this text is gonna be a little bit different instead of just having a typing and saying uh sharing your apps with people whatever it's actually I'm what to change this font before we go on and change this back to white what we're going to do is delete that and click and drag a box something that would be like two layers and then we want to have our app a description so I don't know why I made it this but I did and the demo connecting you with hand selected software and as you can see exactly what this does is it wraps it around so it's not just on one continuous line wherever this line is it wraps it so if I were to come over and drag this back it would do just that allow words to go into that line or take away words depending on where the line sits so let's move this up here make it look nice and Purdy through this a little bit over even with that maybe a little bit up a little bit closer maybe a little bit too close but I mean I think that'll do for now and there's something else I thought would be pretty cool is to have it button over here so we're going to take the rectangle tool again then we're going to make a nice little button we're gonna make the width 60 the height 30 and we're going to round these edges so of course you can pull these little circles right there we can make this I don't know 10 that looks decent to me we're gonna make the border this nice goldish color orange erskyll I don't really know what color that is then we're gonna make the fill black but not just straight black we're gonna make it a little bit a little bit uh transparent to make it look like a button we're probably going to add a little bit of shadow in here too how do you think about that so let's add in some shadow maybe make that shot a little bit darker since that shadows darker I'm gonna make this a little bit lighter to kind of counteract that a little bit and then within this oh no no no and then within this we're gonna say get select it let's do everything we just did I kind of went to center that just in case boom let's Center this within our little button here that doesn't look exactly Center but you know good enough for government work good enough for me and what I want to do with this is actually group it together so I want to take this I selected both of these as you see and I'm going to command G to group it together so now if I select this I can move it around as a whole object let me commands you to get it back to normal and now I can pull this to kind of Center it with my logo over there the logo of my application and I think that's a decent area as it is right now now what we want to do is incorporate our images to our portfolios of apps we want to show screenshots of those applications so what we're going to do instead of selecting these three and coming over and dragging them in and trying to adjust them that way let's just controls you to get rid of that we're going to come in here and we're going to create a rectangle I believe the dimensions scale down would be 101 by 180 oh so close there we go oh no so close 101 by 180 I don't want to have a border on it and basically what I'm going to do is put this in a repeat grid pull this over so now we can have this essentially if I put this just right spaced out between each other perfectly as well as aligned exactly how we want it so the it's just about perfect right there perfectly in the middle and then we're going to pool these three in now and drop them just like that and boom it fills those out which is super helpful so I don't have to go in and resize everything I just have to resize one and repeat grid it instead of repeating the actual process so it's fairly convenient for example we're actually going to do that again let's actually pull this down a little bit to give us a little bit more perspective and we're going to take the logo here here here and these three of course we're going to throw these into a repeat grid and we're going to pull that down and under two well repeat that part of the grid so what you can do now instead of just having the same thing repeat itself you can come over here and say my other app and as you can see it doesn't change this text up here the only thing that would change would be the button sizes and things of that nature if you want it to have different button sizes for some reason well one probably won't want to use a repeat grid or to select the actual grid itself ungroup grid and that you can come down and you could select this and you can change it freely as you wish and this won't change but I like to have the grid I want these buttons the same it's only the text in the in the images of course that can change independently of the other options in the repeat grid a very very helpful all right so now we're just about done but there's one point that I want to make there's actually a new feature and that is this right here fixed position none of this needs to be in a fixed position I'll show you more about what fixed position means here in a second but a footer navigation bar will need to be fixed so we're going to come on over find our UI templates we're going to drag in this label right here we don't even need to drag it actually we can just come and see it and then select up here and command V and drag it down to the bottom here first things first what I want to do is change the color or lit a little bit of green tint I don't know if you can even tell but it makes a little bit of a difference and change that there and all these labels we can create custom icons by just messing around you can either do them in Illustrator and since it exports vector graphics you can import it into here and it'll scale to whatever size you need or you can just create something in here using like for example we created a heart right over here in our example that I showed you earlier so let me just show you that real quick basically what I did for the heart is I took a circle that took the made a circle tool boom let's make this even let's make it about 20 20 by 20 and that's 20 by 20 so 20 by 20 I want to take off the border I'm going to select this command C command V or you can hit the duplicate command but to each their own and then I'm going to create a square 20 by 20 maybe I don't know I have to play with it a little bit let me take the border off let me select this let me rotate this a cool 45 degrees I think I want it boom just like that then if I drag this up in here that looks almost perfect I mean there's a little bit you know imperfections here and there but what we could do is kind of just take this situate it properly right there take this down here situate it let me pull that in a little bit more boom I will take this I'll select all of these I will command G it to group it and that will serve as my heart the one thing that you may want to know is that if you group all these together make sure this lock tool is enabled you can change the size of all of these at once so you don't have to change each one individually and that's basically how I make my heart symbol not the best way it's really not but it serves the purpose for a design it gives you an idea that this is the heart and the footer so this is basically your notification section but now what I want to do with this I want to enable fixed position right and we can come over to the desktop preview and then as you can see when we scroll the nav bar doesn't scroll with it so that's a huge plus I knew there was one thing that Adobe XD was lacking as much as I liked them and that was not having fixed positions but now that they have it I really have zero complaints and another new feature I haven't really made yourself is called overlays basically it allows for animations to overlay upon switching between screens that you can just watch the Adobe XD video they describe it a lot better there but I think that's pretty cool as well alright so now that you have a basic understanding of how to design an Adobe XD let's take a look at how to prototype in Adobe HD as you can see we have the three screens that you saw the beginning of the video we have the search or the explore page and then we have the portfolio and the about page here and let's come on over as you can see we're in the design mode to prototype I already have a few linked up here but basically what you would want to do is actually let's reset this you can come over let's click on this artboard you can see all the prototypes here but let's click on this button about when I click on the about I want it to go to the about screen which is over here so I just click over here drag it I'm able to pick overlays like I was just talking about or when I come back to transition I can target which that's exactly what I did by dragging it over to the profile artboard and I can ease it so doesn't one do you want it to ease in or ease out how do you want this transition to occur and over what duration of time and that is basically it when it comes to prototyping it is very straightforward very simple basically come over here if I want to click the portfolio button you know let me actually take this away I'll click drag boom right over to this screen over here adjust this if I want to ease in out or if I just want to have no easing at all I can just click on that good to go any we can come over to the desktop preview and as we're sitting here on the about page portfolio we'll go over to portfolio about we'll go over to about and then if we click down here the explore button down here good to go if we click on this higher button it'll go over to here in order to allow me to hire that featured user which is force dinos developer takes you over to the the profile over there so you can actually see how this workflow occurs if you have all of these screens designed in this whole entire application design you can show yourself and your client kind of the workflow how the app is going to work essentially the whole entire user experience without actually writing a line of code because as we all know it's a whole lot easier to design an application than to develop an application at least is for me developing an application could take months this whole entire application to design maybe a week so guys remember always followed the software development life cycle right now you have an idea now you know how to design that idea so go ahead and design it remember upload that prototype movie to Twitter tag me tag Adobe all links are down in the description my three favorite designs I'm going to be giving you feedback on as well as posting them on my Twitter and on my Instagram so have some fun with it and get working on your idea another thing that I would like to point out is guys although right now Adobe XD is free to try if you are a student this is what I've been taken advantage of with the Adobe Creative Cloud that I use you know I use it for premiere use it for Photoshop I use it for Lightroom I use it for illustrator I use it for After Effects I use it for Adobe XD anything I do that's creative I'm pretty much using Adobe products and students get 60% off of the dhobi Creative Cloud so just take a look at that if you're interested in being a creative so guys I hope you found this video helpful if so make sure to leave a like on the video as well as subscribe because I have plenty more videos that have to do with this as well as software development computer science I think you're really liking especially you've made it this far on the video so till next time guys have a going peace [Music] you

Channel: ForrestKnight

Views: 914,865

Keywords: adobe xd, android app design, design an app in adobe xd, how to design a mobile app, how to design an app, how to design an ios or android application, ios app design, ios design, mobile app design adobe xd, adobe xd app design, ios app design adobe xd, adobe experience design ios, how to design an ios app

Id: Yt2troF-Eyc

Length: 28min 33sec (1713 seconds)

Published: Fri Jul 27 2018