This is the transcript for 'Mobile app prototyping with Adobe XD' video.
Today we're focusing on Adobe XD. So let's get cracking. I have got XD opened already and in the sort of welcome screen, we can start by seeing just what type of prototype we would like to build. And we've got examples here. The most common, I'll go with the phone type app. If you click on the little arrow below the phone, you can actually choose a resolution of a particular type of phone or an iPad resolution. If you wanted to build a prototype for a website, you can then choose a resolution for a website. I've just clicked too many times then, so it's going to go back home again because I don't want to build a prototype for a website. An Instagram story, or some sort of social media prototype of a Facebook cover or a YouTube video cover, or you can custom size your prototype.
And I was working with a student at Queensland University of Technology who decided to create a prototype, which was an animated interactive infographic for a massive screen in their classroom. I'm talking about the largest touch screen and the widest touch screen I've seen in a classroom before. And there she was, pointing to different parts of it as an infographic, as a fully interactive because she custom sized her prototype and then presented it on the screen.
So we are going to stick with a mobile phone application, which is probably the most common use of XD. And I'm going to choose a iPhone 13 or a 12 Pro Max, just for the sake of it. So that's the resolution. You can choose any resolution you want. And once you've selected your resolution, it'll come up with an art board that'll be sitting on your stage. So I've got my first art board here, which is kind of like if we go back to my prototype that I was building before, and I'll just get that back up again. It's kind of like the homepage. So that'll be what my first art board will end up looking like. Now, if I use my track pad and just pinch my track pad, I can zoom out and we can see that art board appearing and I can move that art board around the screen with my track pad.
Otherwise, with a mouse, it's holding the option key or the alt key and then toggling with the mouse, you can get the same sort of effect if you're on a desktop machine. Now, to create another art board, I'm going to go over to the left hand side and I'm going to look at all my tools here, right down the bottom, the second last tool is my art board tool, or the shortcut is the letter A. And then when I click on the art board tool and then click say below this art board, I'm creating another art board and I can zoom in, I can zoom out.
And for this particular prototype, I'm going to be creating probably I'll say four different subpages. And then I'm going to go back to my selection tool at the very top and just grab my home key. And just for the sake of visuals, I'm going to have the home key up here and my secondary pages down below. So if you think about what I showed you earlier, we've got our homepage and then every time we click a button, it's going to take you to a subpage or a secondary page. And that's the experience that we're going to be building with our prototype.
All right, so hopefully you now have got yourself some art boards and notice how far you can zoom right out. You can have hundreds and hundreds of art boards on your prototype if that's what you want, but it takes a lot of work to do that. So we're just going to show you how to do a very simple one with just a handful of art boards.
First thing I want to do is I want to get a colour, a common colour on all my art boards. And I've sort of decided that my colour screen is going to be this yellow. Let's get that back up again, XD, there we go. And it's going to be, I don't know if you can see that properly, it's a bit hard to see isn't it, with the webcam. But you saw before with the sample, it's got a yellowy background and my buttons are white and the text is sort of a purplely colour. So that's kind of the colour scheme I'm going to be working with for you as well. So when I click on this home art board, I'll just zoom into the home art board on its own.
We can see on the right hand side there's a set of tools that have changed appearance based on what I want to do with the actual art board. So in this case, I want to fill that art board with a particular colour. So I'm choosing the fill button and the colour I want is kind of like a yellowy, orangey type colour. So I'll choose that... That looks a little bit, so I'll just lighten it up a little bit. That'll do. And I've decided that there's the code EFC411, and I can copy that code if I want to, to get it exactly the same colour on my other art boards. Alternatively, as I go to my other art boards and select them, see if I can select them all same time and then go to the fill colour. I could just paste that hexadecimal code into there, or I could grab my little selection, my little droplet tool and just choose the colour that I originally selected.
And now all of those art boards are that same colour. So that's just by selecting all of them and then choosing the colour option. And I've got everything a consistent background colour. Now, the next thing I want to do is I want to start creating some buttons. And actually I want to get a title first. So I want to get a bit of text in. The first text I've got, I'll just bring my sample back here again, is 10 tips to be kind to others. Now of course, your title can be anything you want to, but that's how I'm going to work today. So I'm going to jump up to the left hand side and I'm going to choose the type tool, very common tool that we see in lots of Adobe applications like Photoshop, Illustrator, InDesign, Premier Pro. There's lots of different times we'll be using the type tool. And as I click into the art board, it creates a little flashing cursor and I can start typing, 10 tips to be kind to others.
So I've got that. And as I select that text box, haven't noticed of all the tools that appear on the right hand side now and they've all changed because now I'm manipulating text. So my tools are related to text. First thing I want to do is I want to go and change the font. And I'm thinking the font that I used when I started to design this was a font called Active. See if I've still got it here. There it is. I quite like that font and I need it to be bigger so I can go to the font size, change it from 20 to say 50. Make it even bigger, again, I think for my main heading. And I want to change the colour of this as well. So I've got myself down the bottom of this toolbar, a set of options to have the fill colour and the border colour. Fill colour is just a gray at the moment. So I'm going to change that to that purplely colour that we saw before.
I've only selected the word tips. I want to select the whole lot and then change that to that colour. That'll do for the sake of time. And I want to make sure that my text is actually appearing so I can see the whole lot of it. And I'm thinking in this case, I think I will just put a paragraph into the 10 tips to be kind to others so that we can see the whole section. Now, because I'm working with an iPhone, this is an iPhone 11, there's a little gap at the top centre where the one of the cameras is located. So I want to make sure there's room for the title to appear. And I'm thinking that I also want to get a bit of a smiley face to appear next to it. So we'll get to that in just a minute. So I'm just allowing room for the section at the top where the camera is and I'm allowing some room for my smiley face.
But before I start playing and creating a smiley face in Adobe Express and then bringing it in, I'm going to want to create some main buttons now, some index buttons that'll take us to the other pages. So to create a button, I want to go over to my left hand side and choose a rectangle first and literally create a rectangle shape by clicking and dragging. I'm going to magnify in on this. There's a lovely set of little handles that are inside the rectangle that when you click them, they can turn your rectangle into curved edges. So now, rather than a rectangle, it's looking like more like a button that I'd be happy with. And I want this to be reasonably big, but I still want to allow room on the side. If we look back to the one I've designed here, you've got plenty of room on the side to add other content.
So there's my first button. And I'll just zoom out a bit so we can see that. And I want to get some text in that button. So I'm going to go over to my type tool and just click inside at the text. And my first button is going to be called tip one. And by default, it's going to the same text that I used earlier. And it's probably not a bad size either. Happy with that. But if I wanted to reduce the size, I would use the same tools I had before, just make it a little bit smaller. And what I'm going to suggest we do now at this point is we're going to make this a repeat grid by clicking on and activating, accessing both the background of the button, the shape of the button, and the text of the button. I'm going to go up to the top right hand corner and click this button called repeat grid.
And when you click on it, it groups them all and then allows you to then create other buttons just by clicking and dragging. And I want to drag lots of them, let's say we're going to have about 10 tips. So how many is that? We've got 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. I've got 10 already. And it's going off the page. But that's okay because on an app, we're going to be able to scroll those up and down. And then I can just quickly go and manually change the text to be more unique to the different tips. I'll just do five at the moment just to save time. So let me just go through those steps again. We created the button, we selected both the button and the text, and we went up to repeat grid. Once we made it a repeat grid, you'll notice that a little handle appeared on the side that allowed me to click and drag it down.
And another thing I could do is I could have dragged to the right and that would create grids to the right... Would create the first one. That's not allowing me. But here we go. So if I grab at the centre, I can create a whole lot of them. So are we scrolling to the left or to the right? But in this case, I'm just wanting to be going down in a vertical mode. I'm going to click one other button on the right hand side here. And that is this button, which is one of the scrolling options. If you look carefully, we've got scrolling horizontally and vertically. But in this case, I just want to be able to scroll vertically so I'm accessing that. So all I will get is just scrolling up and down rather than scrolling left and right as well. Now to test this, I'm going to move away from the design mode and we've just been staying in design mode.
And I'm going to go over to this play button over here on the right hand side. And when we click the play button, it gives us a quick prototype on the screen. And if I wanted to make sure, that is on full screen, I could go to view and enter full screen. So all I see is the prototype and then I can just test is that scrolling? And it is. So if I don't have access to a phone in the classroom, and a lot of schools don't allow you to. A lot of schools do if it's for educational reasons. And you can use the XD app on the Apple App Store or the Google Play Store and just download the free XD app. And as long as you're signed into the same account, you can actually prototype it on your device. But if you aren't able to do that because of school rules or you don't have access to your phone, you can always prototype it on the screen as you're building it.
So, so far that's looking good and I'm pretty happy with that. All right, let's get moving with the rest of this prototype. I'm going to zoom out so we can see our homepage is looking pretty good. While we're in the mode of making buttons, I'm just going to jump into one of my sub buttons. So we'll go to say, tip one and we can see tip one has got, if you can see that, it's got a home button at the top left hand corner that'll take me back home every time I want to. And I've got that as a consistent button on all of my subpages. So let's start building that home button now. One way we can do this is it's a really handy tool. If I grab one of these other buttons that are already existing and I wonder if I can do it while it's in this repeat grid mode, I probably can't.
So I probably will avoid that. Let's just go back to basics and do it this way. I'm going to go into this first, like my tip one page and I want to create a home button. So I'm going to do the same process as I did before. I'm going to grab that rectangle and make it curved edges and I'm going to grab the text tool and just type in the word home. And I don't need to do a repeat grid this time, but what I will do is I'm going to allow some room to have a little button, a little picture of a home sitting there. It didn't even need the word, it could just be the picture of the home. So that's ready to go, but I don't want to copy and paste it just yet. I actually want to start getting some design assets and bringing them in.
So we're going to create a little home button and we're going to do this with Adobe Express. So I'm going to move over to Adobe Express now. And while I'm in Adobe Express, what I need to do is go up to the top left hand corner and hit the add button. And with the add button, we've got a whole range of things that we can add or create. I've got social media stuff here. You probably don't have the social media side of it, but you will have things that I don't have, like you'll have a portfolio button, which I don't have. But it's the same as doing a webpage as well, videos. But in this case, we're going to create a custom size graphic. So I'm going to click on custom size graphic and I'm going to choose the size that I want. It's going to be tiny, it's going to be really small.
So I'm going to think always do something a little bit bigger than you want to, because you can always make it smaller and it won't pixelate. If you want to make it bigger, it will pixelate because this isn't a vector diagram you're creating, it is a rusted diagram. So it's like working with Photoshop where it's working with actual pixels as opposed to Illustrator, which is in a mathematical algorithm that when you scale it up, it doesn't lose inequality. So we've got to keep that in mind. So I'm going to make this around about say 100 x 100 and that should be a reasonable size. And click next. It's 100 pixels by 100 pixels and it's opening up an art board for me for this particular graphic. Now, the graphic is going to be of the picture of a home. So to make this really simple, I'm going to go to this section here that says shapes, and I'm going to go to search shapes and just do a search for a home.
And what we're searching for here are millions and millions of royalty free shapes that you can use and you can publish. So I'm looking for a home button, there's lots of really cool ones here. I'm thinking I might just grab this one. As I click on it, just have to wait a couple of seconds because it'll appear on my art board. And there it is, it's appeared now. If you get impatient and you click it a couple of times, it'll end up making multiple copies like this. And if you've got multiple copies, that's okay, you can just click on the asset and then go to the trash can on the delete button and that'll get rid of it, the extra multiple copies. I want to make this as big as the art board is. I'm going to grab these little handles on the side and just stretch it so it's nice and big and I don't want it to be that colour.
So I'm going to move over to my colour tool and I'm thinking I'll make it the same colour that I've designed, that purplely colour. So I'm going back to XD just to see exactly what colour that is. So the colour is F20BD7. So if I copy that and then come back to my colour options and then paste that hexadecimal code, I've got the exact colour that I want that'll maintain with my colour scheme. Now, I generally only have to do that once because it'll remember that colour in future assets that I create.
Now the trick, this is a question I'm going to ask those of you who are with us live. So I'm going to ask you a question and see who's the first one to respond to this. To download this, I want a transparent background. I don't want a white background, even though that might be appropriate. I want whatever colour it's going to be on my app to be the background. So when I go to download, which of these options... Oh, gives you the answer. I don't have to ask you that question. You can see the obvious answer is PNG, transparent background. If I saved it as a JPEG, it wouldn't have a transparent background. So I'm going to avoid the JPEG. I'm going to click on PNG, transparent background there. I was going to test you out to see if you knew that.
I might test you with another question later. And then I'm going to click start download. Okay, so you're absolutely spot on. So I'm going to jump back to XD now and I want to get that asset and I want to bring it in to this particular button. So I'm going to go to file and I'm going to go to import. File and import. And this is where I go searching the downloads folder and find the most recent asset that's gone into my download. So I'm going to click on date modified, see today at 1:01 PM, My Project-1 (14). So I've done quite a few of these. I'm going to click on that asset and then click on import and then that asset will appear on my art board and then I just have to resize it and move it into position.
So I'm pretty happy with that as my home button. Now that I've got a design asset text and the button shape, the background shape, I'm going to select all of them and I do a right click and I'm going to go down to this section here called, Make Component. By doing that, it's going to bring in that button as a component that I can add to other art boards just by clicking on it. You can see in my component section here, it's the first of many assets that I can just drag and drop. So I'm now going to drag that into here. We can see that home button now appears there. Although, because I want this home button to be in exactly the same location on every one of my subpages, it's also probably easier to copy and go to the other art board and paste and then it's going to bring it directly into the exact location where you want it to go to.
So there's a couple of options there. But making it a component is handy. It sort of allows it to become an asset that you can use in all sorts of cases. Now, we're going to have a look at our prototype and I'm thinking let's go through that process of doing a design asset and get a smiley face appearing in our homepage again. So I'm going to go back to Adobe Express and just for the sake of time, I'm going to delete the home. I don't need that anymore cause I've already created and exported that. I'm going to go back to my shapes and do a search for smile.
And again, you could be searching for any shape on any topic at all and you'll get thousands. There are 17,982 different smiles and I'm going to scroll through until I find one that's on a profile, if I can. If I can't, I'll just use one of these, for the sake of time. Probably haven't got time to go through them all. I wonder if I did smile profile, whether that would give me... 198 options, and I'm getting one there. That's looking pretty good. I might just stick with that one. So as I click on that smiley face and you can choose whatever shape you want, it comes onto my stage. Remember the idea is to stretch it as large as your art board is. And then when I go to change my colour, the colour that I chose before should be sitting there in my palette.
So I'm going to select it now and then remember it's download PNG transparent background and then when I jump back to Adobe XD, I can just go to file and import and hopefully, it would've downloaded by the time I got there and it'll be sitting there in my downloads and I can go ahead and bring it in to my art board. I did have to stretch that out a bit, so I probably made 100 x 100, was probably a bit small. I probably should have made it 300 x 300, but I'm getting away with that. So that's all good.
All right, so hopefully you guys now have got a home art board with a bunch of buttons and you've got your sub buttons with your home key. And what we're going to do now is start labeling some of these sub keys. So for instance, if I go to tip one, we can see what exactly tip one actually is, which is smile when you greet people, tip one. So let's start working on the art board that's going to represent tip one. So I'm going to zoom in on that art board and just that art board. And I want to get some text that says tip one and I want it to be the same text as I was using before. So I'm going to actually copy and paste the text that I was using for the heading and then I can just quickly manipulate it by changing it to tip one, and probably centreing it.
Just conscious that I'm not allowing a lot of room for my camera to appear. So I probably should move that down a little bit. But when you prototype on an actual device, that's when you find out that you've got that as an issue. I'm just predicting that it's probably going to be an issue. So I'm going to move that down. I'll make that tip number one and it is smile when you greet people, is what the text is going to say, with a nice big round background. So I'm going to choose my rectangle tool and just bring in the actual tip, curve the edges so it looks really cool. Grab my text box just like we showed you before and then type in the text, smile when you greet people. And you can use the alignment tools if you want to center it. You can use the other text tools here if you want to make any other changes to it. Just thinking in this case, I wonder if I change that from 74 to 60, just bringing each line closer to each other.
So we're getting the idea. Now, we're getting closer. We've only got about five minutes left. So now that we've got some assets sitting there and we've got a bit of a design to work with, we're going to have the fun part. This is where we start to actually wireframe the prototype. So what I want to do is I'm going to go back to, zoom right out, and going from design mode, I'm going to move into prototype mode. And when we click on prototype, we can now start wireframing. So tip one for instance, jump into tip one, wanted me to wireframe that whole thing, which is not what I'm wanting. For the sake of time, I'm going to not worry about that at the moment. I'm going to go to the home button down here. And when you click on an asset, you get a little arrow that appears next to the asset and that arrow, you can click and drag that to the direction where you want that button to go. So in this case, it's going to be wireframing the home button to the homepage.
And in fact, now that I've done that, because I copied and pasted, that will automatically be generating a wireframe with all my home buttons because they're all based on the same one. So now that I've double clicked into the text, I can wireframe that to go to that art board and do the same with tip two and tip three and so on.
And to preview it, just like we did earlier, we played that little preview button and I'm going to make this into full screen. And if I go to tip one, it goes to tip one. If I go to home, it goes back to home and my prototype is working. And if I went to the XD app on my device and make sure I was logged into the same account that I was logged in before, I'd be able to prototype it on my phone. And that's without even plugging in to anything, which is really, really cool. And it's an example of how you can build a prototype just with learning Adobe XD and having a bit of fun with it.
[End of transcript]