Free Adobe XD Tutorial 2023 for Beginners - Your Quick Start Guide

hello hey I'm Dan Scott uh together you and me today are going to design a simple mobile website uh we'll use the software Adobe XD and on our journey I'll introduce the kind of basics of the ux design process uh we'll start by making this wireframe of our mobile website then we'll move into kind of a simple High Fidelity version like this at the end so who is this video for it is for you as long as you are somebody who's interested in ux design and especially if you maybe I don't know it feels kind of intimidating getting involved in ux design I know that was my journey kind of like peered around it for a long time and wanted to get involved but I felt like there was some sort of special handshake that I didn't know and so this video here is for for those people who you know will take you through an actual project and we'll do something together just so that we can maybe unintimidate the whole scene for you plus you'll learn some practical Adobe XD skills at the same time now before we go into the software I just want to quickly I don't know give you an overview of what ux design at least what made it really clear to me when I was kind of stumbling around at the beginning trying to work out what I'm meant to do here and it's kind of like three core parts to it they're really cool to me as a ux designer okay and the first is none of those it's getting a clear brief it's over here for some reason okay that's true of any job getting a clear brief about what it's meant to do and who it's for super clear on that first with the client okay Define who it's for then you've got my Dan's three key principles okay and it is uh having some assumptions testing those assumptions and then iterating based on that testing so that's it as much testing iteration so what I found it different from where like I trained as a graphic designer at University I worked in like web design as well and kind of videography emotion graphics and a few different fields web design as well okay and what I felt my role was and those you know being hired as a professional in those sorts of circumstances was I got given a brief okay which is still true of ux design but then it was up to me to come up with whatever the best solution was based on my experience based on what the client wanted yes there was a you know a kind of a Persona to follow like a person that I was designing for but often it was just up to my tastes and preferences and what worked in the past and what didn't work so the difference with ux design is instead of just going here you go this is what I think works for your brand or you know for your website or for this Motion Graphics and with ux design because it's often used only for not only but often it's a app development and website development okay can be used for all sorts okay but that's often what it gets used for as a designer and I now have assumptions about what I think it should be but I try and detach myself from those assumptions and it being like this is what it should be because I'm the boss of the world okay it's more like I'm excited because I think this is going to work but I'm going to do it super quickly test those assumptions be hype you know be overjoyed when I'm like nailed it everything's perfect no changes never okay or get to the point where like nothing worked and then I'm happy because I'm like thank goodness I didn't you know me and the client didn't actually build this thing out that was never going to work okay so I have assumptions now that aren't you know I'm a little bit more detached from okay I test those assumptions and when those assumptions are being tested and the testing might go through like it might be just side-by-side testing with you know uh the person who's meant to be you know meant to be for the product we call them a Persona okay so somebody they're representative of somebody that's gonna be using it give them to test it might be side by side it might be via email there's you know might be a b testing with a bigger group of people okay maybe you do that testing once you figure it out okay you then iterate okay go back to that beginning make some new assumptions see if you can get a bit clearer get them to get where you want faster be happier about the experience whatever it might be that you're trying to do and it's assumptions testing iteration I found that once I knew that I'm like Ah that's what I'm here for okay that's what I'm doing my ux as I press it oversimplified lots of other stuff to it but I found that was a really good starting point for me when I am trying to understand ux design next thing to be clear about is what Adobe xd's role is in this kind of like let's say making an app and a web design it is purely the design side it doesn't actually make the app that sometimes surprises people okay where you're like great you designed it and it looks like it's working but they're how do you go export app or export website there is none of that basically it's just a design tool once you've made it you can make it look really close to the finished product enough that you can test it with somebody very quickly you can get going like the length of this video we can have something made and be tested and make a high fidelity version which is um pretty fast and you know super fast and super quick rather than building the whole app and then testing that so Ed's job is to design it do testing and then once it's finished again we've done our testing the client sign off of it it looks got all the graphics it's all exactly how I want it to be then we need to then either build it ourselves if it's a website you might be building it in something else okay you might know how to build it you might be hiring a engineer or a web developer okay and she's going to be building it so your job or adobe xd's job is to do a quick wireframe test that then make it look exactly how it's going to be okay do more testing and then once everything's signed off you then hand it over to I'll show you how to do that this video as well hand it over to a developer okay and it'll be her job to actually build out the app or you know and design the website in code or it might be your job but just know that there is a point where you're like it looks perfect it looks like it's going to work but it doesn't it needs to then move on to an engineer why do we even have Adobe XD then if we just need to build it again afterwards it's for Speed okay Adobe XD we can do stuff you I don't know how long this video is going to be I'm kind of like assuming it's about an hour two hours I don't know the uh the editor let me know down here how wrong I was okay but we'll get to this and you'll actually have something working and being able to be tested okay and it looks okay and that's just not possible um uh you know when you're building the website okay or building the app takes a lot longer so it's good in iterating and changing really quickly using the software and then go and build it afterwards that is Adobe xd's role quick super fast prototyping let's talk about what we're making and who is it for okay so it's important to talk about the briefing earlier how important it is so and our customer is going to give you a brief so we are making a mobile website okay it is for a co-working space that's about to open it's not open yet there's still there's lots of like they've got a building but they don't have the fit out hasn't finished and there's nothing ready to go okay so and they though want to have a marketing website because they're actually beginning marketing now even though the facilities aren't finished and they need some way to capture your emails so that when they are ready they get to email everyone okay so they want that website to support the marketing so basically it's just going to be email capture site detail a little bit what they do get them to sign up thank you very much nice and simple now probably the most important part of that brief is who are they trying to retract because if you don't Define who it is very clearly okay then you end up designing these muddy websites where it's not clear who it's for and the people visiting don't really know if it's for them or not okay so I'm going to give you uh the person who it's for often referred to as the Persona okay so I've written one down here so I'm going to read it out and our ideal customer is a woman named Karen Karen is in her 40s she's married with kids uh she works for a multinational company that is based in another country okay and so she needs to work close to home because there's no office in her country and she needs to work close to home but not from home she's tried from home and like we all did during covert It's Tricky especially when there's other people in the house okay so she wants to uh you know she's aware of what co-working spaces do so we don't need to educate it too much on like what it what is this crazy thing okay and but what she's looking for is she's looking for a professional space where there is a bit of community as well okay so it's really important to know who it's for because if it's a co-working space that's maybe for I don't know it's for more like corporate clients okay rather than Karen uh it might be the look is going to be different the way we message and marketing is going to be very different okay there's going to be a lot more like board rooms and like uh Zoom meeting spaces and um corporate sounding goodness okay in graphics and whereas if they're co-working was the other spectrum and it's a bit more of like a frat house kind of thing where you know come we do beer drinking on Fridays you know we do social evening dinners and you can have a very different marketing message based on who that Persona is and if you have no Persona you end up with this like murky midi it's for everybody but it's really for nobody because nobody can really see themselves there so getting clear on the Persona getting clear on the brief that's what we're going to be building would he just get started with the program one last thing I promise uh exercise files because I want this to be a follow along I want you to do it along with me I've got exercise files that you can download uh they are free there's a link in the description Go download them so you can open up and work with me and all these projects that we're going to do and as well as that there is a free shortcut sheet as well so this will be flashing across the screen right now okay uh you can go there as well free to download go grab that print it off stick it next to you while you're working so that you can get the shortcut keys all down as well the other thing for this is I can't believe it he made a workbook for this entire video look at this okay I'm not sure you can't see it from there but uh it's got like all the steps and I've gotten you can write notes how good is that guy good work Dan so workbook exercise files and a shortcut sheet free to download in the exercise files go do that and then open up the program file finally yay hi everyone in this section we'll build the beginnings of our wireframe we'll create a few different pages like this very exciting they're blank but they've got names and we'll quickly discuss the difference between uh wireframes and High Fidelity mock-ups let's do that okay you thought we're actually going to do something uh surprise first of all I'm going to explain uh what we're making we're making a wireframe first and and then we'll move on later in the video to make a high fidelity model so some of those language bits wireframe is easy High Fidelity what is that um so wireframe first wireframe is this we're going to make something first that kind of represents everything but we're not going to go in spin ages picking fonts and colors so just pick one color maybe two gray is a color so you can pick you know just one color pick one font and we're not going to spend a lot of time trying to make this look beautiful we want to test really quickly the functionality we want to go back to the client and say hey is this what you were thinking and go out to the potential clients go see Karen and say um you know work your way through this basic prototype before I spent ages you know getting the right images scrolling through all my fonts on my computer forever trying to find the perfect one okay you can skip to High Fidelity or Hi-Fi okay this is like a Hi-Fi thing I made it's just a little micro site but it's got all the images and you spin ages picking fonts and overlapping text and cutting them out in Photoshop that is high fidelity that comes after you have tested okay there's really basic prototype don't skip the wireframe I know you want to I know I do but I know the value in the wireframe so let's close this down now from this uh we've opened Adobe XD from this kind of like new window and we're going to pick this first one here I'm going to pick the I'm going to pick iPhone 14 pro um just because that's my exercise files that I've got set up for but just pick one of these phones in here if you're up to iPhone 52 that's fine too pick whatever that is um I'm gonna click on that one it doesn't really matter okay we're going to name it the moment's called iPhone 14. just double click it up here and call this one our home page bonus if you can spell it right there we go we need three pages we're going to have a home page registration and Confirmation okay so to do that you just kind of click the title at the top here if you click the word it will select the whole artboard and then you can go the long way you can go caveman Styles and go edit copy and then hit edit paste or use the shortcut Mac or PC and Control Paste I'm going to paste it a third time we've got three of them and just rename all of them I'll speed through this okay home page registration confirmation nice now navigating around XD can be interesting when you're new I'm going to make my little window bigger and what ends up happening zooming in and out let's do that so hold down your command key on a Mac control key on a PC and then hit plus key to zoom in minus key to zoom out so Control Plus or command plus on a Mac probably the one I use the most is holding command on a Mac control on a PC and hit the zero key okay and it just puts every artboard that you've got in View and when you've got like 10 20 you can have up to like 100 artboards command zero is good you can just see everything remember there's a shortcut sheet you can download from the description print it out stick it next to you be more awesome the last bit of navigation is if we zoom in command plus and hold down the spacebar okay you get a little hand so spacebar Mac or PC and then click hold your mouse and just regular it around so it's a way of moving around once you're kind of zoomed in how do we Zoom all the way back out yeah you remember command or control zero all the way out nice let's start by adding some text uh to our home page here okay so grab the type tool which is this letter T here and we can click once okay and just type in the name of our co-working so I'm going to call mine Dan's co-working give it your name okay your name's Karen put in Karen if your name is something else put it in there so pick your own co-working um so text has two parts you can click once and it types on forever okay if I grab my selection tool okay I can click off in the background just click on this gray area here good default for XD grab the type tool click out and drag okay that's the difference clicking once gives you a type box that types forever and if you click and drag you get a box that will go if you smash away your keyboard okay we'll go for body copy so those are the two bits of text boxes I'm going to delete that one there cool thing about this one here if I click on it see this little dot at the bottom here so I've got my selection tool got this selected I can pick a font size by just dragging this bottom part here okay or you can mess around on the right hand side with the different fonts now in terms of fonts that you're going to pick okay you are only allowed to pick one and it's got to be boring okay okay the most boring of them of them all currently there's Open Sands it's kind of pretty but it's simple it's the aerial of the modern world or use Roboto or what if you've got in your machine but no uh impact or Comic Sans please and in terms of this font size I'm going to pick 16. I'm going to type it in over here and just click enter and I'm going to move it by using my little section tool I'm just going to click and drag it kind of in the logoy position very exciting this course gets more exciting I promise I told you it would start at the beginning you're still trying to pick a font aren't you don't pick a fine just pick pick something boring needs to be simple we do not the reason we do pick something that's simple is we don't want the wireframe process either with the client or testing with our Karen our Persona we don't want the conversation to be about oh that's not the right font that's uh you know we can't use that font or we don't want those discussions okay that is for later on when we do High Fidelity what we want is just really testing the functionality using a wireframe that functionality sometimes gets called the user Journey okay they want to use it how they're going to get to where we want them to go and now our cases to sign up so we've picked a boring font what's next hi everyone look we're going to transform our logo inverted quotes just a bit of text but it is what we're using as our logo into something called a component okay there it is there hello and what happens is uh component is the best way just to show you this guy here is another one of the component he's called the instance of the component this one's the main one watch this if I do and I change it and I say uh Bob you can see it updates as well so things that are components mean you can have them on lots of different pages okay and you update the main okay one of them and they all update it's super handy especially with things like logos and Footers and navs and buttons any UI elements that are going to be on all the pages let me show you how to make it all right so finally some more fancy stuff and what we want to do is we're going to turn our logo using air quotes here because it's just text but hey it's our placeholder logo a lot of design jobs will start with no branding and sometimes it's best to leave it off in total just so that we're not having the problem with like wrong logo you're not mean to have it too close to the edge that sort of stuff but we've got our logo go and we're going to turn into what's called a component whereas a component it is something that you plan to reuse okay like our logo is going to be on every page here okay every artboard might be in multiple places on the same artboard so we don't want to copy and paste it because if we have to make an update we have to update them all separately but if it's a component okay we can update one and they all update symbol if you know illustrator you still don't know what that is let's just make one Dan alright so I've got it selected okay so I've got my selection tool which is this Black Arrow here I've clicked off click it once and we're going to create a component to do it there's a couple of different ways let's do it the easy way and over here okay in my properties panel you see this thing that says component see this little plus button click that little plus button Okay click it it is now a component okay and it's called component one and we've jumped into What's called the assets Library so these are the things that are have lots of things like colors and you can see videos and character Styles components reusable stuff uh component one we'll rename it double click it call it logo okay if you're like me you'll end up with component 52 and not renaming anything you don't have to rename it but hey we're doing a course let's do it the proper way we'll end up with lots of components okay uh let's just quickly test why it's good it's selected here copy it and paste it basically paste it on top of itself okay if you copy and paste something it's a bit of a strangeness about XD gets it puts it on top so copy and paste it and watch this I can go back to this first one there's two parts to a component okay there is the main component okay and then there's this one here which is the instance okay the editor cut out that you huge long pause that I had because I couldn't think of it the difference really is this one here he's got a dark green diamond here and this one's got not dark green main instance okay just means that if you want to update them all update the one that has the Green Dot it's called main so watch this if I go in here and say actually it's no longer Dan's co-working it's um I don't know Karen's taking over the show can you see this one updates that's why components are awesome we're only going to have three pages it's very common to have 10 20 30 100 okay but Karen get out of here that was just a for instance we don't need it right now so delete the second one if you did it so I've got a component great next section there I've escaped from the screen I feel like screen capture is good for a while but then you need to come out and we need to be I don't know better connected through video and headshot yeah really what I'm here for is to beg for a like And subscribe if you're enjoying the video like it if you want if you like what I do and you want to see more subscribe uh how much does it help me it helps me a lot but what I think it does I don't think it actually does a whole lot except it's a vanity metric and guess what very vain I like to see if people like the video or dislike it uh and if they really like it they subscribe so do those things if you like and the other thing is is that this is like a mini course okay there's only so much I can cover in this like free little mini course if you want to go further with XD and I've got a full course okay that covers everything from the beginning all the way through to quite a complete um you know ux project and there is a link for that in the description okay so if you do want to go further than what we do here come join me for the full giant it's called XD Essentials yeah all right uh interlude over let's get back into the computer hello in this section we're going to make a big rectangle uh it is a placeholder image okay so we don't actually put images in wireframes we just put in spaces that you know like this is the place that an image is going to go in the future when we do a high fidelity okay and how do you make a placeholder image well I'll show you properly in a second but don't tell anyone it's just a feels like it should be out something else okay but just a rectangle let's make it I'll show you how to use colors make a default Swatch and we'll do some big text fun all right uh to make it let's just grab the rectangle tool this second one down here click hold and just drag out a rough image box this is going to be what we call our hero image normally okay it's our Big Marketing image that's gonna set the tone for it might not be our product it might just set the tone of like who is welcome here they generally call it the hero image okay and because there's a wireframe we're not actually going to put an image in here just a placeholder image and what we're going to do is we're going to pick a fill color so over here on the right hand side here you'll see fill in Border if that goes away grab the rectangle tool Okay click off in the background and click in the middle and it should all come back and just click in the middle here and pick your color it can be anything but you only have one color maybe a gray as well okay if you don't get carried away in color because the same reason for the font we do not want to get into a position where we're in meetings discussing like oh I don't like green okay you just pick one color okay runs through the site you can add colors corporate colors later on I would stay away from the corporate color as well because you might get in trouble for like using the wrong RGB or something else just pick some random boring color when I say boring I mean not offensive like you could go for this okay and go for like bright red okay or pink or purple or neon green but you might end up with similar sort of chats where you what you want to do is actually just chat about the functionality the the actual thing being made and how well it works do people get to go where they need to go so that's gonna be my color what I'll do here is I'll hit this little plus button because it means that it's just something that I can reuse now it's like a little Swatch all right in terms of the Border if you are from other parts of adobe land it's normally called The Stroke they call it the board here and color we're gonna leave it and the size you're going to pick for me just put in Border size of three it's on a nice thick border for you here they don't like it you still have to do it because it's my course uh we're gonna do rounded Corners so you can either type of them here so this is the rounded Corners you can see I want 10K a or you can drag it on the edges here okay can you see this okay super sneaky upgrade if you hold down the option key on the Mac or ALT key on a PC or you can do one side we don't want that though so just pick something I don't mind what it is at the moment as long as it's got rounded Corners it's going to help me explain things as we go along next can you throw in some hero text so some lead marketing text underneath okay in our case it's going to be like opening in January opening engine you Airy okay select all the text okay you can just double click on it and it will highlight and over here what the same font that you used before but we're gonna you can still play around with the hierarchy of fonts like Big Font means big important and small font means body copy things like that okay that's fine for a wireframe we just don't want to pick Styles okay so we're gonna pick 28 in terms of the size we'll send to the text and we'll probably pick bold there's another thing you can do in the wireframe okay you can do anything in your wireframe I'm just giving you the Like rules that normally apply size weight are fine don't mess around with more than one though in my humble opinion okay I'm gonna grab my little arrow here and watch this if I drag it to the center can you see XT is awesome just goes do you mean the center you're like yeah didn't have to align it with anything oh nice just put that in there next let's make a button and guess what there is no actual button it's just a rectangle like the tool here feels like buttons should at least be a special Button making thing nope let's just draw a rectangle that kinda looks like the rough shape of a button and that's going to be our button underwhelming Dan but I'm going to redeem myself by showing you this so um I want to be this to be the same same color same stroke same line around the outside same rounded Corners what we can do grab the black arrow click on this once let's go edit and we can go to copy okay you can use a shortcut then click on this button here and instead of going through making it green and making it three border you can just go in it look at this paste appearance that shortcut okay uh alt alt control V on Mac alt control V on PC or this one here option command V okay he's your best friend because watch this boom you can just keep making stuff and it all matches up nice it's called copying and pasting appearance now let's turn this thing into a more official button okay basically a component we've done that before remember okay to make it more buttony I'm going to zoom in who remembers what the shortcut is that's right command plus on a Mac Control Plus on a PC okay I'm gonna grab my type tool I'm going to click once and this one is going to be register I'm going to use all caps register okay I'm going to pick a font size for it I'm gonna pick 16. 16 just in a real default apps and websites for just legible text everyone can read visually impaired it's just a good size that everyone can work with like 10 or 12 point is good for print 16 good for digital stuff so I've gone back to my move tool I'm just gonna first of all I'm gonna make it um centered just make sure that when I type later on it kind of starts in the middle and I'll try and line it up in the middle which sometimes and some programs can be tricky not an XD look at this let's line it up boom did you like it in the middle there yeah Target's and all super handy you can see even the pixels there you can see the pixels appearing oh excites me 13 from the top 22 from the side nice all right let's select both of them so grab the Black Arrow and I'm just going to start down here in the No Man's Land of the white artboard click hold and just drag a box around both of them okay so I've got them both selected and like we did with our um map up here remember hold spacebar if you need to move around Okay click hold and drag while holding spacebar and I want to make it a component because I'm going to use buttons everywhere okay so I'm going to have this be a component okay I'm going to be good and call this one one button there we go hit enter there you go is my little main component for my button all right the next thing I want to share with you is a term called UI card okay so UI is user interface okay the things that are on the page the things that we design ux is the process of Designing those things and testing them the UI is when we're actually just making the things on the page so we're doing a lot of UI design now so a UI card is basically a reusable little unit that gets used a lot on websites and apps it gives them examples it's better it's either like a product or a service or people so on my website here okay bring your laptop.com where I sell my courses that you could come and join if you wanted to my secret super duper marketing message I know I'll just show them my website and but you can see things things down here these are all the courses these are UI cards that are consistent they're easy to compare okay and they're easy to make I can just you know lcms just makes new ones of these upload damage add the text and off they go okay so these are UI cards and other sites I just went through and grabbed a few so HubSpot okay they've got their big hero Banner image up the top here generally that's called the Jumbotron great name for it but these cards here easily comparable um different features let's have a look at a couple other ones so stripe there's the Jumbotron and they're not always the same they're not always see things like there you go some nice reusable cards okay uh any other ones couple more there you go some UI cards on Shopify and also meet the team okay I just Google meet the team in the local area around me I don't know why it's the rule on the internet but like if you're gonna put people they have to be in like circles oh these ones change okay you have to put people in circles if it's meet the team but these are nice and reusable okay we get to design them once and people get to add and remove and they all fit in um same with this one I just Googled a couple that I found circles everywhere for people people in circles everything else needs to be in rectangles for some reason it's not the real rule just seems to be what happens all right let's make one so I'm gonna do is get you to grab the rectangle tool and I'm going to draw out something I want it to be square who knows how I make it to be a perfect square oh you know you hold down shift look at that you already knew and so hold down shift while you're dragging it out so I'll do it again rectangle tool click hold drag and while I'm dragging got my mouse key down hold shift you'll get a perfect square do it that sort of size I'm not too worried what it is the cool thing about now is watch this I don't want it to you know how do I get that style all we have to do now is up here into edit we can go to paste appearance again okay because we copied it earlier we can just keep making stuff all the way through the course and go to edit paste appearance it depends what you copied last but it's it's a handy one to know if it didn't work okay you can just click on this one here and go copy and then just click on this one and go paste appearance all right so we've got our first part of our card ours is going to be features for our co-working space okay and the first feature we're going to do is grab the type tool the shortcut is T okay I'm going to click once because I want it to type forever I'm actually going to make it left aligned okay and then type in bottom okay bottoms coffee make it bold in 22 why am I making you pick fonts just later on I'm going to do something fancy and I want it to be I want us all to get the same awesome reaction so bottomless coffee I'm going to line it up here and that's going to be my first of my cards okay I'm going to have a bunch of them stacked underneath each other I'll show you a cool tool for doing that in a bit and before we go on we haven't saved anything like is that dangerous not so much an XD basically it's saving it to the cloud you can see this little Cloud icon here and some people scared of the cloud I was I avoided it and but it's just so much easier now and watch this if I go file and I go to you can save as a local document if you are like no me must save on hard drive that is fine kind of caveman now but you do you what's really good about it you just save it it is I'm going to give it a better name I'm going to call this one uh Dan's co-working and and co-working oh I can't type today it's mainly because my microphone's in the way anyway that's my excuse and it just updates and then you don't really need to save it just saves as it goes it means it's accessible on all these computers you can download it if you need to it's just better having it online in my experience up to you though you can download it happen on your machine all right why next let's add to this registration page here so I'm gonna zoom in a little bit remember command plus and I'm going to put in an input field like just a box you can type into and again it's just a rectangle okay so we're mocking things up in XD we can make it look real but really that is our input field okay so I've just left the defaults okay just a rectangle it's got a white fill and a stroker on the outside called border stroke of one there you go I'm going to grab my Black Arrow grab the middle and just make sure it's in the middle I'm going to put in some suggested text okay so I'm going to click once with the type tool I hit the T key okay just to speed things up okay I'm going to type in email email okay and you depends on how you want your either that is a label so people couldn't see it underneath or you can put like a suggestion I like doing that it's a bit tidier well I think it's an idea 16 and I'm going to use my arrow key you can just click on things with your Black Arrow just use your arrow key to move it around okay and you can either lower the opacity or down here the fill color I'm gonna lower the opacity okay which makes it great or I can just make it gray that's up to you why you want to do that there you go this is kind of like a hint you might type in Sample at internet.com you get the idea okay next thing I want is I'm going to put a title so I'm just going to grab this one copy and paste it um a trick that I use for everything in Adobe land is hold down the option key on a Mac Alt key on a PC and drag it and you get a duplicate while you're doing that that's a handy one and this one's just going to say let me know so what is this page and this is when I click this button to register it jumps to this page so people can type in their email address okay and the next thing is I need a button and I could draw another button oh but remember we've got a component look at that ready to use button okay so that's a nice thing once you make your first button uh you can just keep dragging it out of here other cool thing that just appeared there it's just so lovely for layout if you're a bit of a layout person everything needs to be aligned and spaced up okay I've got the problem because there's no descenders in this text okay but if there was like a p that drops down okay it would be perfectly lined up but I feel like it's it's not at the moment but look at that spacing see this is 4848 I can't Point edit okay but oh I love all this lining up the next thing I want to show you is we've looked at components that's them over here and we did something before where we've got a main component okay which is this one see the little diamond in the corner it's fully green means if I update this one it updates all of them which is awesome let's do it so I'm going to double click it to go in I'm going to change the color okay you can see they all update so imagine that across 20 Pages 20 000 pages okay so I'm going to undo which is up here if you don't know okay at command Z is what I use or control Z on a PC so we've got our component there's a main component there is an insta distance okay of that component that's this guy with the empty diamond and there's another one what is that other one okay it's when I want to do an override because I don't want them all to say register forever otherwise you'll end up with button button two button three button four all the buttons what XD is really good at is I can double click it a couple of times okay just learning tool and I can call this one submit submit and the cool thing about is like what's happened is it disconnected why is this different from this one that's a nice thing it's an override and the difference is see that little dome in there with a dot in there I don't know why that's important for me to show you it I don't know there's a main an instance and then that's the override why this is good is that this is unique and I can have loads of buttons that say lots of different things but I still have this control using this main option watch this I can go in here and say actually you know I want it to be a fill color of white look I did both of them it still says submit so it's got like a text override but because we didn't change the color over here this guy goes well nothing's nothing's been overridden with the color so I'll just change that I can change lots of stuff okay look okay so you get this nice vast control over loads of buttons but they can all be individual as well why is that exciting I don't know it excites me if you're doing your UI design in Photoshop illustrator though or InDesign like I used to oh man you'd have a lot of stuff lying around everything unique watch this as well so I can go in here I can say actually bold is going to be italic look at that it goes italic as well still says submit I'm going to undo that if I don't like it bigger the idea last thing before we go confirmation page is going to have something very an exciting remember hold down option or alt while you're dragging it out I'm going to get it in the middle by just dragging it and this one's just going to say thanks enter exclamation mark Dan loves a bit of a random grammar we'll keep you up to object okay there you go and what I should have done with this one is it should be the one that's kind of it's just too long it'll go on forever okay so we don't want that so you can change it afterwards remember at the beginning I showed you you could uh type text a couple of ways so I'm going to click off in the background click a couple of times in the gray area t for the type tool click once oh click once that didn't work yeah it did it's white so remember the last thing I picked uh go back then okay so I do this and it kicks on forever but remember the other way to create a type box is to click and drag and that means when it gets to the edge oh it breaks that's what I want but I didn't do it at the beginning what do I do now I'm going to see you are not uh where is it here so this one it's called a auto width I knew that I'm not waiting for the the tooltip and this one's called Fix with no it's called Auto height I want fixed size so I don't generally oh no let's use Auto height there we go so now what happens is I can make it a perfect size okay so that's the difference between that um water width and auto height okay it means I can get it to break now onto two lines and I can get in the middle here we go so the flow is going to be click the button into your text hit submit and you end up on this page we'll do like a little animation here okay next thing is I want the logo on all pages okay so a cool thing about it is and this is a component awesome I can drag it on here okay and just keep doing that that's fine that works um a neat trick for XD is to click it on here and go to uh copy so command or control C and then go to these two pages or any page you want or if you've got 100 Pages this is where it's better not as exciting with two but it is exciting when you've got 200. so select I've just clicked on this um word registration here and it clicks the whole artboard I'm holding down shift on my keyboard and clicking confirmation you can go through and click a bunch of pages I just got these two and watch this I'm going to hit paste command or control V just the regular old paste and boom look at that it's all in the right place oh great for like updating a nav here and just splitting it across all the pages or a footer or some sort of something something has to be on all pages backgrounds that sort of stuff okay it's paste in place but you don't actually have to do anything you just make sure you click on the artboard and it will paste it right where it needs to go you can do it for one page watch this click on this one paste and there we go again there's my fill little main one okay my main component and these are all the dependents children no they're called instances lots of programs call them different things I get confused sometimes but they're all called instances here in XT all right one thing is if you have got lost and you're like man I just couldn't get that to work you can I'd mention catch-up files at the beginning there so I've made a catch up file so if you go to your exercise files let me find mine all right here they are okay remember you can download them from the link in the description it's got everything we need there's ketchup o1 open up that and you'll be basically where I'm at now okay it'll look a different color and a different font probably but that'll catch you up right now so you can keep going or if you like actually I wasn't going to play along but now I am jump up to catch one uh catch up one it's in your exercise files under Z ketchup okay and yeah yeah join in the tutorial all right the next bit is we're going to connect uh XD with another Adobe program okay something that you might know already or maybe know of not know at all basically what I want to do is there's some people who have skills in these other programs that are a bit scared to jump into XD I'm not sure how they interact and how you can really benefit if you already know some of these other software so we're going to be using Adobe Illustrator where we're going to be opening up a file from the exercise files okay so in the exercise files there's one called illustrator assets V1 open that up for me in illustrator okay and there it is there so in XD there are actually some really good drawing tools okay you've got the pen tool that you may or may not love or hate okay and it works just the same as illustrator deleting it you can use basic shapes you can draw things out of lines like all that sort of stuff it's just it's good enough okay but if you've got illustrator skills illustrator is purpose built for drawing it has way more depth so me because I have Illustrated skills I'll do most of my drawing in illustrator and bring it in and I want to show you how that connection is made so let's jump into illustrator what I want to do is do something that is unique to illustrator that XD can't do because you could draw these lines here okay no problem but let's say I've got this graphic here these are two separate lines that I've drawn I've used the width tool I've used the curvature tool if you've never heard of those tools and you want to learn illustrator better I have got an illustrator Essentials and illustrator Advanced course check out the links for those in the description okay for now though I've got these two separate shapes let's just select them both and go to I can't remember let's go to object let's go to path and let's go to forget that it's going to blend come on Dan uh so object blend and we're going to go to make and it will blend these two which at the beginning is not that exciting it kind of is if you've ever tried to like do the third line that matches those two on the inside it can be really tricky okay but we can do some nicer stuff so it should still be selected over here in your properties panel and you've got these quick actions okay if your screen is a bit smaller you might have to toggle things down but find blend options Okay click on that one and there you go at the moment it's doing smooth color let's go to specified steps and you can experiment but I'm going to do five because I've already practiced and that looks cool so we're going to click in there and click OK ah look how cool that is if you ever want to do that like lithograph is it um kind of pattern or kind of like a lace looking thing it's awesome for that the reason I do this is because a I want you to go do my illustrator course uh but B if you are good at illustrator and you want to do more complex things it's a bit of a pain because if I go and put this in XD now it kind of freaks out a little bit because it doesn't know what blending options are it's quite a simple creature so I want to show you how to make sure that everything goes through to XD lovely the way to do it is have it selected and go up to object and in this case we're going to go into blend and there's one called expand okay and it's going to kind of expand all these lines which is cool there's one other thing that's applied to it is that fancy stroke that I put on it it can like blobs at the top okay and get skinny down the bottom the width tool if you are looking for that that's in the course okay but uh XD doesn't like these variable lines at the moment this might change in the future but the fix all for all things illustrator going to print or other programs as object path and we're going to go to outline stroke okay so it's not a fancy stroke anymore it's just a shape and now I can copy and paste it I can just go copy and I can go into XT and paste it and it's ready to go okay it's Vector it's lovely could ungroup it again okay and it's all these like nice little pieces now to work in still Vector so it's just a heads up if you are doing stuff in illustrator again bringing it in which is quite often a lot of designers will be sometimes you need to outline the stroke but copy and pasting is fine what you'll end up doing as a ux designer is you'll end up building libraries of reusable components because let's say this burger menu over here we don't want to recreate it every single time okay so same with this placeholder image icon okay you'll end up with lots of little UI components okay page Furniture I love that word okay where you can put on different mock-ups that you'll be doing so you'll start using libraries so let me quickly show you how to do that so I'm in illustrator I'm going to open up libraries okay I'm going to go and make a new library so do this with me I'm going to go back to this kind of error up the top here back to my all my libraries I'm going to create a new library okay and this one's going to be called my co-working okay might be your client it might be just your you know your wireframe library just has generic stuff in there I'm going to build one out for the client in this case because I've got some other things that I want to add to it so I'm going to create this library and then I'm going to select this I'm going to drag it in okay drag one of the green bits just drag it in here look at that got our leaf okay I'm going to call this one leaf even it's meant to be a leaf along with it I've got this burger menu that I've got so I'm going to select this and just click and drag the gray bit okay I'm using this tool up here the black selection tool okay and call group you can call it group 12. that's fine we're going to call ours I like nav sandwich it's a way better name sandwich okay call it Burger menu because nobody else knows does me and you know what a native sandwich is uh let's do this one here and this one is going to be my placehold image uh would that work didn't click hold drag drag give it a second oh it doesn't want to go it does give it a second Dan okay and let's call this one police holder image now often when I'm working with a client I might have existing work with them or you've got existing documents you can get from them they might have a style guide that you can get your hands on the cool thing about that and libraries okay is you can go you I don't want to drag this rectangle in because I'll get a rectangle okay but I don't want like basically I want the color from it so I'm gonna you can't undo it I'm gonna select it and add the little trash can down the bottom there we go I'm going to select it and there's a secret thing you can do see that this little plus button down here so I got it selected hit the plus button I can bring in the graphic that's what happens when you drag it but I just want the fill color look at that oh the RGB or the you know hexadecimal number comes through okay and that is a great way even if you don't do any more XD or anything else to do with ux it's really handy for corporate colors you can share these with teammates other colleagues they're all using the same colors share with a client okay it's a way for them to access it easily out of the scope of this course but hey all right let's do the green now as well so I'm going to go U fill color U you you can name them as well I'm happy for them just to be the codes that they are so if you thought color swatches sharing across all the Adobe programs okay Photoshop illustrator InDesign After Effects Premiere Pro I can't think of any more else Lightroom actually Lightroom doesn't have libraries anyway I got my colors look at this we can do fonts as well it's probably my biggest one is that sharing fonts across all the different Adobe programs especially into like UI design or ux design I get to be consistent because you might have spent ages going through and going I like you know a little bit of tracking too much tracking okay A little bit of leading uh you know get the right height the right sizes get it all perfect okay and you want to be consistent across your whole team or all of your projects okay what you can do is you can select it I don't want to drag it in because I don't want that as a it's kind of basically just a picture I want it selected go plus and say I want the character style oh look at all that stuff you can put the text in there if you've got stuff that you use all the time T's and C's I don't know other bits of reusable text copyright notices anything like that just add the text means you can drag it out of your library I'm gonna put the character style I'm gonna name this one just H1 okay I'm going to do this one why don't I have a H2 don't do that way just because I don't know why I should have an H2 okay this one's going to be called heading two H2 and then this one has got to be my body copy here we go all right so that's cool huh we get to put awesome stuff in our libraries Graphics colors fonts now if you don't have illustrator skills and you got lost don't worry you can still carry on with the course because in your exercise files we're up to this one called catch up two open that up and everything that we've put in the library here will just appear nicely in XD for you ready to go no worries next step is how do I access an XD XD is probably the weirdest one of them all every of them just have an a really easy low boost panel and in XD they're kind of it's this kind of like outlier in terms of a bit of software it has little quickie bits maybe that's why some people are intimidated by it but to find the libraries up here we're in character in this thing called assets that's this little icon here we've got layers okay and we've got libraries okay and layers and so be on this assets one this one at the top here go back one okay and then you get access to all your libraries that's the weird bit okay and let's find it and it's called what do we call it my so m oh does everybody else's libraries look like mine Lots going on I'm blaming the tutorials my co-working there it is there look well our stuff nice you can be in Grid mode I like list mode okay and let's add our little icon so when you are editing from libraries or assets panels okay it is really common to kind of hold spacebar get yourself some gray area zoom out if you need to and drag it not where you want it to go but just drag it here first then drag it where you want it to go this is my like little icon for a placehold image okay why don't I just drag it straight on you can do it but it ends up replacing stuff which is Handy with like images you could switch that out that would be great but for a moment though just put it there so it's a separate little unit then drag it on top now I use the placeholder image graphic I like the icon sorry and a lot of people will also up to you just use the line and just draw a line either side click hold and drag that way click hold and drag that way I make them the right thickness okay to match the other stuff so three point I don't like that way I like doing little icons everywhere there's no real set rule one or the other the next bit is I want to add the burger menu but I want to add it to this top kind of group we've got going on we got a logo but I want the nav to be part of it because if we add it to this component it'll spill through all these Pages go components so how do we do it first of all get it into the right position now we could drag it straight here because there's nothing there even then my natural instinct is to drag it here in the gray area Okay called the pasteboard and then drag it up if you can click it come on here we go okay now get it where you want it's not part of this yet um oh the other thing I forgot to mention is see these little things here see this little it means it's connected to this item here which is really cool for libraries we're going on a diversion I'll be back in a second to talk about adding to components but I see this little link icon here it means it's connected here you can't break it to say actually don't be part of this Library okay but if it is I'm hitting undo I'm going to open it in illustrator so in illustrator now what happens with libraries is when you pass them into here these are no longer connected so this guy's his own little person the snare sandwich doing his own thing so I can double click it okay and you can see it's opened its own Tab and now watch this I can go through and say actually I want this to be I don't know weird in this color if I hit save it will flow through not back to the original one because it's kind of one-way Street put it into there but you can see it's updated over here my nav sandwich if I go into XD you see look crazy shape Burger menu so there's a real bonus sometimes it's a real pain in the butt okay and all you need to do is break that link okay and it will no won't update just be its own person Lone Ranger so I'm going to undo so it's linked oh put it back I'm gonna go back into illustrator go here undo that hit save close it down and it's updated fancy huh I almost forgot one of the best features for a libraries all right where were we we've got this I want these two to be joined I want this inside of my logo and I'm going to go back to my assets panel there it is there oh okay where's my document assets okay I want it part of the logo how do I get it in there you select it once get it what you want first this is the easy split okay and I'm going to get that kind of lined up where I want it I'm going to grab them I'm going to go to edit cut or you can use your shortcut okay and I'm going to click on this and I can go in and edit this how do I go in and edit you just double click it watch what happens to the outside of this let's zoom in so you can see and if I double click it what happens is you get this kind of like weird glow around the outside I know now and you do now too that we're actually editing we've dived inside that component and now that I'm inside of it let me zoom out a little bit if I hit paste remember paste is cool because it puts it back where it got it can you see he's now inside all of all of that okay that little band expands okay and you can kind of see on the icon there not very well it's all part of it but really ready for the magic oh it's on all of them woohoo okay so that's the perks of these oh not lined up okay so clicking off in the background I click it once I'm just using it like an icon and I can't really change much but if I double click it I go inside the component and I can add stuff delete stuff change stuff change the text okay so there's two kind of editing modes just clicking it once and then double clicking it to go inside does that make sense I'll give that a go and the way to know is if you oh well give it a wiggle click off in the background give it a wiggle if it's not connected you didn't quite get it right just rewind the video a bit and give it a go but nice we can keep building out that now as a component okay it might be better now be called nav or nerve this would be my nav oh come on down nav here we go all right so that is adding two existing components same thing for a button if you need to draw a triangle a little arrow or a plus you can go inside of it draw it somewhere illustrator in here okay then go inside of it double click it you get that like little glow around the outside and just paste it inside and it will update on all of them now is the most exciting part of all of XD now if you're sitting there thinking it better be because we've made a couple of rectangles and some text then this isn't great design we're learning the software we're learning it we'll get better it'll get nicer remember it's a wireframe so what is this amazing tool you're talking of it is called the repeat grid the repeat grid is awesome let me show you what it is what it does it is amazing for lists anything that's repeatable okay so I'm going to select remember Black Arrow drag a box around these two okay I'm going to click this button here called repeat grid the super amazing tool click on it it'll be good it is watch this click on this and grab this bottom one and you do it you wait give it a go on your one pause it and be like oh okay but we'll do it together you've unpaused ready three two one oh look just magically makes more okay I need three in total okay not three in a bit just three would be great it gets better if you thought that was good weight watch this if I hover in between these you're like oh what does that do click hold drag all right so if you've got to make any more than two use a repeat grid think of big long lists like we're doing a co-working space it's pretty simple okay but if you're designing an app or a website that has huge like search results or product listings or skus or anything boring like that this is going to be your best friend okay it means you can do one and they just repeat themselves and you're like oh that's good do I have to ungroup it to change it no no you don't you can use the same overrides that we did for this button here okay so that's kind of like the main one at the top there this is the boss these other ones follow suits unless we override it and we can override it I'm gonna get rid of bottomless coffee and we're gonna put in 24 7 access look at that so you can update them watch this I can click off Okay click back on so I kind of click off click back on sometimes here there's a couple of different ways of clicking it and watch this this comes back ah so you've still got that great control even though that is unique it's been overridden let's do the same thing with this one it's going to be called pet friendly nice so you've got these little overrides but you can still go back and change this top one okay if you decide you want to make it smaller clicked it once I can go like this look full control love it this one here as well he's part of it look we can change this round circles squares I'm gonna go something like that love the repeat grid okay I'm gonna click off in the background grab it and click it once you can go that way as well we don't want that for the moment okay but you might want it for your project go the repeat grid okay so now the repeat grid is the fanciest funnest thing but the actual real difference between something like you might be sitting here going like I can just use Photoshop to make this so far you know you probably make most of it uh for sure the real big difference now is this little tab here it's prototyping it's being able to set it up so that somebody like the client like yourself and more importantly the potential users Karen okay can have a play with your app and make it work get a sense of the user journey and the user flow give you feedback before you go and spend time picking fonts and colors so let's do that let's switch to the Prototype tab nothing really changes there's changes over here I want to see all of the Outboards what's the shortcut for that oh you've got it now command zero control zero on a PC okay I've got L what I do is I click on this register button because what I want to do is somebody click the register button okay and then go to this page so all you do is click and hold this little blue circle Chevron thing and just kind of like Get it close can you see a little blue line appear around the edge of the border the artboard let go that'll work we're going to get them to pretend type in their email address it's one thing they can't do with this prototype an XT at the moment you can't like type into it but once they've pretend typed it into it they can click on this button and when it goes to you know once they've submitted their email address it goes to this page thank you for signing up all right so we've got these things called wires they're connected up let's preview it now it's best to preview it'll preview from whatever page you're working on I don't want to start at the registration on click on the home page or anywhere in the home page doesn't matter okay and then see this little button here okay play oh what's this it's a little preview of your web mobile app now go and have a play go watch this register look at that pipe an email address submit thanks will keep you up to date and now we're trapped okay so it's handy to test it yourself obviously okay but it's really cool that's the big thing for XD is you can quickly make stuff and quickly prototype it okay so we're gonna go we're gonna close down this little prototype you don't have to you just like what I end up doing is having it on this other window here which you can't see and it's just always open um so let me just give you a for instance I have this open on my separate screen and watch this when I go in here and say in design view and I go oh can you see ah look at this it's always prototyping okay so I can always interact with it while I'm working it's really handy to have that prototype okay go back to the home page let's undo all that okay let's close down it out because I might freaked you out there right we'll be back we've closed down our preview we've got trapped on this page so what we're going to do is we're going to have a back to home button and or we can go in here so we're gonna go to prototype I'm going to say actually when the logo is clicked it's a really common one these days you know look at the logo and go back to the home page look at that so now home page preview oh shortcut for preview if you're an old anybody remember flash rest in peace flash I used to teach that loads you move up the shortcut for prototyping was or just open up the preview that's right command enter or control enter on a PC oh we'll hit the play button and a bit of nostalgia there okay so now I can go register submit finish go back to the home look at us now testing on our computer is fine and what you need to do is there's a mobile app for XD okay you just download it from the App Store and you sign in with your Adobe license okay or adobe XD license ID and you can test it on your phone that's even better to keep this course short and not a full course I'm not going to go through it but you can test on your app and that's better because it's nice to see the fonts not on your giant screen but actually on in situ on your phone again to keep this course short we won't go through it all but I can click on home page and I can click on my little register button okay and this one here is transitioning okay what type of transition it's going to the registration page does it have animation now let's get it to slide two there oh I can never remember it's either slide left or right and we'll get this button okay when it transitions to the confirmation page which is this one here it's going to do an animation of push left they're going to be wrong anyway okay home page preview and you can do different kinds of animations depending on what you want to do there we go nice there's a lot more to prototyping but I think it's enough now to give you a sense in this kind of like mini course so we've been previewing ourselves that's great get it tested okay you can have some one of your colleagues work through it next to you on your phone now we want to get it out to be shared okay so with other people that are not me or somebody next to me we can use this share option okay so there's a lot of times it's command one oh there's a lot of jumping between these two here it's option or alt on a PC so option on a Mac and just hit one design two prototype you'll toggle between those two lots designing prototyping designing prototype and the third one is share so option or alt three you might not be ready for shortcuts anyway okay so we're in the share option what are we going to do okay we're going to share this link what kind of review we're going to do design review there's lots of options to go through but for the moment we'll cover this one in this video and what it's going to be for is so whenever I'm working on a project often I'll get to this stage nothing more okay nothing fancier okay but I'll share this with the client okay just to make sure all my project manager or whoever I'm making this for okay just to see if I'm on the right page because so many times like I'll get to this High Fidelity model where it's all beautiful and they're like well it's not what we talked about I'm like yes it is you thought one thing they thought one thing I can get to this like I don't know how long we are in this video yet because it's not edited but I'm sure we're a long way into it now something like that and but without having to explain myself I could make this in about five minutes okay uh maybe even quicker and I can share this really quickly with my client or Studio manager or whoever it is and so they can give me feedback just to say if we're on the right direction before we go up to our users even okay so I'm gonna do this I'm going to create a link and it's really awesome so uh create link 100 then Waits there for a while okay and this is what I can share with them this little link here I'm going to copy the link and I'm going to open it in a browser actually I'm just going to click on it clearly opens on another screen there we go and this is what the other person sees okay they don't have to log in they can if they want to add comments but they can actually work on without if you've got a client that has no chance of signing up for Adobe or any sort of thing they'll still be able to access it and they can actually still work with it look how cool this is still got my little animations okay and they can give you a test in browser the cool thing about it is let's say that they're doing the testing and like one thing that I do often is I'll test with my developer before I test with my stakeholders stakeholders is a word that I don't really like but it gets used in the industry Lots it's like the clients and the customer and all those people okay a big group of them and before I test with those people I often test with whoever's going to build this app at the end okay if it's me sure I don't need to but if I'm working with my developer I want her to be able to go through and have a look because there's so many times where I see it with my developer and the developer bringing a laptop is Malcolm and he goes why isn't that a pop-up because I love doing uh things that are let's go here I love going to new screens it's just my default life I think from all web design but in terms of mobile design or mobile app he's like why isn't that just a pop-up for this like first page you know so you don't actually leave it just a pop-up model I'm like okay so I sent it to him and he goes uh why okay and they can even pin it they can even say like why isn't this a thing or why isn't and this button green or that's the wrong color and you can get all this great feedback before you get too far this is the power of wireframes and the power of XD because we can share these links in browser send them out get feedback and this is where we get to that so this is the kind of testing phase now we can go back to that iteration remember we've got assumptions a hypothesis then we've got some testing and then we've got iteration that's my little ux flow now I can go back to XD and know that maybe you're right should be a pop-up Moodle so prototyping and sharing in XD is kind of where it gets different from being you know illustrator Photoshop I don't know PowerPoint wherever you're doing your ux design in currently XD is awesome for this if you have got lost in this course as well um I'm up to the catch up three so just in your exercise files catch up three is where we're at now open it up you'll have this thing it'll be prototyped it'll be ready to go and you can carry on with the course with me all right okay so we've made some assumptions I thought this is going to be perfect we did some testing and this stage the developer came back might be the client okay might be the user okay the users tested it and gone this is a bit weird or I got lost here okay now we can make some adjustments okay so iterations so what I'm going to do is make this a pop-up one I wasn't going to do this and I was like ah let's do it I talked about it and so it's a little bit Advanced if you're like oh it's getting tricky it's okay it is a tricky part without doing like my full XD course we're jumping a little bit towards the end here anyway what we're going to do is I'm going to grab our white box okay and it's going to be this sort of pop-up modally thing well I won't style it I don't want to get too far into the weeds here I'm going to grab my Black Arrow I'm going to right click it and say send to back so it's behind it now there's a few other things I need to do but that'll do for the moment okay and I'm going to move it down I selected it at all and just moved it down what I need to do is go to prototype okay optional alt two I'm going to click on this and instead of this button when clicked go to a transition I want to change it to something called overlay so instead of transitioning into the this page I want to Overlay this page over the top okay you can kind of see what it's going to do it's really weird it says where do you want to position it there's fine Perfect all we're going to do is click on home page and go to preview okay and we're going to click on this and it's kind of working I want it to fade in and I want that logo gone so let's do both of those let's give her the logo first I don't need this anymore because it's not a separate page it's just this little unit that I want to come across so let's go gone Let's test it again click on this one I'm going to use my command enter control enter and it works except that shouldn't slide in I want to kind of gray out the background let's do the slide in how do I do this slide in okay I'm going to click on this we changed it before and you'll see it overlay registration we said slide left that was appropriate when we had the transition okay from page now we're using overlay so we're just going to dissolve give that a Go preview click oh better okay and I want to grab the background grab the background is kind of just a weird trick and let's go back to design one thing if you are new you'll be like oh my toes have gone Google where did tools go in XD it's probably because you're in design view or you'll lose the Prototype stuff so whenever you're completely lost like I just did it then I was like where am I and like it takes me two seconds I'm like ah I'm in Prototype mode that'll happen to you too okay so design it's got a rectangle and let's just draw a big old rectangle that covers the whole screen I'm going to get rid of the border and I'm going to give it a fill of black I'm going to lower the opacity just to cover everything and I probably need it behind this box so we just right click it like before send it back and that might work we have to do some testing come on enter ready better oh I want to add drop shadows and rounded corners and get rid of the stroke make the font nice move that text down but this video is getting too long anyway so you got the idea the main purposes is not so much to show your overlays even though it's cool in one of the perks for XD but mainly that ux design process of I made some assumptions about how this thing should work and instead of just building it we tested it really quickly in XD found out that actually we could skip a whole lot of pages by just having pop-up modals well you might have designed a pop-up model and it just confused everyone so you got rid of it assumptions testing iteration all right the next thing I want to talk to you about is using Photoshop so XD does some very basic photo editing very very basic so you still need some basic photo elsewhere skills Photoshop is a great tool and a good connection because it's part of adobe land so I'm going to show you a lot of you will have Photoshop skills so maybe you will some of you won't but let me show you because it is really common to connect these two bits of software so I've got Photoshop open and I've opened up a file for my exercise file so grab this one called office okay and open it up in Photoshop here it is here one of the big problems of dealing with mobile or app design is the weird aspect ratio it's a really tall and skinny and nobody shoots images well it's happening more and more but most images are shot landscape kind of rectangularly laid down you know it okay so there's a lot of filling in the background and I just I want to show you because I want to impress you with Photoshop and see if you'll go and do my Photoshop Essentials course if you do sign up to any of my courses down in the description it's one price for the wall you get to kind of do XD and Photoshop and illustrator and Premiere Pro and all those ones anyway the best thing about Photoshop is it's various content aware skills it's kind of it's machine learning stuff okay it's cool content to wear I love it um I'm going to zoom out a little bit this is the same shortcut so command minus just zoom out a little bit okay and what I want you to do is to go to your crop tool I want you to make sure that content aware is on like I'd like to go into a bit more depth here but I just want to make this more about XD and not super fancy Photoshop course so we're going to do a little bit of uh cutting the corners here so crop tool turn content aware on and then drag it up to about there about another third okay it doesn't really matter I want it somewhere around there okay and with content aware on hit enter on your keyboard and be amazed watch this background here if you're not doing it on yours watch watch watch magic new background super helpful for organic stuff trees Sky oh so good so you can put text in the sky if you don't end up doing much XD but you're maybe in the kind of marketing design department check out some of the content to wear stuff on my course because you can magic up background amazingly all right the next thing I want to do is I want to darken it down we can darken it like we did um here and just make you know a box over the top that's kind of see-through or we're just going to do it here because I like the way that photoshop does it better so we're going to go to our adjustments panel okay if you can't find it go to window go to adjustments and we're going to use levels and we should use non-destructive awesome stuff to keep this thing going fast what I'm going to do is get you to just grab this little slider here and just drag it not the start one this one here just drag it across there it just gives it better than just putting a tinted black on the top I promise even though it looks like it's doing the same thing take it kind of halfway it's up to you we just need to be able to have the text because I want it in the background right of this app and I want the text to be able to and be read on the top of it all right next thing is we could definitely go through and add it to our library okay go to libraries and go to what was it called my co-working once it loads please hold let's go to my co-working okay and we can just smush these together make them a smart object you should do I'm just going to stick them together and go to merge layers very bad we do better in the course I promise use my move tool and just drag it in there okay and it'll appear in XD and again you can do the same thing we did before we can go to an illustrator we just copy and paste it if we want if we don't want to use libraries fancy as they are we can go select all go to copy and go over here to XD and just go paste now what we might do is just paste it over here in the gray area the same rule applies it's easier just to paste remember spacebar come to move okay and just paste it in this gray area I'm going to zoom out I'm going to resize it so it's kind of the right-ish size you don't have to hold anything down just drag the edges and then I'm going to move it so it's kind of in the middle okay and then I'm going to I'll use my arrow key you can hold shift and use the arrow key to make it make bigger jumps okay so right click it let's go to send it back like before and we're going to use this as the background of this page here and what we might do is before we let it go is to right click it and say lock it just so that we don't bump it and we can't select it it's just nicely in the background there command or control zero okay so you can just copy and paste from Photoshop you can be a more official member back here okay click on my my microwicking and there it is there we can do the same thing okay up to you but you will be doing a lot of work between a photo editing bit of software like Photoshop and XD if you are going to become a ux designer same with illustrator there's just things that you're going to need to be able to do in illustrator to bring into here he's not going to tell us he's got courses again is he I am not they'd be too salesy if you couldn't do it because you either don't have Photoshop or can't use it okay in your exercise files there's a see this one here I've got a dark one ready for you okay so it's under catcher files dark you can just drag it straight into XD okay you can import it okay there's a fancy way of going file import which I never use I just end up dragging stuff into XD from my finder window okay up to you but bring in that dark image put it at the back lock it and we'll move on man there's so much more I want to show you in Photoshop but hey that's it let's move on now you might be asking um I thought we weren't allowed to use images or fonts or text that my friend is because we have just entered into High Fidelity World okay Hi-Fi weirdly they don't call wireframes fi it's wireframes and Hi-Fi or High Fidelity just means it's going to be looking our goal now is we've done our testing we've done some adjustments with the client likes that the user likes that but now we need to move to that next step where it actually communicates more we need the marketing messages we need to have it on brand this is when we move into the High Fidelity I'm using air quotes I'm not sure why anyway and so we've got our image in the background other things we can do is we want to bring our brand colors in so let's do it for this button first okay so I'm going to zoom in just a teeny bit and remember this here if I try and change the color it's got this kind of weird little thing through it because it doesn't know what you mean to do okay it's just it's going to apply to everything that's in there so I'm going to undo that undo it turns out undo doesn't work when this is Open click on the background then undo remember undo is this one here control or command Z and what I want to do now is change just the background color okay to this kind of watermelon orange peach color fc7f4e to be exact okay you can see there oh look there's the RGB colors too nice and so to do it you double click it to go inside of the component and you'll notice when I double click it you can see it's got that frosting around the outside so I'm inside it so when I'm double clicking on it I double click on the not the text because if I double click on that I ended up editing the text that's not what I want I'm going to double click on the background of the button okay and now I can say actually I want the fill color actually I don't have to do anything let's go over here just click on that look and because look at that it updates all the way through I'm going to say no border please untick it I'm going to make the things are on the outside down to like five four just because that's the nice thing about building out High Fidelity especially when you've got the stuff already made in a library you can go from wireframe to High Fidelity reasonably quickly okay let's do the background oh don't do that now I'm going to zoom out command or control zero confirmation page is going to have the big green thing in the background so the screen so to change the background color the appearance of it okay you click on the name up here okay so it selects the whole artboard and you can pick one of these other two colors up to you so that is how to bring in your High Fidelity on brand corporate colors from your library next thing I want to do to bring it into Hi-Fi land is I've got some Swede character Styles here okay so I'm going to click on just once uh opening in January and I'm going to say I want it to be on brand the right font the right tracking which is probably a bit tight now but anyway we get the idea and see that pick the right color the right font the right uh kerning or tracking oh so good so with these ones I can click this top one because he's kind of like the boss remember he's the main component I can say you're going to be my oh I call that H2 you saw that you're on you're like he's saying H3 but he typed H2 it's one of my skills you can see there though it brought through those exact fonts the exact color the spacing everything from that illustrator could be from InDesign whatever you want to bring it from Super handy we do the same here I'm going to say u r H1 but you need to be that color oh look how cool this is now we're making stuff fast this one over here you can be H2 particularly exciting but you get the idea right dance co-working is a bit boring I need some more fonts anyway let's do it for this as well I can double click to go inside this and this is a slightly trickier one okay so I can double click it okay and I can't change the color because it's this linked content to my library it wants to kind of retain can't lick to an override okay so we'll go to one or two things I can go back into my illustrator document and update it okay I showed you how to do that remember we dragged it out but let's say I just don't want that anymore I don't need it to be connected I can break the link okay I'm going to zoom in because I'm too far away and now okay I can click off double click it and now I can say actually the fill color is now going to be white here so I've broken the link which is good or bad depending on your point of view okay but there's updates across all of them cool huh all right next up um make sure you can see your library okay if you can't remember go to this little icon here okay and you can go into your document assets and actually not want to go back and find my library I wish axd libraries were you know the latest ones are at the top or favoriting them you can't do that at the moment you can do a search you can say my oh no actually that just searches for stuff in your library Leaf there it is there why have you got multiple leaves Dan it's because I was practicing this before this that's why it goes so smooth then it's currently lost all right uh let's just find my my my my co-working hopefully you don't have as many uh libraries as I do messied in okay um one of those things before is I don't need this anymore placeholder because we've moved to High Fidelity so I'm going to delete it and next thing I'm going to do is remember before I said make sure you drag it to this area here and then move it in actually now we can actually use that power and say you just replace that one look at that hey so if you've got placeholder images you can just start dumping those in now from either your um library or just dragging item from your finder now we don't have many more images except for this these are meant to be image placeholders down here okay even though I didn't put the icons on them I'm going to show you a cool trick you can do them individually but just like we did for this top one I'm going to show you a cool trick now if you are new to computers you know and you find this kind of like using the finder and dragging the mouse kind of tricky in you that's totally cool this might freak you out just so you know and but for those of you can do it open up the exercise file so that you can see XD behind it okay so you've got this kind of like overlap and I want you to click the top one facilities okay it's my first like facilities card hold shift and click the last one so they're all selected and watch this cool trick prepare to be amazed ready three two one amazingness oh it's brought them through the right size like these are all like check out this dog I am giant dog okay but if you do it that way just drag it into an existing box it'll reshape it make it the right size look at that bottomless Coffee X is pet friendly that is a handy handy trick I'm gonna grab this top one here use my super powers of changing the color and the stroke was a bit too much now oh I'm not liking it but it's gonna stay everyone's like move the text in does that line of beta does how did I pick all fonts that have no descenders oh there's one there so just so you know descender this is the Baseline okay where all the type sits on and sometimes you get words or sentences that don't have anything that goes underneath it the descender this guy here these are ascenders they go above this kind of thing called the xir we're getting too deep but sometimes lining ticks up can be tricky because this one has a descender this one doesn't so this one looks higher than this one the solution is making everything caps that's not a good design uh fall back but it's one I use anyway so multiple images into a repeat grid makes the repeat grids even more amazing now if you've got a big long list I won't do it now but you can actually drag an SVG data if you know what that is like comma separated stuff from I don't know some sort of spreadsheet or some sort of software that you use in your office you can drag that into the list here and it will automatically populate those as well it's pretty amazing we typed housing bottom of this coffee but you can actually drag it in say this is a list of 100 you've got 100 images and 100 bits of text from your database you can drag those in the Australian and SVG we cover that more in the full course all right if this has been a bit of a whirlwind for you you can catch up there is a catch-up file it is called ketchup files ketchup files four you'll get right here it'll look slightly different but that's where you'll be earlier on I did the pop-up modal I wasn't going to do that in the course I just ended up doing it so I've made it a special its own one so if you want to see one that's working yours like never worked and you're like mine doesn't work go check out that file there it'll show you a working version of the pop-up model but that's what we're up to now next up let's make a something called a micro interaction what is a micro interaction you can kind of guess from it it's um basically it's like a small animation okay but animations are normally there to kind of like excite people Delight people tell a story micro interactions are just like little UI components okay that are on the page to help the user better understand what's going on like a real simple one is let me show you is the load okay if you click on a website you're like is it doing anything but it's got this little dot there that dot isn't doing nothing it's not in the background trying to sort your files or do your payment it's just a pretty image that appears okay A little micro interaction to show that please hold computer is thinking do not hit refresh okay so that is a micro interaction a really good successful one that's been around for a while okay and they're just they pop up more and more and there is a bit of blurring between micro interaction and animation they get kind of lumped in together a bit on websites and stuff so and if it's not like helping you know the user know what's going on a bit better you know like this here and where do I go these animations okay they're cool okay this one here is a micro interaction it's showing you that you lock something and look you've correctly locked it spinning globe animation this one here is a bit borderline like I feel like a micro interaction needs to be simple and clear this I've got to watch a couple of times to figure out what's going on animation animation definitely animation animation loads of animations why I typed an animation on top okay for examples what's a good micro interaction and so it's got some here you can see here it's showing you you've done something you've clicked it it's loading it's finished and gone away if you clicked it and just disappeared you wouldn't know like did I do it correctly sometimes that little tick is useful this one here watch this if you swipe up it's a heart swipe down little broken heart that little heart can be just what people need to go like ah up is good and down is bad okay for something that maybe needs a little bit of reinforcement uh alarm snoozed we've probably seen this one before yep you can snooze it by this little micro interaction down here it's showing the alarms going and how to turn it off okay this one here is a real common one little notification okay that's a micro Direction you go uh all right let's make one back to XD now we're going to make the one that everyone should make when they're learning ux it's the one you saw in the intro there the burger menu turns into an X it is like a rite of passage it's like if you've done Photoshop you've learned uh the lens flare yeah you're laughing you did it you put it on everything okay it's like a rite of passage for Photoshop the little Burger menu toggle is what you do for ux and you use it on everything Until you realize not everything should have the little Burger cross all right Dan let's just do it so I'm gonna go to my confirmation page because it's got lots of empty space I'm going to grab the nail sandwich bring it over I'm going to destroy it because I so I'm going to break the link okay I'm going to zoom in okay so I've dragged it in broken the link and the way to make this thing work is we need to turn it to a component okay we've done that before remember we went to I'm going to go back to my assets panel I've got these I've got button and nav you're like weird that this is going to be a component because components have these special powers we won't be able to cover all of them in this video we will in the full course but let's go to I've got it selected I'm going to make you a component and one of the sneaky things it has is it has a default state which is going to be my little stripy Burger menu I'm going to hit plus and I want to toggle States when it clicks it toggles between my cross and my burger menu okay this toggle State we can give it a name we're not going to let's do it because I've set it call it the cross okay so there's two states is this one the default State and my cross at the moment they're the same make sure you're on Cross okay the second one down and what we're going to do is we want a couple of things to happen I want the middle one to go away okay now what you don't want to do when you're doing micro interactions or any anime NXT is you don't want to delete anything if I delete this because I don't want it for this cross part okay it'll end up messing up our animation I won't go into it too much but what we do is instead of deleting it so actually I'm going to click on it we're on the cross state I'm going to double click it for this middle oh don't move it I'm going to double click a couple of times I don't want to delete this one I'm just going to lower the opacity see under appearance here just drag it down so it's there but not there if you know what I mean just keeps the animation working properly next thing I want to do is I want to click this top one okay if you're vaccine and then come out okay just click it once double click it double click it again three times to go inside of everything and I want this kind of view here and I want to say let's rotate it okay 45 degrees and hit enter this bottom one let's go minus 45. all right I'm going to select both of them so we hold down shift click on one go on the other and we're just going to hit the can you see there's a line options up here align middle there's another align middle okay and are we done we're done I think we're done let's preview it okay let's hit our little shortcut command or control enter and ready give it a click oh it's gonna be fun I love this so much watch [Laughter] look how cool that is I love it I've taught this a zillion times and I still love the default easing like have you ever done easing in other programs like Premiere Pro or Flash or animate or whatever it is you gotta really add the magic afterwards XD just adds the Magic by default look at it such a nice well we could spend ages clicking this I might pause it I'll finish by clicking and then we'll move on together all right if you got it out of your system as well did yours not work you might have to rewind if yours didn't work most probably if I double click to come out okay if I click on this you might be working on the wrong State just have a look so click off in the background click it once and say a first that I make it a component and B that I work on the default State or the cross okay and click between these two and you'll notice like Ah that's where it's wrong okay once you get to the one that's wrong okay double click it and start messing around with it okay doing what you need to or just start again draw another cross get another Burger menu unlink it and then ah clicking fun why is it defaulting to cross it's because when I'm in here okay I've got nothing selected click on this I can choose what the default even though that's his default State I can just say whatever I want to be left as either the cross or that now when I preview it okay it's left as the Burger menu and why is that a micro interaction it's just helpful because you could have the burger menu and another little cross up here a second one totally fine but if you want to replace this it might be unnoticed people are like well there's a bigger menu up there how do I close this even though you've switched it out the little animation helps draw attention to it okay and helps the user move on their user flow or their user journey and that my friends is your very first micro interaction hooray click click okay just two more that's it close down your preview and we'll move on so that's a micro interaction uh let's talk about animation because animation is a big part of what we do as well okay and and the cool thing about is we went through a kind of a revolution a while ago with flash okay it was great we went from like animated gifs to flash and everything was animated it was kind of fun and as you need to actually use a website that was fully animated okay but it was great we have Vector animation we could do beautiful things we could be subtle or we could go overboard then flash got killed and we just were stuck with like stuff they never worked on lots of browsers and so animation just went away and we kind of went back to GIFS animated gifs gifs let me know in the comments if you're a jiffy giphy kind of person um so then Along come something called Lottie so Lottie if you've never heard of it um there's a great website a lot of files it describes it better than I'm going to but basically it's Vector animation again very small file sizes low you know fast loading really good Clarity because it's Victor okay and the cool thing about it is that it is really browser compatible so it goes on lots of things it can go into apps or into websites so and what is it it is created generally okay with a plugin called body moving okay it's free or you can help out um Hunan here and name your own price it can be zero okay but uh it's a plug-in for After Effects so if you have got After Effects skills I know a guy that's got a course I'm pointing at me you can't see that okay go check out my Motion Graphics course in After Effects but um if you've got a little bit of After Effects skills you can actually export Lottie animation straight for and use in XD and in the final app not like uh something that you then have to recreate um there are lots of free stuff if you like after effects is too hard okay things like Lottie files there are just so much stuff on here and we're already done it is the animations like well you can there's loads of free stuff so discover free to use you can pay for stuff okay check if you've got uh you know if you're paying for a stock library site they might have a lot of animations creeping in there now they're just really good and really small you can edit them okay so good all right and so what are we going to do we're going to put it into XT I've got one ready for you so let's go to the confirmation page I'm going to move that guy and just put them over there for the moment and I want on the confirmation page we're going to go to file we'll use the import option it's a generally Lottie Files come as this dot Json file Json file is the code that makes lady work okay both in our websites and we're in the final production okay or in our XD and in our final production okay so send this off to your developer afterwards okay so I'm going to import it I'm just going to get it kind of a bit more appropriate sized stick in the middle here and just preview it let's go click on confirmation I actually just do the whole thing click off to no men's land hit command enter it's going to start the beginning register submit and look the happy little animation [Laughter] okay and yeah it's so good a lot of Animation is I don't know it's new you might not have discovered it it's a new file format and it's great because it's small it loads on lots of browsers the majority and it's great to talk into Apps and websites you can make your own stuff as well remember just using that body moving plugin out of After Effects nice all right let's pretend that we've got something kind of finished now the client will send it to them they like it we've done our user testing and the client feels like you know it does what they needed to do they're getting lost ours is really simple for sure into although massive projects where it's a full app or a full website is great and exciting and fun often what you'll end up doing as a ux designer is smaller parts that are maybe not as exciting like design wise but we can be quite exciting when it comes to ux design like you know like if you get a project and somebody says I want you to like we did one recently bring your laptop for the cancellation process like how do people cancel okay uh our ux designer here bring your laptop job that was good I thought was going to be quite small ended up becoming this really exciting and interesting in cancellation like what do we do at cancellation what do we do during that process how do we say goodbye what's the best way to do it how easy is it to find do we hide it completely so nobody can cancel uh but it's just that it was like it was really quite business orientated and a lot of research into like what other people do how do we get a process where people can cancel and are happy about it so what seemed like a quite I don't know menial job became quite exciting really to me when I worked on a long time ago was adding a discount code to the home page oh you know to the sign up page what we were going to do is just actually add it just throw it in there add the discount code we'll be fine we decided to kind of run it through our normal ux testing and what we found was it was mad like we were just going to add it without actually testing it and thank goodness we didn't because we got to a page where point where we tested it and what ended up happening we a b tested this thing and um so many people didn't sign up because they got lost down the rabbit hole of trying to find discount codes even though let's say there wasn't one available at the time okay the discount code box was still there so people were trying to to check out and pay for stuff and then let's see a discount code box and they'll leave then you see them searching for things like free you know discount code for XYZ site and then they never came back and finished their purchase they were so close they're about to like hit the buy button but we ended up you know we could have killed this business or at least a lot of the drop-offs in the sales funnel so although adding a discount code box didn't seem like worth the effort it turned out to be such an important like um I don't know learning exercise that stuck with me forever sure I have a discount code box but only when you need it anyway total tangent now what are we going to do now we're going to be exporting stuff so we're happy with it okay we want to send it out a couple of things easy ones I want to show you how to get static images out so we go to file and we're going to go to export and we can export artboards that's a handy one if you just want things like a bunch of jpegs or often this one's good make me a single PDF with all these pages in it you can just email it to someone handy the animation is not going to work but it just might be great for sending the people who want to just do a visual sign off okay or you can send them jpegs as well anyway not very exciting what is exciting well kind of exciting is the Handover to your developer your engineer okay so when you are sending this off to someone okay you can like uh you can send in the PDF but they're going to want to know lots of things like what font is that what font size is it okay and there's lots of things you can build a Handover document and that is like some companies will do that it is probably especially if you know the developer already Okay and she kind of knows how you work she just wants to know what the font is and what the kooning is and the spacing is and all these things and give me the images there is a super handy way of doing that in XD this is where it shines okay I'm gonna go to the sheer tab again and we did a design review there's another one in here called development this is cool so for this to work properly we need the I want them to be able to I wanted to be able to download the actual images and stuff in here okay these images here the icons that we've used so at the moment it's unticked why because we need to go back to design view okay we need to say this Leaf here okay or this thing I've made okay I want that marked for export see yeah okay so it can be exported same with those images here okay I'm going to double click it I want this thing marked for export I want this burger menu marked for export you just go through that guy can be marked for export just the things that you want what a developer doesn't want is your rectangle Mark for export I'm going to build this with divs that are responsive okay they don't need to know they don't want it as an actual object they want to know what color it is they'll want to know their spacing between it and any padding I want to know the rounded corners but I don't have to mark it for export I'll show you what we can do so we've marked some things to export let's go to share okay and I'm going to say yes the downloadable assets the thing I forget all the time to turn on Okay decide what um where it's going is it going for iOS which is Apple like an app or Android app or is it going for web ours is a little website and what it does is it changes the kind of code and the sizing the naming conventions all ready for you so you look awesome okay mine's gonna be web I'm going to update the link why because we had a link earlier on that's a design okay it was designed and we just used it to do some user testing I've changed it now to development okay so I need to update it I'm going to open in a browser which is probably going to open up in a yep the wrong screen here you go all right and the difference between this one and the last one is this screen can you see you see my pop-ups you know that um that stuff solar I can say actually uh I can resolve that one it's done okay but this is new stuff that wasn't there before okay you need to often coach to a developer you need to say hey this is we go it's pretty easy though they should be able to work their way through it and I can do things like view the specs I didn't have to make a spec sheet XT did it for us look at that it tells me the screen size that I'm using okay it shows me the colors that are in the document okay there is that great color that I used okay this one here has just come from when I remember I made that gray so they don't need to come to me and say hey what gray have you used here or worse if they just guess it you ever handed off something to a developer because you haven't like given them enough details they've just guessed stuff and you're like I spent ages doing that terrible tracking on this font why is it not there okay because you've done this document through XD they can go through and say actually this font here is what it is Roboto slab it is this size Look it's even got my tracking in there a dodgy one point four four okay the line height all sorts of stuff even the ticks like I find I before XD I'd have to give the developer an actual text document with all the stuff in there you see that they might only use this they can go through and say let me know and they just copied it look it's copied to my clipboard that I can paste anywhere now super handy and because we clicked web can you see it actually has the CSS now if you know a little bit about coding you'll notice that you probably won't use a lot of this you might okay it might be good just to go okay there I want that kind of like you know the type stack okay I want the kind of breakdown of the different fonts or letter spacing there you go maybe we don't use letter spacing very often that is the CSS code that makes that happen the other thing it helps them know where the things like triggers are in our case there's a back button okay and that that goes to the previous artboard to interact with it they have to go back to the design view so there's a little bit of Education about like working with it if they get to this page here now and go to here you can see there's an animation they can download so look at this click on this download the animation you have to email them two of them there's my nav sandwich okay beautifully named and what's really cool about it is that you can go down and see see down here well I've got this nav yeah I've got my nav sandwich selected okay and look it says what kind of acid do you want do you want it to be jpeg or a PNG okay because they might not know what an SVG is you might not know what an SVG is scalable Vector graphic great new format that's not so new but you might not use it but it means the developer can pick what they want okay they can go through and she can say I want an SVG because they are awesome it just has everything in there all the interactions here's my images from my home page they can go I want this and I want to be an SVG I want this and because it's got rounded Corners I might want it to be a PNG I can download both look SVG and PNG ah love it it's great for handing over it gets a bit more nerdy encoding in here okay you can get fancy and fancier in XT where you can actually build like you can see I built this H1 if you know a little bit about web design you can build classes and stuff in here and actually build the mounts that can be used and people can download the CSS oh it's good so all I need to do Mark for export and make sure I can share this link with the developer okay at the moment it's linking with anybody with the link you might want to be small special and say no no only invited people only and you can invite them using this button here okay just with your team and that's where we're gonna leave this XD mini course I hope we got close to our like uh goal of demystifying a bit of the ux design process and hope your game a little bit of confidence in Adobe XD and I guess I want you sitting there going like oh I'm excited I want to get more involved how do I get more involved in okay funny should ask I've got a longer quarter XT there's only so much we can cover in this kind of like free mini course okay get us started and the next step is to go to the XD Essentials course I'm drawing things with my hands because we covered like there's only so much we can cover here but the XD Essentials course we cover so much more we get to build like uh loads more projects okay more Fuller projects and custom projects that you can use for your portfolio so here's a snippet of all the things that we'll make okay we'll just go into a lot more detail and build out some bigger custom projects for your portfolio and as part of signing up to that at bring your own laptop you also get access to our asking experts okay so you get like priority advice and support and when you need help by doing the courses as well you can earn a certificate okay a pass certificate and a merit certificate there's an exclusive podcast for members only as well where we talk to all sorts of creatives including ux designers there is also challenges probably my favorite part of the membership there is that it's hard when you're learning and you don't have projects to work on our design challenges okay our UA design challenges which happen regularly gives you a brief and gives you a timeline and a client a project and you can actually build stuff with the rest of the bring your laptop community and me we do reviews of it at the end it's all good fun and for the same modest price for the XD course you actually get access to all my courses so I've got um obviously the XD Essentials but there's a figma course both Essentials and advanced there's Photoshop illustrator InDesign After Effects Premiere Pro Lightroom all Essentials in advance so yeah if you want to go into the next step come join me at bring a laptop there is a link in the description but for now you've made it to the end congratulations hope you enjoyed the video and see you again probably in another video soon

Channel: Bring Your Own Laptop

Views: 22,951

Keywords: Adobe XD Tutorial for Beginners, quick guide for xd, adobe xd tutorial, adobe xd tutorial for beginners, how to use adobe xd, adobe xd course, beginners guide to xd, adobe xd web design, beginners guide to adobe xd, XD Tutorial for Beginners, quick guide to adobe xd, free adobe xd course, free xd course, designing a mobile website in xd, how to design a mobile website in xd, adobe xd mobile website, how to design a website in xd, ux design, ui design, ui ux design, byol

Id: HMbj5B_QrYQ

Length: 100min 56sec (6056 seconds)

Published: Thu Feb 16 2023