Mobile App UI Design in Adobe XD - 1 of 2

hey guys you're watching danske the place to be to develop your creative skills in this tutorial we're going to be designing a mobile app UI all in Adobe XD and it's actually part 1 of 2 and in part 2 which is the next tutorial we're going to animate this in an app called proto pi so it's going to be super cool let's jump into it [Music] rightio so we're now in X B and from the welcome screen I've created a new iPhone 6 7 8 artboard and the first thing I'm going to do is double click this and call it home this is going to be the home screen and I've got an image here I'm going to be using as the main image as well so let's go to file and down to import navigate to the image and we'll import that into XD and you can see it's incredibly large here and we can scale this down holding shift and just position this exactly where I wanted to be and I can adjust that rotation and you'll see anything outside of the artboard is a little bit faded so let's just go and adjust this crop and you can use the arrow keys on your keyboard as well something like this now when I select this you can see all of this excess around the edge as well now what I'm going to do is I'm going to mask this within a shape just so we don't see that both in XD and when we come to working in prota pie we don't want to see that either so let's grab a rectangle tool and again create a rectangle equal to the width and height of the artboard we'll put this one over here for now if we just go to our layers panel we can click on the artboard and we just have this image and I'm going to go to edit and copy so I'm just copying this rectangle to the clipboard for now now we can drag this one onto here deselect the border and then where you can give this a filled color if you like it doesn't really matter though because we're going to use this as a mask so if we drag over both the image and the red rectangle that is on top and go to object mask with shape you'll see that if we have nothing selected for if we have the image selected it is cropped to that shape and we can't see any of the excess outside of the artboard then we can double-click on this group name and call it image and remember we copied that rectangle to the clipboard we can now go edit and paste and we have another copy pasted there so what we're going to do is we're going to actually add a slight color overlay tint to our image this is the original image here and we can go and deselect the border and pick a color for the fill so we could go with something nice and vibrant like a pinky ready color we've got lots of Pink's blues and even some purples in this image so if I move this back on top what we can do is bring the opacity down like this now this kind of serves two purposes one in the it adds a little bit of a stylized effect to the image but also when we start to add our text and our button here it actually makes that easier to read so it's trying to find a balance I think if we start at 50% and we can always adjust that so at the moment this color overlay is applied to the entire artboard and covers the whole image if we click on the fill we can change this from solid color to linear gradient now linear gradient ones from one direction to the other whether it's running from left to right top to bottom and we can change that here by moving these around now I'm going to select the darker color on the gradient and again I'm going to pick a nice vibrant color in fact I'm going to add this here so I've got this to reference and then I'm going to click on the other side of the gradient and just click on that color as well so this is essentially the same as a solid fill we've got the same color running into the same color however with this top one selected here that's this one on the left I can drag the opacity slider all the way down so you can see at the bottom we retain a lot of that pink enos over here and it graduates through to transparency you know we could go all the way through to completely transparent or we could leave just about 20% so this is what it looks like it's a bit darker down here and then it just graduates to being a much fainter at the top now doing this just means that we don't have a solid color overlay applied to the whole thing we have it a bit darker down here this is where love where a lot of our text is going to be and then it's just a lot fainter at the top where the subjects faces so that looks pretty good to me what I'll do is open up the layers panel and just call this rectangle overlay and then I can hold shift and select both the overlay and the image and we'll group those together and I'm just going to call this background and then click the padlock here in the layers panel just so that is now locked and we can't select it and move it by mistake so now we're going to start having some text let's grab that type tool and just left click anywhere and I'm going to type new summer and we'll pick a color roll let's go for white then we'll go 30 pixels on the size make sure it's centrally aligned and then we want to Center this text on the artboard so we'll just select here align Center horizontally and you can see it knocks it into the center and we can pick a font as well just for this tutorial I'm going to be using a veneer and we've got a veneer book selected nice and thin okay yeah we'll go with that that looks good to me and just grab a rectangle tool and left-click and drag now we don't need to have the border selected and I'm just going to fill this with black for now now of course this is in front of the text so we need to go to object a range and send backwards and it's definitely worth remembering these shortcuts because they can save you a lot of time if you have to keep going to this menu just to reorganize your text okay so this is cool I can reposition this black box make sure the spacing on the left and right and top and bottom edges is all consistent this is just a little bit lazy unless it's deliberate so let's just kind of make sure that spacing you nice and consistent either side and we could even drop the opacity of this down a little bit so we'll go for 85% just so it allows a little bit of the background image to show through and we don't even have to use black actually we could start with our pink color and then we could go down here so we could have something like this can I like a really dark purple so you can see the difference between that and black just adds a touch of color and we could go an increase that I pasty again I think I might keep that at 85 and we can double-click the text drag over the word new and from the color picker just select that same pink color and there we go we've got our first bit of text and we have a nice box behind it as well which not only looks really cool quite stylized but it actually helps the text really need to stand out and then rather than recreate this again we can duplicate this for our next piece of text so let's just left-click it hold shift on both of these objects and go edit duplicate and just hold shift and drag that down and we can double click on the text and type collection and of course I would like this to be white so we're really putting emphasis on the word new and then we have summer collection all in the same color and I'm going to scale this up you can scale it up here or you can just type in a value and press return yeah and we'll make the color light so it's a little bit thinner I just need to select this box now and adjust the size now you can drag from the left or right edge to adjust the size or the width if you hold down alt on the keyboard it will adjust it equally from both sides so we don't have to go in reposition text again I think I might just extend this out to the left again I'm just watching for those details that's spacing top and bottom and left and right just zoom in nice and close and move these up and I'm gonna have a little gap in between both of these as well just so they're not touching okay let's grab the type tool again now instead of left clicking and typing text which will do this it will continue typing forever I want to put this inside a text container so let's left-click and drag and you can see when I hit the edge of the container it wraps on to the next line so let's go and type some text we'll go we've get the hottest look this summer with latest trends and this could be some placeholder text or any text you like hottest there we go yeah we'll just bring that down we'll go for something around 20 and maybe change that from the lights back to book this text is a lot smaller so I maybe want that a tiny bit thicker and we can change the line spacing here also known as letting so we could go for 22 maybe 18 on the size fantastic and again if I hold down alt and adjust the size of the text container you can see it wraps respectively and if it's not in the center for whatever reason you can align it to the center using the alignment options at the top so we have our text and lastly we're going to add a button or a call to action so let's just grab the rectangle tool and draw a button you don't need a border and I think I'll keep the color of the button white so it really does stand out and I'm going to select the type tool and just left-click and we'll type sign up and it remembers that same Avenir font I'm going to make this a little bit smaller because this is going to be in capitals as well now I'm going to change the weight to let's go for heavy and of course we can't see this on our button so let's just change that color to our pink that we've saved down here and if you don't see it for whatever reason it might just be behind your white box go to object arrange and bring to front and again we're going to give this text here the same treatment as the above in that we're going to pay attention to that detail make sure the spacing left and right and top and bottom is consistent so it's not just a bit off-center or a bit wonky and there we go we can select this move it up now we'll just notice up using the arrow keys bring all of this text in the call-to-action just a little bit tighter together and just select all of this text here and go object group and just make sure that's centrally aligned yes it is fantastic and now what we can do is hold shift and just select absolutely everything you go object and group as well now let's open our layers panel and just have a look at this structure here we can double-click on the folder thumbnail now it's important that we do kind of organize our layers effectively is great because it just makes life easier for you when you're working on a file but also if someone else picks up your file it's not going to be a nightmare for them and they can see what you've done and how you've structured it but also when we come to animate this impro type i it's going to make it so much easier if we have a layer structure all in order already so we can see here you can just double click each of the folder thumbnails and go inside and have a look at what's what or we can just click on this top group and go object ungroup and it hung groups everything and we can ungroup this one as well so let's just start again now I'm going to group all of these pieces of text together I'm just holding shift and clicking on each of them and I can get object group and we'll just call this group we'll call it main text and we can turn this off and on just to make sure I've captured the right objects in that group not caught anything by mistake and then just select both elements of our button holding shift and go to object group and I'll call this button so you can see it's just made the layers panel so much more organized and easy to understand next what we're going to do is we're going to add a few uim elements so we're going to add a menu icon a fictional logo and then a search icon so let's zoom in at the top here and I'll grab the type tool left click and I'm just going to type boutique now this might be your logo that you're copying and pasting from something like illustrator or you could just make up any old logo so I'll just call this boutique and I think the size and everything's fine we'll centrally aligned that and I'm just going to do something ever so slightly clever with the O's and just move them closer together so I'm going to go to edit duplicate hold shift and use the down arrow key and then do the same again and what we're going to do is just left a line all of these and for the top one just double-click to go inside and delete all the text except the B next we'll have the O's and then lastly on the last one I have the teak and just double click the two O's and you can adjust the character spacing here also referred to often as tracking and let's just bring that down to something like minus 200 so these two O's link together and then I can hold shift news up and then nudge that back into position and I like to nudge these in and out of position using the arrow keys because now I know that all three pieces of text here are all on the same level horizontally and we can just select all of these together and go object group and then from the layers panel double click this and call this logo and then just make sure that this is central on the artboard you can see it nudged it into position there and now we're going to create a couple of icons so we'll just grab the line tool left click and hold shift to draw a horizontal line and make this white and then just hold alt and shift and drag there we go we've got a really quick and easy menu icon it's like an object group from the layers panel I'll go menu icon and now I'm just going to create a search icon to go on the other side as well so we don't need to fill and we'll give that border a white color and we'll keep all of this at one pixel in size as well and select the line tool left click and hold shift holding shift will snap it to either a 90 degree or a 45 degree angle make this one white and the way that I like to get this in the right position the research icon is I select both elements of it and align these century to one another and then select the line in the middle so essentially the handle of the search icon and use the arrow keys down and right so we go down right down right down right down right down right down right you navigate I know that it's perfectly in line and I can adjust the size by dragging this corner here so we can make it shorter or a bit longer and then simply hold shift and select both halves and group those together from the layers panel we can then call this search icon and zoom out and I can line this up here both of these icons I can line them up with the logo and with each other and then position these on the respective side so I'll drag the menu icon to the left make sure it snaps against that left edge and then hold shift and the right arrow key and go one two three so every time I hold shift and use an arrow key it moves it 10 pixels in any direction so holding shift and pressing the right arrow key three times means I now have a margin here of 30 pixels and guess what we can do the same over here as well so one two three and there we go we've got our main icons and I could go back into this group here by double-clicking and I could select the top one and move it up one pixel select the bottom one who move it down one pixel just to give it a bit more space and I know that it's all still lined up and in fact we can select all of these elements by holding shift so the menu icon the logo the search icon group these together and from the layers panel I'm going to call this nav so that's short for navigation and there's actually one last thing that we're going to do on this screen and that's add a little bit of creativity in the middle so if we grab the rectangle tool I'm just going to draw a rectangle something like this and what I'm going to do is add a linear gradient and the darker color versus the gray here the default gray I'm going to pick the pink color now at the moment the gradient is running from top to bottom I wanted to run left to right so let's grab these points here and you can see the gradient adjusts in real time and it will snap to the edge nicely so now we've got it running from left to right and we could flip it around just so it matches what's in the gradient slider bit easier to understand and I think and I'm going to select the white one here and bring the opacity all the way down on the opacity slider so essentially we have the pink running to transparency now I'm going to go to edit and duplicate and drag this up and then hold shift and rotate from one of the corners 180 degrees or you could type in 180 here for the rotation and next let's just drag over both of these and we'll group these together and we'll call these gradients and you can see this group is completely on its own on the pasteboard here because it isn't actually on this artboard yet and we can just drag this on and you can see it becomes part of this artboard now we want this to be behind everything but in front of our background so we can actually drag this and reorder it in here there we go and I can align this centrally on the artboard as well and actually I'm going to adjust the angle so let's just rotate that and scale this up a little bit and then move this down so our text and our button is central within this stylized angled gradient that we've created and I can actually select this gradient and adjust the opacity if I want I might drop that down to 90% so there we go that just creates a little bit of visual interest within our design as well so what I can do now is select these different elements and the angled gradient behind and then use over the mouse all the arrow keys to just move this up or down I don't go too high just so it kind of goes through her face I don't really want that so I'm going to move this down possibly something like this and then what I might do you remember we added the linear gradient in the very beginning I'd like this logo in these icons to be a bit more visible so we can double click unlock the background and go inside this and select that overlay and then I can go back into the gradient select this bit here and you can see I can adjust the opacity so I'm going to bring this up to about 50 just so it's a little bit more visible a bit stronger and we can't even adjust this as well so this is where the gradient starts I might bring this up a little bit let me come out of the background and lock that again it's always good to lock those layers that you don't intend to move just so you don't move them by mistake and I can select this text here if you want to jump straight inside of a group and select an object without actually ungrouping the group itself you can hold down command or ctrl and left click it and I could go in here and I could select some slightly thicker text on this smaller text here but there we go we've essentially created our first screen so now the next screen that we're going to create is actually going to be a sign up screen so the intention is that the user clicks the sign up button and it loads the screen where they can either go ahead and sign up or they can cancel the sign up process and return to this screen so let's go ahead and create a new artboard we'll just select our existing artboard grab the artboard tool then we could we could drag and draw our own custom artboard but it's going to be in the same size so let's just click i phone 6 7 8 and it has this right next to us and we can double-click on the name and we'll just call this one sign up so what we can do now is what we've created lots of text elements here already so we may as well just reuse those so remember we just talked about hold command or control you can select an object inside a group we'll go edit copy and then select the new artboard get edit and paste then it'll paste it in there and we can just give this a a gray color for now just Robby lay this up so we'll type name and I can bring this down in fact I can actually change this from an area or contain a piece of text to just point text over here so you can just toggle between the two we're not going to need this text here to wrap on multiple lines so it's just so much easier I don't know I don't know why I did that then let's just grab a line tool and left-click and hold shift to draw a perfect horizontal line and we'll move this up and if it is off-center you can just align it with this option here now this is all gray at the moment but temporary we're going to change that in a moment so we can just select both of these objects and go edit duplicate and drag down the same again edit duplicate drag down and you can see XD helps us get that spacing nice and consistent now normally I would use the repeat grid option and just repeat this top one but I'm going to be changing the color in a moment so I didn't want to do that in this tutorial and we'll just type here email and a password as well now we also need some text here just reinforcing to the user that they are on a signup screen so we'll hold command or control + click on our new summer text edit copy switch over to our new artboard edit paste and there we go and we can double click on this text and we'll type signup and if it's not already just give it that same pink color and our button as well we need a button and we've created one already so we could hold command or control select the signup text hold shift whilst keeping command or control held left click on the button as well and go edit copy switch over to the next artboard edit and paste and this is a white background so we're actually going to swap those colors around so the box becomes pink and the text becomes white and we can go and group those together and from the layers panel just type button and you can see as we switch between the artboards the layers change as well so it always shows you the active artboard in the layers panel and for the name we'll type Jane Smith now give this a color so we're going to simulate the B user who's Jane Smith has actually typed her name so she's started this signup process and we can select email and password and we'll make these a light grey color and just make a note of this six digit value here this is a reference to this specific color and I'm going to to then select all three of the lines and change the border color to that same color and press return in fact I can even click the plus icon and I can save that color there if you want to get rid of any of these colors just left-click and drag them off and they will disappear okay so the user has completed their name and they just have to fill out their email and their password so we'll leave it like this and then that's maybe gonna just some of this positioning make sure we've got a nice bit of consistent spacing here and here and it doesn't all look central to me so let's click that button and there we go that's a bit better so I like to just click lots of different elements in XD just make sure that they are all central you can see it's just nudging them into position there so we have the sign-up screen now the last thing what I'm actually going to add is a cross or a close button at the bottom so if the user clicks the signup button they enter this screen and they decide they want to go back and discontinue the sign up they can exit that process now I'm actually going to go over here I've already got a couple of UI elements these two icons and I want to create another one but what happens sometimes if you create them all separately as they can look very different stylistic lay but also in terms of size so I'm going to create this one which is going to be a cross so we've got a line there a diagonal line edit duplicate and I can change the rotation here to 90 and press return and what can happen when you create icons in lots of different places separately they can be completely different sizes so when I create all my icons together I can look at them and go okay this cross is a bit small I want it to be a bit larger and you all of your icons have a bit more consistency to them in both style and size so this one looks good to me we will group that together and from the layers panel change this to cross icon and I can of course drag this over here and then it moves on to our signup artboard and of course it's white on white so we can't see anything I can just hold command or control and change this to a gray color and then of course select it just make sure it's central on that artboard and then just drag over everything and just adjust some of this positioning maybe move this cross down to the bottom hold shift and use the up arrow key one to three times so we had that 30 pixel margin for these icons and we have that for here as well and I can just adjust these other elements so you can see here we have consistent spacing and top and bottom we have pretty consistent spacing as well so there we go we started with the image we added an overlay we then added some text and a button or call to action we then added a fictional logo some UI elements such as a few icons a bit of stylistic angular gradient design and then we also created a sign-up screen with a sign up button and a means of closing that signup screen and there we go we've designed both of these screens and in the next tutorial we're going to take both of these into pro tip I and start animating them and there we go that's the end of part 1 we've created the mobile app UI all in XD and in part 2 we're going to jump into prototype AI and start animating everything with some really cool transitions and movement is going to look awesome so if you have any questions or comments please feel free to drop them down below a huge huge thank you to the people who support me on patreon thank you so much if you'd like to find out more or become a patron there is a link in the description but as always like this video if you enjoyed it take care [Music]

Channel: Dansky

Views: 481,009

Keywords:

Id: CnfXJ2qjv5I

Length: 31min 32sec (1892 seconds)

Published: Thu Mar 15 2018