UI & UX Web Design using Adobe XD - User Experience Design

1. Introduction to Adobe XD: Hi there. My name is Dan and I'm in Adobe Certified Instructor now together in you gotta learn how to use a dirty Eckstine. Now this you are UX design tool is gonna help us create beautiful user interfaces as well a streamlining Algiers experience. During this course, we're going to use an actual freelance project that I'm working on. A project needs both a women to face and a mobile app. So it's gonna give you a really good understanding all how to run your potential UX project . My course here is named People new to design and user experience will start right at the beginning and move out way through just step by step. Fist up also had a constructive good grief and percent. Then you'll learn how to create some simple wire frames. From there you learn how to implement colors and images properly in your designs, you'll learn the do's and dont's for choosing funds for websites. Emma Violence will also cheat a little. Why explain pre made you kids to speed about workflow? We'll build an prototype both our website design and mobile design connecting the pages and adding full interactivity Really for you statistic while she with you alot of the secret tricks inside Adobe Eckstine That'll really help you speed up those repetitive tasks all the way through to exporting the right files in creating your own design space at the end, I've got a project for you to help you develop your skills. And so you've got something really for your portfolio. So I hope you are really to upgrade yourself and join me to learn Adobe. Yes, that's a fake plan for Mike. Here you walk into the store and they look great. You like? It's gonna look good in the office and then you get home and it's a fake plant. 2. Getting started with your Adobe XD project: Hey there. To get started, you need to download the exercise files. There'll be a link in the comments or description below. Sometimes there's a button. Okay, you're looking out for the download exercise files. And the other thing you can do is during this course. What I do is I try and what? The individual video. I savor him up too. Okay. And the same to something called a completed file. Okay, so every video will have either a linker button where you could deli, where I'm up to 60. And if yours is not quite looking the same, you can download minor. Just compare the two. Last thing is is that during this course, you're gonna be asked for review. So reviews the life blood off me as a trainer. And why I get to do this full time. So if you are enjoying the course and you do get us for review, please drop. When in there. Okay. And honest review. That would help me out. Loads. All right. Uh, let's get going with the course 3. What is UI vs UX User Interface vs User Experience: all right, before we get started would just quickly cover what you ex faces you wise. If you're new to the field, they get kind of banded around together. UX is more of an umbrella. To McKay. It covers a lot of components, including you. Why? So you i user interface designers what we're gonna cover in this course? So we're gonna do a lot in Derby Eckstine, where we yet developed the user interface for a web and an APP. So that's the U. Y. Component, but that is generally part of a larger U X project, and us can kind of be broken into three main parts. One is the research side case. You do your user user experience research, and that's just kind of breaking up. I'm working out who the personas are like who your clients are. What the requirements of the client is kind of building out of brief away, the features that need to be in your product. Okay, that's the research side of stuff. Then there's the actual design. Okay, the u I design, which we're gonna cover in this course. Then you move into the user testing K. The usability testing afterwards you take your ex d project and you start testing it. We're gonna focus on this middle bit. Okay? We'll show you a little bit of how got the brief and how to get ready for Use the testing. But I've got another course called How to Be ux Designer. Check that out. That's amore of, ah, kind of an overview of ux design and that'll give you strategies, toe build out briefs properly. Personas probably. And also the user testing were to get that done. A little bit more will cover and briefly here, but we're gonna focus on the actual design UX design features. Now you as a UX designer, just so you know, that means we working like if you're working in a smaller company, medium company, you're probably gonna be expected to do all kind of three parts research the U Y and the testing on. If you're working in a large company, you could just be the U Y designer. Okay, is part of that larger UX project. You might have specialists, researchers you might have specialised user tested, so it'll depend on where you're at. But X'd kind of sits in the middle. There for the design tools. And yet so that's it. Let's go through now and start building how stuff in extinct. 4. The brief persona for our real life project B: Okay, So before we get started, I want to quickly just outlined the brief for this project. This is an actual project from one of my clients and my for there to be a nice way to kind of explore 60 through an actual project. So what? We had to do this kind of the U X research side of things and we had to build out a client brief. What? I'll show you here, and we had to build out the persona. Okay. Just like who the tiger audience is gonna be. So let's have a little look here on the screen. Ah, it's yeah, both What? The client sent me as an initial brief, and then what we had to actually move it into, so we had an actual project toe work through. All right, so this check it out, you know? Okay, So, first up, like any good creative job, you've got to kind of get the brief right, especially for you ex, because often the client on especially clients idea with haven't really run through a lot of UX projects before. So I guess, and control what's and what's uncovered. What's not covered. Those sorts of things. So a brief is always essential for any project. Right? So I figured I'd show you the one that we got. So this is the brief we got from the client, so basically was pretty thin. They've got a website, bring your own laptop dot com and they've built this kind of back in for it for their trainers to use. And they want to kind of just release it to other trainers to set using potentially use it as a product. Okay, so they want a website that one app, they very, very, very kind of basic. So what I did is I had a little look through the details k through the analytics for their website. I know a bit about them because I've dealt with him before, but basically, I went through the kind of UX research project working out who the competitors were, what the product does its us Pease who the potential users would be K and built out brief. So this is the thing that I e mailed them gay and basically just covers the basics off. Most briefs came. This is quickly run through it, you know, understood. You could just skip on will stop making X t stuff, but in this case a K project name description. Just kind of basically, that's what they have said. Eso just kind of outlining that description. Who's it for? Was quite important case. So we built a persona. I'll show you that in a sick and what the persona actually looks like. But this is what we agreed with the client, who the potential persona is now. The big thing with personas is that you can guess you can ever biscuits, but you need to revise potentially who your persona might be because you might go. Yeah, it's definitely this person, but you need to allow would a room on and bit of spelling and Gramma. Okay, so we've built out who we think the clients for. We build out of features list, Okay, just to make sure that we know what's actually going into the wire frames of beginning what the important parts are, Okay, we leave out things like a footer or other features that I kind of just normal there. The contact us page needs to be there all of that stuff. So this is the kind of unique stuff for this project competitors and product inspiration. This just helps our snow and the client know that were aligned. And Tim's of this is the kind of thing we're building king deliverables. This is super important. So we go through two parts is wife framing And in this high fidelity, basically high for their Lee means you know why Frames a really simple high fidelity has ALS, the fonts and colors and images. So we build wire frames purely just for client approval. Okay, I don't go out and test wire frames. We'll talk about a letter on, Then we build a Hope Fidelity prototype and then we go out to some user testing based on the user testing will do. Our usability report that could be big or small basically just feeds back what you found out. Your user testing, then once that's all finished and we've tidied up any of their problems with the user. Testing will grab all of the U. S. It's for the developers, and that just means giving them images and code and icons and symbols that they can build either the app with website. So that's where our job's gonna finish. Okay, so I always have a like a not included, just in case the client just just to kind of make sure the boundaries of sit nice and clear . So they've asked us to prototype the back end K, which is the kind of instruct aside, off this website, there is also a student side of it, which they have already got develops. They don't they don't want us to redesign their and so I'm just making sure it's clear they told me there. It's clear we're not covering that because they expect to use their kind of current systems . The instructor side, that we're going to be testing costs, Kay said. This is what I charged for this job and job's very often they kind of start at about 2.5 grand us and get up to about 10 grand for larger projects. This one here basically a workout what? My day Raiders, and it's roughly about $800. And then I could work out how many days I need to work with something like a timeline ed in a bit of a buffer and then give them an hourly rate after that so that if they do start asking the stuff that's not covered in the deliverables, and you can say Shuriken do that, but it's going to probably take me another half day and then they know your hourly rate so they know that you know it's gonna cost X wines it and I find that's a good way from stopping the job to creep out. So job creep happens with every job they go all Can. You quickly just add this extra little thing and you're kind of you add it and you will decide later on if you build them for it or not in the job over rounds and you either surprising with a giant bill or you just suck in those costs, which suck. So I make to shore that the beginning of giving us it costs because that's what everyone wants. Nobody wants an hourly rate, but give them in early right as well, so that when you're chatting and they're like, Oh, hey, can you also do this? New YORK? Sure, it's gonna probably take me three hours. They know yearly Raiders, and you can add it to your bill and everyone's clear right from the beginning. Always are asked for 50% payment up front gate to start the work. There's so many jobs that I end up starting that never can get finished. So I like to make sure I get 50% up front so I can cover my costs. For the initial part like that, it's the most important part, that kind of doing the UX research of working out the features. That's a kind of super important part of the job, I think so. I was asked for or percentage upfront. You might grasp something smaller than that, but 50% is quite common and then 50% on completion deadlines. Gay, every jobs a little different. But this is what we have done. So there's a kind of ah, them and me. So I'll do the use of research to get started with three e wire frames get delivered to bring your laptop thin. Then they give me feedback by this certain date. Then I give them the high fidelity. Then they give me feedback on that high fidelity, and then it actually goes to use a testing and then we're allowed for a couple of weeks with user testing. This couldn't be different means on how, like for this project, we're gonna do a lot of what's called hallway testing or over the shoulder testing. We're gonna try and meet up with people to do physical life stuff, find people that Metro persona and actually work with them. No, Again, we're not gonna cover full on testing here. I've got another course for that. Check out how to be a UX designer for some of the testing techniques. Yeah, we're gonna do over their shoulder stuff possible. Probably do some UNM moderated testing. Where we go, do you say uses testing dot com I find is really useful. And you could just seemed it them and people record themselves sheeps quick. And it's something you don't have to organize meetings for. And you have recording so you can snip out. But so you could show the client some of the results. Okay, then there will be a user testing on in completed reports on basic Just feedback about. This is what happens in the user testing these air, the changes we're going to make and you make those changes and once the final changes have been done, will hand over the assets to the developer to get built, which in this case would be I'll probably end up doing the Web side of things k at least the front end Web design stuff. But the AP and the back end development will have to be done by developer, which is totally out of my zone or more of their creative side, the front inside. So, yes, that is the kind of brief that we've seen through to the client. Always make sure that because I bet you 100% promise that this will not get the fourth of December mean because the feedback Okay, so your client will see this date and say they will do it, but things will just turn up late. You know, just be one or two days late, and I just make sure as soon as it is a couple of days later, I revise the next time line, okay, So that they know that it's them that pushed it out. So when it is like two months overdue, it's not because of me. It's because off their poor feedback, Okay, so be really kind of rigid at the beginning, saying that Yep. It needs to be here by this date and as soon as they're late, add that to the time and just kind of push that out because this is gonna look long if it pushes over to the next year because it is gonna add, like, another couple of weeks in the middle over Christmas. So we should have been handing this over kind of mid December. And before you know it, it's February and they had in the head middle of December. So just be very care about timelines and deadlines. Now, again, this is my process. You might be working an agency and that $4000 just wouldn't cover the rent. So you might be starting in the 5000 and ending in the $50,000 mark, depending on how large the projectors. You might be just getting started, and you might be taking on work a lot cheaper than that UK. You might be doing designs for 1500 or even 500 to get your first job, but I figured I'd show you where I met as a freelance UX designer. So you've got some sort of idea off pricing and timelines and briefs. Let's have a quick look at the persona that I got made. All right, So this is the persona that we built for this project now, and the initial brief can avert a rough outline. What we've done since then is some UX research into who this person is most likely to be. The nice thing about this particular client is that they have lots of Google analytics and have a strong YouTube channel. So it's easy to get in the N. C actual hard data about who's using the channel, who's using their product and then talking to the client about who this potential person could be. Okay, so and then what goes into this will really depend on your project. So we've given this guy a name. Peter. That's a fake stock lie, every image. But I feel like it represents the person we give men age his job title in a place he lives . Okay, now what goes in him? What you really want to do is be able to communicate. What, after reading this? No, the person. Okay, So do you need to write down the toothpaste to uses or the carry drives? Potentially, but potentially not if it's a Prius, or a Ferrari. That's kind of an indication potentially what kind of person he is. Okay, so some of seeing some personas that just getting to us like my new should detail, Like it's what you want in there is just so you can have enough in here to kind of walk away and go. I understand what he does coming from in relation to my product. Okay, so it could be short of the nurse. Probably not much shorter, but I wouldn't make it too much longer either. So have a read through this. Just so you understand who Peter is, what we're doing. This project, what have done for you is in the exercise files. There is, ah, folder call persona template. And you can use this if you want. There's an illustrator file. You can switch out the images and fonts and stuff and use that if you like, you have total permission to use it. But you have a read through and see how Peter does things. So have a read through and understand Peter and its positions that when we're building an X t, we can make some decisions based on what Peter would want not what the client wants and not what I want personally. All right, so that's the brief M personas. Let's get on to the next video. 5. Wireframing low fidelity in Adobe XD: All right, So we're going to start wire framing and ex D now. Why Framing or low fidelity? Gay is the term used often. High fidelity just means the vision with the fonts and the colors and the images. Okay, that looks exactly like the final product. The wire framing or low fidelity just has, um, has one fund, one color, real basic layout. And for me, the wife framing is the probably the most important part. That's the bit. With me is a designer ice. That's where my value comes from. My guess is working out the user flow. Okay, how they get from A to B, how long it takes, how many steps, how easy it is. That sort of wide framing is were. Most of the value comes from for me as a designer. Even though I love the high fidelity stuff, the wife framing I find is quite important. Now, do you test the wire frames? I I use wire frames to send to the client said they can check it to make sure that everything's in the right place, but I don't use up for actual testing for actually in users or the personas you can I find ? I'm quick enough at getting the high fidelity versions ready, protesting, and I prefer to test with those with the right marketing material right, imagery, funds and all that sort of stuff in there. See you. The other thing is, in terms of wire framing, I'll do them by hand first. Like I'll use something like this in my book real quick. This doesn't go to anybody but me. Okay, so I'll hold it up the microphone and disappears and you can't really hear me. Um, hopefully you can see that maybe you can even hear me, but yeah, it's just really basic outlines these pages and pages of these and I just go through and kind of flesh out the ideas We everything needs to be going and then start building a next you just quicker. This way you might prefer go straight to computer. That's fine, too. Yeah, so let's actually go get started in X T. Now look at some of the U Y. Kits. Finally X t time. He keeps promising it, I promise. Next video 6. Working with existing UI kits in Adobe XD: Hi there in the sectorial. We're going to get our page started here. Gonna get a page. We're going to get it toe, have a navigation. We're gonna pull it from some of the templates that are built in from 60. Yeah, And make it look like this. All right, let's get into it and get started and X'd. All right, so we finally got X'd open Now, first thing we're gonna do is we're gonna download one of the templates that X'd has helpfully made for us. What is going to pull parts from that as we work? Because, yeah, they just made some pre made wire frames that we can steal parts from toe help speed up, out process. You can do it by downloading. Here. It's his. You white kits is an option. This is wire frames. Or you can go up to file your y kits and click on them here. And this will just open up be hunts and several of them gay in. And he can click on download kits. Now, I've already downloaded them for you and put them in the exercise files. So if you've download the exercise files will be there ready to go. It's jump back into 60. Listen here. Next eve, it's open that wire frame, got a file go to open and the exercise files that we've downloaded. There's one and they called you white templates. So I've downloaded this wire frames here, and we're gonna start with web now. Why were setting with Web and not mobile? This is totally up to your project. Gay al Brief is quite specific. The main targets are going to be using Web the women to face. But if you knew that your project was based primarily for either mobile Web use or maybe an app. Okay, you would start with Mobile, But we're gonna start with Web and just open it up, all right? First things first is navigating and zooming around. On the easiest way is holding down command on a Mac or control on a PC and tapping the plus key to zoom in and the minus key to zoom out nice and easy. A couple of other navigation techniques is holding down space. Bar K gives me my hand. I get to kind of move around K if I zoom in a little bit holding the space by click, hold and drag okay with my mouse. And that allows me to move around the documents. Now, two other little useful navigation short cats care before we get started is holding down command on a Mac or control on a PC and tapping the one key gave that old zoom in to 100%. And this is where we should be doing most of our work. Okay, um, being too far zoomed out and too far zoomed in gay and making kind of decisions on font choice and size. It's not that useful, because I use is our only ever gonna seated 100%. So it's great to be at this size a command one or control one off. You're on a PC. Last one. I promise. K is my favorite is if I select this element here and go command three or control three on a PC, it zooms, and it just kind of highlights that one area I find that super useful. You do it the whole outboard as well. So you want to see this outboard? You can click on the name along the top command three, and it will center it in your view. All right, so that's the basic navigation. What we're gonna do is create around document now, so we're going to go to file. We're going to go to New. There are some defaults along here. Okay, You had this little drop down to find other options. It really depends on what you want to do. I like starting websites with this. That's 9 20 across by 18. 80 high. You can type in a custom size over here, or if you obviously working with iPhones IPADS. You can use those by default. Okay, so I'm going to use this guy up, Okay, So we're gonna save this one, go to file save, and we're gonna put all of our files for this class onto a desktop. I'm gonna make a new folder, and this one's gonna be caught. Instructor. It's cute. And we're gonna call this file instructor H Q. We'll call it a prototype chemical. That's my V one. Okay, So the first thing we need to do is its name, our outboard. See, just double click the words over here. We're gonna call this one home page. Now, if you're a person like me who never named your layers and photo shop or illustrator. You've got layer like 57 gay and got no name naming your art boards here in X t become super useful when we stop prototyping this later on. So yeah, I get in the habit. The other thing. I'm gonna do Zynga's amount, K and I make my apple quite long now because I have nothing on my page and nothing selected . I just default to the outboard. There isn't outboard to okay that you could use if you want the official. But because I have nothing else on my page, I can just easily update the upward you notice the here this dotted line gave this is just a nice little visual guide here to show you what the initial view port is or say above the fold, This just means everything above here is the stuff that people are going to see first on your web page. Everything under here is gonna be stuff they have to scroll for. So here is where the magic needs to happen. You need to do. You're selling your main convincing you call to action all above this dotted line here, you can adjust this initial viewpoint if you think that is too tall or too small. Alright, So first of all, we're gonna go and steal some parts off that template case. We're gonna jump to it. You can get a window and trouble between them here. So that's jumping between this one and this one. Okay, it's up to you. I use command tilting on our mech till these the we'd wave key above your tab key. Okay. And on a pc, I think it's controlled Tab Just tacos between them. So I do a lot off jumping between that way. Okay, So what I want now is I want one of these navigation elements, so I was gonna pick the one that closest resembles my hand drawn mock up, And it's probably this one here, so I'll click it once, go to copy. So it copy, and I'm gonna jump across to my design, okay? And I'm gonna get a paste. So, uh, what I want to do is I'm gonna use my black error, and the nice thing about I'm gonna try to get in the center, but you watch x deep. It's clever. Kind of knows the center you can see that picks up, stick it to the top. Now, when we're designing this, I picked a size. Okay, if I click on the edge here, we cook on the names. The easiest way. Okay. Gives me my documents, sittings, my outboard sittings, and we've picked 1920 across. Okay, I never want to design a site that big, especially from my wire frames. Okay, I picked this size because I like to use the same size here, 1400 across to do my website. But I like to have these extra injures here just so that I'm not trying to design within a tiny box. This is here is just kind of buffer area so that I can see what it looks like on potentially a larger screen. So what I also like to do is extend my never long because it's gonna be across the top. And so what I'm going to do, right is good. Ungroomed this right click new seal a short cuts here. We'll go through more Marshall gets as we go along. But on group that shortcut is the same as a lot of other adobe products. Okay, so I've got this I'm gonna copy it and paste it. Why? Because I want to use this. Just a czar gonna zoom out I'm using. This is a kind of a guide here to show me where I should be designing inside off. Okay. And what I'm going to do with it, I'm gonna grab the filled and I'm just gonna lower the capacity of this full right down. Just so it's just a za hint in the background there, OK? To send me with my boundaries out. What I'm also going to do with it isn't gonna lock it, so I can't move it. Okay? With it selected, you can either Right Click and Luckett. Okay? There's a couple of ways to getting toe lock. Okay, there it is. There. I use the shortcuts command l on a Mac or control Eleanor PC. And you just get this locking icon you get unlocking easily by clicking on it. Okay, so that's giving me my width and just means I can't move it now. Okay, conflict it, But I can't move it. One of the things I want to do is that it's actually above everything here in my layers. OK, so when I try and click on my navigation, It's in the way. So I'm gonna click, hold and drag him So he's at the bottom. You can see there in your layers panel. He's locked if you can't see layers took on this little icon here. So I'm gonna cook on this and I'm gonna hold down a little shortcut. Hold down the bulky on a PC or the option key on a Mac and drag one side. You'll see it kind of goes out both ways. Doesn't really matter how you drag it out. But that's kind of what I want to get started. Okay, I've got a kind of guide here to know where the syndrome, a Web ciders and my navigation goes all the way along the top because that's how I plan to have it on my final result. And it just looks kind of nice And my wife frame All right, So one last thing before we go is that over here in my wife frame que the template you might have noticed and already fixed that you might have fonts missing. Okay, click on the button and you can sink the fonts using type kits nice and easy. Don't ignore it, K. And if you can't fix it, don't stress. And it will work just fine with this tutorial. If you can't find the fonts, no big drama. But if you can fix those up and you when will move on to the next video? 7. Working with type in your XD wireframes: Hi there. In this video, we're gonna look a type of next day, we're gonna update some of the Neve here. We're going to talk about what fonts we can use and can't use. Will do. So my lining and distributing and we'll update the logo here in the top left Exciting. Not really gay, but some essential stuff. So it's get in n do it. Okay, so working with type next is pretty easy. We'll cover more specific kind of Web funds and stuff later on when we get into our kind of high fidelity final version. But the basics for the moment is I want to replace the 60 without business logo. Okay, so I'm gonna slicked on it and deleted scrap my type, too. Now, you might be inclined now to start using the branded logo for the company. It's not handy and wire frames. You've got to keep it real simple. Why frames and then let your creativity run free in the kind of high fidelity versions or the final versions? I no, myself that I get quite up too much in, like putting a logo in, and you think I'll just use the brand color for the navigation. Then you start picking funds. And then before you know it, you're fully designing a wire frame, and it should be a quick, easy process. So I'm just gonna put in Instructor H Q. Said the name of the company and I'm not going to worry about anything except that color ko here, Phil, just that it could be seen. So the basics are over here. You've got font size. You've got your fund, obviously, and the different sizes or the weights. Andi, you've only got some basic type. Casey, you've got the spaces between letters. Case. I could open it up. Maybe 200. Okay. And I get some more spacing between the characters. I don't want to be doing this at this process, and this is the leading the space between the lines. Now one of the handy tricks when you are working with fonts is this thing. He is not like a drop down. You actually type it in. So it's easier sometimes. Just a click. Hold end to this little dot here, grab their black error, so there's little white dot He does a couple of things. If I drag him down, he does the phone slides up and down, which is cool. And you also notice if you just below it a little, but you can start rotating it. Okay, So my advice Those did not rotate any text in a website or APP design. It's just quite hard, technically to get type to rotate. It seems like an easy thing to do. But if you've ever doubt with websites before, actually, rating type is impossible. So we have to turn it into an image. And it's a big drama, so trying to do that. So the other thing is, when you're picking sizes, okay, you want to be at 100% you can see I am it 75%. So I'm standing, make some decisions on ire. That's big enough. But when you're not at 100% gay, you might make some bad decisions. So if I go in, remember command one on Amec control one on a pc. Okay, Then you can get a sense of okay, These are the actual sizes that uses they're going to see. So I feel like they're quite small, and this is quite big, so I'm gonna shrink this down a little bit. What is it? That 20. So I can either drag here, obviously. Type it over there. I'm going to stick to our really kind of consistent font size. Okay, 16 is a really standard basic except the biggest front that you want to be using. So I'm gonna click on these guys as well. Actually, I'm gonna be adjusting a few of these, so I don't want I got three of them that I want. Okay. I'm gonna slicked all three. Actually, no, we just do one and then duplicated. So it's gonna use my black, our just leaving them, and I'm gonna click on this 1st 1 sounds gonna be example. Okay? And I'll make the font size up to 16 to match the other thing. And I want a couple of them now. So little trick is you can slicked it and go to edit, copy it and paste gay or control D on a PC or command Deana Mecca. That gives you two of them. I find the easiest way, though, is with your black arrow. With its selected hold down the option key on your neck of the old key on the PC and drag it across. You'll notice that just as you drag it holding that key down, you get a duplicate pricing log in. Member of pulling these from my kind of features. These the main things that need to go in. OK, And in this case, the last one is sign up. Okay, So what I want to do is I probably want this guy to the edge here, maybe just inside a little bit. And I'm gonna hold shift and select them all so good. My black are holding shift in, just clicking them each. Okay? And actually, I might drag this one out a little bit further. You can drag them and you watch. Can you see the spaces between them? Start lining. I see that pink dot there so you could do that, then they're all equal. Okay, it's up to you. Or whether you select them all holding shift and uses option up here that says, See this fourth option and he has his distribute horizontally just kind of like spritz them all out. Now the other thing you need to be doing is like me fighting with yourself not to go through and pick a nicer font. Just a nicer one. Gay and maybe using uppers and lowers and just want to keep that out of the moments. Want to be this really clunky, functional wire frame? No style as I go through and line them up nicely, E. Okay, so there's only so much you can ignore. All right, so that's gonna be us onto the next video. 8. How to create forms checkboxes buttons in Adobe XD: Hey there, in this video, we're going to make some input boxes and some chick boxes and a button on. We'll also look at creating Alphas character style. So let's go and start creating now. Okay, So the first thing I want to do is I'm gonna grab the rectangle tool and just divide off a bit of space. There's gonna be my on boarding box, okay? It's above the fold. It's my most important. It's asking people to kind of become a member, at least test their course. Okay, So what I'd like to do is I'm unhappy with the white fill the border here. I'm gonna change a little bit to be dark. You know, I said don't spend too much picking fonts and colors. I can't help myself sometimes, but I've just picked a slightly darker gray, and I'm gonna reuse this gray throughout the course. So see this little plus button here ahead? Plus and it means that it's easily accessible. Never the same thing for down here. I'm gonna click on the navigation. Okay. I'm gonna click on the blue, and I'm gonna add that too. So it's nice and easy to reuse. What also going to do is see this little dot here. He could be dragged around for your colors. I'm gonna drag him to the top left. So he's fully white. Don't worry about this navigation the moment. So I've got a white color at least there. And a full blacks. I'm just drinking all the way to the bottom. Left clicking and dragging past that corner. So I've got at least some basic colors to start working with, so I'm going to set him back. My navigation Back to the blue. Now, why am I using Blue? It just happened to be the one that was on the template. And I'm reluctant to go pick the brand color to use maybe the green from the color I could start using. No, you could use black and white. That's fine. Okay, so this is gonna be my on boarding box. What I'm gonna do is just look at me in that command. L or control Elena pc, Actually, a bit of type at the top here First is going to be where my on boarding message goes. Um, okay. It's gonna be kind of Ah, I'm gonna make this just a large of front. Okay, so on boarding message goes here, I try not to add any kind of like, actual dialogue or actual kind of marketing material in here again just to keep it simple, given idea what the titles mean to be used for. So now, all in a text field or an input box that I'm going to go and get from my template. Okay, so here my wire frame. I was looking around, and I have found on this a form section, and then I guess it's just picking kind of the style that you like the most. Okay, so I'm gonna grab this one here, okay? And I'm gonna copy it, jump it back into my option here, okay? And it looks to me instead of entered, Okay, I'm gonna put in name your course, kind of just going over my thing that said, no marketing messages or no, like actual type. I couldn't think of a better way to describe it without actually writing the text in this case. Okay, So in terms of the text, I am going to keep everything grain. Just keep out boring consistency through the throttle. And I'm gonna add a little plus sign here by just clicking one's hitting. Plus, selecting at I might make it a bit thicker so it could be seen bold. Okay, size wise. Probably needs to be up that even. All right, Black Arrow moving position. Next thing I want is a check box. Okay? You can like dragging this thing around. Really wants to snap to stuff. Okay. Normally. Really cool. What you can do is if you finding that a bit hard is the let go of it and issues your keyboard. I'm using my arrow keys on my keyboard just to move it around. You can help shift. And you see, Eric, he's an amazing big chunks. And without it just moves in small little pieces coasts. And now I want a chick box. Okay, so I'm gonna jump back into my wire frame, okay? And there's one right here That will do. OK, really? So I got him a copy. It made it across. Okay. It's gonna be somewhere. They're great. And I'm going to double click him, and I'm going to say you sample video. I'm gonna use my, uh oh, that I'm using throughout next time wanna put and equals. Okay, Cools and we're gonna put in a button here. So I'm gonna go find a nice playing button. Hopefully, okay. And it's just a matter of looking around going There's a button there for me on group these , That's what When you're not gonna copy it, move it across, paste it. And that's why I'm going to use cane. This one is going to be saying this one is preview What I might do a selected make it scented. Now you're noticed that actually, it's not connect its group of the outside box, but it's not kind of connected, so I'm gonna on group it so that I can drag it into the middle here in terms of the font size, I've decided to go for a larger one of God here. 14. Okay, so I've got 16 and 14 so I might actually make this, but more consistent. So you you you knew you were going to be 14 as well. I feel like it's a bit of fun size. There's something we didn't get rid of them. Come now. One of the things that happens to me when I'm designing here is that you can kind of See, I find that hard to see. Both edges. Okay. I want to stay at 100%. Okay, so I'm designing at the right size, but it's hard to see both sides. You're gonna have toe Turn this on and off. If you're working on like this screen, Here's a Mac book pro gay. And I guess that's a 15 inch. So the screens not quite big enough. You're a 13 year lots of trouble and that hopefully maybe you might be working on an external monitor. And that's what I normally do when I'm not recording. Okay? I just have a mixture. Bigger monitor for K monitor that I plug in to to work from and yes. All right. I'm gonna at least make this scented in there. That looks nice. Fish. Well, the last things I forgot to do is you can skip on now. We're not getting any more exciting. I am going to a little option. And here that's mean to say, choose your file. Plus, and I'm going to use the same font and stuff as this. So what I want to do is I'm gonna actually dive into a bit of styles when I can use styles too much at this level. Okay, so with this selected okay, I'm gonna on group it. So I conflict on just this type. I'm gonna open up what's called my assets panel. So here in assets Okay, I can have something called a character style. So it's like character stars from other products, like illustrator or in design. If I click on it, it's just like a pre made size that I get to reuse really easily. So I click on him and click on him. Now they all match. And if I update this one by right, clicking it and going in it and say later, I decide. Actually, no. I think 16 needs to be used. You can see everything goes and gets updated. You can see this one wasn't part off that style. But xdd ism who drew magic where it kind of reaches into the document, finds ones that are executive same and updates those as well. So it's be useful. So actually, I'm gonna turn this back to 14. Yes. One thing I might do to make it look like a link that can be clicked is due underlying weirdly you can't do underlines yet. In 60. It's kind of envisioned one. Okay, so we're gonna cut a little slack. Bots kind of one of the important ones are gonna get the line toe and fake. And underline came and to kind of indicate a bit of hierarchy between that being the most important. And this, being like that kind of Nick's bit, I might actually use a slightly different size 14 and justice in can. They can go underneath so they can use the example video or choose around file. Now, when we get to a kind of high fidelity version, I'll be able to kind of show that a lot more and clearer kind of fighting with them. Like, I really want to spend some time making this look a zone option. Like a second option. But hey, ho, we're going to leave it there for the moment. All right, so let's get on to the next video 9. Free icons for your Adobe XD UX UI projects: Hey there in this video, we're going to go and find icons. You can see the video. Here's a music icon there. There's an image one. We're gonna go and show you the main places to go and gather consistent icons on this three main places. And then we'll lay out this real quick. Okay, just a risk. The page and we'll track in our footer. So let's go and do that now. Okay, So I want some icons, right? And I'm looking at my kind of wire frame here, and I've got a big box underneath that's gonna have this order playing video. This how to video. And underneath that there's a big infographic. So I need a couple of icons. I need a video. I need like, a mute button. And I need a kind of ah, icon that shows an image because I obviously don't want to use specific actual images and specific videos. A little side that you can actually put videos, playable videos inside off 60 at the moment. Okay. And so we want to. My cons There's a couple of places to get them. One of the easy places is supplied by Adobe. You click on your creative cloud logo. Okay? And it's up here on a Mac and its bottom, right? I think on a pc. Okay? And you want to go toe assets and then market. Then click on this little search icon and then type the icon. You're looking for em instead of doing the video fair sort of image because I couldn't find a good video in here. Okay, But you could find a good image version. Okay, so that's a reasonable, consistent. Like what I had expect as a placeholder for an image, you can click on them. Check that this one's a victor graphic scalable vector graphics SPG. If you're not used to s P. G's, they're amazing. And a new they're like atheists is from the olden days, they're interchangeable. But the victim, which is lovely click download and where my again download it to. I'm gonna make it new library for this project. Gonna call this one instructor. Instruct. Uh h Q. Okay. The name of the company hopefully is downloaded into their okay, You can see it's sinking away here will take a little sickened on if I jump back into X d. Now, if I goto file over my CC libraries. That's where I've saved it to. You can see have one unsupported element. OK, so that's a bit of a problem. I guess 60 is new gay and it doesn't support is Fiji's yet. Okay, if you downloaded a J pig or PNG, it will work. But no. S P G's at the moment. There's an easy kind of work around, and I'm sure that working hard to update that on its close that down, I find it's easy just to go into something like Illustrator. Okay, open up your CC libraries from here. Find the library that we're working on. Instructor H Q. There is a double. Click him, then select him copy and I've just gone edit copy and an ex deep. A step, no big drama. One thing I want to do is one change the color and you can see because it's grouped A can't see the colors so you can ungroomed it. Okay, I've just used a shortcut command shift G on Amec and its control shift G on a PC or up here under one group, So I've got a selected I'm going to pick colors, says one of the icons are want I'm gonna shrink it down now. If you hold shift while you're dragging any of the corners, it will do it proportionately now, without shift held down, you can see it's kind of a bit Squidgy. Okay, Another nice thing if you're holding shift, hold down Ault as well on a PC or option on a max of shift an option together while you're drinking a corner and it goes from the center, it's getting mind more proportionate size. There's one. The icons are want any tomb or treat to other places. So one of the more useful ones is on a website here. It's material toe Io case. This is run by Google and if you go to slash icons Okay, there are bunch of cool icons in here, and the cool thing about them is that they're very well considered and used a lot through, say, the chrome browser like we're looking at now, as well as through a with the android phones. Casey, use the search icon here and I'm gonna put in video and you can see that's not the one I want. That's the kind of thing I think will work for this or say part of that. It's up to you what you feel might work. I'm gonna click on this one. And what you can do is you can pick on what kind of color you want to download. Que and the size. Okay, it doesn't really matter size because it's going to be an SPG format member. That victor stuff. That's awesome. Okay. And you click on that and it will download an SPD for you. If you want a pin J you can get from here. I've downloaded them for us already, K. And they're in your exercise files. So what you can do is you can go back into 60 you can get a file and you can go to import okay. And in their phone, you exercise files, find icons, and there's a few in here that we're gonna use. I'm going to use this one is his. I see Whip Cam Cayenne and Click Import and got a webcam again. I might have to run group It came just comes down as a nice little group Gay with its selected. Now I'm gonna pick that blue. I'm probably going to get it the size. And now I'm gonna go find the last one at my last place, K, which is my mute icon. Let's go check out where we can get that from. Okay, So this is the last place. There's millions of places to find icons I know about icon finder dot com is a really nice place. Hey, in here, if I want a search for a mute button, okay? And you can see there's and paid options, But you can also say, Victor, I want free, and I want there to be no link back for commercial use. K, I often go to those ones and you will find lots of options in here. Nothing about the site is that often you can find a nice, consistent groups to say. You decide you like this style. But if I click on it, you'll notice that it's part of a larger group which can be super useful. OK, but in that my case, I want something quite simple. So I'm going to use who this one. Yes. Get on with the SPG option and I'm gonna download it. OK? I've downloaded one already, okay? And we can go in, grab it now, but those are the kind of like three places you can get it from the adobe market. You can get him from material dot io slash icons or you can get him from Icon Finder. I find out you have to use all three of those places to find everything that I need. There's no one place yet that has everything that I want. Let's bring in. The last one is going to get a file. I'm gonna get import. There's an option in here called Volume off. I see volume off. Okay, actually, slightly different one than when I looked at before on group it. Click this stuff ineffective blue icon now going to start using these in my big squeeze here. So let's do that. The amounts And I want you, my friend of Unlocked it K and I want this part as well. So I've hold shift in. Click both of them. Now if I hold all while I dragged them, we get these two big guys here, so there's 12 And then there's another one down here. My little mark up there. Great. Ah, this top one k is the video one and this one. He is the image groupies to get them doing great, Dan. Okay. And what you might do now is actually just fast forward to the end of going to the next video. Because now I'm just gonna go through, actually put together these things, so not super exciting. K, it's up to you. It's gonna be l like Porto playing order playing how to video came But that in the middle here and it's gonna be like this, but it's gonna be muted to start with. That's why I wanted this icon. I'm actually gonna fill it with whites and grab it again. Hold down shift. Here's my Eric. He's to move it across. That's kind of my solution to trying to show that let's put in a small, muted cup. All right, so that's that guy. But I'm in the middle. I'm making sent it great. And now this one here is something similar, but they still line up, and this is gonna be my infographic for the ecosystem now, because there's not go actually going out to use a testing. We don't have to be explicit with what everything is. I love wire frames, getting the ideas down, but not the whole user testing that should be done with, like, a full, high res version. OK, so would be people who argue with me about that, though. And it's all right. So you you on boarding message. So this one, he is like, two little list. So what I'm gonna do is kind of sectioned off to show two pieces. The slide here, it's gonna be step by step list for marketing yourself. Okay, This one over here is going to be the same. But this one is marketing your course line to separate them in the middle. You can go there. You need to be actually in the middle. Handel used to have these images holding down all while I'm dragging option on the Mac. This one here is going to be for my dashboard. Okay, so there's going to be example off train a death sport. Okay? And this one is a little special, as in, I really want to jump out to my wife frame. Sorry. My wife frame and find there is call to actions. There was a bit in here with graphs and stuff. It is down here pressing in table selection. So I kinda half one to start grabbing some of these power charts and stuff. But I still feel like there's probably too much detail in these for what I need at the moment, so I'm just going to keep it kind of simple. OK, I'm going to keep this from my youth. My example of user dashboard gains Gonna be the image. Okay. And over here is going to be my download of the APP. Okay, So, Ugo Slick, Maura and download. We just put an iPhone app. There's requested by the client, so we're gonna make sure that gets included. Last thing down here was going to be a feature list. So I'm just working this one and as well, This one here. And this is going to be my feature list. Now, in this case, I needed but a body take. So I am going to grab some Lauren Epsom. There wasn't anything built into X'd just yet, So you could either using design or do what loads of people do and go to lipson dot com. Can you spell it? Listen dot com The nice thing about this site, it's ugly. But you could say how many words you want. I want actually, just one paragraph piece. The generates at the very big paragraph. Gay. Some was gonna grab this first. That symptoms of it I'm going to use. That is just placeholder text is very common to use mixed up letting to do it can see you. I'm going to use my aerial. Gonna make sure I'm at my 100%. Okay? And actually, this stuff here 14 is too small. So there's no bullet points in extended the moment. So you can either copy and paste one from another program or hold down option eight. So hold down option on a Mac or on a PC, and just click the eight. The number a key gives you that kind of default. Use this over and over. Actually, what I might do is copy it. Just put in, uh, a bunch of them and then space him out with a line spacing over here. So how much? Make sure you go back to command one in the in line. Spacing is going to be too, for that's going to be it for the moments. So just placeholder for this at the moment. So two columns may be all right. Great. So that's most of it. One of the last things I want to do is grab a placeholder foot up from here. Okay? At the top, it was the elements, and I'm gonna grab which one and not super worried at the moment I grabbed this guy here, just copy it coming across, paste it and fit him in on group. It's hold on out like we did for the top guy or option on the Mac Kay. And what I might do is tuck this in. Now I'm gonna grab my outboard toe. Actually, I never use that photo. Actually, just don't take the edge here. And you, you're able to kind of resize it. Great. I'm gonna have to go and change this, because if you leave this a 60 a few other things, ah, client just comes back and says, Hey, that's not our address. And you run into trouble that way. Him. So I'm just gonna put in an ah, put in sample road. Some pool in California's fine. Our number is going to be There is is there, and there's going to be sample and reminders of put in instructor, I keep. All right. Anything else? I want to quickly change email address. That's fine. Subscribe to our newsletter. Sounds like something will do. Just a wire frame on this is gonna match this stuff at the top there. So we've got example, and we've got pricing Sign up. I think there's a Logan as well. Outlook in kill like there. What do you copy? Rights straight to H. Q. It's 2018 less all right, that is getting close to our home page. So we took a little bit to get this kind of chunk going. But you'll see how, after a little while, you're elements lying around that you can reuse once you've got your own kind of style for a wire frame of what I mean by style. As you can see that this one here is I find highly designed and looks pretty, and it is good, but I find has been too much time trying to make it look really nice. Where is this? You could see its ugly, but it's functional, okay, and it's not going to use the testing. It's going to the client just to kind of explain Or that if a part to make sure there's nothing missing before we go and spend like hours doing the design, okay? And spending time of the fonts and the images. All right, so that's gonna be it for this tutorial. Let's jump into the next one is a low one, huh? All right, let's go. 10. ProtoTyping adding interactivity to Adobe XD: Hi there. Welcome to this tutorial where we're going to stop prototyping and ending a bit of indirection. You can see these wires hanging around here. What happens is when I had play, I can hit preview and then close it down and go back. That's gonna add a little lemon direction so that we can stop moving around. These aren't boards and start doing some testing while we're working. All right, let's get started. OK, to start prototyping and connecting up our wire frame so we get some direction. We need to have more than one page. We've got an outboard court home page. You are a couple of ways of making a new one. You can click on this and we'll trick that. We've been using so far on this course. We hold down the option key on Emiko Ochiai on a PC and then click the word home page. Can you get us dragging across me a new one on? But I don't want all of these elements, so that's not what I'm gonna do. You gonna go to undo you can go to your layers panel and just click this guy right? Click it and say duplicate, and you'll have two of them. Okay, I want a new page to do that. You can grab the outboard tool, okay? And just click once over here, and you could go and resize it if you like. Okay, if you need a different kind off document, Okay, you can see down here, there's the apple ones that Google Microsoft web so you can click on any they say I need a knife. I phone. Okay, that'll adam toe. That's easy reading pages before we connect them up. We just need to add something to this page this having connect to. So we're gonna rename the outboard. And this one's going to be our preview option page case. When people click on this little icon here, can you gonna zoom in? When they click on this, they get to decide on what kind of preview where they see the student side or the teacher side. First up, I'm going to borrow some bits. I'm gonna grab you. No, grab you as well. And that's anything else I want. Ah, but a text review. Copy. Then click on this page, paste him. They come along for the right. Okay, so That's kind of the bits that I want. I'm gonna resize this to be something like this in the middle ish. I'm going to use these two holding shift to grab them both, OK? And looking at my kind of wire frame, My hand drawn one. I've got two of these. I want this one to say, Show me. Actually wanted both to say Show me cope And it's this text here. I'll use that kind of 16 points for the slightly larger text, okay? And and here I want to say what your students sees and the guy goes there, All right, align them so that when I duplicate him and get on here and say watch, you see as the instructor I'm gonna be interested to see, like, I'm just kind of using this language to get started, OK? And it's gonna be you That testing that allows me to kind of work out with actually makes any sins. I feel like it might know. I'm pretty sure the user tastings gonna come back and go. We get confused here, but que itself for start. The other thing I want is across. I could use the X on my keyboard, but that Germany doesn't look that nice. So I'm going to go through and here and find across. There's one there. It's handy little document, this guy, isn't it? So click on him on Group in. I want you please. And I'm gonna paste him here. He's gonna go over here, make in ST Louis. All right, so now we're gonna rig this thing up is a prototype. I got two pages and I want to be a bit of prototype it and connect it. Why do we doing it now? We're not kind of finished our wire frame. I find that's a really we'd way of doing it. Like what I need to do while I'm developing. This is I need to design it N b testing it on both of web and phone as I am working rather than waiting to the end. Okay, so it's kind of Ah, you work between designing and prototyping quite a bit. So we're in design mode and you can see what our design options if you got a prototype. This is the away. We we kind of add interactivity. What I'd like to do is, first of all, that's my home page. So I make clear that's kind of home basis. It will be whatever the previous stats at K, some in prototype, and you'll notice that a lot of the options change. They were missing a little properties panel here, but what we can do is what I want to do is when this preview button is clicked, not the text. Okay, this text is by itself or the box. I'm actually going to slick them both which that savaiko golf in the background and then click on shift. Look, both of these Aiken group them. Okay? So I'm using the short cut. But the long way is there okay? And with them both selected, there's this little option that pokes out. That is how we connect up ports. I'm gonna zoom out a little bit and gonna click, hold and drag it. It means when that buttons collect, it's going to go to this page here. Now you get some options came by default is going to dissolve. Case is gonna be like a fade going across. And there's a bit of an ease which may just makes it look nice. A cane in tubes of the motion. And I said how long it takes a cool thing about it is whoever did these annex D. They're all pretty sweet to start with, and I don't really need to change them. So let's test this thing and figure out what when you do next. So to test it, we use this little play, but not the hits his desk top preview because we're previewing a Web page. Best of preview, actually, on your laptop. If you were designing an app, you'd go straight to Mobile to be testing. Okay? And we'll talk out mobile testing a little bit later on when we start building the app version of this. But we're gonna play now, and this is like a little window that opens up, and it allows us to do our testing. All right, so now we're gonna test going to come preview and you see it did that little crossed, his old faith thing. You might not like that. You can change it and turn it off. Okay. And now here and now, I can't click on anything in case of a kind of stuck. So I'm gonna close down the preview in here. I need to do you some other. But so that works, and you can see that's connected. Andi, Another way of getting to the is the this thing here, it's his example. I'm going to use that as my button to get across but one off the problems Is that that Texas? Quite small. So it would be really common here in X'd? Two. If you've got a button here, I'm going to make a fake little button. So I'm gonna go back to design. I was gonna make a big area for this toe hit case. I'm gonna turn off the border, give it the same blue color, so it looks the same as the background. Okay? And what I want to do is make sure this sick the text I'm gonna go bring the front, can grab my Rick tango, And it's a little hard to see, I guess. But I've shift elected them both, and I'm gonna group them, OK, That means that just the clickable area is mawr instead of justice. Little text, which can be hard to click on. Okay, I'm gonna make it nice and big, especially. We get down to mobile versions of part of times back to prototype. Zoom out a little bit. I want this guy to go to the same one that really matter where you click it in. It'll jump to the right point and do we want to dissolve? Were just test and show you like some of the other ones will go to slide right. You can decide what you want to use. All right. What I also wanted to do is this little cross button I wanted to win. It clicked to go back to this page here. So why we have to do the same trick. So back to design, grab this toe, draw out something that's easier to hit. Turn off the border. Okay, I'm gonna move. It's easier to move this to the front than it is the other one to the back exit. Get behind this box. So bring him to the front, find my parks in the little bit. Heard I'm using my eric eaters to tap it around, getting sick on both holding shift to click both of them group them. And now I've got a prototype. And what you might find is that dragging dropping is coast you consume out and then g o and drag it here, and that works fine. OK, but sometimes it's easier, actually, or I want to undo that. Like Under is not working. Okay, The normal typical under When you're in prototype mode, what you can do So you want to break that. Just click on, drag it to no man's land, and that will kind of like disconnect it. So I find often when I'm in this close I don't wanna have to zoom out to try and find the outboard use. Click on this and say, Actually wanted to go to, uh in this case, previous outboard woodwork war home page, caring in together. But go back to the home page and you'll see it jumps out like that already. Perfect. Okay, Either way, you want to do it. And so let's go improve you this now. So let's go play, okay. And however, now we can click on this. Across the outs gave a little slide left, which is weird example. Yeah, I don't like that sliding. It works, but I get confused, Kay, and there's a special time and a place mainly through phones where the slide works, not through websites cause no websites do that slight thing. It was just weird and we're gonna go turn it off. The other thing is is that this is a separate window right now. I'm working on my laptop of the moment for this training course, But what I do when I'm working normally is that I've got a big kind of four K monitor that I work from, and I have my laptop on the side of it. Case I like working from two monitors. So what I normally do is I've got two months is right. I've got this laptop gay, and I've got a big monitor that I worked from mainly. So I'll have them both open next to each other, and I'll have this panel on one of them normally in my left top, and I will be working on this part in my main big monitor. So the cool thing about it, it's a live update. So as you move stuff in here, what's this you see as a moving it? This thing update. So I have this open 100% of the time, Okay? So I could be making adjustments, seeing what it looks like at 100% and be playing brown with the interactions to report a type. So I have to keep heading that play button. Okay, Anyway, I have toe close it down and open it back up at the moment because I'm just working on the laptop. What I would like to do is example here. I don't like the slight. Right. I'm just gonna go to dissolve. Probably just needs a jump by dissolved. Looks nice. Okay, I'm putting this little dot Hear him took on either side, and I'm gonna go to dissolve as well. Awesome. Eso That's the basics for prototyping. Okay, we're gonna go through, build more pages and prototype more as we go along, but that's an introduction to it. 11. Production video student views: Hey there. This is our protection video. What is a production video? It's where I need to make some stuff for this tutorial to carry on. And you can either follow me or skip it, because we're not gonna learn anything particularly new. You see some of the workflow that I go through so it can be interesting. Or you could just skip onto the following video where we learn some new stuff. All right, in this particular video, what we're doing is we're going to create this page and connect that button. So that jumps to this kind of cross button to go back into this. There's nothing really going on here because the client, in their brief, has asked us not to work on student to you. They've already got student view. They want us to prototype the trainer or instructive you. All right, let's get into the video and stop making it. Or you can skip it and will only be a tiny little bit offended. All right, go down. Okay. So first up we need in the page. I find it is easier to hold old and just drag that's across. You get a kind of duplicate. I love the pink boxes. The automatic spacing getting a renamed. Listen, this is going to be student view, okay? And I'm going to keep only a couple pieces out of here, so I'm gonna select all of this. You gone? Don't the button as well. The text and the clothes. Okay, end. And here got some tix. This is what the students sees. The front end of the platform. Okay, so remember, the client is us us not to design this. So we just kind of like leaving it in here so that the buttons got somewhere to go, and and what I might do is because 16 forget. Yeah, that's fine. Old size, and I'm gonna put across here What I might do is actually tennis into a bigger button, as in I'm grouping it, and I am slicked ing on it on grouping is not working. It is totally working. I put the border back on it and try and make it into a perfect circle. Okay, Is this way is toe link the's not to link them is just make sure that the same heightened with all right. Ah, it's like both of them and horizontally aligned, very clear line group them co. So this is going to be that's all it's gonna be on this page, not much going on. And I'm gonna make sure it's in the Santa, Ok, And now let's bring it up. So we're gonna go to prototype. I am going to do a couple of things is that when this button is clicked that show me, I'm gonna group it with the blue box and you can group while you're in prototype or design , which is kind of cool. And when you click that you're gonna go to this page here and what we're gonna do, you dissolve. We're gonna continue on with that. And when they click on this cross button here, I'm going to get them to go back to probably back to the home page. All that preview option, probably Home vigil. Test this to make sure let's do that quick test to see where we're at. So you click on a preview and you can see what the students sees. And this is what the agencies close it down back to the home base. I think that's probably the best way to do it and That's why I like having prototype open and working as you're developing, not waiting to the end. All right, so that's gonna be it for this one. That's close this one down to get a full view, command zero or controls, you're on a pc. All right, let's save it. And yet onto the next video. 12. How to make use symbols in Adobe XD: Hi there. In this video, we're gonna look at symbols in X D. Okay, so why are they good? It's because when I've got a symbol you can see here, but the navigation used on more than one page. And when I update it, they both update and change, which is super helpful for things that are reused across locks of documents like foot IDs and hit its Let's go and look how to create those now, Okay, To create a symbol, we're going to you reuse this both this hit and the footer is gonna create new page. And there's lots of ways I keep showing you different ways going back to the page two and click on this, which is my default. But I used the beginning. I'll drag it by dragging the name underneath and give it a name. I call this one the instructor. Uh, that's what Okay on. And I want to extend it out just a little bit. So remember the benefit for using a symbol is I can connect them all together. And when I make updates to the navigation say, on this home page here, it'll update for ALS instances of it cake. So I am going to zoom in him. What I want is I want all of this. I was starting up here in the gray area with my black era. I'm just clicking, holding and dragging. Just said, of course, it's, like, top little bitty bit. Okay? And what I want to do is you can see I've selected lots, but I've also selected this, like, blue thing that I'm using to kind of give me my wits. So I'm gonna hold shifting, just click on him to get rid of them. So I got everything along the top here. How do we know I kind of drag it off to Chick. They all came along for the right. So what I'm gonna do is you might be on your layers panel. Okay. You want to go to this top one here? Okay. The SS panel within here, Something called symbols. Click Plus. And that's it. That is now a symbol that I get to reuse. Okay, so let me click. Hold and drag it, okay? And that's useful, I guess. You know, I've got a nice little thing like it to reuse, and but I could couple of them placed a bet, I guess. And what's really useful is now if I have Clan comes back and says, Actually, you've spelled log in like you. Some people use logging is one word. It should be two words. Okay, it's up to you. But let's say we've been convinced it should be log space in, Uh, so we've done that came, But by default, it actually becomes a unique symbol. So this one, your peer has not changed yet. So what we need to do is right. Click this fellow and say update, Will symbols. Okay, it updates symbol in the library hanging after zoom outs. This one here. Come on. Three. To zoom in on it a bit more and you can see it's looking. Okay, so there is the perk for symbols. You get to link them to this thing so they're easily drag out and reusable. But what's really superb, useful as you adapt it one and update them also obviously good for navigation, gay. Anything appears on all the pages. So I'm gonna do the same down here. Great, my friend in a shift click this guys have only got the selected. Just check that I've got it all, and I'm gonna get symbol. You can't name them yet. Gain The icons are a little bit small for this one. It's OK. And is this the right page? It is dragging on. Come here. And there you go. Okay, so if I update one now, they're both update. All right, come. Things I want to do to finish this off is I want to put that big blue kind of stripe in the background, so I know the edges up. So you copy. And over here, paste wrong one. Okay, so I want you and go to unlock it. Copy it, lock it again and then come over here in the stash. What have you had paced? The cool thing about it goes perfectly where it should. OK, the only trouble is it's probably on top of everything else. Okay, so I was gonna right click and say, send to the back, and then I can eat the use command. L or Control. L I can right click and go look all right, because being my boundaries, what I need now is a left hand menus. I'm looking at my hand drum wire. Frame him Okay, so I want that's left. Never. And I'm gonna jump out to this thing here, and I gotta find a left hand. Nev. Where can I see one? There's a navigation over here. Looks good. It's gonna be my starting anyway. Kills. I'm gonna grab you. Awesome. Copy it. Dragging across, paste it. And that'll be my starting for this one. And ungroomed old causes a few things that I need to do. I need to put you to the bottom. We'll have toe tidy that up in a little bit and I don't need the way 60 there. Give me a quite hard click. Okay? I do want the word dashboard, so I am going to probably do you. You do. You do. You movie over the top. I am going to make this with dashboard, but I'm going to use my 14. That's 75% bad habit. Gotta be 100. So you could do your font size is that it was gonna be dashboard dashboard and I will make this bold. Go underneath here, actually, make that 16 using 12 and 16 to kind of differentiate heights. Now what I'll do also is great. My talkto clicking here. I've got some text for this is the ticks that we're going to use with my Yeah, mumbling now, because I'm just filling in fronts. And to be honest, if there's going to be anymore genius in this class, it might wanna hang around for, I think about of genius. OK, so I'm just putting these in. What I might do is just put the little dots in the front to make them look like something you you I mean, But there I am, putting in its holding Holt and heading eight. Option eight on a Mac. Sorry on a PC, because this doesn't have bullet points to start with Costa dashboard you for the different things you can choose. Awesome. And one last thing that's on my little hand drawn, my friend here is, um I've got that little ad from the home page. Now, there's not a really easy way to jump between pages. Okay, You can use your layers panel, go back to here and go back to home page. It's not that great. I don't think, and hopefully one of the upgrades will give us a feature like that. So here, Marshall White come back for this, but it exploded. So we're going to use it, and it's going to here on three. A little bit more paste. Okay, It's going to go in this little area here. Now, I think this needs to be bigger, cause I'm gonna have longer days than their differently. Come a little download the app thing. Maybe even smaller. There's actually zero genius coming. All right, The last thing we're going to do is because we're gonna use this course, all of the instructor pages. We're gonna turn it into a symbol itself. So it's gonna drag a box around all of this, De select the lighter blue color and say it simple. All right, that's going to be it for this video. If you've waited to the end, you are awesome. That got a bit painful there at the end. I know. Um, about the next video is gonna be awesome. We started doing repeated grids on my goodness. It's awesome. Let's go and do that. Now, In the next video hiding 13. Using the repeat grid in Adobe XD: Hey there. Welcome to the best video in this whole course, Cates, about the repeat crit. I love the repeat grid. It's got a lame name. It should have a super exciting name, but it doesn't. Okay? And what it does is you draw something once, and it repeats on favor. Look at that. Okay, Same with these. We're gonna make this course list, and it shrinks and contracts and just keeps adding more and more ever so good. I love it. Let's go and learn how to do it now, in this video. Okay, so we're gonna be using the repeat grid on our dashboard here. Okay? We're gonna draw out a box for owl and where we're going to go. The rectangle to the rectangle toe and a drive box roughly about that sort of size have kind of, like three stepped across. And I'm gonna add a bit of dummy text type in stets, and I use my character style. Okay. I might actually use the 16 for this one. Cases can have stats, and there's going to be a number in the middle kind of number. Sure. Yet so probably dull. Assigned to start with. Put in 40 thousands. This is gonna have things like the monthly recurring revenue. How many visitors on the side How many sales this month versus last month? Also, the stash. 40 steps. So I'm just gonna put this in, trying not to design it trying. They're trying not to. Okay, so just some basics. So you and there needs to be a little a little bit of explanation. Text on the bottom thing I think will steal that from the home page. This is just describe what's going on in this particular tile. All rights. Then we g o paced. Yes. That looks beautiful. Is gonna go in the middle. There will go in the middle. Let's do that. It's even select them all endure properly, then. Okay, so we've got out tile. Actually, the needs to be like a little Seymour button case. We're getting a little plus, probably in this in this top corner here, So you can kind of click. Not sure if I should be the three little dots K or the never sandwich. Not probably. Marshall will decide in user testing, and so I've got my tile, so I'm gonna select all of these parts okay. And this is the medical button here. Repeat credit should be Could I know something more amazing? The amazing button or something? So I click on this and look what happens. Magic just kind of, like duplicates it, which is cool, but it's him or some like that. Okay, So I'm not sure how many of these were going to actually have, so I'll do. I'll do this. Mini on dso The things you can do to do adjustments is you can obviously see these pink things appearing between the lines k. I can drag those out to expand them or contract them. You can go Negatives. Okay, so they're actually looking okay the way that they were before. So we're leaving like that. So the repeat grid will and obviously duplicate them. War gets nice is I could grab the type to It can actually make these quite unique. This one might be 50 k OK, so it might be to do with their numbers. Now you can adjust. See that I could adjust the numbers. Okay. I'm gonna actually make that centered, so I'm gonna grab that, make them more centered. OK, but if I start physically moving them, they're all connected. So it's kind of the best of both worlds. I get to go through and actually put in different kinds of data because I'm just a kind of represent the different things. And I have full control over. Like, if I wanted to leave the actually delete the plus button, I just deleted off wine, and they all delete if I add one K, If I decide that I actually want to add a little thing to this guy, you'll notice that they all get it. Repeat, grid is awesome. Okay? And we'll leave that there, and I want to show you one last amazing piece off feature for the repeat crit is that you can work with images as well. So what I'm gonna do is I'm gonna build out courses Page, which is the next page on this list. And actually, what I'm gonna do is that I am going to to speed it up because it is nothing new gay or just make a new page and build out the first element. So let's speed through this. Okay, Taylor, take it away, speeded up, and I'll see you when we're done. - Okay ? So here we are now kind of course page. So I'm going to slagged everything. I am going to go to repeat grid and just like we did with the trainer thing. I'm still amazed by this every time I use it's amazing. So let's say we've got this many courses right on The image thing I was referring to now is probably my most exciting thing to show anyone. And I am actually in our exercise files. I'm in images, and I have found all our course images. I'm selected them all. Okay. And the easiest way is to be able to see the find a window or if you're on a pc, have the window open and just drag in from there into any off these blue squares. Ready for the magic. Oh, my goodness. That is magic. Okay, I am super excited by that. Go, sir, and just kind of replicates them all the way through. Okay? Yeah. Love it. Repeat crit. It's pigsties. Magic weapon. Okay? And it means that I can still have, like, a bit of control. Remember, I k I conflict on here and I can find my grid's here, and I can open and close. Thies say that I want these kind of, like, banged up to do that. Well, maybe just a little bit apart, okay? I've got a little bit of adjustment and say this checklist here, I need to go and change this to the black or the gray K. Easy to go and object. Now, can you do a text? Yes, you can. Okay. Eso in your example for you just need a text file. Okay, Like this one, he has got a bunch of names in there, and he's gonna make sure it's neither a dot txt or rtf file. Just something really basic. Nothing that has any formatting like word gay or a pdf. So just a plain old text document and the heat is click holding. Dragged the actual document itself across one of the titles and bingo. How cool is that? So I love at the repeat grid, and I couldn't leave it later in the course, especially these images, because asked us to special. But for this actual wire frame, we're getting too detailed in the case, so I'm gonna have to go through and undo to get rid of all these images okay and go back to it was just old plain Jane. I should probably get remove this with here and just put in sample course. All right? So that is it for peak grids. I love them Butts. You are probably sick off me going on about them. Let's go on to Mawr. Off the awesomeness in 60 and another video. 14. Mocking up an App in Adobe XD: Okay, So in this video, we're gonna look at building the iPhone version Aly at version off our product. Okay. And then we'll link a lap so it kind of slides next to each other. All right, let's go and build this. Now. We've been working with the wire frames for the template ID wire frames from 60 for the web . Okay, so we want to go in, open up the ones for mobile. Okay, so in your exercise files on the U. Y. Templates and a wire frames is one of the court mobile opened up and same sort of thing, but obviously from mobile screens. Okay, so to get started. Okay, I'm looking for collecting on boarding type thing. Do they even have an on boarding thing? They do. So is that kind of thing when you open up the screen and there's that kind of, like, next next skip, you know, just to kind of give you a bit of an overview of the product, then my wife friends my hand, Romans here. What kind of going through? Some on boarding. That slogan. And then you get to see the dashboard co. So I am gonna pick one. All these and what I might do is grab this one, because what I really actually want I don't want much of this. I want will take you and I'll take this bet. Okay? And what? This? This? Yes, that's the bit. Someone's gonna copy that, and I'm gonna jump over to my annual close. The wires for Web don't need him at the moment. So just my project and the APP version. So I am going to work on the mobile phone version. I'm going to click on the outboard tool, and I'm gonna pick a the iPhone success. Okay? And I grab the daughter line when you zoom out far enough to see you can't see the name just becomes a now, three little dots you can drag goes around. And where am I gonna start them? I'm gonna start them as a new little line along the bottom. Here. There's room in command, three K's rooms into a specific place. What have you got? Selected? Something paste here and jackpot. What it might do as well as actually, I'll do some minutes, and then I'll go and committed to a symbol. So this is going to be cooled instructor and structure. It's que okay and yes, Yes, yes, is all good. So I'm gonna grab all of them, actually, and just chuck them into symbol. So you like them symbol? Awesome. And I'm just gonna put some dummy text in the middle here. This is gonna be an exciting on boarding message number one. Okay. And you're gonna go in. I'm going to use that big version of God Co. And I'm going to do the tiniest bit of design work, and I know I shouldn't, but I like that circle that I saw in the last one. So break the rose. Therefore, are you done? You've made it super exciting, E. I don't know why I did that. Okay, but that's gonna be my super exciting onboard misses one. There's gonna be actually this just do three of them, so I'm gonna double click first double click it again. You kind of get in there pretty easy by double clicking slicked all three of these. Put them in the meadow, and then remember, I can click on them and say right click, update all symbols. Even though I haven't used it again, I'm just updating the one here in my library. Great. So I want how many of these I want three. So I'm gonna hold it. Will name. The first case is going to be my app. And this is the on boarding boarding number one. Get people excited before they sign up or have to log in because that's the West. Things like Hey, commit to a sign in Where is what want to do is say, hey, before you sign in, it's a little this cool stuff you can do cases number one, This is gonna be number to and just of the user knows when there are prototyping. Or at least the client knows we're going to just change colors so that we know what we're doing. Go! And one more little lines. That and you're gonna be Message number three. Number three. Great. You could be the blue. We're running out of colors when you got to Keller's really, don't we? All right, so let's go back to the blue. Wasn't so we've got three of these, Andi, that's gonna be my on boarding. What we might do next is due out prototyping because we want to actually check the core way . You can view this on an app. So before we do that, we need to kind off and make these buttons a little easier to click. So like we did earlier, Okay, I'm going to slicked on this. I'm gonna double click it. So that's why I'm know him inside it. See this kind of green bar on the outside? I know inside my assemble and gonna grab the rectangle tool, and I'm going to have Phil off. What? Well, I got something selected. Don't do that. Do game. Since I could see the green by in a grab, you dread a nice big box. You kind of see I'm still in there because look, what's when I drag it to that green by around the outside gets bigger. Turn that off. I'm going to copy it, and I'm gonna send it to the back now. Right. Click. Send a back wax. Okay. I'm using a short cut and you can kind of see the shortcut there. It's command shift on the square brackets, which is next to the peaky. Is that all the time? Because it's the same in In design, illustrator and photo shop, which is nice. And so yet there's my big white box. So it's gonna be easy to clicking a copy up. Okay? And over here, I'm going to double click. So I'm norm inside the green thing paying state moved to the back. Great. This guy double click it some moments of the green thing how you stood, move it up. Presented to the back. Maybe make this one does touch smaller. Getting quite big could be him and are no one over there. So I'm going to cook up in the background, Click at once. I've got it selected. Okay, You got this whole kind of group that I made and remember, update all symbols. And hopefully now, over here, when I double click it and there's that box Awesome. So symbols are great because it's means when we g o and now do prototyping. I've got nice big boxes to click. OK, so there's rigged this up. We're going to grab the next box, and I'm gonna say when you're clicked, going there and by default, it's being going to dissolve gay. And now that we're in a more kind of like, mobile centric world and we're gonna look at slide to the left. Okay, so, yeah, we'll ever look at this woman preview and what we might do Just a story that they're friends is we're going to go to this version and we'll look at the other one, which is, uh, push lift. Came to see the differences between them. So next next, next. And this one has got nowhere to go to see. What I might do is actually just grab another boards and will make this one the app. And this could be the log in screen. We weren't actually build this at the moment. And so it just delete everything on this page. Goodbye and laces has got some way to go to now grow the white box. You're gonna go the okay. It's gonna be the same for the skip buttons. I'm gonna say you go there, I want you to go there. So was skipping. We're going all the way to the log in That didn't connect. Okay? And skip, here's the same. Can't see it. That's why it's easy just to go here and go. Logan. It's where naming is quite useful. I said at the beginning, it's That's them. Done. What I might do is I want to change these dots to move through. But I'm not gonna bother. I should, because I want to, but because it's a wife, Rain. We're just gonna go quick at the back Buttons. Need to work, okay? And so I'm gonna grab this guy, got a prototype. And you, my friend, go back to you, and you go back to you, okay? And a little bit of a floor in my symbol making k. It means that yet these to work. But there's an error that doesn't go anywhere here. So I'm probably just gonna ignore it. Or Aiken slicked on good my design cook on this thing, which is seat green around the outside here, I can ungroomed the symbol, which is not great. Ah, but I need to in this case. Okay, so goodbye. Goodbye. I didn't have the same problem with these dots. If I wanted to update them can get a little bit carried away with my symbols. I was impressed when I said it. All right, So what we want to do now is some testing on mobile. So we're gonna jump to the next video because there's a cool little app you can download more. Look at that. Now, 15. How to use the XD App on iPhone Android: All right. So it's time to download the app. So there's both an android and iPhone version, which is awesome. Eso go download that for your mobile phone. Now, there's two ways of actually getting it on their depending on if you have a Mac computer K like a MacBook pro. And I met or if you have a PC, boo. Okay. It's okay. Pieces. Right. Okay, so I'm gonna launch the app took on X'd. And now, if you're on it, we using the Mac version First member. So it doesn't matter if you enjoyed or an apple phone, but it's to do with a computer, and you can see here. I've connected in with just the USB stick as, or a USB cable. Nothing fancy. And what we can do is we can use live view calling about live. Use that. What have you got open on your screen will appear down here in your mobile phone. Now it's showing you whatever has the house next to it. Okay, so if I zoo where we hear there's my home page, you can see this little house here. There were jumping between screens and everything here, but you can see, this little house here is showing me that on my phone. Okay, so I want to change little house to this so I can preview on him. Click on this guy to Kim the little house, and you can see there he is in all his glory. What's really nice about the live you Is that Watch this as I start moving this thing around. Okay? It updates automatically. Okay, M So it's really nice to have this set up on a nice little screen here. So when you're editing my disguise or clean, it's never this clean, Uh, just for filming, But yeah, I have it all set up in an iPad and everything kind of up so you can see it as you're working on it and you can make adjustments. The calling about as well is because we've kind of wire frame this thing. Okay, We should be able to click on us and go next. Okay? And it's gone for the slide lift onto no man's land. We does this thing go. For some reason, I connected that to all way over here. I was pretty good. All right, So home gonna zoom in figure out what I did here. So you go there, but I think I cooked in the wood. Next. How did we get all the way across there? I'm not even sure Eso next. Okay, now works. Uh, next. And then next the blank screen. Now, when you are working on this apple is a couple of things you can do to kind of, like, navigated. You can click and hold it down for a while, and you get a few options here. One of them is to browse the outboards and you get to see, like, the big version off everything that's in my X T fire, which is a great way. Just kind of jump back to here. Other things you can do while you're in here is hold it down and see this one. This is hot spot. Hence you can turn that on, because if you click somewhere you see, it's for people that I want to say. Like my parents need a little bit of encouragement to be able to use this distance thing. Okay, That should be okay, because it's Nixon skip. But if you've gotten something a little complicated and you need ed hints It's probably a sign of a bad user experience. Bots. Okay, Sometimes you just need to have these things that show. I've only enabled a few of the buttons. No, all of them. Okay, so what? House on? Great. So that is live you if you've got a mech connected to either an iPhone or this credit old K on android phone with poor patrol stickers on it for my son. OK, big cracks on the screen. So and you can do it another way. Okay. And the way is, you go into here and you'll have the option off. I'm gonna click and hold. I want to go back to my document X'd documents. So 60 documents is stuff that has saved in your creative cloud. So what you need to do here on the screen is you need to go to file, and you need to go say there's an on your computer. Okay? Doesn't matter for the Mac or PC, This will make this work. Okay. You need to find your Creative Cloud folder. I only know where it is. All my mac. You'll have to double check with Creative Cloud, keeps their folders on your PC. I know on my mech que is where we know it's around Here it's under all of this junk when you get to your word, your name is mine. Daniel Scott Que. Here's with the Mac kick. Keeps them okay on, um, PC. You'll have to do a quick little look to see where they got. That's what I can do is click it in there and I can put its own special photo. Or I could just dump this thing in here. So this is my I I phone test and click save. And what will happen is, once it's all sink, you'll see this little icon at the top here starts sinking K. And it will eventually end up in your creative cloud. Library came. That's the whole thing with a creative cloud. Okay. And magically, this thing will see it. Okay, so I am going to update and check Deceive? It's in there. It's not the yet that I say it in the right place. I think it did credit card files yet? Well, something open up. Sometimes you can give this thing. You could see it sinking here. Not sure why not Sure how big it is, But let's pause and wait for it to sink and all Jim beckon. Now, if that doesn't work, which mine isn't. For some reason, mine stop sinking works every other day. It's not the moment. Good excuse. To show you another way, I've logged into my adobe account. So s it's dot adobe dot com slash files and you can just drag it into here. Okay? And you can see it's uploading Hansen sweet here now, and hopefully now on my phone. If I go to update, it will go and sit. Show all my credit club files and see if there's any extra documents. Come on, Betsy. Hey, there it is. There. Okay, so this is a way that I can do it. I don't to be connected to my phone. Okay, So I don't have to use this cable, okay? And I can have it on here now, and, um, does the same thing for testing. Okay. Next, I can skip along, and and the cool thing about it is, once you've got onto credit cloud files, it's great for user testing. Cause the live use only when you've got it plugged in, right? So what? You can do is have this thing, um, out in the field to show people get going, see a client, pitch it. What is showing people colleagues Okay at meetings, and it's the same as before. I can click and hold it down and I can share is an image reconnect screenshot on the same things as I had before. All right, so that is it for using the app. Okay, live. You will work on both android and iPhone, but only if it's plugged into a Mac. If you want to use it on ah Windows system or you don't want to actually plug it in and use live view on a Mac A both, you can use it both of those systems. You need to save it into your credit cloud files, either through the Web vision or normally, organise dump it into this folder here, which is not working at the moment. Right, everyone, that is it. I will see you in by now 16. Production Video Sign up screen Dashboard: Hey there. Welcome to this production video before you skip along. Okay? There's one thing you should check out in this video and it straight after my little introduction. And it's basically adding this kind of like, sliding thing that you need to know the rest of it, though we're gonna build out these pages here for our app. And, yeah, nothing super exciting. So you can skip after you learn how to do this thing. All right, let's get in and do it. All right? So I want to go through and build my log on page. I'm gonna steal most of it from one of these templates is the sign up. Appear one of these and just go. Come on. Three to zoom right in. Let's get close. So which one do I want will use this one here is going to steal whole actual page because it is an iPhone size. That's what all the templates are going. Click the word sign up in a click copy, Jump back to my wine, I'm gonna paste it. And I'm actually just gonna delete him, take the name and then you goodbye. And I just use this one here It's one of the nice things about keeping using the blue colors gay. Rather than going off picking custom colors, you have to go and update all the colors and stuff. And they would get all right, for the thing you've hung around for is when I preview this. Okay, so but this guy here going to go to prototype, and I'm gonna make sure this is set to home, okay? It's not by default case, you can see any of these to the home. So when you hit preview, it goes straight to this one. So go ahead, play, OK? And I'm trying to school up and down, but I just It just won't let me. Okay, so that's a bit of an issue. And so if I click on it, you can see there's actually lots of extra stuff in here. So too, So all that stuff I'm going to click on the name I'm gonna go to design. I'm gonna change schooling to vertical. Okay, that's the first, but okay. And the view port is set to seven are sorry. 667 Which is execs high off this iPhone here. I can click on him. He is 66 to 7 as well. And what I also need to do is grab the outboard of making a bit longer. So you said the view port. Okay. And then you make this is long as you need to. This could go as long as you like, and you can see that's the view port there. That dotted line. We had it automatically on our web version. Now we have it on a mobile version. It just means by preview it's gonna preview to this. But I can scroll down now, so allow vertical scrolling picked the right height. And make sure your outboard is long enough to see everything. Okay? And probably what you want to do is just keep using this one to duplicate when you are making another slide from now on. Because if you duplicate this one again, you go back to having to do it over and over. All right, so now you can skip along, So I'm not gonna do anything particularly exciting. I'm going to go through and change this for to instruct. Uh, I can spell it. I can't, uh, this takes I don't actually want anymore case you good And so you sign up, Page. This is a look good. As a good, perfect sign up page. And I have a sign up age in a log in page. I'm just going to duplicate this out. This one's gonna be my sign up. Okay? And here, I'm just going to go through and change this option, and here, Okay. That little bar there is kind of used to show we your at Seacon toggle between the two and this one. I don't need along in a need for log in his email address and password. Right. So I'm going to on the person who made this is still made off using our cool repeat grid. But I'm gonna one group it so that I can click on parts of it, okay. And and group and say you don't want I want you. I don't even the personal information so gone. But I do need this little box here, and I said that at the bottom. And actually, what I'll do is I'll click the edge and I know it needs to be 77 What was it? I know seven. Sorry. Six x seven. There it is. There. So I'm gonna kick on this guy and your height now is going to be 667 Perfect, allowing you to the bottom. Let's all right. So I got my logon screen. Am I sign up screen. OK, so I'm going tohave tow rig these together now. Okay. So yeah, it's true that prototype. So I've got my if you do select all kind of selects everything on the document and shows you all the wires, so it kind of works out what you haven't done yet. So what I'm gonna do is this Next button down here, you're going to go to my sign up screen co and lto Bush writes. Can we have Ah, go double check these ones to remember which push, lift or push, right? What it looks like and so gets to hear. And then I want you to be able to click the log in button should make this bigger. I'm not gonna go to the screen here, okay? And this one here is going to go back this way, Case, this one's gonna push left. I'm pretty sure what have to test it. Let's give it a test. So I'm starting at the the log in screen, click on log in pushes that way, Pushes the other way. Feels backwards, doesn't it? So, actually, what I'll do is this one. Now it's to be pushed left. And now that one. I used to be pushed, right. It's gonna dist. They're feels better. Awesome. Okay, so that's why you test while you're walking up all the way through. Got some scrolling going on. That one. Doesn't need any scrolling. Ah, yeah. Okay, so let's get onto the last bit. And that is going to be my screen. So what I'm gonna do is I'm gonna probably grab this one. Why? Because it's long Because I know if my next one needs to be long and it's got all the view port sorted out, basically going to slicked everything off this and say goodbye to you. Plus hasn't cleaned back to design. Now we're gonna be creating out teach dashboard in a kind of at version, and that's instructed. Export actually instruct dashboard. Okay. Selected one of these, and I'm gonna go off and grab my desk port coat. I don't use it down here. Placed him in a big and the nice thing about this repeatable thing. I could go you and just pull these guys off and got my instructor deaths reported. Ready to go. Ugly version. Want pretty it up so much. Last thing I might do is I'm going to do, like, sittings page so you can go through to give them it of indication of what the AP's gonna do . Some trying to find struck the lines. The only top left is where all the kind of universal ones us gonna grab. You guys. Copy? I put you in here, okay? They are hard click. I do not disagree. Okay, So when that's clicked, is going to jump to, uh, instructor excuse is gonna be sittings. Nothing exciting. Okay? And I want people to be able to do a couple of things. Let's just do what can you do in the settings page? Why am I drawing a button? I shouldn't kind of myself and then hip. You seem to text, and this one is going to be like you could be able to reorder these things. And hey, and repeat grid. So what are some settings? You can reorder them can have a favorite. I think this might be breaking the rule in Tim's off. Um, adding to its details. We're getting these from? Yeah, I thought of these earlier case. That's what my settings page needs toe have. I'm gonna grab you double cut the edge. Actually, my view ports, okay. Doesn't need to be that big. So what I'm gonna do is I'm gonna click on you, and I'm going to make the height seven and no scrolling. I'm gonna need a back button. This guy, you have been be over here pay institute in the right place, just the wrong color. And that guy there as well as a bit of a week color for the rest of it. Co as rig it up. So I am going to say when this button is clicked, you go to here. Same with this button end, that is. Push, push. Right. That's all. Correct. You are going to jump all the way over here as well. So when you sign up or log in, you end up at this page, OK? And when you click on the sittings here, you could never click on them. You go to this page and then when you want to go back you go back to this page. Awesome. It's given test. Now be testing on my phone, but you can't see that. I don't want to sit alone. Camera up again. So sign up and great. You welcome to the dashboard. It's pushing the wrong way. And then you go to this one. OK, so we're going to play around with this, uh, push left, push. Right. So if you want a taste that again. So this one here, click this one and that one is wrong. Okay? Error should push the other way. I feel you can leave that up Their case. I'm gonna say you, my friend, I'm gonna push lift, okay? And saying with you, you're going to push left. It's going to go here. It feels better. Dashboard, though that pops out. That's good. And though this one needs together the way que just But we had I can't do it. And I need to see it being actually activated to know which is Push, lift and push, right. I don't know why. And so now back that way. That way for the errors. Dan Wilson. Lovely. That is going to be it for this production video It's a long one. What we learn workflow will call the workflow. And so that is it for the video. Let's skip on to the next one. We get into sending out for comments. Okay, We're gonna see that to our client to check. All right. See the next video? 17. Sharing Wireframes for comments in Adobe XD: Hi there. In this video, we're gonna look at sending out our wire frames to get some comments back. They were going to use this little option here and show you how to work this so that you can send it out to colleagues or to the client or to use the testing. So let's go and do that now in this video. All right, So the first thing to get clear is that this is not going to be our user testing what we're using our wire frames four is to seen, first of all, to just one or two of my colleagues K for you could be anybody, a buddy who, I guess has the vocabulary or the understanding to be able to test a wire frame and give you some kind of constructive feedback. That's one part of it. And the other option is once I've kind of gone to my colleague and have come back with some amends and like, Hey, I thought this would happen or this is a bit weird, Okay, just to kind of work the bugs out. So I considered to the client for client approval. Okay, so and client approvals different from user testing, as in the clients expecting a wire frame. And what I want to do is I don't want to spend my time doing the high fidelity or the high res version off this app, only to find out it's not what they wanted. Okay, so it's easy to send the wife rooms over our wife rooms easy to make the easy to update eso . It's just kind of working out that with the client. And once they approve that, then I go off and make the high fidelity mock ups. And it's those mock ups that I send out for use of testing. Okay, that's when I get people in that. A potential users from my persona and actual test the app. Some people test wire frames. That is totally fine. I don't I don't find them that valuable giving tests for wire frames. There's just I'm not sure. Sure, like it's just I don't find value in the feedback from them. Okay, from my colleagues? Yes, from the client, Yes, but I think it needs to look all singing and all dancing for to get a proper user feedback . And the other reason is, is that I'm quite good with making high res. I could takes me a long time, but not that long. If you know, I mean, like, I could bang out kind of, Ah, good looking, mock up with all the images and stuff pretty quickly. It's not something that I have to outsource to somebody else. So safe you arm or off. The UX researcher gave in. Totally. You can get lots of value from wire frames because the next step in getting kind of high resolution versions is a long job. Cape up for me. It's not so if discuss were not doing particularly user testing. But some of the rules apply. Like if I get the chance, I'd rather do in person over the shoulder testing case. I'd rather have a body, meet me for lunch and go through it so I can watch their interactions. It's all those kind of mannerisms that they don't really know that doing that are quite useful for me. Okay, so in person is amazing, even with a client. But I find for my kind of smaller projects that I work on is a freelancer. There are always I'm normal just sending these links over. So let's look at how to create these links. And then we get commenting feedback from our colleagues and our client. All right, so to share a link, you click on the little like on and just tidy up a few things. Like the title. This is fine instructor H Q. And it's going to be version one. Okay, And you could Dragon image in here just makes it look pretty winning your sending links to people of made in your exercise files here and images. I've made a stacked version off this HQ logo. Now you'll see I made it square Gay Originally ahead, it kind of rectangular, but it ends up cropping it badly. So if you're finding yours getting crop really in the square, just make sure the actual outboard an illustrator or Photoshopped is actually square can just have your longer inside of there. Cool. That's an air file. Seems to take anything nice and other thing. Allow comments exactly what I want. This thing here is quite important. There's little grayed out, but this is start at and let's remember that home icon. If I got a prototype earlier on when I was working Can you see them here? I said that to be home when it's proving on the mobile. So that's the initial view that the people I'm sending this link to or get which is not what I want because I want them to go straight to the home page. So prototype view, Click a little home icon, Go back into here and it should say stat at home page. Nice. So click on Create Link and Magic. It makes a link eventually. Okay, now, the two ways you can just email the link, that's what I intend to do. OK, don't run. It s so I can copy that. Languages email it to people, or you can click thean bid If you know how to work with a knife frame, you want to embed it onto your own site for some reason. Um, okay, you can do that. But if you want just a normal think you can email, that's the one to go again. So you copy it. That's what it looks like when I'm logged in. I want to show you what it looks like. We in like, say, sending it to a colleague who doesn't have on adobe, I d. Okay, so they get this, you can see so little icon is the naming. And what they can do is a couple of ways of working with it. They can just trouble through this, okay? And I could just kind of see everything as being like that on, but a nice way of doing it is to go full screen. Okay, where it's not really full screen, just gets rid of the junk around the outside, and then they can step in directing with it rather than so I'm I have to go back, actually had escaped to get out. And what I'm gonna do is I'm gonna go back to the home and start previewing from here so you might have to educate your friend on how to best use the wire frame. Okay, so I find studying the beginning and just clicking on the full screen gives them the best experience. Because then it allows them to go through insight, clicking stuff. So if I click on this, I go to this next view. And now one of the things is that it's quite awful If you cook anywhere else, can you see everything kind of just highlights gets that kind of like blue box around it. It just kind of helps people navigate a site, especially a wire frame that you might not have rigged up every button trying click on something and it's just not working. This kind of gives him a visual cue about what to click on. So go back to the home page going again. Okay, so we've preview before, but that's what it looks like, escaped to get out. And now, in terms of commenting, okay, you can click on this and a to moment they're not signed. Don't they can either click on the sign in button here or sign and here, or they can comment as a guest, which is beautiful. So it makes people not have to go through the whole drama resigning in. If they do, though, there is a nice way that Adobe have done. And you can either sign in with your adobe. I d ok, but say that your colleague doesn't remember it or doesn't know what it is. They consign it with social Loggins here with Facebook or Google. Okay. Either way, yeah, that'll allow them to add comments or you can do it by guess which I love. All right, so you get some initial feedback and you need to update that link. Those two things you can do, you can in here. So you get feedback from them and say, Hey, bubble by this is not working. Or why don't we think about doing this or didn't imagine this would work this way. What you can do is say you do make a changing like, Okay, this button now is going to be Ah, you change. The ticks in here can go to design view, and I am not sure what updating but this just telling some text. Okay, so I've decided that that's my update, and I've done an update. Aiken do two things in here. I can click sheer again, and there's two ways I can update the original link. Okay, so that nothing really changes k. The same link that they're being email will work better, will have this updated text, or you can create a new link, okay, and give it a new title. OK, say it's a new link, and you're like, actually, I want to do this new link because it's like you've done lots of changes, and you want to call it like version to something completely different. Okay, so you share a separate link. Okay, so you update the link ahead or sharing you one. Then you can click on manage links. If you're getting lost, OK? And it will load up with your adobe. I d. I'll do it somewhere else. That's do. It's close those two down and manage links, all right? And it opens up in here and you can see there's my instructor. H Q. These the two versions that I've made. I probably should have renamed it before I created. And you link the two versions one it's gonna confuse everybody on. But those are the two versions you can delete. The old one say that you're finished with that one. You don't want people to work on it anymore. You can click, click and very big letters. It says Delhi permanently. Okay, so I'm gonna leave them on their for the moment. Okay, So you want them to test on Mobile kay? So you're building an app rather than a website. Jump back into 60 cases to preview on a mobile. It's not like 100% fluid. You've got two options. If they've got X'd, it's really easy to share than the X defile. And they can preview like we showed. Proving on a device with yet or what I tend to do is I just give them this link, copy it and send them an email and said and pasted in and say, Hey, open this link by your phone And most people have their email access on their phone makers . Click on the link and click on full screen, and it works perfect. Or they can copy and paste it into their mobile browser. They can also type it in. But that thing there's too long. You might use a your URL shortening like Betley or Goude r G l. That's a nice wonder shortened them down. So it's easy to type in now. Another way of sharing is to not really share it. Anyway. Just take your laptop with you, okay? And then just the little play button and get them to work on it. In here. The cooling about there is that you can record what goes on can see here. Actually, this is only for a Mac. You can click on this little core bun and actually will start recording what the user does . So you can clean me clicking on here. Uh, what's going here? It a record. My voice as well. Okay. And when you're finished, had escape. And that will allow you to save this file. Okay, Like an MP. It's his name before, okay? And I'm gonna stick it onto our exercise files, and I'll just put it in, actually, just to get on my desktop because I'm gonna Bennett. Okay, so instructor H Q test by Dan. Okay. And it's have a little look. And here's my taste here recorded and yet shows everything that they have been doing. So that can be a nice, easy way to go and get your buddies to help out or send it to the client. For them to do some testing. You record what they do. But remember that little record option is only available on Mac. The difference of 10 PC and Mac are only slight. Where that's one of the nice ones that make has and same the plugging straight into the device. And if you're following along with a PC, you notice that menu system is kind of construct a little different in the top to match more of a window system. All right, Last thing I want to show you is what Cummings looked like on the other side. So this is an actual working project, right? So I have designed this wire framed and sent it out to both colleagues and clients for feedback. So I'll show you a little example of what happens when they do comment. So this is the home page, and you can see I've got a few comments and you can see this kind of two ways of adding comments. This pins Okay, which is nice, because that there comment actually connects to what they're pointing it. Because there's a lot of things on this home page and over here what I can do, I can reply to it and explain something or ask questions gay. Or it can resolve this and say, actually, this is done. You know, I fix whatever that problem Waas, and it's fine now, okay? And other things we can do. Let's have a little look through a few more comments, comments, no comments, more comments on Let's have a look at some of the general ones. So this one here is a general comment for the whole page. They haven't penned it. Now show you what you can do and what they can do when they are pinning when they add a comment, OK, Say you want to make a comment they can decide on Why do we have Josh Ehlers? Yeah, I went a bit too overboard with this wife frame. I added a bit too much detail to it. Okay, so I stripped it back like the one we're working on now. And you could just leave that there hit return and it becomes a generic one for the whole document. Or you could have added up in so another one there. I don't even know what that means, but you can drag it and leave it there. And the cool thing about that is that that it's pinned to that point. So I know feedback where it goes. Coast, that's gonna be it. It's a pretty wicked little system that X'd has made an adobe have made. I really love that they're consigning by guests. You not forcing people to sign in, and because otherwise they end up just sending me comments back in emails and the like on page 10. The bottom right is got a green thing you like and like what the Dogan about. So this commenting is super cool. You already knew that because you've just watched it. All right, I'll carry on. Let's get on to the next video where we start getting all high fidelity. 18. Mood Boards resources for Hi fidelity UI design in Adobe UX: Hey there, in this video, we're going to look at getting started without high Fidelity Mock up game. We're also gonna look at Resource is to help you get started like this one here. There's Windows. You Why there is some cool apple ones will find there's a great Google Material one and we'll look at where to get out kind of ideas from mood boards and we build a kind of a quick little mood board. Where is he? There he is gay for our design ideas, and we put them all together in our X'd document. Alright, So resource is and mood boards, Let's get into it. Okay, so it's high fidelity time, which just means, remember, we're going to make ones with images and colors and fonts we like. OK, so first thing is, we're going to create a new document. We're not gonna It's up to you. Some people like to work from and just like upgrade the wire frame. I often like to start again. I find the wife ring gets in my way. I use it. I you know, I refer to it and I jumped back into it all the time to see what we've kind of ideas we've got. But I often just Fine. It's easy to start again. So that's what we're going to do in this course. I'm going to start without kind of standard eyesight. I'm gonna save it and give it a name. I'm giving my weird names because it helps for you. Do you ever find this? Later on, you can go to a video 19 and actually find the file that I'm working on. Regardless, K, this is going to be my instructor like we did before. Instructor H Q. This is gonna be home page, actually. Just need to be home page great. And and a couple of things we're gonna do just before we get started. It's just around mood boards and resource is in terms of resource is on. We kind of said them before they're in the file. There are these kits here. We've used wire frames only. Hey, if you download these three, if you cook on any of them that actually take you to the website from Apple gay and trees away to download their you'll see in here, there's an option for 60. Okay, so you can download that I've downloaded them for you. Okay, Both for apple Windows and Google K. And they're in your exercise files. And, uh, you white templates. We've been using wire frames thes these guys here. You just open the next day, okay? And you can start pulling from these cause. The nice thing about them is that say we use Google material and its massive Oh, okay. But it's very like a wife firms, but there are, ah, high fidelity. They are pretty okay, they have got ALS, the trimmings added to them and often working from some of these one especially for you dealing with APS. There are just rolls you need. You know, if it's going to go on to Google on, you're using a lot off their pre made icons and symbols and stuff, so you might as well use them in your mock up. Now, just so you know, it's probably more common to mock up the AP poll. Even if you're going out of both people like to see the Apple versions K So Della the IOS sticker sheet and you used that one for it. So and that's one way to get started. Another way to get ideas and resource is in your market again and assets on the market. And he if you type in you, I you often can get a lot of examples that are quite nice. Okay. And so you like this one here to get started? You can download it. This is a PST case. It's not. I haven't found any X'd options in here yet. Okay, but given on up, But you can just use this as a visual guide and pull stuff from Photoshopped problem. So, Mark, it's a nice places. Well, then you move on to, like, mood boards and ideas, so it will depend on how you're working with your client. Okay, so let's say this my client that I'm working for this project the instructor h Q. They want that just like you go off and make it look nice. Okay, They don't have a particularly strong opinion on it, but I work with clients who will need to see a mood board first cause they want, or they'll send me a mood board and a mood board. Just a group of images to kind of give a, you know, kind of a feel of were there hitting over gathers, though I make a move board for myself. Okay? It's the fun part. Is the sitting down going? What is this thing in a local I How do I want it to feel? Okay? And there's a couple places I go to I'll quickly show you just because just to help you. Okay, so be Hans is one of the first ones behind start nets owned by Adobe, which is cool. Andi, I just did a search for web app, and you can see it's just really nice stuff in here. Now. I normally just find stuff that I like and then take a screenshot. Okay? And I was do a screenshot of this gay and have a bunch of screenshots to build my mood board from saying with dribble, I've typed in type in web at all the time. Okay, Just cause the search here gives me that kinds of things. I'm looking for my typing you I or app design and just get kind of some ideas. Open the map. Take Screenshots. So trouble with three bees. Nice is another one with two eyes. Que is another moment I've done for without the cooling about this is this is actually a mood board creator. I use this all the time. Not gonna go through it all but go to nice stock. Oh, and I'll sort you out there. There's a free option. Awards is a nice place. A well, awards. So dubbed up dub. Okay, in the middle there. And this is another great place. Often, this is, I guess, a little bit more structured. This amazing things in here and the awards air one for different categories. Case you might be looking in blogging, which is quite nice. And it just gives you a kind of a cut down version and gives you reasons why it's so great . It's another kind of awards. Places the Webbys. Okay, so the Webby Awards is now online wards. I think it started with websites. That seems to be everything in here now, but I go in. I searched for this year and I went through and I picked, um, I looked at web, and then I looked at best user experience or user interface. Gay and use get kind of not cool ideas, and you can scroll through them, open them up, take screenshots of the stuff that you like on last one. There is no last one that is and back to our app Cool. So once you've got the ball I take out the screenshots on my neck on your Mac it's command shift three. You can draw a little box, actually, commercial threes, the whole screen commercial for or draw a little box and you'll end up on your desktop. What I've done just to show you is I've created in your exercise files. Here's a bunch of screenshots that I took Kane. There's just loads of them, okay? Just took lots of stuff. And what I do is either use that nice to make a mood board creates cool little pdf Slyke This came generates them for you, which is great, or I just dump them on the page Next d much of the time. So I just slicked a chunk of them Yemen. If I got six, I'll do five at a time. And in 60. Okay, I am going to jump to our new project, gonna zoom right out so I can see the pace board, and I'm just gonna drag them in, okay? And those ones and I just start dragging in five time Well, six at a time. If you do, the more on one big go They end up with one big line that hits often to no man's land. So you if you're a photo in design user, you could use gratify that could work Photoshopped There's a stack into layers option under file and what have you work? But I like to just kind of build a little blob off. Awesome mood board. Goodness came the big by default with screenshots on this mech. So I'm just gonna make it a lot smaller and I'm gonna stick it up here in a group it and what I do when I'm working and I'm looking and just kind of looking for I pulled my colors from here and I start staging for funds. I get kind of like layout ideas. This screen shots like this is a reasonably big one, but often this could be huge. I love this part of the job getting ideas, and you also said the notice, the head, even those that all different websites you can start to see the same kind of colors coming through like very common at the moment, I guess those want to tropical pastels, but so yes, that's where at the moment, let's move on to the next video, where we start looking at columns and grids, getting serious. 19. Why do you need a 12 column grid in Adobe XD: Hey there, in this video, we're going to talk about why we're gonna create a 12 column grid. If you already know why you need a 12 column Great. You can skip to the next video for those you don't let's get started. All right. First up is why we're using the 12 column grids. And if you don't know when you are kind of coding the website on the others, lights were leading the design, the friend in design side. Now when it actually has to get turned it into a website, what will often be uses a framework that uses the 12 columns kind of as the structure. Why they using 12 columns? Just a handy number because and four responsive design. Say, this website here and I'm using It's about 1200 pixels across and I've got 12 columns. Is the underlying structure this image here? The slider here he is actually spending all 12 of them. But these guys down here are actually spending three each. Okay, so three plus three plus free press three equals 12 I think. Okay. And that's how often websites have done all of them. So check with your developer. But most of the time it is. The reason is useful is that when I am at this distort size. Okay, I've got this kind of structure one in the four across. When I get down to tablet, you'll see that I've decided that these boxes now span case six off the columns. So 12 is just a viable quite easily. So when we working with these different sizes like that down mobile, Okay, he's actually spent 12 now, and encoding is really easy to work that logic, plus a lot of the frameworks that people start with. The building sites are based on these 12 columns. That's why we need 12 columns. Do you need them in your 60 project? No. Okay, so we're gonna do it to make it easier, because mainly I do the web design on the other side. Kay said they're more html CCS site things. So, yes, I want to do it because that's gonna help me out. You could be annoying to your designer and developer and just design anywhere and for them to have to try and make it fit within 12 columns, which would be a pain. All right, so I hope that helps you understand why we're doing 12 columns that's jump into the next video where we actually make it. 20. how to create a 12 Column Grid in Adobe XD 2018: Hi there in the sectorial. I'm gonna show you how to make a 12 column grid, basically with one little clique. Turn it on, Turn it off. Sixties got automatic feature that makes our column layout. Super easy. Super quick. Let's go and do it now. Okay, First of all, I'm actually damn from the future. I've come back in time to this video to update it, because the original video that I made, you actually had to grab the rectangle toe and you had to make a column. I had to divide it by 12 on the with and work out gathers and all sorts of other drama. Okay? And so I've come back here to update it causes a new feature that doesn't pretty much automatically. So when you are going through the rest of this course, though, I haven't gone through reshot the entire course because we only use columns a couple of times when you do see it. And I'm using a big, clunky rectangle boxes and locking and unlocking columns. You can smile knowing that there's a sweet, new way to do it. So the sweet new way is Black arrow clicking The backgrounds got nothing selected. Actually, click on the name of your outboard and then he ever says Grid took this on. Make sure your own layout, not square. We had square for a while. We want layout K and we want How many columns? 12 columns you gotta with that I used in my tutorials. 15 The column with air gets to be automatic. Want to automatically make the columns fit with inside the boundaries? My website. Now we use the navigation off 1400. Along the top of that's going to my maximum width case of 1400 is kind of what I want to use for my next. With of the site, you might do something different common ones at 18. 24 1200. But we're gonna use 1400 for my navigation. So we need to work out what the columns I and all we really need to do is click on the name and we need to work out the wits to the edges here. So I've got a site that's 1920 gotta navigation. That's 1400. So I need to do some basic method. My 1920 minus my navigation leaves me this for either side either side divided by two. So that's the gap that I need. So 260 pixels. So I click on the name here and I say I want the width to the edges T 200 just 16 fixes. Okay, so that will now fit perfectly, leaving a little bit of gotta either side of my navigation. Awesome. And now you can go ahead and start working on this project. That's a lot easier. You can turn it on and off. Okay, You consider it is a default. So whenever you make a new one, it will go through. Use your pre made sittings. You might just choose to use the default. It's up to you, but I like a 1400 pixel wide website. All right, that is it. Go forth and build an awesome website. I've already finished this course because I'm future Dan, and it is a good course. Hello, 60. I thought by now 21. Working with colors inside Adobe XD CC: Hey there. Welcome to this video. All about color. We're gonna find out how to steal colors from saying existing Loga or brand and use those there will convert them into our assets panel. We're also gonna turn them into this handy kind of reusable option down the bottom. Here, we'll also jump and have a look at something like this with is kind of like inspiration for color and how to use those. All right, so let's jump in there now and stop making colors. Okay? So there's a few ways of working with color and 60 and first way was that gonna pull it from a logo? So we're gonna go file import. We're gonna try and bring in under our exercise files under images. You can see my air file. Currently in this version, you can't actually just bring in our files, which is a bit of a pain. So what I do is I just open them up in illustrator copy them and paste them in. You can paste really easily. Really? I'm gonna use this logo here. Getting what I want to do is you can double click it or on group. It was gonna double click. Eventually, I'll get the H and you can see there's the fill color. What I'd like to do is one of the plus button there. Okay? And this is gonna add it just the like, easily accessible colors. Also in your assets panel. Which of these two little blobs here we can go to colors, and because it's selected, it'll edit in here as well. So it's good to have in both those places while we're working now to get other colors to get maybe color inspiration. A nice place is adobe color studs it create. I like to jump to this one that says exploring it just gives you kind of ideas off color groups. Okay, you just might use one of the used to get started with or of range of them chaos concepts. Okay. And all you need to do is click save. You need to log in with your adobe I d and pick RCC library for it to go into Okay, then inside of X d, you can go to file open up your CC library, and in our case, it would be instructor h Q. And they'd be the colors waiting. There It's not the myth that I want to use for the moment. We don't use that Sisi library option or you're working in a place where you just can't use it. You can just use this website, click on them and say it and your feet on the bottom here at sea is easiest to copy. These hicks of this more numbers. Okay, you can copy them into X D. K. So draw a rectangle and over here, click on the icon and just paste that in there and you'll get your colors transferring them without Sesay libraries. Another way to get colors, ears to look at our mood boards, k a. And I'm gonna zoom out a little bit. And I want to cover like a PCI rid color that I want to use. So maybe something like that. Maybe not, Kane. I am just looking around for a color to maybe something like some way India is what I want . So what I can do is I'm gonna draw a rectangle, came just a rectangle and I'm gonna use the eyedropper tool here on this side. Rebuttal K allows me to co often just pick a color from here and you can see Fill it with that's watch. That's kind of close to what I want and and what you can also do, though it's a nice little trick is you can kind of move this and kind of see stuff underneath. Gain the eyedropper tool that actually go down and pick things underneath as well. So you don't actually have to pick it just from the extra panel like you do in lots of other adobe products. Go on. And so I've got this color here and I kind Yeah, that's kind of it. I'm gonna double click it over here, and I'm probably going to go through and just drag this down a bit. Now I'm just messing about That's kind of where I want to be. And so with this, I'm gonna copy it getting and then delete it. Come down to here and what I like to do. You just in the pace board up here is I like to build out my swatches, so I'm gonna draw a little square holding shift will give me a perfect height and width. I'm gonna step with my green, and what I'll do is I'm gonna have no border, and I'm gonna have two of them. One of them is going to be that color. And I like to have, like, a second jury color. That's just a bit darker. Just drag this down here, okay? Says it like a darker version of it. And and then I'm going to start with that peach color. Okay, So I'll use you use our job. It'll still from that. You're done and dusted. Now, another swatch here and yours could be a little darker again. And I probably want Ah, black, little black. But I want quite a dock. Kind of probably somewhere out. Here's what I want. It's kind of a gray with this, the little better read. Lifting it, though, is going to be my swatches for this course I can slick thief. Or that I don't already have in here and have. Plus, they're all part of that gang. And over here, I need to do it a little bit more individually and say you add you head, okay? They're handed. Have it in both places. I promise two more things I want to do before we move on. I want instructor I Q to be part of the Symbols library because this is kind of like a working logo. Just kind of made it quickly to give the company a brand, but we haven't really agreed on a logo yet, so I'm gonna add that to symbols. So later on, I can update this and it will update in all the usages. Got another version of that. I want to bring in Kate's thes stacked version when a copy that's paste it into here and no edit to a symbol. Great. So drop me a line if you've got any other questions about colors were using RGB because we're going out for digital displays. Not seem like a Keller's. Yeah, anything else? Drop me a question and I'll answer in the points. All right, let's get on to the next video 22. Use Web safe fonts or iOS or Andriod specific fonts in Adobe XD: Hi there. In this video, we're gonna look at how to bring in fonts from both chrome and type kit and bring them into X'd and why we need to pick a couple of fonts and only a couple of weights. Otherwise our website or app, will explode. Let's go and check out why in this video, Okay, so when it comes to picking funds for your prototype, you need to pick a fund that's gonna be able to be used in either an APP or a website. And not all funds can be okay. So if you've got funds on your computer at the moment, you can't just go through and pick any of them. So the easiest way to find a fund that can work online is to use adobes type kit or Google fonts. And look at both of these type. Get here. I'm going to go to browse, and what you'll find is pretty much everything on this site here is able to have a Web version of it. Okay, so let's go through and pick any old fund here on. What I'm looking for is when I click on it, I'm looking for both of these options, there's a sink option. And then there's this little brackets here that indicates there's a Web version case that's totally fine on. The other thing you can do in here is just enable it's turned off include whip only funds. There are some funds that only allowed to use online and not used in print. Now, if you're not sure what type kid is type kit is part of your creative cloud license. Okay, so you can log in with your adobe i d. And all of these fonts are allowed to be used commercially gay, and there's just some really nice once in here. Some of the things you might consider when you are downloading a fund is over here on the right. You've got some filters, just really helps kind of work out. I can I want to look for a body copy find you can just cut it down to simple sand Sarah funds and get rid of all the Han drone ones. Likewise, you continue on hand and you'll only get the Hendren fonts Alright. The other things to look at is potentially. This is probably my most important one. Looking at a Web fund is the width. Okay, I like to try and find It's not always necessary, but I like to finding a tune handoff. I want to find a width that is quite narrow just so that I have the potential, especially for like, a hitting fund that there is. I just get the ability to ADM or characters to a hitting. Okay, if you pick a really wide fund, will only be a but have really short headings before they break onto two lines or go through all the features. But it's pretty cool down and you can see at the top here I've gone and changed the text case. You can leave. It is blank, but you can also edge your own name up here so that you can see what the characters look like before you download them. When you are ready to pick one que se you decide that this is the fun for you, Actually, what's the one we're gonna be using? I'm going to go up to search at the top here and use Fairplex before I do that. I need to turn off some of these filters so that I can find fear and this Fairplex there. Okay, So I decided this is the fund that I want. All you need to do is click this button. This is Sink. I've already sink mine, and that's it. Okay, what will happen is as long as you're logged into your credit cloud, you see a PM logged into mining's my little face. If you're on a PC, that's down the bottom. Right. Okay. And what ends up happening is it just magically appears in 60 to nothing else. You have to do with Google fonts. Okay, Very similar. Get Google fonts in here. You pick a fonts similar. Sort off filtering down the side here. OK, but say you pick a fun I'm gonna use robotic. Robot is like a soup. It's the new aerial that an open sands. If you go to all the websites that are being made in the last five years, a bitch. The body copy is one of these two. Okay, So Or saw sense. So I'm gonna pick Roboto. Just I like it. It's got some nice weights, but when you are using it, there's a little bit of extra stuff you need to do. So you decide to our bodies for me. You took on the little plus icon, and the thing appears down the bottom here. Okay, you click on it. And what you need to do is see this little download button here. Okay, this is showing you how to use it on a website. You're not at that point, we're marking it up locally on our computer. So what we need to do is click Download. And the cool thing about this is just it's a fun you can download. I'll stick this in the exercise files. I'll make a folder in there called fonts, and you'll be able to use Roboto as well. You know, when you need to do is open it up gay and install the funds. You need all these true type fonts. So this is just a cool resource for any design project you're working on this loads of fonts use. Gotta remember to click this obscure little button to, say, download to your computer and then on a Mac, you just double click these. I think on a PC. It's just is easy. You just double click on them and they'll start installing now. The next consideration is whites so I'm going to jump into our 60 project, okay? And I'm gonna sit up a couple of basic font structures to get started Yousfi appliques that I'm gonna use for my big kind of calls to action. A zoom in a little bit as well. Now, when you are dealing with fonts and trying to pick sizes, make sure you're 100% okay. Just so that you're aware of how big this is. This is how people are going to see it both in the app and on a website. So I'm gonna pick fear flicks Over here. It's village Fairplex. Narrow. Okay, that's the one that I'm using. And now I want three sizes. So I'm gonna have this big one. I'm gonna have a smaller one. That's going to be think, six. I want another one. That is about 24. So those are the kind of sizes are going to start with. You don't have to pick font sizes. You can just start working in backtrack. Okay, But you want some consistent sizes off fonts for no technical reason other than mawr design theory. Okay, We're loads of reforms and lows. Different sizes. It's confusing for the user. That's a simple hierarchy of most important. Next important. Last important in terms of my headings. Now, in terms of weights. Okay, when I slept on it, one of me Wait, I mean, you know, light, medium, bold, black So I could decide I wanna kind of a book version for this top one. And then I want I'd really like this one to be a bit more bold. And I want this one here to be black, OK, But the consideration here is load times for websites in EPS. Every time you pick a new font and a new size, the computer has to download that before the page renders. And why is that important? It's because load time is super important for lots of reasons. One of them is Google rank sites. Based on how fast they load, the more fun to have it really slows it down. And, of course, just Jim Willow time. McKay. When people come to your site, they don't want to be sitting around waiting for the site to low because you've picked tin fonts with 10 different weights. Okay, so try to if you can keep your weights as small as you can, because already we're getting quite high on used book for all of these, but also plan to use Roboto. So I have actually only the moment installed one front one. Wait. Okay, Fairplex and book. Even though it's different sizes, that doesn't matter, because those are going to be my heating sizes. In terms of colors. I'm going to stick them or and make them black for the moment, probably. Well, I'm designing our just things. Next thing I want to do is I would like to create another text box for about Can you go up here? And the largest size I'm going to use for a botto is going to be 24. That's going to be for most of my headings. Making black 20 is gonna be my subheadings. And this one here will 16 will be my body copy. Probably through most of the document. 16 is a typical body copy size between about 13 and 16. I'm using a largest size because I'm not gonna have a lot of blawg post like heavy chunks attacks. Most of mine is gonna be marketing team. I got a little lower for yours in 14 I'm going to use for my buttons. Looks nice for you in terms of the font size is I'm gonna make the buttons bold, okay? And I'm gonna make my subheadings boulders. Well, coast, I've tried to keep the font Weight's down toe a minimal level. You might be doing yours of it differently. You might be just designing and you might come back and kind of tidy up and decide. OK, I just need to pick a few funds and not all of these ones throughout it. Alright, So to fonts and three weights, it's getting a little higher on the download speed. What you can do in Google funds here there is a low time thing here. It's what you can do in here. Say I've picked Roboto and added it to my family. I can go to customize and say, actually, I'm using real butter light and I'm gonna use bold. You can see the time still fast. That's awesome. But then if I go and add another front and do they have do they have fear facts in here? They don't gay. Let's fear play looks very similar. Case we're gonna go into this one will add it to our kit. Can You could see this two front families down the bottom here, and you could see moderate. Okay, So I'm gonna cook on fear of you, and I'm gonna say, actually, I want the bold and the light version. Okay? It's starting again. The Ardizzone, if you keep adding them eventually, is going to get rid and say to slow the Internet's gonna hate your site, Get Hate's a strong word. It's gonna dislike your site and not ranking very well, which is no good. So there's long video is really just pick a couple of funds with only a couple of weights. Otherwise the world will end. All right, let's get on to the next video. 23. How to use Character Styles in Adobe XD: Hey there, in this video, we're gonna look at character styles. We're gonna add them to our assets panel over here, and then show how awesome they are when you go and edit them. And they change color magically all connected to this character style. Totally essential when you got lots of pages you've mocked up and you need to control fonts over a big scale of pages. All right, it's going Check it out. Okay. So creating character styles of super easy just down the bottom here, make sure you're on your s. It's panel gave select exam's gonna slick all of them. One big goes in my black error and click this character styles boom. They're all added Nice. Ready to go now. What makes character styles useful is that when I start typing, okay, I got to select it all and then click on any of these guys. Okay, so that's I guess, the nice thing about it, it's one nice thing. At least the other nice thing is that say later. Rhino decide. I've used this bunch of different times throughout the site and then later I know decide. Actually, it's not what I wanted to do clients come back and said they don't like the font so I can go through in here and pick a museum? Okay. And they all update and link. Okay, You can change everything in here. Okay? Colors, font sizes, anything you like. And it's all connected to this character style. Now, if you're a person who comes from say something like in design or illustrator, the character styles are pretty strict. What X'd have done here is they've done some pretty amazing stuff. I think this is a wire frame for a nap. Okay. And let's say you can see over here if I delete all the styles, there's no styles at all, okay? And you've gone through and designed this whole thing. You're like, Oh, man, if this is in design, I want to add this style song and double click him edit to my character styles. Great. But this was being used that size. There's been used hundreds of times already in this app. So what a pain. OK, but what if x'd have done that being super clever and watch this if I go and update this and I say, actually, I want this to be pink. You'll notice that not only has it was obvious case, I've made it to Green. You could see if updated this and this one updated. But look, all these other guys did as well. So what X'd does it goes? How you probably mean all of the fonts that are the right size that are the right color that are Ariel and it reaches through the document and goes and changes those. It's just super helpful. You can see all of them have changed, so you don't have to be as strict with everything. Applying this character style. You can edit to it at the end and make little changes, and it spreads throughout the document. You can adjust these separately. Okay, so in here I could decide to go in here and say, Actually, I'd like this one to be everyone else to be green, but I want this to be. I think you'll see it gets overridden, so I feel like it's a really clever way off introducing character styles. They're not 100% strict. They're just really usable. And now if I make a change to this guy here and I make them all say light or regular, you can see all the rest of them you might not see because Victor had to see front. You can see now all of these have changed. But because I made a slight little alteration to this one and he doesn't match his friends , he can stay like that. So I think character styles a pretty amazing in extinct. Thanks, Adobe. All right, so let's move on to the next video. 24. Creating realistic buttons in Adobe XD with paste properties: Hello. In this great video, we're gonna look at how to make buttons. Seems simple, but I have a tendency of making squeeze with text in them, and users don't know that that buttons there's a little bit more to it. I'll show you best practices by looking at something like Material Ohio, where they have good examples and documentation. And we'll also learn a cool little trick that you can use for all sorts of things in X'd, where it's copy and paste properties. All right, let's go and make buttons are working with buttons. It seems like a simple job, but it can be a little bit complicated. I think I draw them, make them put them on the sites and I get feedback from staff. Were like that doesn't really look like a button you like. No way. So sometimes what you feel is a button just drawing a box and putting type. And it is not enough. So probably be one of the easy ways to get started is if you look at material dot io. Remember, this is Google's kind of style guide for online and APS, and if you go to components, learn Mauritz a bit of a rigmarole. Find this Web option and they got components and you'll find there's a bunch of buttons. OK, we kind of looked at this before and in here, and what you can do is there's kind of like some technical documentation. But if you actually just click on this button here that says Raised, give you kind of like a bunch of different ways and styles of doing things okay, so you might just use this as a style guide. It does tell you the CSS and everything for these. Another nice way is Becca. Next E. If you go to file open and our exercise files in the U white templates on the Google material there, stick sheet has buttons as well. Okay, in, in here there is one that says Buttons, Where are you? There he is there, Okay. And it's just an easy way to find what looks like a button. And it's only simple things like this one here just has a tiny, rounded corners. Writing is turning around the corners. Nice little drop shadow. Okay. And so a nice, easy way to steal formatting from other 60 files is this is the moment is a group object, Kay. It's actually a symbol song, That one group, because I don't want to text in this case, I was one of this, and I'm gonna go to edit copy where you can choose your short cut. Such a simple oh, copy then jumped your sheet a rectangle, too. And I'm gonna draw out a button over here. When you are drawing buttons and working on size again, you need to be 100% of the way. You end up with dry, enormous button side all the time, okay? And pick a kind of a size for your button. That's kind of gonna be mine. And then what you can do is go to it it and there's paste appearance. You can right click it and pick paste appearance as well. And it's just a really quick, easy way to steal for mating. I'm gonna change the color gay song and use the eyedropper tool and actually just going to use this. Maybe this one, okay, and that's it. Okay, you can obviously go and customize your buttons to be anything you like. But following standards that either Apple or Google create is often good practice because they are the boss. They are teaching the world how to use the Internet through their U Y. And you can borrow ideas from them. Okay, so you can skip alone now, Because what I'm gonna do is just fill in my type, great my type toe clicking here. And this one is going to be the sign up line up even getting a slick that all picked my button style, and I'm going to fill it with whites. Actually, to be honest, this one here, I'm going to actually change globally because I'm going to do these colored buttons all the way through a dragon on the top here. If if if it's gonna be white so now they will follow that style. All right, I'm gonna duplicate these. You'll notice when you are dragging boxes around your owner of select the column. It doesn't really matter when you start dragging. It kind of ignores it causes locked. Okay. And this one here is gonna be our live demo. What we'll do for the other buttons is I want to draw some icons, which will do in the next video. You're going to be That's The last thing I need to do before we go is we'll put our logo down here now. Our logo is looking a little bit big at the moment. Okay, So I didn't take a lot of time in Iran showing you had attended into a symbol, but getting it the right sides first. So one of the features that need to happen for X t, which doesn't have it the moment is that you can't resize your symbol a little strange, but its version one and we have to live with some off the new vision drawbacks case of what I'm actually going to do is going to right click it and on group it. Okay, now I get to resize it, put it in the top here, and really, I can convert it back into a symbol. Okay, there you go. But now I have two sizes of it, but really, I do need this to be a symbol, so I just keep both versions because I've been working on in the background luxury. Actually, here it is here. It's not quite done. I feel like this is getting closer. It's I h Q, I'm not sure because it could be flipped upside down. I think I'm doing this because I'm reading Dan Brown books. At the moment, everything needs to be super secret. Code flipped upside down stuff like that. Awesome luminosity icon. If you read the book, you know the one anyway, so and I wanted to be symbol cause I want to go and update it. All right, So there is creating buttons making them look like actual buttons rather than boxes with type in it that I seem to create too often. One other thing before we go gay is little bonus track. If you If you watch, the whole video is under here s it's gay in here. Search. Okay. If you do you like it. You will find some or kind of styles of buttons. They're gonna be pretty similar gay about. You'll find in here. There's just things you can download in. Although I can't zoom in. There are lots of good examples for buttons in here that might be slightly different from this. If you're not happy with the drop shadow slash rounded corners, I want to see some different examples. All right, that is it. Next video, please. Den. No way. That's me 25. How to draw your own custom icons in Adobe XD: all right. In this video, we'll show you how to make a little He's a little short and squat, but we're gonna make this little log in icon also bring this one in here and as a bonus, or show you how to turn easily the columns on and off so that you can just kind of see what you're working on easily using a cool little shortcut. Let's go and do that now in extinct. Okay, so I'm during icons, mainly because member now wire frame. Okay, I've got my wire frame actually printed off next to me on my disk. Makes it a good resource because that's what I'm kind of copying for a rough layout. But what we've decided with a client is we're really pushing towards this on boarding, being the most important, OK, getting people to sign up and test it. So what we've done is we've decided that sign up and example are really important getting people to sign up and the example as a flow where people have to kind of details as they go along. So these two here, we're gonna turn into a little icons, so drawing icons in extent, you can draw simple stuff. Super easy if it's going to get in anyway. Complicated, it's best to probably jump to something like Adobe illustrator Adobe Illustrator is. One job in the world is to draw icons amongst a couple of other ones, but it really has a low the tools to do it in 60. It has enough. So let's draw a little icon. You want to draw that account log in and I had a little look online for images and icons for Log in. And it's a really tough one because there's no Super Universal log in option yet. I think that little man is probably the best. So what we're gonna do is we're going to draw a circle. Okay, I'm gonna zoom in a little bit, going to get it roughly the right size to the size. I need it to be saying something like that. So circle tool And if you're drawing out a circle with a circle toe, hold down shift K while you're dragging, and that'll give you a perfect circle. And so I want this first circle and I want another one. That's gonna be his buddy. How big is this person gonna be about that. Okay? I'm gonna slick both of them. Make sure that lined up using the horizontal line, Minto. And yeah, that's gonna be the basics for it. So the cool thing about it is, once you've gone to shapes like this, we want to merge them with them. Selected These over here are called boolean operators. But really, if you know from other design programs, you probably know it from illustrated called the Pathfinder toe. And if you're like me, you end up just clicking all of these to figure out which one you want. You can never remember exactly. So this first one's actually gonna work now because I've been practicing, But that's not what you want to kill. You see the sick until here. The top one mass, the bottom went out. You could bring this one to the front, okay, And do the exact same thing, but get a different result case. You're gonna have to kind of work through what you want to do with all of these game. There's all sorts of weed options in there, but I want this 1st 1 where it kind of joins the two. Then I'm gonna grab a rectangle to and just Dropbox. I'm just kind of using this like a cookie cutter. I'm going to use this guy to the sick woman in here, minus front. And now I have quite a short squat, a little looking man. Probably not best for over. You need to go and just him a little bit. Okay, But with them selected, I'm gonna pick a field color off. How dark? Green, like green. Probably like green and a fill of stroke width of this show. I'm gonna get 100% before you make choices. Member 100 sent. He's probably a little bit. I'm going to go to pixels. That feels right. So my squad was a little short squat guy. There is gonna be this. Okay, so there's one of the icon and these columns here getting in my way visually because I want to kind of visually place him. These columns are gonna come in super handy when we do some more of the cards that we need with a kind of blocks of content. But for the moment, it just in the way. So a couple of little shortcuts before we go, I'm gonna zoom out a little bit are gonna select all of these guys and in command semi colon. So on my keyboard, it's next to the L key. Yours might be somewhere else. I was teaching 60 in the line yesterday. Yes, I'm name dropping. Just flow back this morning, okay? But they're semi colon key was in some crazy place where you needed a whole downshift. So look for semi Colon, okay? And I'm gonna hold Come on like that. If you're on a PC, it's control and semi colon, and that just turns it off. Okay, To turn them back on, you need to go back into layers panel, okay? And I could select all of them here and then use the same shortcut can they will come back to life, making them off for the moment. Because I'm just trying to look to see how this all works in the spacing gay. So just missing about gay. The last thing I want to do, though, is I want to find an icon for the money. So instead of using shapes, I could use the pain until now. The pain till here. I'm not gonna go into a full painful exercise because it's a tough one, like a what's been probably Now we're getting to grips with Pinto and you'll find that if you're learning the Pinto go off and Luna in something like Adobe Illustrator, it's got a lot more helpful guides in useful things. This just has a really simple pin tool. So if you already are a pinto user, you can go in there and obviously start drawing. Okay, so I am gonna start during, like, a dollar note type thing. Okay, So clicking ones for corner point click and drag for a curve. That's the basics. But I'm not gonna go through, and then you put a dollar sign in it. What I might do is actually just find one. Using we looked at this earlier member assets Credit Cloud s its market. And in here I'm gonna put in money or pricing much a watch. So now it's a kind of decision. Does that feel like pricing, or does this feel like pricing the little tag? I think it's probably money rather than pricing. So you are looking for icon. Sometimes you need you work with the Fifth Saurus and work on different ways of saying the same thing because I feel like this probably is gonna work better for me. Okay, so I'm going to download this to my instructor H Q library. One thing you also should note Member SPG is good cause it's scalable vector graphics and I get to change the colors easily. Open up my Sesay libraries and but, uh, okay from library and start to H Q you concede enhances you have to unsupported elements. So this version of X d 2018 doesn't let you have s p G's yet you should be able to just drag it out. So we're gonna go by illustrator. So here, an illustrated. Here's my instructor. H Q. I'm just gonna drag this out, okay? It's probably yes, McGee, but big copy aids and paste it in. So it's a little bit of a work around getting in to get the right size ish member working at 100% tepid around using your Cherokees. If you wanted to get it to jump big chunks while you're working, hold down shift while you're using your Eric keys on your keyboard, okay? And as woman and I can double click on it and then I think about that. If I go inside of this, keep double clicking que double clicking until you see the Phil. And I can say I actually want you to be fill this one DoubleClick, DoubleClick. You might have just one group. It could work just as easily. Okay. And this one here, there are about the same sort of stroke. Wait, what you might have to do for this kind of thing here is you could add a really small border on the outside to kind of fatten it up. If you needed to mention this, mine was kind of fine. All right. One thing I want to show you before I go, and I forget is that this guy, he is kind of like a created shape. And the cool thing about it in x days that it's nondestructive. What I mean by that is, if you keep double clicking on it, you can see the actual shapes is still there. Okay, so if I double click this again, there's my circle. Okay, so I can kind of adjust this, come back out, and it's still edibles. All these parts kind of working towards working together okay, but they are totally irritable. So you can go through and delete parts and bring it back. OK, so undo and fix my little guy because he was probably just a little bit under Grab the corner here. Hold shift. Just shrink it down a little bit. Grab these guys. Line of my horizon's Lee. I feel like that's better. He's former proportionate size now. Yeah, So everything is nondestructive, which is awesome. One last thing I'm going to do before I go is I am going to create a kind of a wave to break this top column here. Okay, so I'm gonna grab the pencil and a quick once over here could once in their corner, click ones in that corner And about here. So clicking once gives you corners with this pain to remember and butt down here and click holding drag because I want this kind of like, ah, paint drippy style thing down here. Why? Just I saw it kind of with my mood boards. I like this kind of non square transitions. This is the one here. Okay, I like this kind of paint drop. I don't want mine to be as extreme So I'm gonna play around with something like this. Gay double click on it to adjust it. And I'm gonna say you but the you you can adjust these little handles as well. Okay, Some sort of wavy thing. And we'll give it our fill color for the moment, not white. Ko. Give it a big red color and I'm gonna show you in the next tutorial how to do the radiant. Let's do that now. 26. How to make a gradient blur in Adobe XD: Hey there, in this video, I'm gonna show you how to work with Grady and moving around. Pick colors, that sort of awesome thing. All right, let's go and makes ingredients. Okay, So in the last video, we drew this shape with a squiggly lines on the bottom. I'd like to add a Grady into it. They hide Grady into a little bit. Okay, so if you click on Phil where it's his solid color at the top, this is where you get to radiant, Okay? And it's got a lot of the kind of typical grading options you can grab one end and play with the rotation. And there's first end k off the other side. So you could just you play with the different sides, Obviously undermines it was back to kind of its normal fill on. What I want to do is you need to work on the line by clicking this little icon and then sitting the color. Or you can click on it up here in this little option at the top here. So I am going to have this color kind of in color. Just so no white, just a bit darker, okay? And probably just a little bit warmer. So I'm gonna go to the yellows and I'm gonna do I'm gonna go across just utterly it or tiny , But I want to be quite a warm maybe even not that much. So, man, it's hard to pick with a small little tile. You can play with your hue and saturation and brightness. Even those are a little hard at the moment. And this first option, he is just gonna be playing on what's going on. You drag you to the corner, and that's what I'm kind of looking for. Like it might be hard to see on your screen just a really subtle light. Grady int. I like doing these. That adds a little bit of richness, I think, to the background, and it's just kind of trendy at the moment. I'm gonna get rid of the border. Next thing I want to do is I want to have it to have a bit of drop shadow because I wanted to cover the things underneath, just look like it's kind of like raised off the ground. So you shadow okay and you play around the sittings. Amusing 0 13 and 50 for the Blur, X and Y just means that X is not going to lift K air. Why means it's only going down. It's going down quite a bit. Okay. A And in terms off the B, that's blue. How blue it is. If you turned up to 150 watch, it kind of gets really blurry. It's up to you to see we're coming up to 99. Turns out s so I'm gonna go down to maybe 50. And if you're not happy with the strength, you're going to click on this little icon here and crank it up to full black. I'm gonna put an image underneath them. Probably adjusted as I need it. All right, that's it for Grady INTs and a little bit of a drop Shadow Blue 27. The pros cons for working with images inside Adobe XD: all right. In this video, we're gonna look at importing images, the pros and cons and why you need to have very, very big images to support all sorts of devices Later on. We're exporting. All right, let's go and look at images now. Okay, so one of the cons is you can't bring in Pae ST's or AI Files. Which of the Native Files for photo shop and illustrator you need to save illustrative files is S P. G's and Photoshopped files need to be saved is J pigs or PNG's. Then they come in. Fine. Okay, so bringing them in is easy. You can use file import K or often. What I do is just find them and just drag them in. Okay? From either the find a window on a Mac or a PC, you can just kind of do the same sort of thing with a window. Okay, so there's my files in here. Another way of working is delayed hen. It's connecting to the credit cloud libraries. Okay, so let's say that in photo shop I've got this image. I drag it into my instructor H Q library and in here in X T hunt opened up my libraries and I can drag it. And the cool thing about it is that there's a connection between the two. That means when I dragged this out, okay, Is this giant size? I'm gonna shrink it down. And I wanted to kind of in the and I'm gonna send it to the back, but his here don't want kind of flip it over because you can see over here it's linked if I make changes to in photo shop. So I dragged us into here. It's not this guy anymore. He's kind of a lone Ranger. If I get a window and goto libraries and open up, this guy can right click him and say it. If I say select all and I go to it, it's and I go to transform and flip horizontally. Can I hit, save? Look what happens over the next E. You could see it flips over in here as well, So that's handy, especially if you're using assets across like, say, in design and illustrator and after effects or using that shared library, you can start using an 60 so they're all connected. So when you make changes to one, they all go and change. The other thing to consider when you're working with images inside X'd is thesis eyes. They need to be okay. We're working with a kind of a rough size. Remember off that's in this guy to the back and this guy, even for the back. I'm using my shortcut command shift, Square bracket. Okay. Or control shift square record to Duthie arranging. But remember across here was about 1400 pixels. So we knew are picking images in photo shop. You need to make sure that there are about double the size. You need them. It's dumped a photo shop. So in here I can go to image and I can go to image size and you can see there. It's not quite double what I need it, but close enough for me. That's as big as I can get it. At the moment. Why are we trying to do double sizes? Is because most computers will show just there 1400 version. But if you're dealing with, Britain's screens came so Rigler screens at 72 dots per inch. But saying my MacBook pro that I'm recording on right now, it's actually at 144 Okay, so it is double resolution. You just need to make sure that your images for a website that kind of double the size you need it. Because when we export this at the end of the course, we're gonna have an option that says, Would you like to save a double resolution version? We can say yes. If you start with really small images, it will double the size of them. But they will pixelated not look very nice. Is that with good quality images? When it comes to mobile phones, it's even bigger. Okay, some android phones get up to four times the size. They need to be case if you want to support those super big, high res phones, which you'll need to talk to you to develop her. Okay, with you're gonna support that, or just two or three times you might have to start with some really big images first, and you can scale them down in X'd fine and 60 would do all the hard work. When you export the media. The end for all the different sizes. We'll talk about that. Another video. So the rule of thumb is double the size. You need them mainly for whip all right onto the next video 28. Working with Illustrator Photoshop InDesign in Adobe XD: Hi there. In this video, we're gonna look at how to use Illustrator in Design and Photoshopped all together nicely with 60 plus. We'll do some cool photo shop stuff where we turn him into super long version and saying with her, OK, she becomes through the long version. I promise it's Photoshopped magic. Let's get in and do it now. Okay, So working with Illustrator in design and photo shop are all pretty easy Photo shops gonna have some special treats of the ends. Hang around for that. But working with illustrator, we've kind of seen it before, right? We just draw anything we like an illustrated Copy it and jump into 60 and paste. I'm just using it it copy. And then it paced. Okay. And the cool thing about them is that from Illustrator It's Victor. I can double click honored stop breaking things, A parts that playing with its so that some of the nice pics with illustrator looks exact same way with in design. Let's say I want a drawer. I know how to draw stab ist in in design a lot better than I can draw near the program, so I'm gonna use the polygon tool. Give it a heightened width Sides of 50 and percentage off 10 and you get this kind of fill it with color. Get this kind of like, starburst shape. All you have to do is selected with the black, our it copy. And then And here go paste. Okay. Same sort of principle is it comes through his victor. So depending on your skills, okay, you might be using either of these programs. You might not be using them at all, and that's fine. But if you do know that you can copy and paste from these programs Super easy now, working with photo shop, you can still copy and paste. So in here I can open up a couple of files and open up both here one and hero image to and Aiken sick. That'll copy in Annex D. Just paste it, okay, and it comes through. So that's an easy way. One little bonus thing I want to show you is that this graphic here often when you're dealing with websites, you want a really long thin because I wanted to kind of only be about I'll give you kind of example I wanted to be about that kind of wide right, But I need to shrink him down on The problem is of a shrink him down to fit that kind of height that I want is I want his whole body in there came. Problem is I'm left with, like, white spaces. Either. Side case, I want to be even smaller. Okay? So, unfortunately, you're kind of left with what to do with this area here. So cool, little tricks in photo shop. Okay, The 1st 1 is will deal with this guy. The first thing I want to do is do a slicked all and then go in it. Copy and paste. You can totally use your shortcuts him. OK, so I've got him on his own land. I'm not really worried about this layer underneath. And what I want to do is I'm gonna zoom out a little bit amusing, commander. Minus on my keyboard or control minus on a PC. Then I want this tool here is called the Crop Tool. It's about the fifth tool down. Getting a toolbar and what I want you to do is holding down the option key on a Mac or the key on the PC grab one of these sides, and it just means holding that option key just means it doesn't just do one side. Okay, Holding down optional Ault means it does both sides at the same time. I don't want to. Kind of roughly about that sort of size and hit return. Just giving myself a little bit of extra room now filling this space here, there is a magical trick. Okay, What you can do is you can go to image and go to content aware. Sorry. Good, innit? Content aware scale took on this. Can you get a little bounding box? And you really? For the magic. Okay, we're going to click, hold and drag this way on your, like, no way. And I'm like, Yes, way Love content aware scale. Okay, You see, it made the pails bigger. K better lift him intact. Return when you're finished. That is content aware scale. Now, Canada, where scale doesn't work on every image with particularly good with this one. Let's look at another image case that it's look at this guy here and I am going to do the sex. Same thing I'm gonna go to select all and then copy and paste sites on its own layer. Zoom out a little bit. Grab my crop tool, sees the shortcut. Hold down option. Get it to be the right size now. Another good technique is because you can see here is like a slight radiant in the background. So if I grabbed to say the I drop, it'll grab that and I tried to fill the background. You'll notice that like it's just too high cause the Grady into so we'd And you know, it's not just a solid color in the background there. So what you can do working on the top layer here, I'm grabbing my magic 12 which is the fourth tool down. I can hold down the quick selection tool until you find the magic. Want to click once on the side? Hold shift, click on the side case you got both sides selected, then go to it it and go to fill. Okay. And it'll default to this one here. This is their secret weapon content aware fill. It's quite like content to a scale. It's like, OK, hold onto your hats. Click. Ok, Okay. Come on. All right. Wing in a de select k selectee, select. And look at that magic. Look at those blends. So good. Okay, so those are the two measure Kind of like potions when you want these really elongated images, K. So it Phil Kaye will default to content, aware fill or content aware scale doesn't work every time, but it's definitely the first thing to try. All right, so I'm gonna say both of these and import them in. Remember, we can't use PST, so I need to do a file savers, and I'm gonna do J pigs for both of things. And I'm gonna change these to be extended extended image to neighbourhoods, super high quality. And we also remember, talked about before. Image size. These things joy. Enormous. Now it's a way bigger than we need it, which is good gay and close this one down. And same for this going the saving was a J pig. This guy's gonna be cold extended image. Nice closing down. I'm not going to save them. And in 60 I'm going to say goodbye, buddy. You and you were gone. I don't bring in my term. INGE's just by dragging them extended image one in two and we dio awesome. So you out there? You're probably bigger than I need you now. Maybe made too many panels. I might go back and redo that bots. Do I want to know? Hey, before do that, send it to the back. I should have flipped them over as well while I was here, Which will do now. Okay. And it's transform. You could see I can't do it, but I gotta go select first. It's transform from Toronto. Save close it down and back into 60. Like this guy, if you know, using the libraries, they don't update. She's gonna read, drag them and every time. Okay, That's why libraries are handy. He's about the kind of what I'm looking to do now. All right? And the girl she's out here. One thing you notice is that which is if I put this just on the edge here Now click off disappears. OK, but if I put it all the way out, click on it. Come here. You go all the way out. Kind of stays full. It's because it's not part of this outboard anymore. You can see over here if I cook in the background, but nothing selected I have. Ah, home page outboard. And then I have a passport, which is all of this stuff. Okay, so it's on. It's kind of like separate outboard. You go and you're gonna go about their for this one. Last thing I want to show you before we finish. It's not really a super duper tricking and delete. These is often What I want to do is I wanna have got here. I want have text over the top case. I need to wash him out, some grabbing the Rick Tingle tool. And I'm gonna draw a rectangle that just goes like Yeah, okay. Make sure it snaps to the bottom. Might get it snipped this side. I'm gonna fill it with black. I'm going to give it a border off, None to tick off. And what I want to do is I'm going to move it backwards until it's underneath this thing. Okay, But not behind the image. The easiest way to do it is you can right click and say, seeing backwards over and over again until it gets in the right place. But you see the short get here on a mac, it's command open square brackets on PC. It's control Open square records. Okay, so I see my time just tapping away at the keyboard. You probably hear me to happen. Okay? You can also see it in your layers panel here. Care when I'm just about that image. But below this, what I'm gonna do is lower the opacity, OK? It's just a nice way of dumbing it down, King. Just so that you can add text or, in my case, a couple of icons. Okay, so that's working with illustrator in design and some super awesome stuff in photo shop. Oh, yes. Side note. I have courses on all specifically on and design and illustrator and photo shop. So you can check those out as well if you want to get more up to speed with those right onto the next video. 29. How to mask in Adobe XD: Hi there. In this video, we're gonna look to make masks, how to create them, and then had ended them afterwards. Dragon around, Come back out. The fully irritable, lovely old masks rights. Go make those now. Okay, so there's two ways of masking. It's pretty easy. I've got an image that have imported early m grab the circle tour. I'm gonna drag out a perfect circle holding shift, Drag it across slick. Both of them came holding shift and clicking both and then go to object and go to make mask with a shape gay. Or there's the shortcut command. Shift him or control. Shift him, Man, that masked. And the nice thing about it is that you can double click it and you can see I can move my image separate from my mask. Okay, if I need to click out and the mosque returns gang and undo, that's kind of how I want to the death. The other way of doing it is say that I have a circle to start with, and if I drag that graphic into it, so there's my extended image, actually can just use my hero image. One. If I drag that straight into X'd. Okay, you can see it becomes in the scene to the now. The difference is this one is now using, like, a cover option where it will expand and contract to fill inside of this with this original one down here is Aiken. Separate the mask into different things with the image from the marsh shape. Where is this one here? That kind of fused together that to do with the Phil, you can adjust it inside of here and drag it around. You need to use this method. You can delete it from there by just going to fill and just picking a fill color, and they will override it. Okay, so two shapes make orders dragon inside of one, and they have kind of different properties. I guess I'm gonna delete this guy here, and that's it for mosques. I'm just going to finish off a little project here. I'm gonna draw something that covers their fill it with my color, sent it to the back. Given our border, I'm gonna grab here and just move across a little bit, have actual image and drag it across a little bit, and I'm gonna bring in a bunch off images and draw some errors so you can skip along now because this is gonna get boring. Import all of the miss you're following along and you want to see what it looks like. Case I'm gonna get exercise files, we get images, and I'm gonna bring in all these logos here. Okay, A little appeared all different sizes. Fun, k ultra strength down. So they're on the pace board and drag them all in as I need them. And the cool thing about them being victim Kors, P G's is that that's scalable. Okay. And I can double click to get inside of them supposes easy to zoom in. Double click. Kevin. Expected on one bit there. So I've got all selected now, and I'm gonna get you. That's gonna be my 1st 1 That's what a afraid you're gonna have to be white as well. Holding shift to make sure they scale proportionately you to me. What I might do for the in is on group it and group it. Okay. Ends keeping grouping it. Sometimes you need to do it a couple of times and so I can delete this swings. I just want the icon. I'm not a fan of your new rid. Uh, you mean I like to you? No one that red color. Maybe it's me. Okay. Insane with this fella gonna ungroomed loaded times. I'm going to grab you and make him what? And you'll see that these two parts here. Okay, I want there to actually be a hole in the middle, so we kind of did this before. I'm gonna hold shift, click both of them, and I'll use this one here. The 2nd 1 minus front. Okay. To cut a hole in it. And we're making icons. I got 100% to make sure I'm getting them kind of a nice ish size. And I'm not. Everything's a bit big at the moment. Can sing a tune. You continue layers panel off just to make sure you got enough room. What I'm gonna do is I'm gonna grab all of this and I'm gonna shrink it down considerably because I've been working way too big, assuming out too far now. 100%. That's kind of what I'm looking to do. You get them, make sure you're lying. You get this way, find all my icons they have able up and getting the right size ish try and work out some sort of layout for them to look like that kind of zoom in across skill shares there. Anyone that doesn't have a Nikon, they do. But it's really unrecognizable. So you have to go that side. Why? Because I want to draw some errors. Case. I'm gonna use this. The line tools. Easiest. In this case, I was gonna have a white line, maybe three. If you wanted a really nice error, you might have to actually jump out and find a Nikon vision. He's I drove a tow steal. That one doesn't steal the strict weight. Actually, what I might do instead of doing a little pointy when I'm going to do a proper little triangle, I felt whites to the border off golf picnic on Get the whole thing. The big actually member being 100% now, one of shortcuts to get 100% is command one, okay. Or control one That'll jump out 200% perfectly. So you don't shift crab you down. Being across you don't shift. Grab you and I want a couple of these guys. I want you see, taken away. Kind of go around that circle there. I have to play with around this little later on because you don't wanna watch me tap in this thing. So what I want to do is something like this. So I had my head in. Least you've totally skipped on now to the next video. Having you, Dan playing with lines. All right, That's kind of what I was going for. It's probably not quite right. Ah, especially this Huns Join Almost the little thing I'll do before I go is I want in here circle 100%. I want to have border of whites, maybe two k about some icons that you can bring in so file imports. And in your icons folder, there is one called mute. Ah, Well, you off? Yeah. Volume office. The one I want this in here to indicate that like this Ah, video playing. You can unm you tit Okay with the video camera earlier on. But double click it to go inside. Change the color white. I'm gonna add a little bit of text Black box for it to sit on Phil Border None. Capacity down. Get to line up with this one type till this is gonna saying we have seen turn. That's gonna be explanation. Video photo playing with mu enabled able so that the user kind of knows that. That's the thing that's happening often put in square brackets so that you kind of know it is not kind of marketing. Speak that it's kind of mawr just there to help the user testing go gay feels gunnery white . I'm gonna leave it. How, Vereker? Because I wanted to not look like it's part off. The actual designers wanted to be like a little info piece theater at the moment. You can't do videos inside off X'd. All right, that's gonna be it. There was a big old bit of production at the end of That's OK, but yeah, we learned a little bit of stuff about how to do mosques at the beginning. Remember, way back then, it's probably 15 minutes ago. You get a gold star for watching to the end. All right. On to the next video 30. Production Video Adding text fields buttons in Adobe XD: Hey there. And this video is gonna be a production video. So we're just gonna go through and do some stuff, and what I'm gonna do is the stuff of the top here, where we add some tics, field some buttons, and we drag this up a little bit. Do some a means It's in place holders. And we look at this, which is really cool. It is thief feature requests for extra your bugs. Okay, It's a way for you to go through with the user and say we really need underlining and up voted. Okay. And look at the other ones and about what you think because whatever gets to the top of the voting pile, Adobe 60 will do next. Gay. So handy little thing to go in and say yes, we need these features. Quick. Smart. All right, let's go in end. Okay, so up here, I'm going to add out. Kind of like marketing call to action and probably issues Fairplex. Steal him. Okay. And this one is quick. Tous drive king out easy on boarding. All right. She's going somewhere in the middle of page. You can see if you drag it around and you get close to the middle. Next is pretty clever, all right? Making sure I'm working 100% as well. Okay. And just so I get a sense of how big this thing is to move around within the document, you hold down space spot and you can click holding drag. All right, so I'm gonna build a ticks field. Okay? You might jump out to something like the materials gay or Microsoft or some of the wire frames to get ideas of how ticks frame should look. But actually, the default box ends up looking quite. Goods got the right kind of line around the outside. What I'm going to do is just change the radius to be two pixels to match the rest of the style of this going on at a simple drop shadow. I'm happy with how that looks, and I'm gonna grab my type tool click once, and this is going to say name your course. All right with it. Selected on Open up my assets panel and you need to be my 16. Nice. What I might do is because it's an input field. It's looks of the law, but nice. If we either change it to gray or just lower the A passage e. So it's kind of like fainting there, so, you know, you can type over the top. What I might do is Boris of the stuff from the wire frame. There was the wife when we made, um, I got you. I want you. Yeah, it's bits in here that I want. Copy it. And bring those bits over. Mainly. I just want you to You're gonna go to the air. You're gonna go somewhere with him. So plus, And what is it gonna plus? I'm gonna borrow the east keys along the top here, if you bark both of them candy and boys. All right, some reason when he's going to say upload, upload your just upload video. Okay. I have to get these lined up was good when he's gonna one up with that guy. This one was gonna say I'm dissecting these with a black our and just using my custody moving across in this one, he is going to say preview facing a little bit. All right. And we're gonna have a little check box. You can tick your own version. Okay, so it's just gonna be this hold shift way. Drawing it Rick Tango. It is a perfect square, so downshift while you're dragging it out, count when he is actually changes to say you sample okay and it's gonna bring us to a point where, like, there's no underlying right, so it's got some pretty basic text. Options is missing a bit, so there's no underlines. I'm just drawing with the line till now. And when it comes to these features, there's some that are super essential that you really want and you can't believe it doesn't have. So what you need to do is you need to jump out to show you it is the site here. OK, so it's adobe X'd dot user voice dot com Jump out to the A, and it's a way of you going in ranking stuff. So in here, if you could go on searching you type and underline underline Okay into a search, you'll find that dotted underlying ticks and Lyme ticks. So there's something is, you know, we need to be able to do this, OK, and you can up vote it gay so that the developers at X D OK, they can get a sense of what needs to get done first by the votes. Okay, So you can see this features mean started, which is nice. Such means that a little while ago, So it should be done soon. Okay. And you can add your comments on here and abuse them for not doing it. That's what seems to be for gay. So be nice. Next, You guys. Nice. I've met some of the X d developers, and they're really nice guys. They just have a lot to do. It's a new product. The other thing you might do is just being a little bit of time looking through and just are voting the stuff like in here. This I really want. Casey, just click on vote Edri, mail address or sign and social media. Okay. I voted for loads of these so far, but this one here really wanted, so you can kind of, like, have things like a navigation stuck to the top. So when you're swiping, it doesn't move. It's really good for APS, okay? Or mocking up a nap. All right. Back to extinct. A couple things I want to tidy up and a zoom out is I want this actually to be part off this and I'm probably going to just just this. Maybe we can adjust our mask king. So I'm gonna make this big. I just double clicked on the girl there, and I'm gonna make sure she's big enough my new square and she's gonna be actually in the square Nice. And you guys, a little trick when I'm selecting something is a drag a box around everything and then uninsulated the two that I don't want Which of these two by holding down shift. Okay, It's just an easy way to grab all of cases like them all and then hold shift and click both of these. Then you got the selected. And if you grab in the middle there, we can do you wear grabbing lots of things at one time. Next thing I want is there's going to be our box here. That has to kind of like lists that we're using in the product gave the client wants I'm not going to do those just yet. I'm gonna add a little place older, So instructor list instruct list is will go here. Okay. So nothing special. Just a little bit of a placeholder so I can carry on with my design. Another thing I'm gonna do, ease, grab the edge of it, getting double. Click it and just make this a lot longer. All right, so nice. Easy one. Let's get on with building up our instructor dashboard next. 31. How to make a popup model in Adobe XD with a blurred background: Hey there, in this video, we're gonna make this okay, Page where the background has kind of faded out in dark and this little pop up model appears. Let's go and learn how to do that. Now, in adobe Extinct. All right, It's the first thing is, I'm going to duplicate this page here. There's loads of ways of doing this. You can select the word home page copy and paste. It puts another one next to it. You can hold bolt and drag it across. Okay. You can go to your layers panel and right click home page and say duplicates. Everything leads to a new page. Thank you. Extinct. Okay. I'm gonna sit right by now, just cause I like a bit of gap in the young and rename this one here. This is going to be my my pop up decision. Okay, So what I want to do is I want people to click on this preview button and then to have our options to say, Would you like to see it as a student or as an instructor? Go? And what I would like to do you like to start at the beginning there. I want to slicked all of this. Do nothing. Actually, what I want to do is grab the rectangle. It'll and Dropbox over It'll okay? I'm going to draw it over the whole thing. Way down to the bottom. I am going to have no border. Give it a black filth and I am going to go to background. Blur this cool option case, a background blur. The tech on just blows everything behind that box we made. Now it was black, and obviously it's disappeared. Now is what you can do, You see, it's his capacity, just kind of like at the moment it's completely see through so you can make it a bit more opaque and decide how dark you want there to be in blurring the background. It's a really quick way of like this little pop ups going to kind of just, like fade the background out and mimic kind of like an Ajax pop up. So what I'm gonna do is zoom out a little bit. I'm going to slicked all now saying, and I'm gonna lock it. So command Al is the short cut. Everything is locked so that when I'm working on my little pop up Motile. It's not gonna have trouble. So I'm going to do a little pop up mode early thing, okay? It's gonna be this is gonna have a drop shadow. It's probably gonna have a larger drop shadow. The normal case I'm gonna do six by six and a blur of maybe 16. You see, it's just a bigger drop shadow And to make it really obvious and stand out in terms of the cross, and I can either pull it from my wire frame or member the sticker sheet from Google material. Okay, There's some really nice stuff in the top left part here. Case I was gonna grab him, copy him from across Not to this one. To this one. Paced him. Very good. Yeah. Okay. And make sure I'm working at 100%. Okay, You realize that is a big mode would in big. All right, I'm gonna pull some ticks from here from what students sees what you see. And my gravel of this copy had smooth across and stylized it. Okay, so our text is going to be our 16 so backed assets and we're gonna go to 16. These buttons here are going to be from stealing from him. So I want you. Maybe you can do it. It copy and slick this felling go it it paste appearance. Now that didn't work, cause this is actually grouped together to get ungroomed and just select the blue box because I had both the text and I didn't know what to do. Gay paste appearance. Okay, under the Same with this one. This is already separated. Parts based appearance. Change this 12 out green. Now, I'm just missing around lining these up, trying to make them look pretty, So there looks okay, maybe, but higher but smaller. And you go up in the corner here, all right? And that's all I want. Bread, the background made a little pop up thing that's not quite in the center. The good thing about it is, even though these are all locked and I selected them Looks like I've got everything. Select If I just start dragging this, you can see they just stay locked. Okay, So I'm gonna group this thing if I group, it gives me, like the options. You see that purple line that appeared So I know it's in the center. All right. And that is gonna be this video. Let's go and make the dashboard for the instructor page. 32. Creating 12 column card dashboard using the repeat grid tool in Adobe XD: Hey there, in this video, we're going to look at creating this instructed dashboard based on a 12 column grid. We're going to turn it off so it looks pretty. Will make all of this, then will transfer it over to our home page and do some fun stuff where we blew out the background and ed buttons and do cool stuff with symbols. Lots of things to cover in this video. Let's go ahead now and do it. Okay, so this is what I'm building here. So there's you click on this button. It shows you the student view which we're not building because the client is us. That's not too. They've already got that made its this instructive. You they want us to build out. So what we'll do is we could make a new page, but because we already made the 12 column grid get in this 1st 1 we want to make sure we're duplicating that. So it doesn't really matter if we duplicate pop up decision because it has ALS, the home page, bits and pieces. And so what I'm gonna do is look on this copy paste. Now I want them to be separated in perfectly. So they're all separated in the right order on Do what happens is if I grab the title here and watch this dragon across, you'll get this nice big magenta box aligning it up. That won't appear if, say, I can't see that gap and I drag it out. It doesn't know what I mean. So you need to be able to see of the gap. Can any of the step over here for this to actually do its magic? Okay, so finding it's not working, my have to zoom out a little bit, Co So we named this one here. This is going to be instructor de sport. Cool. So what I'm gonna do is I'm gonna slicked everything. Delete what was their OK? Which is my just my motile. We're going to slicked everything and go command. L unlock it, delete it. And now I want to go to my assets panel and you'll see that because they weren't seen chaotic internal weeks Guys on. Actually, it's easier just to select the top. Weinhold shift took the bottom one case top one heart shift, click the bottom line and then hit command semi colon on your keyboard cake. So now I got my grid back s so I can start using that to build out my dashboard. The other thing I want to do is I want my navigation on the top to be a symbol. Okay, so I need this because I want to re use it, and I want as a symbol I wanted to be able to be adjusted once through the symbol, and they all update on the other pages. So I've selected the mall. Hold, shift, click this guy. So I've got all of this selected. I am going to go to my s. It's panel. And I'm gonna say I want you, my friend, to be a symbol There is them now. It doesn't matter if I drag this out, okay? And line it up or just copy this guy now, because he is a symbol and I click on this page, paste him. It goes into the exact spot that I need it, which is great. So how I'm gonna break this up, I'm gonna break this 12. Colin breaks into four sections quite easily. Okay, so on, we're gonna do three. That's gonna be the left navigation for the instructor and then I'll use the following nine for my card. So I'm gonna build out my card so we can ignore the first street, because it's going to be my navigation. I'm gonna grab my rectangle to and I'm going to stop building this out. Okay, Going cross three now. Make sure 100% okay. And how big did these cars need to be here? That's about right. I'm gonna have a drop shadow. No border just cause I'm gonna grab the talkto once. Plus I'm gonna make it the green. Put a little circle around it. Zoom in, hold shift, Get a perfect circle. No, Phil Green border in tow. Nothing's working if it's not working because I have it selected. Screwed the black a right click on this guy, then have no Phil and have a green border. And how? Why? I want to try and match the plus. So maybe two go tippy tap, tap, tap. Click. Both of them holding shift. Then group them command g okay. Or control Geoana pc. Go back to 100% which is command one. Okay. And it's all of it big. So you go down. It's smaller double click it to go inside the group. I'm going to click on him and just kind of, like, line them up in the middle. And this I decided to change my mind and make it one. All right, so there's my little plus button just not quite lined up. So I'm gonna click on you and you and both in selected. I'm gonna make sure we get your lined and your lines. The up and down is not working out well, cause it's actually a font. So there's a bit of extra the top, but differently. Horizontal work nicely. Okay, so back 100% gonna grab my type till I'm gonna make sure it's scented. Because if I don't and I do it left aligned, that's gonna be fine. But when I start adjusting this when I repeat it, I'm gonna have to keep moving this around cause I want us to be sent its wanna click one. I'm going to make sure it's scented. This one's going to be the monthly recurring revenue. Okay, stick that all click on our roboto that'll work on the center of this is going to be my kind of bigger option. Okay, It's still seem to which is good. And the sun's gonna show the what my current ah, recurring revenue is. And what we'll do is we'll stop playing around with us. It's gonna be different from all these other ones. So it's going to start with the effects large on. But I want this one to be bold. Okay, Not bold is going to have to be book, actually, because I don't want to blow out my fonts. OK, so he's going to be this going to be my lovely color. Great. There's gonna be a little bit of explanatory ticks down the bottom here, or this was going to say up 9%. This is last month. What I might if that just the kind of playroom with the kind of hierarchy of information as I just might make that like a lighter color on what I want to just move a little bit to the left, because actually, what I want to do is put a little up arrow or down air, and actually, I want this Instead of being gray, I want it to be green if it's going well and maybe read if it's going badly. It's always going to go. Well, I'm gonna grab the arrow from maybe stick a sheet Gay from Google has any right area, but we can fix that, Pasted in here and rotated around holding shift. When you're rotating, it will make sure that it rotates and kind of, Ah, 90 degree angles or 45 degree angles came using my Eric He's is to push this around. What I might do is this has come through as, uh, okay when it's selected and you can't see in the insides of its means, it's probably group or it's a symbol. Okay, so all I'm going to do is go to object and go to lingered. Now it's a couple of it. So it's that Plus is a line around the outside. I don't want a line around the outside. I just want you. I want you to show green for good. Maybe the deck agree, and I want to crank the percentage up. Okay, Decide again. Lighter green. All right. So you spent ages designing one of them, right? Gay and you know, it's three columns. So what we're going to do now is multiply this thing out those amounts. See all of the columns I'm going to slick. All of this came. Gotta go to repeat bridge, and I'm gonna drag across, and I just want three of them. And how many down? What about four of them? Great. So I'm gonna play with the spacing and a zoom in and try and get the spacing to match the background Close enough. Okay. I'm gonna have just this in a sick and you can doesn't snap to the things in the background which eso we'll have to manually do it. But to be honest, it needs to be 12 columns, but not absolute pixel. Perfect. Because this is something is going to be recreated in code later on. Okay, so I'm gonna make them kind of even. All right. So you get to a point where you like you could now go through and say, actually, I want to just this one double click this one and go to use a tune, okay? And the turn at the moment is 15% but it's for my stuff. Anyway. We use a chance quite high, and we're gonna get to a point now where I say I want to change this to be rid because up using chains gonna be up by some last month was going up 3% 3% up based on last month. But that's bad. User turn up as bad monthly. Revenue up is awesome. So what I want to do is go through here. We're going to run into a problem. Where have the selected and I want to go and change this to, say, Big bright red Letter state. All change. Okay, so there are things like text you can change like we changed user tune. And that didn't update. But you'll find quickly that you eventually need toe ungroomed them or outline them. The bad thing is that they'll never be able to be that nice little repeated grid. You might be able to drag out more of thumb, but now with them selected, okay, I can go through, and they're all individual parts. And that's what I would need. Now I need you can have a select on him. Okay, He is grouped. Okay. That's why I can't select on just the Spitzer, the role group. So what I'm gonna do is either double click on it, okay? Or you could one group it. I'm going to go to Big Bright Rid Morning coat. And same for the fill of this. What I might do is add that rid to my reusable colors. Big, bright red. Okay, I'm gonna go through and fill those all and I'll do that in and speed it through. What I want to do is work on the left hand never so often. When you get into, like, admin side of things, you'll have a top. Never nice, simple, easy one for everybody. And then on the left hand side is, will you potentially have a secondary? Never. And that's what we're going to have. So I'm gonna grab my type tool working 100% gay, end and black. Our space by drug across. Took once, and I'm gonna have at the top here the dashboard dashboard. Okay. I'll use one of things. They lined it up at the top of this, and now I'm gonna go through and add the different options for this dashboard, and there's no bullet points. So what you can do is go out to use a voice end on that. I showed you an upgrade. It is a feature or just hold down the option key and type on a Mac or bulky on a PC and type eight. Okay, the number eight on the top of your keyboard that will give you a fake bullet. Okay. And I'm gonna go uses, And I'm gonna slick this and pick my 16 for my body copy. And instead of putting him returns and putting in the next one, Okay, what you want to do is have separate boxes, because if I do this and have loads of returns, I can't have this. When I got a prototype is more than just one button to go to another page. Okay, so all of the naval end up in one page. What I want to do is have lots of inspector design. I want to duplicate this. And now I'm gonna go prototype. I could say this button goes somewhere else different from this page. So the one textbook that's not allowed. So in here, I'm gonna go through net this. I'll get Jason to speed this up. Thank you, Jason. Casey, you're back. And what I want to do is if you didn't know if you hold the black arrow click holding start dragging. And after you start dragging held down the R key on a PC or option Chiana Mac, you'll get like a duplicate. And if you drag it close enough, you'll see those lovely magenta boxes pick up and say, Do you mean 16? 17 pixels and you say Yes, please lesson easy. There is a duplicate, like in illustrator. You can go to it. It duplicate command D. Okay, so that's probably actually quicker option command e to drag this out. Command E. And it just duplicates the thing. You have to drag it. It doesn't do exactly like illustrator, where it kind of steps it out as well. But you can duplicate or copy, paste or drag like I just did. I know this kind of like instructor navigations going appear in lots of pages. So what I want to do is slick that all and make sure it's a symbol over here symbols so that when I update it once, it updates on all the pages. If you've forgotten how to update while we here Okay, I'm got two of these now, okay? Or even three of them. It means that if I go into this 1st 1 say, actually, we're not gonna call it. Users were going to call it people gay, and nothing changes that's quite unique. But if I click off, click back on right, click it and say update all symbols. You see these come along for the ride. So that's why I'm undoing now. And that's why symbols are useful for, like, the top nature of this thing here. Okay, so there's a couple things I want to do before I leave. And eso it's kind of the main guts of it. Done. I'm going to go through and adjust these boxes and a little bit. I'm gonna turn these off. Select them all because I have used them to get our lovely column grids. So we know it could be developed later on easily. But I've selected all these in command semi colon. Those are off now, so I can see what it looks like and what I want to do for this pages. I want to change the background color completely because I like this kind of white boxes, but I need to have a little bit off contrast in the background, so all you do is if you click on the edge, you kind of page properties that double click the age. You see, appearance Phil means that the background color fill. So I click on this and just pick like, a really light off white. Okay? My even edit to my swatches down here so I can reuse it later on. Okay, Just to pull those off the background cases, a couple of things I want to do before I go. It's these two boxes of one kind of combining toe once and Internet went off on one group. This one, he's going to be double height, okay? And that's when he is going to be Alistair like recent subscribers. So if you're a train and you can see the people that have just signed up so recent subscribers and you see now how useful it is to make sure it was scented before I started working cause it's always gonna hear from seem to otherwise left the line paying the bomb. Okay, I want you gone. I want you going. I want you going. And now I need to create some recent subscribers. A really good trick for that is if you jumped a website called There's lots of them. If you type in random name generator, you'll find lots. And this is the one that always end up yet And you say I want 10 names or male and female names style. I just want really common names K and generate random names. And I use this to kind of populate datasets for my mock ups. Makes life really easy. So I'm gonna grab all of these, dump him in here, and I'm gonna make them actually just one big textbooks because I don't plan on being these clickable in this mock up. Okay, so I'm gonna grab all of these. I'm going to make sure that 100% some mixed from designing these, right? And what I might do is make all left the line this tabs and hands. Not what I want, spaces. Now, you can fast for a little bit, Jason, to the end of this design thing that hang around for afterwards. There's Mawr. Interesting stuff coming, But let's be this up, all right? My back and what I want to do is I want kind of one of these. These last two, we're gonna be download the app, and we'll do that in a second in this one here. I would like to be, like, a little because there's a new product. I want to have a little option that says, Ah, if you have a great idea email US case, I'm gonna get rid of you. Cure you. You. I don't need this. A little extra button for this one. I'm gonna put in a big button, and I'm just going to steal it from this page. You, up you It's all grouped on group you. Please copy. Go. And you're in the ST Ah, nice. Nice. Nice. This one's going to be feature requests. Feature requests. Cool. Yep. Well done. Old for drug from one side. Kind of goes both sides or option on the mac. Okay, that's gonna be my little feature requests. But now I'm gonna update the rest of the use of Jason can fast forward these, and I'll see you just afterwards for a tiny bit more before we move on. All right. So filled in the details and what I also want for this is I need all of you guys just come down a bit because I need another button at the top here for you that allows people when they're in their kind of preview, to be able to save with her up to it, we'll start making their own cause this would be a demo one. So we'll do something like create your own create Plus at the end. Sometimes I get a bit long with these buttons that this is probably not gonna make it through you. The testing can't for the life of me. Think of a better way of writing this right now. Same colors, Actually. I might pick something slightly different to be a little bit obvious that sexually should be roboto. That means of that's roboto. That means that's not either. You Oops. One of the buttons like that. You too, Because I copied and pasted them from the wire. Framed? You probably saw that went dough and I ignored it the whole time. It's OK. We've got that up. All right. Eso got that? I did a little bit of text. You can go on now. I'm just gonna liberate text here. That's is E. This is actual live data. And I wanted to be, like, colloquial. So some reason italics makes everything feel like it's the spoken word in my head that does . At least it's going quite small. This is gonna break my of rules here because it's gonna be something alert or different. Yes. These are actual live data. That's what everybody to know. And what I want to do is now that I've got this kind of like how I want to I want to use this on the home page. So I'm going to do is I'm gonna grab. I don't want them all, but that is going to be enough of what I need. I'm gonna copy them. Sure. What I want to do on my home page. I want there to be an example. It's gonna go just here. I'm gonna put it in a big box that stretches the whole with okay. And I'm going to make this box this color, and I have no Phil. I'm not sure how long it's gonna be a my after just in a second on, and I wanted to line up to our 12 corn grid. So remember, if I'm on this page here, click inside of it. I gotta layers. I should be able to see the columns here, and I want to turn them on. We're going. Come on. Semi, Colon. And I might have to unlock them because they're not quite long enough anymore. So I'm gonna go command l for looking, and then just drag them down and they locked them again. You go command elegant. So there were locked. I'm gonna pace this. And I wanted to line up with those columns there. Okay? And I'm gonna come down. Yeah, but that they actually I wanted to be this column here. In this case, I'm gonna add a cool little app download will do in the next video. Eso you something like that. And what I want to do is I want to show you how to make it look like because I want this big box and here to go from the 12 columns. Okay. I want to be the same as these. You copy? You excite usually short cut some sharing a long way. Just so remind you, but command all the Okay, so I copy command V. It's just a really easy way to grab the exact same colors off these guys. And that totally didn't work because it nine grouped udon group in and then selected that part. Okay, get it done. These Michelle cuts command see, will control Vienna PC and then command all the will pace through the drop shadow. The Phil gets rid of the border. Happy days. Okay, Next. What I do is I want to get this to look like it's fading out, so we're gonna look at blurring a little bit. So first of all, I don't need that. And what I'll do is I'll just trim these guys off, just leaving them. Actually, all of youse. Goodbye. Okay, So what I want to do is I'm gonna grab the rectangle tool, and I'm gonna draw something across the bottom here. I don't want to fade this out. I just want to kind of like, Look, it's disappearing into the bottom there, like I showed you in the intro. So what we'll do is you feel well, give it no border and background blue with views, but we can just use object blur. Okay. And you can see I kind of get a faded edge there to look like it's probably wanted to beam or how much something like that games. Moving in across now, fading doesn't for all the corners of the moment. Okay, So you need to be maybe just drag this across and then fickle on him and bring him to the front. So command shift close, square bracket would just bring it to the front where you can right click at member and go to bring to front, cause I got this kind of like disappearing. So there's, like, Looks like there's mawr to use. So now I'll go and grab this button. What I should do is have this on both of these guys Dragon into my symbols library. So I've got my buttons easily accessible. Okay. Just moved him across there. Just hit the plus button on symbols. I've got my buttons. Don't want update one and the update them all, But I can use them this way. Watch this. Just use it as a getting started so I could drag him out. And he's part of the symbols, but ungroomed him command shift G or control shift G on a PC. That means I can just go through disturbing them. Rather going finding a page that has them already. So now he's disconnected if you own group them, they're disconnected from the symbols. Okay? And this is gonna be like a Seymour. You're gonna make it up so that there's kind of more to go and you can check it out. When you click on that, you'll end up over at this page of speech. Nowhere. This page here. Okay, The dashboard co cola shocker is if I click on this box here and ago, command three or control three on PC. It'll zoom in just to that specific area. It's a good way of moving around if you're finding it a little bit hard to get from page to page. It is at the moment and X'd. Okay, they needed some sort of like easy navigation pages, panel or command j like in design, some sort of way of jumping back and forth really quickly. Okay, The last thing I want to do before we go on to the next video, this is a long one, right long. So going to keep track of your innings can. This is going to be a large roboto, and I'll make it Sansom dealing with the font size correctly and you. Okay, so that's going to be him. He lines up there. What actually might do is I want to use that and use it white All rights in the next video , we're gonna build that that click here for the app thing. And this is gonna be pretty cool cause we're gonna look at CC markets and how to use P ST's and Folsom designs into a working PST for the market. Sounds confusing. It's not. Let's do it in the next video hided up. 33. How to make a mobile phone mockup with Adobe XD Photoshop: Hi there. In this video, we're going to mock up our dashboard on a mobile phone. We're gonna use Theodore B market that allows us to get irritable. PST is from it and also use smart objects so that we can do cool stuff when we update things like the logo that were made actually, just going to destroy it had save means that Photoshopped markup updates automatically. And if I got a 62nd and 60 updates as well, makes it super useful when you are kind of halfway through things like designing logos like I am for this products Sisi libraries rule. Let's go learn how to use that Now, in both X'd, photo shop and illustrator. Okay, so the first thing we want to do is find a phone to use. We could draw one. It's been forever. Um, and so we're gonna use the creative cloud app. And either you can get a stock and find an iPhone in near, but those are ones that you are charged for. So assets, though, has some good ones in here s its market search. I search for iPhone. I search for iPhone six and seven and six teams that have the most variety of options. But I would actually be looking for an iPhone X or X or whatever the version it is for you now, Okay? And then you just pick the ones that you think might work. Well, due to in this case, I'm gonna download this one to my instructor, H Q library. And there was another one that I like down here. This one here. We'll look at both of these when you cook on them, looking for PST. Okay, So you want something either air I file or a PSD? We don't really want J pigs, mainly because we want them all to be click already. So I've downloaded both of these. If you don't have access to this assets market, they're actually already in your exercise files. There are new images folder and they are called iPhone markup one into you could open these up. Why? I've called this one PST PST. No. Sure. OK, so open both of these up and Photoshopped. Or if you are using the credit card libraries and photo shop, you can get a window, open up libraries, make sure you're on your instructor H Q and they should be in here. You can just double click on them. We'll do this one first because it's simple. On his first thing I want to do is I want to go through, make sure there's lots of parts to it. This is the nice thing. Everything could be turned on and off and adjusted, wanting the background off because I don't need him and and what I would like to do is bring in some graphics from 60. So bringing in graphics is kind of two ways. Is the cave man way and the proper way. So I want these three to be part of my dashboard. What it can do if I just copy up to command, see or control see on a V p. C, and has pasted in it just brings it through, but it's pixels. Okay, so it's not like lovely victor stuff, and you can see it's too small to get around. That will I do is because I'm going for a quick, cheap and cheerful OK, I'm going to just make them bigger. Copy them basement. Okay, Now they're of ah, big enough size. I can convert them to a smart object from one of the super serious news. It transform K to get it down to the right size. OK, so that's the caveman way. It's rasta. What you could do if you wanted to be super official is, and people the victims is that with these guys selected, you group them first. To command jail on a Mac or control J on a PC is always they are one group you can right click them in click export. We'll look at exporting later on properly. But this is the basics. And here I can either pick xvg or PdF that will retain the victor. Then you could bring those into photo shop and those will be lovely. Victor. Goodness, if you have no idea what Victor goodness means, just make them big and copy and paste them across. Okay, so what I want to do is two things gonna line it up okay with screen and I want to get it so I can see this is the thing that I want. This is the screen, and I wouldn't want to do is have it just above the screen. And there's an easy way and photo shopped to mask these two together. So just make sure that the graphic that you've brought in it's got hearing and rename just to be official, it's gonna be my ex d mark up, okay. And make sure he's above the screen. And then if you hold down, option on your keyboard or if you're on a PC, hold down the okey. You'll see if I hover my mouse Just between these two fellows, okay, Are looking for this icon. If you click on that, the top one gets masked by the one and today you see, he's nice and easy there, you can move around separately. Okay, Just a nice, easy way of doing masks in photo shop and with the screen. That lovely person who built this lifted his victim so I can double click the icon. And I could go and change the color. And actually, I want to use the color that I used in 60 which I know is if, too if two of two Okay, that kind of great color And what I've been working as well are being for the client. I've been building them a logo. Okay, So you saw probably the beginning. We had this just typed logo. Okay, that's called a longer type of just a bit of ticks stylistics. But they wanted a logo. And this is kind of where we're at now. Okay, so we're adjusting this little bit and nice, easy way for this to work necessary. The workflow that I'm using Is that say, That's kind of way we up to now it's gonna drag into my instructor. H Q. I'm in illustrator, which is often were you build logos. Okay, I'm gonna illustrated course. Check that out. If you want to know more about Illustrator So it's in there. It's Victor, It's awesome. And Photoshopped, you'll see he's appeared over here as well. That's the nice thing about libraries dragging in one. You could drag it out here. Okay? In minds. Just going to be at the top there. Quick return. Zoom in a little bit and I've broken it. How did a break? Remember I said this extreme market needs to be right over top of the screen, and I ended up bringing an outwork in between them. So I'm going to go up there, okay, and make sure that these two are right above each other and this guy here. My logo is no interfering with that little kind of structure we built. Awesome. So the cool thing about this, if I had saved now it's clear cuts. And if I had said, Can you see? Because I bought it through my libraries. It updates over here as well. You could just say this is a piece D or a PNG, cause you want transparent background up to you, and then you can jump into X'd and either important or use your library. So shortcut time command shift l for the library's okay, Or you could go up to file their in there. I'm instructor. It's Q. Now you seem to see the benefits of these libraries. I could drag him in gay and close it down. Okay, so I've got this little guy now that I want to go through and you shrink him down to be kind of in this little app thing, you sort of the beginning. Can you also see the little green tick? That means that it's linked to the library. You can, unlike it, say that you don't want to connect it to the library. Arrogant. You just click on that and it just disconnects, okay or what? I like that connection. So I'm gonna bring him in here, put him kind of somewhere the grab this option. And you, my friend and ungroomed hood. So I can see that, Phil, This killer, it's like both of these holding shift, and then we're going to go to object am ago. Mass with shape, not commands. Even if you're from illustrator. Okay, so and actually, what I want to do is I'd like to copy this copy paste, and I wanted to be in front, so I want you. I got two versions of it now. Actually, what I want to do is copy this going Copy and paste. Um, so there's two versions of them now, and I want to select the phone in him. Came and then go to command. Shift him or control, shift him. Okay, because now it used to that rectangle, that peach kind of rectangle to mask it. And I'm left with a background as well. So why continued using libraries? This is where the magic happens when you've kind of strung together a logo that's half and development with a mock up and photo shop. and that's been brought into 60. So Fireman Illustrated here, I can double click the logo in my library, okay? And open it up and decide that. Actually, this thing say gets changed. I don't know. I don't know why. And but, you know, it's gonna change. I know it's just kind of a work in progress. This thing here, you change the farms, you change the colors, everything goes and changes and watch. What happens if I hit file safe? Okay, it updates the logo in the library. And because photo shops using that same library item, you can see it updated over here. And if I save this document and going to eggs day, you'll notice Sometimes it takes a little bit of time for 60 to kind of re link it. If that happens, you can open up your library. Just click this little icon stand up for me already. But if it didn't, you could just hit this button. That kind of refreshes it so you can see Well, it's work in progress. You can set these chains and that would update if I was using the logo up here in my top part as well okay, which I will do in a second. So I'm gonna go back and do this on do before it broke its save its first up updates say that annex D get a second and will object. So there's one of the versions. Let's have a little look at how this option work. So I phone the mock up to Okay. I want to show you this because some of them come at it like a slightly different style. That other one we did. We just use their simple mass to make this happen. What they've done in this option castle dot co Good minutes. A free resource that got two phones. Okay, a white one and black when I want the white one. But we'll cover them both on for the moment. Sees his place, your image here. What they mean by that is, if you double click this option, hands court a smart object. You go inside at this, so we're gonna double click, go inside, and what ends up happening is that was the file that were at ok. And we've opened up this extra thing called screen one dot PSB. These are smart objects. It's gonna ask this about fonts? I don't mind. I don't want those funds. So what I want to do is I'm gonna slicked everything in here except the background and had delete, okay? And with the background, I'm going to Phil. Okay. Which color we want to use? We use the F two ef to have to again. Okay, so good. That kind of like off grey, all paste that thing in again from 60. Where are you, buddy? The draw inversion. Okay, Call B based on him the big transforming down Nice. Something like that. And the logo turn to complete it now. So I'm in this super document. I've got hit safe. Then I can close it down. And what happens? Magic had lays it out for you. Okay, so if you're finding stuff through the adobe market often that X separated this way and things like that. Screens or mock ups for a book or a bag or T shirt. We'll have this thing where it says place your energy and you're looking at that icon there . Double click on them. Go inside, make changes, save it. You don't have to close it, but go back to this original and you can see it's updated in here. Kate on under that. Save it again. Close it down. Nice little mock up, and what I'll do is I'll turn it back around off all turn the black thing, phone off it, save. You'll notice up here in my mock ups, it's like there and I could decide now which of these I want to use. I might try just a different option here. You in B options. So not you. I'm going to bring it in. Come on, shift Al for the libraries. You, my friend, is updating. Give a second. It's a lot bigger. File that one there. All right, Here it is sometimes to take a little while. The connection with X T and libraries is not 100% awesome yet, and so that's a pretty big markup. Okay, I'm going to do the sex. Same things I was doing for It's got it down 1% 100% and find something that works. I don't really like this version. I just wanted to have another option. More complicated option to show you how it works. So now I need to do is I need to grab you copy, Paste him, get that kind of where I wanted. It's like both of them command ship him and I've got a nice little markup. But because it's part of the library's, it'll update. If I update and photo shop, you could just save the piece de and bring it in, or Jake Pig or PNG. If you want to keep it super simple. I don't like use. I'm gonna delete it. Okay, so that's how to work with those lovely smart objects and peace needs. Now what I'm gonna do is just a little bit off filling in the details for I want them to be . If you go to download the dashboard app, which will mock up in a video soon, okay? And we'll pick back to my sis panel, I'm gonna use that one. The making wines exciting now and Tim's off the logos k for the APP stores and put them there in icons. And there is the download APP store and Google Play store. They have very different sizes, so I'm just going to scale them down, have them in here. Why the different sizes? That's just where I downloaded them from Google and from Apple. They give us different sizes because his victim doesn't matter Next scale. Nice leaders need to get these things the lineup and BU roughly the same size. Awesome. So I'm gonna rejigged nursing a slick that'll copy it and take it over toothy home page, which is you. Look on the big box command three or control three to zoom in, art pasted in. Okay. And I'm gonna use most off this. What we'll actually do is have bits and pieces over here. Um, group those. So I've got this. Needs to be a lot bigger. You could see again if its a smart object and it's linked by start using this over and over again on different pages. It means when I update it, it's gonna flow through the whole document. I have to go find it and try and change it. So what, you background image to be the green just cause you know, it's like that Copy and paste it. So two options, like both of the used commercial m double click it because I want this image to be a little bit and hear from the backgrounds. All use both of you command one or control one on a PC to zoom into 100%. Some getting these things. That kind of right sort of size will be a little bigger on the desktop. And I want you please. Mm. Less do anymore. Thank you. Come on, three. All right. That's gonna be my little clickable. Actually, what I want to do is you to be a little bit up here. There's the background golf on the green boxes. Well, to be just kind of a little bit higher there. Right, My friends, That was another long video. But it will show you how to kind of utilize things like Adobe Market to get the best use out of photo shop and connecting everything in together with C C libraries. Hope that was helpful. You learn a few things. Let's get on to the next video where we mock up the app 34. Make an APP version of your Adobe XD UX project: Hey there. In this video, we're gonna build the APP version of Instructor X Q. Okay. We're gonna build a simple on boarding system and then style, eyes out, sign up system, and then have a look at our dashboard as part of this as well. We'll look at logos and some of the pros and cons of using X, d, P and G's SPG es Grady INTs is a little bit of goodness at the beginning. And then we're just gonna get build out the up to this level. All right, let's go and do that. Now in next case, first up, let's grab the outboard tool pick. And iPhone was going to use the size six and seven. Okay, drink down here. Ended up in between these pages. Real problem. But if you have the whole outboard selected command, three get kind of close and in command, one gets you at least 200% a couple things I want to do straight up. Is this often here? This is going to be my app, and this is gonna be the on boarding. There's gonna be like a little on boarding message that comes along. So this be our 1st 1 and and one change the background colors that if to them using is there, I want to bring in a logo and I want to show your logo is just cause it is, uh, something you'll probably run into. So if I got a file import and I can see here when bringing a I files natively yet, case what you can do is just open that same thing in Illustrator Stick that all copy it and paste it in. And most of the time that works. It's not working for me the moment cause I'm using some complex Grady INTs. Okay, that's dropping the top one, but it's doing it fine for the bottom chunk off radiant that I've got going. So I have no idea why that's happening. So if, you know, leave it in the comments, I'd love to know why, but watch this. If I double click on it, you can see it says has got a great infill. Okay, you can see it. There's gotta Grady infill, but for some reason it's not displaying, so I'm not sure if I will be used ingredients in the final version grading serum. They nice other, Not so much, but to get around that, okay is it's going to illustrator and save it as a PNG. There's a couple of ways to do it. You got file export okay and export as well Work. You can just pick P and G from the bottom near or there's an option in the assets panel Asset export. You can just drag this whole thing in, okay and then decide. I wanted to be a PNG, and that's a way to export it as well. You see, it didn't lots of pieces. You might have to group it first. So group, then Dragonfly s. It's panel. Whichever method you're using, you can now export a PNG. I'll export this and put it in your exercise files so you don't have to do it. But just know that can be some complications. I think it's just radiant in spg es that have the issues so you can bring in the option that I made is in your images and it is called is a PNG and SPG and an IR file. We want the PNG one. In this case, it's quite Biggs and his amount and scale it down a bit of this is something that won't be a problem in a little while. Just a zit. The moments, an end of ec circle to the middle. Okay, I'm gonna use that line, the line around the outside, but I'm gonna fill it with one of my colors. Which one? Social. I might be trouble through them between the different on boarding messages. I want to use one of these is an example on this one. Copy it. I want to kind of just give people an idea of what? What's actually happening in this camp. Okay. Before they, you know, just a little on boarding show. This is how cool it is. So it's gonna be a little bit of a marketing message up here is well scented. Thank you. Marketing message. Something like that. Okay. And down the bottom here, I want there to be. So when we're marking it up, there's kind of like a next and back and a little dots here that kind of show you where you are in this process, it's what I want is to options. And I've just pulled these from are y frames. You can see them here, skip next, And these dots gonna grab them. And originally, if you haven't seen this, though, pulled from this you like it for Google material. Okay, so I'm just gonna grab these, bring him through. Didn't actually copy them. Okay? They won't copy in pace. If I got a type tool selected, grab the black Arrow, then paste game. We'd thing. Okay. Eso these bits of ticks now are going to be bold back 100% gonna be my green. Okay? And the reason I have these kind of boxes in the background here is gonna make it easy to click. Okay, Which will use later on. You'll find your fine, but I want to make them that same color. You can't really see them, but clickable some of these dots going to go in God's on group them. You, you and you. So these two actually, let's start with more being green, and then we'll have washed out green for these two. So you know it the first dot All right, easy duplicate this guy. I'm gonna hold Bolt, drag it out gay, and this is going to be my on boarding message. Number two. I'm gonna pull some other data from here and what I'm I do. Just so save time is I'm not gonna change these for the moment. Gaol I'm going to do is add the details because you don't want to watch me change copying based fixed. So what I'm gonna do is you my friend, again to be young and use the I drop. It'll just like you. Actually, no, I'm not just gonna crank up the capacity because there will, actually, the same color. So what is the capacity for this 36 86? And the other thing this one's gonna need that the 1st 1 didn't is a back arrow. Okay, Because you got here, you went forward. If you want to go back and check it, you need a little arrow gonna pull that from our wire frames as well. I'm going to. Okay. This is all gripped singing group. It's on. Grab just these two pieces for me place and then stick. Then make this guy think. Colors, backgrounds, And often, when you if you zoom in, it's just easier to slicked individual objects. Okay? And this was gonna be a little green error duplicated again. Can this one's gonna be the third option for this next part. I want to actually steal from the wire frames because it had a really good option that I stole from the Google material logon screens. I'm gonna copy both of these. Now, if you click both the names holding shift, Okay? It looks like both of them. And we can bring in the whole outboards. What we did previously is we were just bringing elements from it. So I'm going to drag these guys so they will line up nicely. I think both of these guys and he's McCullough's. These need to be in the same spot. So unfortunately, there are different. I've kind of moved these into We'd spaces here, so I want to make sure these air exactly in the same spot is the last place. Nice way to do that is instead of dragging and just copy them. So I took on this board copy these guys actually grouped in fist group. Okay. Split on the airport. So you know, you're on the right aboard. Click him the black error copy. So it a copy Click on this and go paste, and we'll put it exactly right. Place So now I can go through. And so, actually, you need to be white. Double click on it to get into the group, or you can ungroomed it. Okay, maybe with still gripped and now in a copy, um, go to this one post. It will go back as well and a nice little trick. Now, we've gotta go through and change everything from Helvetica case. There's no fine change, Font. What you can do is a little sneaky. Trick is say, I want to change all of these blue guys. I'm gonna own group all of it so I can actually slicked on this thing here. OK, so it's blue and it's the wrong font, So I want to change it in a big box. What I can do is that it is a character style. I say he co then I can go in it at that character style, much this and say, Actually, I wanted to be black. And can you see magic? It's updating them all. And I wanted to be my roboto. Okay, all you might do a different way instead of eating it up here. Which one is he? He was this one here this 14 K's transformed the name pulled from the front and because I changed the fund, you can see it down here is now down the bottom here, and I don't want this one, okay? I just use them to gravel of the second just hit delete. And nothing really changes. So you right, click get a delete and it doesn't delete the option. We're gonna do the same for this, so I'm gonna slick them, make him a temporary style, right? Click him, go to it it and say you, my friend. Now, Roberto And you were going to be black and you'll see, even though they're not part of the style, it's pretty cool. And so robot, a 10 point. If you want to keep it, I might keep this one now and to work on my app If you don't want it, you can just right click it and delete it. So I mean this guy, actually, what I might do for him is just shift. Click both of those and pick because I got a fund that actually matches these two already. So no big drama instructor, H Q. What I will do for instructor H Q is ill suited up for the logo logo have made a white version. So in your images, there's one and they're called Instruct the logo. Version two white PNG case. We'll bring him in and shrink him right down Too big. All right, We'll do this. Guy Akopian slipped on this guy. Paste him. He goes in the right place, actually, before paste him. Is it like that? It's all the funds are updated. This line style needs to be updated. But groups for one group them. Actually, I just want the boxes because I had to take selected as well. And in here I want the border to be I'm using this color here for my lines. The background color for both of these APS are going to be a full color if to same with this one to and yes, needs changing. This stuff does personal information. I'm just gonna pick you. Well, that's updated. I need you. You this one still repeating grids. The cool thing about this is, if that is an group, there's other ones. This one's still repeating grade. You know, it is because see this thing here. Okay? There's, like, two little strange handles. Either side means I can keep dragging more options out. So it's kind of handy when they are still there. Means you can double click to go inside heaven selected. And if I change one of them to the dock Oh, green, you'll see the old change co. Uh, anything else, this little guy color should he be, He's gonna be the dark green things going to be whites on group. It's came here. White button. Nice. Okay, So how's it looking? We're nearly there. You go. You don't You do. Come along for the ride goes. We're getting there. I want to more pages for this kind of mock up example prototype And doesn't really matter. I'm gonna start kind of from the beginning. I don't need any of this, so just double clicked. It moved it. So when you log in that sign up in Logan, the next one I want is going to be the dashboard, because that's the main feature for this app. We kind of mocked it up. Before I'm gonna do is been everything. The background color, it's gonna be that gray. When was the division of the logo you Legos? That one. It's just way too big. Steal him from my wire frame. I want this option here. I was gonna color him. Can you see if I didn't have that selected to just place it in the middle of my view port here. Case air right in the middle of the screen. But I click on it, It takes it where kind of got it from. So I'm just gonna go through and go get him and group in, Go to the Phil. Given that Phil, actually, there's obviously a lot of the box in the background of this one. Zoom in on. Group it again, These three fellas, and you're going to be that green option. Gonna go up to the dashboards that I made and grab an example. Actually, I'm gonna grab um, ALS. Okay, except for these two, they don't want them part of my mobile app. And I'm just gonna step them up over here. Okay? So I copied and pasted them, and I'm gonna stop group in some stuff. You three commit grouped so that you can go underneath same distance copy, actually, you know, group them, then bring these guys down, and then I'm gonna sleep all make the month, the group get them. Okay. And what I'm gonna have to do for this specific app here is gonna have to make this super long, so I'm gonna paste it in here. The federal rating does just handy. Okay? There's a couple of things that this thing needs to do. First of all, put the outside. All the name is the amount so that it goes down and you can see everything. Okay. And I want to make sure that this thing here is scroll herbal so that when people, because otherwise it just collapse it to the top. Here. We want to be able to be scrolled herbal in our prototype, and I want to keep making some other stuff. But really, I'm just getting into the, like, making things and you're not learning anything new. You probably given up already by now, So we'll leave it there. We've got our APs And there's one thing that I've just noticed this little blue line. I'll go and do that once I've finished this video and save it. Hopefully there was something in there helpful for you. All right, let's get on to the next video 35. Hidden features for Adobe XD Repeat Grid: Hey there. In this video, we are going to use the repeat grade to do easy repeats. But we're also going to do some fun stuff. QC repeats with separate images in different bits of text or automatically. That is pretty cool. Let's go and learn how to do that Now, in Adobe X'd. All right. First thing is don't be surprised by this page. I made it in between videos of you falling along with the tutorial. You'll go where this page come from. I just made it now because I want you to click on this option and be able to go to some sittings in the app. Okay, so the first thing I want to do is I want to build my courses. Page, I'm gonna go command zero to see the whole thing. Zoom in a little bit and I'm gonna start with this option here. I just noticed them. We but the ticks left over from another page showing. Ah, command l unlock them or control Elena PC. What I might do is start cooking on this just to tuck it up a little bit a little bit too long and grabbed this one Copy and paste him, moving along with the same distances, all his buddies. And this is not going to be the dashboard. Now, this is going to be the courses page. No, it doesn't need the way page in there. So got courses. Because what I want to do is I want the navigation to come along for both left and right, which is symbols. Okay, So what I want to do is I want a just bits and pieces. I want you to disappear. We need to turn our columns back on. So I'm going to go to my layers panel, find these 12 guys and go command semi colon. It'll turn them back on so I can see them were actually a funny color now. So I'm going to unlock them and just make them a darker color so I can see them for the moment to lock them again, command l or control on a PC. And what I want to do is I want to build out my courses page. So this is now going to say courses, and I want to go and throw in first. So this menu I've decided straddles three columns, so I'm gonna make sure I don't use those three. I'm gonna put an image in for Cheryl's two of them in my 12 column grid that I'm gonna have a ticks box. That goes for about five. Just guessing. Now, looking at my printed out, why frame next to me? Okay. And I got put in some placeholder text. It's gonna be one of the secret or some things I show you in a second. So I'm gonna go back to my assets. I'll pick the style that I've been using. Now I'm working at 75 so it's just too soon. Too soon. Doubts going to command one to make sure 100% gay or control one on a PC. And that's just looking too big now gonna leave it because I don't want it. Toe. Actually, do 1.5 columns. That'll be fine. But we have the room, so we're gonna use it, so there's gonna be my text. It's left the lines going to go in there. I'm gonna add a little Chiklis button song in a bar member of my buttons for my symbols on group them. Decide on this fellow. Okay. And this one here is going to actually give me too small If he's only one column, so I'll get him to be one in a bit. This one is going to say Chiklis, So big part of this thing here is Chiklis for courses. So you can know where Europe to case. I'm gonna use a little checklist button. So in my wire frames are already kind of mostly done that. So I'm gonna grab these two guys. Ah, double click it to get inside gravel. Three of these holding shift to signal. Copy movement. Cross paste them. Get them into this spot that I want. Okay, I'm gonna turn off my columns now by selecting them all, because now they're just getting in the way. That's command semi colon or control. Seeming colon on a PC. You're sick of me saying that, right? You know what it is on a PC and what it is on the neck. I gotta keep saying it though, So my boat is going to be green. My tick box on a double click. It's get inside of edge to make that green is also and my little trash can can stay Great. Okay, so what makes this super awesome and super hidden. So the first option you may or may not have seen already. So you're gonna slick them all and go to repeat grid. This is the super magic thing that happens. I love it. Okay, so it just means it's really easy to go and that generate lots of these options. So how many do we need? I'll just do this meeting for the moment. One of the secret super duper awesome hidden features is if I grab some images. Okay, so inside my course images inside your exercise files and site images and like course images, I can grab all of these. I got loads of them waiting money than I need. Well, 16. And just dragged them into that first, like on. And they go and populate. That's one super cool, awesome option. The other thing is that you can do with text as well. Ok, so he is my place or to text. Now, I've got a text file in my exercise files. Okay, There it is. There it just needs to be a plain old txt file. Okay, so nothing. No special word formats. Just no pad on a PC or takes it on a mech. Okay. And just say that is a dot txt file and just have them all on separate lines. Okay? And what you can do is just drag that the same when we did this. So drag it into this. But a text here and magic potion. Look at that. Kate goes and fills them all in through that list. I love those cigarette features. Other little things that aren't so secret. I have this grid selected. You can adjust the spacing between them. Okay? And you can eventually ungroomed thumb. Okay, which will break this kind of nice little repetitive grid. Better look mean that you can edit them individually. The moment a lot of things that kind of tied together. If I move this type, it all moves. Okay? A couple things I want to finish up before I move on. You can skip on now if you like. I'm going to go to this one. It says add course Wanted to be an ed course button. I can speak walls. Okay. And across you e I don't need that. What I might do is that button is looking that they're looking to some of the same size. You need to kind of, like overcook one so that they feel like different sizes. And then I'm not happy with what I've done there, so I'm probably gonna have a little play with that a little bit later. And I want this Been to be lining up with this edge here, and you could see if you are just one. They all adjust. How am I getting in there To adjust them, Just double click them. Okay to get inside the repeat grid. So both of these guys tapped him across. They all come along. Love Europea cred. Little. One thing I forgot. Okay. Is that I got this causes page, but I just realized I don't actually have it is an option in my like navigation. So you go to the dashboard. You're like, I'm gonna add, of course. Oh, there is no options to do it. You can have uses, So I need to add that. So what we're gonna do is we're gonna have doing this earlier into a symbol. If you haven't, you'll have to go through and just manually adjust the two pages. Okay, So what? I'm gonna do those and double click to go inside. You ended this kind of like, green bar. I'm inside my symbol. Now. What it means is Aiken slicked all of these guys holding, shifting clicking of all. Actually, I don't want this first guy first on a double. Click it to go inside. Grab this first guy. I am going to hold Olt option on the Mac. So I've got this extra when he called courses. What kind? Of course is today. I'm not sure gay. And I'm gonna shift local. These guys want to move them down. Case. And now with this extra option What you notice if I click out this guy didn't update. Okay, so what do we need to do? We need to click on him, right? Click him and say update all symbols and magically he updates over here as well. And there is kind of handy with the you only got two. But when you have started repeating this thing over and over again, like our logo at the top here, Okay? It's going to be a little bit more off a time saver, so I'm going to do the same thing here. I've got a logo that I want to bring in. Where is he? He is down here. I can't find them. Is in my app. There's a PNG that amusing. Okay, copy him. And I want to go appear Page navigation. If Yeah, it is a bit of a pain and extreme at the moment. Hopefully the cart with a nice method to fix that. So I'm gonna put him just there for the second. I'm gonna actually gonna cut him double click to go inside of it. I'm gonna paste it. So now he's part of that. As long as I still got that green line around the outside, I'm working within the symbol. OK, so actually, I just lined him up there to you Move him up. That same sort of place something is before it hasn't gone. An updated You can right click it and say update all symbols. My case had already hair's nice on all of them. Great. You can see here as we're developing the logo for this business. OK, we can go in a just because we use symbols earlier on. All right? I'm scrolling around fast for no reason. That is going to be the end of this video. Let's get into the next one 36. Advanced prototyping using buttons dropdown menus in Adobe XD: Hi there. In this tutorial, we're going to look at ways off faking interactions by doing things like this Without a little drop down menus K, we can close it back up all nicely faked in X'd. Plus, I know APS we can have a navigation push in pushed back outs and we can have nice little search box is click back outs. And lastly, we can add things to Carter and they appear in the little cart here. Let's go Look, now, how to make these using Adobe X'd prototype case. The 1st 1 I'm going to do is like a drop down menu. We're going to use this little account button here, right When you click on it, it's gonna drop down with different options to log in. So what we're gonna do, zoom out. I want to grab the three and I'm just gonna drag those. There's a bit of space Grab this one holding out, Will a dragon. It s so I've got this option here so they look exactly the same. And the only thing that's going to change is the drop down menu. And then it's about the transition using the prototype options. So first up, let's build a little drop down menu on the second option. So I'm going to grab the rectangle to when I'm gonna draw, like, a little drop down thing that opens up can gonna work at 100% so that I'm not designing a strange size. Think to grab the pain too. And just drawer like a little kind of pop out quote thing. So I'm gonna slick this guy. I wanted to be everything. That's the exit. I wanted to have a drop shadow. Okay, so and then I want to take both of these gazing. I click on this guy, the edge, and then this guy and what I'll do is actually let's go here. I want to have Ah, Phil. Okay. And so I'm gonna stick both of them. And then over here in my little Boolean operators K my Pathfinder, I'm gonna use this first option. Just join them up. Okay, so that's gonna be my little drop down menu. So nothing too exciting. We'll go and build this out in a sick and I want to give you the structure. First song Zoom out is we're gonna switch to prototype. And what I would like to do is click on this because it is a symbol. I need a double click on it. Okay, to get inside that several. You know, you're inside because you're inside that green box. I'm gonna say you I want to go to this page here. Okay? So when that is clicked, I'd like to jump to this page. And it's all about the transition case. If I click on it and dissolves Gonna work nice. I'm gonna use these in and out. To be honest, it could be either any of these ones. Really. It's hard to tell the difference. Okay. And let's give their previous ahead play, OK? And when this clicks magic, we're gonna drop down, okay? Now doesn't go back. So what I'd like to do is close down the preview and say when that's clicked again. It's really common to click that and say, Go back to previous outboard hit play when that's clicked, drops down When you cook it again, it pops back up, kids up to you How you want this thing to transition whether you want to just change this, Okay, Just to be a jump cut, I might just do that. So it's got no dissolve? No nothing. Just a nun. Okay? And then it just looked like this Click once, and it just appears Go stick it. There's over on the comeback. Yeah, let's. And when I said I've started to dissolve on the going back to the beginning because I use go back to the previous outboard, not go back to the home page. If you use previous, it doesn't give you the option off choosing the transition. It will just use whatever it used to get to that page. Okay, It'll just use that to getting back on now, Case it was none. So just jumped because I was gonna add a little stuff in here. And I'll get Jason to speed this up because you don't need to see me making this little box . We'll get onto the next advanced prototyping, okay? And we're back. And I'm just gonna move my button there, preview it and then go here. Close the backup. Okay? So people will be able to log in this option. So this could This is a drop down menu from just a Nikon. Obviously, it could be a drop down menu. just is easily from Say something like this is a button and it has more than one category. You could easily make a button here or a drop down navigation gay. So no, fill that. Sorry. No border. Give it a fill, give it some text. And this could just as easily be course option one. Okay. And of wides. Awesome. And And issues Europea grid to go through and have, like, a drop down menu. Now be grid. Drag it down. Okay. I want to say these many options. I can count five k on the overlap. And when that's collect, you just jump to this page here. So it's going to kind of do the exact same thing when this button is clicked. Got a prototype. This is going to go to this page. Coast. It doesn't really matter if it's a drop down that looks like this or drop down like a proper drop down menu. Okay, for navigation preview, it's That's one awesome or click on this button, you could see a drop down menu and then you could have When that's clicked, go to another option. So I'm gonna been there. Thank you very much. And what I'd like to do now is look at the next option where we potentially feel like a shopping cart up with different things. OK, so let's go back to our home page and make a little button now under decide that I'm making is not really it's a subscription sites. It's not really a shopping cat sites. I'm just gonna add some stuff in here just to give you an example. Old news. I've got an image to bring in and school bike frank it down, holding shift on the corner. Can it say that the user has decided that yes, they want to buy This bike is a button here that says, add to cart You got eso and to cut nice you out holding Olt, dragging one side drugs, both of them at the same time. Course. When they click on this, I would like there to be a shopping cart icon. That kind of like fills. So what we need to do is, first of all, we need a shopping cart like on. Okay, so I've got one already. I've downloaded it from the market. I just typed in, remember s its market. I just found One came down, littered it to my C C library. Then with an illustrator opened that up, copied its back Txt, paste it. Okay. And I want it to match my little icon singing double click You want you to be you, you you all to be that green color Shrink it down and I'm gonna add him to my symbols. Mean You OK? So I'm gonna cut him, double click it to get inside the symbol, paste it, move it up into an appropriate spots and likely added out CO Now, hopefully it should be added to all of the menus because it was a symbol, All right. And if you haven't done symbols, go and check their earlier video out. So we've got that now, and what I'd like to do is duplicate this page. So we've done our drop down menu page. I want to have a bit more space. I'm just like you guys get way over here. What? We're doing out menus, and I'll grab this home page. Ever see the text? You, uh, you can't hold on old dragon across and you get so this one's home page This is actually a home page organ. Wow. Spelling and typing. Not going well, there's gonna be home page cut. You don't really need for this one. But I want to show you how it works. OK, so we're going to go into here. And when the button is clicked, we're gonna have a little drop down. So we're gonna steal bits from this last thing. Okay. You, uh, lost in all sorts of bits, a copy. And here, based on what I'll do, is forming use appearing. And so there is my little carts. Want that to drop down? I want to use the bike or a bike. Not this one. You could be well, sliding around paste. There's a little version of it. And here see notes in your cart there were Click it because they're not joined. You can double click them and do some editing, which is really cool. And this one's gonna be home. Eat. Just got one of these incidents. My cat. So type till, like once. And I am going to make sure that film is black so you can see it. Font size is going to be 18. It's easy to see and not bold for no good reason cases. Give me to one of these being added. I don't actually need this. I just want a little bit of Texas's, um you caps so people can click on that. I will use. Use this option, cu all right, off you build a graphic, right? And what I'd like to do now is actually one last little thing. Um, like a little thing here. It says you've got one. So Phil Wise will do Now do this. No border. Okay. Emel put one thing in l it's one. So I was wise gonna be You should totally speed this up. Sorry. All right, so it's just linking it up now. So it's very similar to this drop down, except we're just using a different button sometimes. Is this nice to see? I find sometimes I'm like, how did that happen? And I just need to kind of see it from somebody else. So he is my helpful thing where you could go on and to cutting a clear on both of these. Go to prototype. And I want to say when this thing is clicked. Okay. If you got more than one selected, it won't work. You got a group them. OK, so command G or controlled Guiana PC. Okay. And I'm gonna say when that's clicked. I don't want any transition. I just want to jump to my cut. Okay? Yeah. So let's go and preview over the works. And there's gonna be a little problem with my demo here is that when I click on this, it works. But it appears at the top of the page. So I guess it's a clunky way potentially. So what I'm gonna do is you can move things and prototype motor doesn't matter. Let's just say that it's up here. And it's one of the purchase options here so we can see it, the interest it and then we can go ahead to cut. And it's a bit nicer. We also probably have to do is back here. I want you here and you to be on both our boards. Copy him and of here paste, that will probably make a better demo. So, Ed cart or so we just kind of appears there. Or you could use maybe a fade this time like fatal. Be appropriate. Now prototype you and a dissolve. What shoes? He's out. Preview add to cart. Bit nicer. Okay, then that's happening way too fast. I promise. I'm gonna move onto the next one now. So duration, it's come to a whole sickened craziness. Play then. Like that. Okay, let's look a doing some mock ups for APS. Let's go back into here and like, I don't want this stuff. Okay, so what I'll do is I'll do a say, there's and there's completed files for every video, right? You can download them part of the exercise files. And what you can do is I'll put a special one in here that has cart in it, OK, just so that you've got a version that has it, cause now I'm gonna go through and deleted. So wait there. Why delete it? Gay Boom! I've removed my shopping cart And so what I would like to do now is I want to work with the apse and do some cool sliding across because on the 1st 1 I want to do is I originally decided that when I clicked on this was just going to kind of slide over to this page. Now that's fine, but really not typical of lots of new AP styles. Okay, so what I'm gonna do is I'm gonna make a different version, so I'll duplicate him. Okay? He is going to be my old version in case I want to go back. Okay. This is gonna be the actual settings that I want. So what I'd like to do is gonna been all of this. Okay? And you want to do is build a little side card, and what I will do is it's nothing fancy, so I'll get Jason to speed this up, so that will meet at the other end. All right. Really? Said built. - Okay , we're back. If you watched that and fast forward noticed it was a bit painful. I made some design changes. Ah, Stone happy with about. Okay, So what we're going to do is so we built this navigation that's going to slide from the is going to slide out from this side. Okay. From left to right, what we want to do to make this believable is we grab this instructor h Q, But copy it. Okay. We'll bring it over here. And what we want to do is slight it. So it's come off the edge here. It's still in this app. Settings. You know, if it is like if you end up going too far, it ends up kind of being which this figure out here, it's not part off the starboard. Okay, so if I could go off, you'll see it gets hidden, and that's kind of what we want. And the romantic happens here Now is that when I have this button collect? Okay, so let's go to prototype on you. And when that button is clicked, I would like it to push. That's why I wanted to go to just drag. I want to go to here. But I wanted to push to the right, okay? And that should work. And when that button is clicked, I would like to go back to the previous outboard. I could use previous Apple, but it would still use push right on. What I want to do is get it to push left, have used previous outboard, remember, it just wants to do the exact same thing over. Let's give it a little preview. The other thing is, we're previewing it's gonna go back to the home page game with skin, take a while to get to this particular page. So we're going to do is we have more important type. You can click on the name took on the home I Collins. When you preview, it'll load this particular page. One thing I need to do when I'm prototyping of this page because it is so long. K is there in design. Get with it selected. I need to make sure it's got vertical scrolling, but the size is just a regular app size of the moment. It's showing me the whole Where's his view Port. That means how big is this screen initially? Okay, so in moments should be Simmons. Sorry. 667 So I can go into here and say You need to be 667 came and you see the dotted line that's going to the initial view. It's still scalable. Your page should still be that height, Okay, But now if I got a preview, it's gonna prove very preview. The right size, even case it's the right view. Port Aiken squatting down. And when I click on this, this is the magic cane took on that to go back has got organized feeling off this push pull . Okay. Also, what we might do is we might not need this arrow. I'll need to have a little look at other app skate that this option maybe just closes it up as well, cause I feel like I want to click on him, all right. Not totally happy with the design, but the mechanics of this thing works nicely and looks good for testing on EPS. All right, let's jump into the last off. The awesome options for prototyping goes to stem case of this options kind of like using cerci. Therefore, desktop or former ball we're going to use my ball holders will open one of the U Y. Kits that have given you so in exercise files. Got you a templates. Open up. We use Google material. You could use theatrical IOS because we using the app version of this about the sticker sheet. And in here there is some search options somewhere there's one there because on this thing . Okay, so I'm gonna on group that and hopefully get all these pieces is what I want commit, Cubby. And I'm going to bring him into here and I'm gonna move a space. Put it in. Okay, readjust it. Just a little bit. So there's room. It fits in with my design. What a months I might do is have to add a little bit of a border on the outside. Okay, building. All right. So we've got some sort of search box now, and what we're going to do is when it's collect, we're gonna kind of, like, get it to look like it's working. So it's a bit of a faker, Rooney. And so I'm gonna slick both of these, and I'm gonna drag them over. Okay, I'm gonna grab this one. Duplicated holding Alton dragging. Okay, this one here, dashboard. This one is else. Such I guess when they click on this, what I'd like to happen is that first up is I'd like the background to gray out. Okay, so I'm going to click on this, drag it out, cover everything. Uh, I'm going to give it a fill of black, gonna give it no border. And I'm gonna use this blue background, okay? And Buddy Volts, what is it doing? Its probably blaring too much. You go. So but to blurry and maybe the a pass it ease up just a little bit. I think it. Remember the last thing I was playing around with? So I'm gonna lower that down till you get utter like it's still eligible. Just mixed up in the background. Okay, So you can play with you. This with capacity to get the darkness up, depending on how washed out you wanted to be. And this is the blurriness game. It'll blur everything underneath it. So what we need to do is we need to move backwards. Eso that its search back of me sing So we're gonna do is with my black error gay click off like error is click on this great box and use command open square brackets to move backwards If you're on a PC, it's control scare briquettes You're square brackets and extra peaky I was going to keep going down until that all comes forward Communism in 100%. And that looks about right. While I also want to do is give that fake kind of look where it's being highlighted. Case. So in hearing us like the text, Ugo, crank up the capacity so it's fully black and I want to make like, a little blue box. You know, that kind of like selected box thing that backwards. Give it a bluish color. You know, the one I mean, like, you get the right color rides there was. This doesn't work. It's like a really ugly, blue kind of washed out baby blue and all rights trying Grab its again and give to the border that kind of thing where it feels like it's selected. Did it feel like that selected? You might have to go off and actually do a screenshot of actually selecting something and get the right color s. I guess I want that to happen. And so what I need to do is link these two. So when somebody clicks that button there on a prototype, I can goes to this screen here. What would I like to do? I like her to not push left. I wanted to dissolve. Okay. And that will be perfect. Hopefully. And then if you click anywhere else in this document, it goes back to here. Okay, So not full search box, but giving you the illusion of an interactive search box that hit play. Okay, we took on the search box, and it looks like we've got highlighted text. Do you like it. It's another trick. Now 60 is a pretty new product. So these kinds of tricks, or just stuff that I've seen other people do or I've figured out myself. So if you've got some I'd love for, find out. OK, either. Take a screenshot Simi txt file. I'd like to see of ways of you fake things that I haven't shown here cause I would live to build up her repository of ways of faking in 60. Hopefully, in newer versions of Xdd will be kind of MAWR. Let's hacks and more actual kind of defined things rather than trying to fake it to make it work. We're all my lovely friends. That is going to be it for this video. What I'm going to do now off screen is just go through an addle. The basic kind of clicked the button's move to the next, uh, art board. There's a lot of just dragging along testing, drinking along Testing was useful, and what I use is I've got a sick and monitor plugged into my laptop so I can have the prototype open all the time, and you don't have to kind of re activate it for the changes to happen. So you could just have on one screen in directing without making sure it works. And on the other screen, having X t open and just making the adjustments. Okay, so there's a bit of ah, trial, an era wicking cooking on things. Do I need extra pages? Is gonna be enough for a user test, So I'm gonna leave that to off screen. Come. I will see you in the next video. This was a super long one. This could have been the longest video of ever made. Um, yeah, I got a long one. Some good stuff and the other. Hopefully I will see you in the next video by now. 37. One more Prototype trick faking depth of field for mockup: Hey there. In this tutorial, we're going to look at one more trick for prototyping and will go and build this list. Actually, I've already built it, but I want to show you how to do this kind of perspective. Blurring the background drop, shadowy type thing. All right, let's go and do that Now, in this tutorial. All right, So I have added a lot of my prototyping and done some testing. And Michael, thing you can do is that you can be on prototype beyond your black hair and hit command A or control A on a PC, And then you can kind of see all the wires. Sometimes I like to just take screenshots of this included in the proposal. Just so that just looks really impressive. Okay? And you can see all at once. We everything connects. And maybe we, your got paid, is not going it anywhere like this one here, Lone Ranger. So while I was doing that, I built one of the pages I felt like needed to be there. OK, which is this marketing Chiklis thing here. So I'm gonna use that from a user testing one of the other things that I want to show you for prototyping is and let's say that, and I've rigged this up. Right. So I click on this in these buttons, go toothy dashboard saying with that button, that's when he goes to the Yep. You can see it running dog on the bottom there. But I've got two of these pages, so I have to do it twice. Right now, it's electoral these and group it. There is a trick if I copy in places in design view, okay? And I bring it across, it does not bring any of those wires. Okay, those connections, But if I do the exact same thing in prototype Okay, so I'm gonna select all of you guys just like every single thing there. Copy it. Okay. And go, You guys delete. Go away, had paste. You'll notice that all the wires come along and that can save you loads of time. Especially when you're down here. Like I found like, down here with my app. You clicking on next? This one goes next. Actually, Skip Skip goes the same page. Skip goes the same page. Skip, there's the same page, and you might have loads of those Casey is copy and paste them. Make sure you're in prototype mode. Okay, so that's what we done for before the prototyping. Next thing I want to show you is just I'm going to do it. So I figured I'd show you. And I like to do some kind of fake dip the field stuff that I showed you the beginning. So I've got this guy. Okay, remember, this is the thing that have made I'm gonna grab design view, getting in a copy it. And what I might do is just make a bigger version for photo shop. I'm just gonna ungroomed pit. And what's this? If I start dragging it out, Can you see it's still doing some weird stuff. It's because I have are repeat grid with inside of this ropy cred. So I did these kind of job Demi news as the first repeat grid. Then I grouped it all together and end in another repeat. Great to do the whole module. So what you might have to do is and group a few times a molding command shift G, that's on group or control. Shifty. And I'm just mashing it a few times, so I know that everything's on group now. It will resize nicely. It is making a bigger quality, so I can copy it. Jump into photo shop. Now. How big do I want us to be? I'm going to go put it on the home page. Right. So I've decided that I don't want this kind of split. I just wanna space for to go kind of roughly this sort of size. It's going to put one of these little tiles. How big? Roughly about that big. So it's going to be 9 20 by 700 ish. Actually, I wanted to be 900 by 7 20 but I wanted to kind of tuck in the ages, Telenet with everything else. So in Photoshopped, new documents. I'm gonna make it 9 20 by 700. Okay. And I am going to do a couple things first before it paste that in. I was gonna put a grating in the background for no reason is the Grady until via gay, and it just takes your foreground and background color. So if you want to do Maura photo shop, I've got a course on photo shop. Go check that out. I'm just doing a kind of I don't even know what I'm doing. Some sort of Grady and thing. And not a big enough difference. Tent love. A bit of the old radiance going paste him in. OK, and what I'd like to do is just use my it it transformed. Distort. Okay, they're still here. Just allows me to fake a bit of dipped, OK? Or I guess perspective is the mounting lots assuming out a lot. Okay? And I just want something that looks like it's kind of zooming. I don't even know where you get the idea of what I want to do. Alec Tenants. We'd forced perspective. Okay, so I want something like that, maybe a little smaller so I can see all of the next line. And I was kind of tucking it in because I want those ages to line up with everything else. So I'm going to do that on a couple of things to make it look nice and easy. One is to duplicate it. OK, right. Click it duplicated or just dragging onto this new window here. This is gonna be the shadow, okay? And I'm just going to slick that all beholding command and clicking the thumbnails. I'm using lots of shortcuts. He, I guess, is not a Photoshopped course. I'm just going fast. So command Click gives you a selection around this whole thing and I'll go to or control click on a PC, get it, Phil, and I'll fill it with color. Fill it with black. Okay, so now I've got this black thing. I'm just going to drop it down the put it underneath my layer. I'm going to blur it when they feel like there's a drop shadow going on Filter Blur Gallery . Everyone uses calcium Blair. It's probably better ones, but everyone goes That one k m sort of blurred the edges on was gonna lower the A pass it e a little bit. So it's kind of looking like this pushing up the page a little bits and the last little thing old do is the depth of field. So with this layer selected, what I'm gonna do is go to filter go to Blur Gallery and Irish Blur is a good one for this cause allows you to kind of like move the center around. What I might do is, yeah, that's I want that to be mainly in the focus, and then you can grab these ages and rotated around drug in and out. I might make mine just a little bit longer down here to adjust the blur. You can actually just grab this dial here, dragged back, or you can use this slide in there. Co When you finished, click. OK. And I got this kind of, like, fake depth of fields. It's got coming forward. Ah, that's what I'm looking for anyway. All right, so I am going to save this as J pig. Easiest way file export export as okay, make sure put J Piggott the top here. Quality slide out. I'm gonna leave my 100% and we'll let x d down. Sample it later on and I'll save it into the exercise. Fire was called Ah, list. Depth of field. Awesome. I'll say this is a PSD in there as well, if you wanna have a look at it. All right, I'm gonna bring that in, and you stick it on this page, so bring it in. Exercise files, images. Let's have a little look list. Do the field. You go, buddy. Now, I should be pretty much perfect. Lovely. How much do I love it? Oh, I'm not even sure I like it anymore. Bods. Hey, we learned a new thing. It's hard doing these tutorials and then kind of, Ah, trying to be creative during them as well. I'll probably go out and do something a bit different with them, but that is it for this one. We have fixing dip the field. We have learned a little bit more about prototyping and let's get on to exporting stuff. 38. UX User Testing in Adobe XD: All right. So we've built out our prototype that go out to use a testing now. So we got the interactions working through part of topping tools. We've built out all the graphic, so it looks like a working project. So we're really for user testing. And in this project, I'm going to do some just a couple of basic use it. It's we're gonna do some moderated user testing, also known as like hallway testing or over the shoulder testing. And what that means is that the clients given us a name of, Ah, a couple of people that would be really good potential matches to a persona was gonna meet them for coffee and get them to test it using our laptop. Okay, and we'll we'll let her on the phone as well. So we just watched them. So it's moderated. So we watched them. We give them some basic tasks to do, and we just kind of take notes and see how they work with it now. And we'll also do summon moderated testing for this for instructor h Q. And basically that means going to like a website and recruiting people. User testing dot com seems to be that most popular place to get it and school. You can enter in detail and say I want I want men or woman at this age with the skills of these interests and they will find them for you. And yet you pay them there, there between 50 and 200 bucks a pop, depending on what you need. Now specific. You need to be quick, easy. They video themselves and they send it back to you on both have their pros and cons in person testing its differently. Better because you get to see all that kind of mannerisms and you get to see people videoing you only get to see the screen cast. So both a useful Now we're not gonna cover user testing specifically in this course was sticking to Mawr Adobe. Extinct, I guess. Eso remember, I have got that other course for how to become a UX designer that will go through user testing and a lot more detail. All right, there is it for this video. Sorry for speaking too fast. I've realized, um I mean, my fast speaking mode Ah, By now 39. How to export images code from Adobe XD for developers: Hey there in this video, we're gonna export images and all of our code and everything we need for our website or app to be built by a developer. It's super cool. We can click on things, get measurements. It's all Web based, so your developer doesn't need any 60 experience that could just go to a website and pull everything they need down. Let's go and learn how to do that now, using Adobe X'd. Okay, so we've done. I use the testing, and now it's time to actually send this out to a developer because ecstasies a prototyping tool. But it's not an app or website building toe. It's going to give us lots of the information we need to build these in a kind of a blueprint to follow. But it's not the actual app or website itself. So we need to see this off to a developer or if we are themselves a developer like I'm a Web designer. So I'd use all these elements for my website design. But I've been working with APP. I'll get help with somebody who knows how to use X code. Okay, so what I need to give them is a lot of images and the CCS and kind of dimensions and sizes and fonts and those sorts of things. So and in terms of the images, there's a couple of things we can do to say we want to give them or of the outboards K, we have nothing selected. Make sure click the background, go to file export okay Or command E K or control E. I'm going to use that loads here. So what I can do is I can say, actually, I want extending pdf's. And the cool thing about it is that it will send them one PdF with all the outboards in it . I put mine in the exercise files so you can check them out as well. It's a new folder and this is going to be my exports. Okay, so if I put that in there single file, let's have a quick little look at what pops out. Okay, so, in exports, there's my pdf opened it up. It is got all my different outboards all later nicely. So there's one way of sharing it. You can obviously, with nothing selective file export, have a look at not just pdf be my export a bunch of J pigs. Okay. And little export all those out as well. But it's a I just want to see in one outboard out. What I need to do is click on the name. Okay, so I just went home, page out all its I just want to see in the app out some of us in this one. And then if I go export, Okay, I can decide. Say I want to see them. Ajay pig. I can decide on the quality. Oliver. Really high. You'll see. It pulls the name off my outboard saving in their easy peasy. Look. Hey, you want next thing I want to do is export individual elements. Okay, so you've got a couple of options is, let's say, a one export all of these K. And it depends if you want it to be one big unit case. If I select them all, got everything selected. And then if I go to export, save them out is a J pig. And let's just see what happens. Okay, Let's have a little look. Hey, it did every single thing, all separate. OK, so that might be what you want, Kayal. The lines k. All the different icons, the White Sea not going to really see them, but yet they're all separate elements. So that's not what I wanted. Okay, so, goodbye, you guys. He also knows that it used the naming convention from my layers panel. So to make a self life a little easier if I click on this, you can see here it's called Rectangle 25. If I double click this icon, give it a name came That will be the export. Let's say I want to send It is one big image slicked it'll and what you do is just group it and you'll notice that now it's a group. I could give this name a group, and this might be my piggy bank. Make sure you use hyphens or underscores K just to save time for the developer of the other side. But I want files that have spaces in them. Okay? And then I can click on this and had export. Or you can right click it in your layers panel. Okay. And click export on the bottom. Here. You can't see it. Que doesn't really matter which way you go. See, It's given a name Piggy bank J pig. Have a little look. Now it's just one file, and one thing you will notice is that is a little bug with that was a cropped image in their kids exporting everything, including the crop damage. And I can't work out a way of fixing that at the moment. Okay, so that's just something you can see, the circle kind of hidden in the background there. Even though it's cropped off, it's still included in the exports. So you'd have to trim that out with something like Photoshopped or gimp or illustrator, whichever you using. Now, when it comes to exporting, OK, we've kind of just jumped over If I got to export that image again and let's say I want at P and G, okay. And in here I get to decide what sizes I want on. There's this thing called one x two x three X. Okay. So designed. This means I'm gonna bring it out. The resolution It was made it okay. Web often with developers, Want to sizes. There want ones for regular screens and one for higher is high. Dp I written a screens. Okay, so it will give you regular size version plus one. That's double the resolution out automatically. Okay. IOS want three options care. They want triple the resolution. And Android, they've got a massive xx xxx h d d p i They're gonna make a massive ones. Okay, so you'll need to figure out if you're going for IOS or Android. Okay? And let's have a look at, say, the web one because we're dealing with this page here If I hit exports. Okay, I've got piggy bank PNG. And then there's piggy Bank P and G has got at two X beings. This is the double the size one. Okay. And if you're not a web designer, don't worry. If you are, this is the solution at the moment for dealing with higher is or responsive retina screens . Okay. It makes browser dual the work, which is super useful. Okay, One thing you might find is occasional exported J pagan and just have a little bit of a blurry edged. Let's say I want to export these two guys, so I'm gonna select them both. Hold chef grabbing both group them and over here. Okay, I'm gonna give them a name. That's gonna be my mute hyphen. Actually, I'll start with icons all my icons together. A little easy to use. Now if I want to explore them, I just right. Click him over here. Okay, Click Export. And you might find that occasionally. Heavens, listen less now on. But you might get a little bit bleary edges with a PNG. Okay, Just just a hint of blurriness like, man, it's Crispin here. Why isn't it in there? The two options to get round there is exporting. Okay. And we're gonna explore if you export a PNG. Okay, The easiest waistcoat. Spg I know that it was Victor. It was scalable. Has all its anchor point. It's lovely. Okay, s P G's a scalable vector graphic. We've never heard of it before. It's really to do with It's just like the new E. P s. Okay. It's an easy, interchangeable format that browsers love and we'll load on websites, so it's not just gift. PNG and J pigs. Now you can use SVG. That's scalable grateful logo's that will make sure that there's no kind of fuzziness. But let's say you need to go to PNG. What you can do is before you do this you can right click your objects and go online to pixel grid. And it might just you can kind of see it there. Keeps it shift a little bit. I'm undoing doing, undoing. Doing it just kind of distorted my victor a little bit. Okay? Just so that lined itself on to the pixel line because and that will just give it a crispy edge. Okay, So you could do if everything, like check first. Like you could spend forever going through and lining everything depicts the grid. It does deformed a little bit. Zoom in a bit more under Depends on how, like with fonts, I find you can't do it because it destroys the font in the font. Exactly. Que bods aligned pixel grid might just Heidi up any of those problems, but you can see it does change a little bit. So maybe not for the logo. Maybe not for text, but for things like this that are supportive icons that was going to notice the difference you might you might be sitting in going. Yes, I notice the difference, but yeah, that's a choice. Fuzzy or pixels or a line to pixel grid K the next thing. So we've exported all the images we've gone through. Exported everything. Now we want to send out things like measurements and color codes and fonts. Okay, so what we can do is especially for things like buttons are buttoned. Should never be an actual physical JP eagerness. Fiji. It'll be created with code. There'll be a bit of code that's designed this high this width, and I'm filled with this color. It loads really quick and it's scalable and you don't need an image too low. It's just a lot better doing it that way. These guys here will have to be SPG es or paintings. Okay, But let's say we need to give all the dimensions and codes and how far that is down and above that one. So you get everything lining up nicely and there's no excuses from your developer. What you can do is you can cook on this. I'm talking really fast. I realize. Sorry about that. You can go to the option and say slow me down lots of coffee this morning, and I'm excited by these features. Okay, This new one him By the time you watching this video, this might not be in beater anymore. It's just a new revision. Okay, you can click on publish design specs, even give yours a name. Case. I'm gonna call mine the H Q instructor. H Q prototype Close one V one and we're gonna click. Create public link now is a couple of things you need to do before you click on that Or you can do it afterwards is that I'll show you here. You need to make sure that if I have when I was first doing this, if I had this, I got a prototype. And have my home sit down to this app down here. It's gonna export something. Let's have a look. That's design ***. Let's open the link to see what the developer sees at the moment. It's only exporting these a couple of art boards. Okay, so what I need to do is I need to go back into here and I need to sit. This is homes home page. You're the home page, and it's going to go through the whole document and exported. The other thing is, I had a couple of problems when I haven't actually prototype this thing cases. Sometimes you might need to go through and to say, Actually, I need you. Okay? There's that board to join this outboard. Okay? Otherwise, it gets kind of left off if they're not connected in some way. And that seems to be a bag. I can't make happen every time. So just know that if you're having problems, just make sure at least these guys are linked to each other in some way using the prototype tool. So I have adjusted that. And let's say we have made changes can go into here, and I can go to design specs, and I can say either update link. So that first link that we saw this one here, Kay will be updated. Or let's say we make a version two. Okay, We could then go and make a new link so that you've got kind of a progression. It's up to you how you wanna work. It's I just wanna update it cause it was broken, kick back, relax. Takes a little while to generate all the assets, okay. And published them out. We'll speed it up. There we go. I'm gonna jump into our mock up, refreshing my page. You'll see here. Okay, now. I love this. Okay, This makes life so much easier when you're working with a developer. If your designer, you don't do the coaches want to send it off, Okay, You have to send off the images separately. I've seen a prototype of something very similar where you could actually just click on things and download the images. So the moment you have to do them separately, okay. And what this does is back here. Okay, so it shows me all my boards. The cool thing is is I can hover by then. It shows me the interactions. Okay, so the developer knows we're because sometimes I get really complicated, and it's hard to know how this thing all goes together. So this gives them a kind of visual cue. And let's say I want to go into some of these. I'm gonna go into the home page and click on it. Here, on the right are all the styles. Okay? All the colors they get used. You can see when I hover above them. You see, it's that's highlighting them in the document which Israel handy to know which is which. Okay. And all the funds they got used all the different sizes and styles over here. Nice things that happened and say they want to use the style that click on it and sees his color copied. That means that the developer can jump into the coded getting products from just posting minor. No pad. You can see it. Just paste that in. There's a nice, easy way to get information into the coat if you're not using hicks a. Using RGB a k same thing, just change it. Click on it, jump into your document, paste it Super quick, super easy. Saying with this by copy, Click on Roboto Pasted in just makes it easy working back and forth, they can change from pixels to DP or PT, depending on that using a core feature. If you've got a big document Katie, click on back to the home pages. You can search the outboards K. I've worked on projects that there literally is nearly 100 outboards. Kate could b'more okay, so they can click on marketing okay and will cut it down to the ones they want to cook on this one. Now when you're hovering around, okay, if I click on an object, it'll tell me it's heightened with which is really nice. But what I really like gang and a zoom in. Find it up here. If I click on this and then just hover over here, can you see? It actually tells me the position away from it, because often things are relative to each other. So I know that this button has a spacing off 32 pixels between it. Okay? You can change the dimensions. Okay. Over here, the points or these density independent pixels. Okay. These are quite cool for dealing with, like, super high res images. It depends on you develop that they can decide what they need. Pictures is easy pointers. Easy. These guys here often used for just mobile devices. OK, so this is a cool interface. You can email it to them, be updated really easily, and it just means you develop her. Can work really nicely with you as a designer and make sure everything is exactly how you want it to be. Okay. They know exactly that you spent 20 minutes trying to work out the rounded corners on buttons or not. Okay. And I could follow your design. Exactly. All right, so that's gonna be it about getting images through to your developer for the build. Let's get on to the next video. 40. Class Project for Adobe XD: Okay, so it's class project. Time on this looks a little daunting, but I just want to give you some boundaries. You know, it's hard to do a project on your own for your own portfolio without some sort of restriction, so you can adopt as much of this or is a little of this as you want. So basically, the company bring your own laptop has a website already, but they want to redesign. There's a link here. Okay, right there. I'll show you the page. It's bring your own laptop dot com slash x d project. Okay? And it'll take it to the page that they want to use is an example. This is what it looks like at the moment. Can they want you to go through and redesign it? It's getting old, needs a lick of paint in turns of colors and fonts and imagery, and also they want to see what you can do in terms of the user experience. Okay, how to rearrange this to get the most. So let's look at the details. Have a little look. Okay, so this is the clients. They want a new project in your exercise files here There's one called class project. Inside of There are the brief that we're looking at right now. Okay, behind here. And these are logo options that you can use Okay, so long as the anything you really need to use everything else is up to you. Colors, fonts, images up to you. Now, in terms of the images, we've not been given any, so you can use anything that you like. Okay, maybe what A Mac stock library staff got a free images dot com. There's loads of places to get images from. If you don't want to use this project K for, bring your own laptop dot com, you can use your own options. Option B is just to use your own client. Who's affords for creatives. Okay, that's creative. Individuals that need to upgrade their skills, their tech savvy enough. OK, but they might be junior designers. There might be still students, but they need to learn Photoshopped or illustrator or in design or 60 like you are. So those are the people were targeting his the feature list. The video player is the most important, but it says he has tribute video centric. Okay, so everything has evolved around this video. There's nothing more important than this video and in the movement to the next video because they're in a chain case. That's the priority navigation. There's the things that should be included in these featureless just needs the course title . Okay, so that's the overall course, like illustrator essentials. But then there's going to be specific video titles like The Introduction How to Get Set Up . Okay, so course title overall video titled The Thing You're Watching. These comments Video transcription Search bar. Let's have a little look. So there's the search bar. This is the kind of were up to in the next button, these air downloadable files. There is user comments over here, okay? And this is the video transcription. So this is the video name, and this is the course that it come from the larger course and everything else. Yes, there's the main features. Have a little read through that list of what needs to be included. That's it for that. On these with competitors. Go never look at these guys and to see how they do it, get inspiration. The deliverables. Basically, I want some J pigs into the comments section I'd like you to make a wire frame option and a high fidelity option if you've got no time and just want to quickly make something, I'm here for you to jump too high fidelity. I'm not going to chase you down for your wife frames. But if you want to kind of do this properly for your portfolio, don't wire frame version and then the high fidelity, like we did in the course, take a screenshot or exported J pig and put it into the comment section or Lincoln. Some help on this one here, I'd like to see a prototype wires. Just means when you go into something like 60 will open up a project. And if I zoom out a little bit second see the whole thing, got a prototype, and then go command A on a Mech will control a on a PC. I just want to kind of see you don't have to this many up boards, but I want to see the wires so I can see the user flow. Okay. Were you mean to be going from from the different pages to take a screenshot like from here on a PC? I think it's print screen, and you can paste into photo shop on a Mac. You can hold command shift three or four, depending on which one you want to do. So it just seemed a screenshot of that just like and see it and in terms of the links on going to 60 and share a link and came posted in the comments. This where it says published prototype. We did this earlier on, and you create a public link copy and paste that so we can see, like an indirect with it. And other users can leave comments If you are looking through other people's dropping comments. It's really nice when other people start adding kind of picture. It's constructive criticism, but you know, criticism. None. The list. It's gonna be a nice to see the workflow that happens with commenting. So jump and check out other people's links and add comments yourself. You can log in as a gift. That's fine. Onda also uploaded your be hearts, so be hands is a great place to put all your portfolio stuff if you don't already. Okay, so put up all the J pigs that we described at the top here and put it into your be Hance portfolio. If you don't have one already and you have got a budget off zero smiley face. All right, so there is the project. Go out, Do it. Dump these delivery bols into the comments sections and I can't wait to see what you come up with. Make sure that you check what other people do come into name, give them some props, ask questions. It could be really helpful for people new to 60 to get some sort of feedback. And I'll try and jump in there as much as I can to give you feedback to. All right, let's get on with the rest of this tutorial series. 41. Shortcuts & Cheat Sheet for Adobe XD: all right. Time for some shortcut teaching goodness. The 1st 1 is control tab. Now that's control Tab on both American. A PC like the only shocker in the world that is the same. Hold down control new keyboard Tep Tab and you will jump between prototype seat at the top here and design mode Control tab Super nice and come back to design mode using my handy dandy short cut. And the next she's gonna be the Oakey on a PC or the option key on Amec K Black Error. And it does a few things. If I have this button selected and I start dragging, then I hold down the option key. It makes it duplicate, not super exciting, but quite useful. That same key has another use when I click on object and I want to drag it from both sides , not just one. Okay, great for buttons. If I hold on old or option drag one of these sides, it does it from both sides. Nice. Still not that super duper. The super duper one is if I have the selected and hold down the alky, you're noticing me measurements just really handy for measuring things which that's the distance between the two settle pops up 91 pixels away from each other on this guy. The height and width from relation to the thing I have selected. I click on this, then it gives me a relation Trump from the top to the bottom all just holding down the key . I don't have to do anything else. Okay, enough of the okey. Okay, quick bit of zooming around. If you hold down command on a Mac or control on a PC. In Tech, the one key on the top goes into 100% of doing Lhotse Designer 100% to goes into 10%. I never use that one. The one thing I do uses command zero k that goes into the full Everything on your pace board view and the last one and probably the best one is if I click on this rectangle here and if I go come on. Three deserves into that specific thing and fills the screen. It's a great way of moving around. Command zero. Click on something go! Come on! Three zoomed in a little bit too much. They're all right. That's Amisi zooming next super short cut is if I make a new document and you are a good person that loves your developer, you're gonna work with 12 columns. And the new way of doing it is just click on the page name, case, agree our board selected and this new thing where it said just used to have squares. Now it's got layout. Turn it on 12 columns. You can adjust how many? The spacing. The spacing from the edges is something that I do quite a bit, just so I narrow my navigation into the center. There you can sit. What you love is a default, and every time you make a new 12 column grid that there, and it's really easy to turn on and off no more during rectangles with Spaces. Next shortcut is command on a Mac or control on a PC, and the Y key just tunes off that panel on the left hand side there. That actually just opens up your legs, but I use it to turn off layers so that, especially from it full scale view case I had command one. It's really hard on my Mac book pro here to actually see the hole with? Okay, with that actually open if I command why again? With that open, you consume just missing lots of details. I want to stay 100% but it's hard. Okay, The other one is command shift. Why on water do is little jumped your assets? Come on. Why layers come on shift. Why? As its and either them twice and it will turn them off really handy if you're working with a smaller screen like mine. Right next, Roca. Okay, let's jump back to this other project here Has got lot off. If I jumped a prototype shortcut is That's right, Control Tab. The one shortcut is the same on all of them. Can you could see I've actually got in directions in here. Loads of them. OK, now to preview. That's fine. Hit the play button, but there's a shortcut. You just hit command on Amec control on a PC and a your A turn key on your keyboard. But look in turkey and that will load up your preview. Great. Do some stuff, close it down. Do some changes. Command return. They stole that one from flash or animate. It's really handy one. An easy one to remember if you remember. Good old flash. All right, Nick. Short cut back to design view. It can be really painful if you want to drag thes outboards. You kind of click on the edge of our board, Tore. You try and be official. It's a little bit weird. Just use gay the names along the top. If you zoom out far enough, they turn into little dots. It doesn't matter if you grab the dots of the name, but these are the easy way to drag these. I can hold on Holt. Okay. And dragon and I get a new one. It's just the easiest way to select an outboard. Thank you very much. Right. This shortcut is just helpful when you're exporting a case. I've got these images here. You can see them that just called, duplicated them and made them with the repeat grid. They just got the same name all the way along. Okay, so on export, these and they will have the name off course one course one course. One course. One big pain. So if we name them here in my layers panel, it means when I export them, they're going to export with the right names. That could be painful type of this. And this one's for Illustrator K. And then you got to click on this one, double click on it and do this one and two in design. Okay, What you can do, instead of using the mouse to go and double click on them, you just hit the tab. Key just goes down. We can type in after fix tab. Just a nicer workflow, okay. And quicker to go through. And it means when I start exporting these selected more export that will have the correct names when they come out. Great. That trick also works in photo shop. When you're trying to be all tightly with your layers, just tap through them small but useful little workflow cheat there. Okay, so the next one is paste. Appearance is got to country uses, Say, have drawn this box here. But I want to actually match this now decided. I like this style of us. I like the color, the line around the outside or the lack of it. And the drop shadow. What you can do with it selected is just copy its command or control. See, just Reguera copy. And on a Mac instead of just command V, you go command option V on a PC. It's control, Alfie and all that is you can see it. There it is. Paste appearance. Okay, It's really handy for working with buttons. If you decide down here, you've got something you can draw a button you want to control or command seed copy and then paste appearance. Really handy for getting everything organizing consistent. The other nice option it has is that. And when you're in design view, it does appearance. But when I got a prototype, that same thing does paced in direction. So what it means is I can click on say this Marketing one here. Okay, I've got this indirection where it slides over to this other outboard here. But I could just go copy like I did before, but over here, I don't have that done yet. And I can just use that same short cut command option V or control multi. And it paste the interaction rather than the style. Just a really handy little short cut. I found that a tongue twister to go and pick the actual shortcuts. But there they are. They're both on a Mac and PC, and it on a PC is in a little stripey burger menu, their rights that's copying and pasting with a twist. The next Shaka is just locking and hiding que en. Let's say I want to the navigation, the top, the locket, its command l or control l on a PC and you get this little liking icon, you can click it to unlock it or just command salable. Toggle it on and off. Hiding It is command semi colon, which on most keyboards is right next to the L key. No, on all of them. This becomes even more useful when you have going in a design view. And I've got all of these guys and say I want to lock them or hide them Okay? And you can see there, Over here, you can't swipe down the moment I want, like, swept down and lock them or unlock them. Okay, so when you got them all selected in one big group, you can hit command alto locket or command semi colon to unlock it. And when I say command, that is for Amec and its control for a PC, So control l control semi colon. I really want to swipe on these. Yeah, can't. All right, This next one is convert to power. So this here is a little text I can change. It gave a Let's say I want to destroy it or change it or or ah, turn into a logo type. If I hold down command on a mech or control on a PC and type the eight key next to seven and 98 k A. And that will destroy. It's no longer a font, but I can double click it to get inside of there now and you can see a bottle. The lovely anchor points and I can totally totally wrecked this fund for someone. France don't seem to run into any problems the next day, but I know I sometimes just like to have the option of converting them into paths, just coz right, so that's converting two parts the next. Your cut is the direct selection tool. If you're from other adobe products, we've got the selection tool. We don't have the White Arrow. Where is he? Just hold down the command key on a Mac or the control key on the PC. Why Is it useful? It means that say, this thing here is one big group. I could either an group it or there's a kind of a weed, double clicking action to get into stuff. But they say these groups within groups like I want to change the font size here. Okay? And I know because I made it. It's a group double click it still inside of a group. Okay, I was giving it straight in there. Whether having a dive inside isolation mode, all you do is hold on command and click on him, and it kind of dives right in there. I can go in here and decides no longer bold is going to be light Come back out. It's still a lovely group can be really useful for these guys as well. Getting on a zoom into this fella. I made him with the bowling tools along the top Here, he's kind of made up of irritable shapes, which is cool, but I need to make him a little bit mawr. I know wider. For some reason, when I took this circle instead of having to double, click and try and find it alone there, pull the command key on a Mac control key on the PC. And I'm gonna make him a little bit wider. Holding the okey down. Look out. I've gone straight in their fixed him up and totally rectum. That also works for symbols as well. If you created a symbol like my mean, you're along the top here, K. It's part of a bigger group. Just command click and go straight inside. All right? I'm not sure how useful that one is, but the next one you love All right. This is the last and final shortcut holding it to ransom. This particular video. Okay, I'll share all over the place. Social YouTube, across all of the markets. Bring your own laptop. I'd like you to either review sheer likes prescribed whatever is possible in that platform . I'd love it. It helps me continue making videos full time. I love it. And this is the last one selecting these guys here. Now, this is a kind of a week combination. If you're on a Mac, it's command and control. That key you never use on a Mac. Hold those two down. It's easier for on a PC. Just hold the shift. Key down by itself and then Tep these keys. Okay, We're looking for the arrow keys K on your keyboard. Up, down, left, Right. So taking the right arrow. Right? Align! Awesome, huh? Left arrow left the line Sexual These same keys. A barrow down. Error lining. So those easy except for the weird command control keys that we don't hold down. It's a little easier on a PC. Holding shift gets better. OK, if I hold those two keys down again and if we hit him for the middle? Okay. Why is it in for the middle? Because this one here for relying them vertically, is C K. C doesn't vertically and m does them horizontally. I can never remember. I always do this. I go in. Undue See, You'll do the same thing. Last but not least, is distributing senses. You can see the gaps on quite right in here. It's hard to do a next E because it does really want toe separate them out evenly. Happens all the time. No, those same two keys Command in control on a neck hold shift on a PC and these easy Remember , because it's h for horizontal and V for vertical love those. One thing before I forget is that I've actually made a pdf version of this that you can print off. Jump over to bring your own laptop dot com. OK, go to the home page. I think I got a resource is And in here, a bunch off shortcut sheets that I've made for all sorts of different products from Adobe. Okay, it's not here yet, cause I'm just about to go make it after this video. It'll be right. The you can download it. It's free for everybody. Download a printed off sticking next to computer be mawr. Awesome. All right, that's gonna be it for the short cuts. We're gonna move on to the next video in the Siri's. If you happen to be watching this out of context, Okay? This is like video 40 off a longer X d course. Go check it out. It's awesome. There'll be a link in the description or on that downloadable pdf. You can check it out, sign up and do the course. If you are during the course, we're nearing the end. A a All right, let's go end finish off the last few videos now 42. Conclusion for Adobe XD training course: all right, We're at the end. You made it. I'm here. Were both here k sixties. Awesome. So we have finished now. A couple of things is any comments? Used the comments on any of your pages and pretty good at replying. Also, the projects go and do the class project. Leave the link, Uh, leave the J pigs and coming on anybody else's as well. That sort of feedback really helps everybody get up it better. And the other things are other courses that you might do I've got course is probably the main one is how to become a UX designer And go check out that course that goes through a lot more off the ah theory off the course, Gay or Buicks. It'll go through user research and use a testing. We've kind of done the middle bit. The hands on tools based X d u I design course, but the a k a. The other course will go through more than theory. Other courses that might be useful is there's an illustrator and Photoshopped option for doing a similar sort of thing. So you I designed for illustrator and Web design for Photoshopped. Go check out those on. If you are interested in doing a bit more Web design or getting study, we've designed there's a lot off Dreamweaver courses, allows you to prototype the next day and then actually go and build the website of the end case ago. Check out those ones and other things is that instructor H. Q. Has Bean the project that we worked on during this course? If you are or want to become an online video course instructor and you're looking for a platform, check out instructor h q dot com and sign up for them casings as part of the process of Prica website At least a Zago to get that. The last thing is, is that X D is a newish product kay for Adobe. So there's lots of features that we really want to go check out, and it's called Adobe X'd dot user voice dot com, and you can up vote features the other people you can suggest features, and it just gives them a priority. Level off what needs to get done next so that we can make 60 better for everyone. All right, that's it. The end, of course. Individual ing, uh, by never sure what to do with the India looking to get by. But now