Free Adobe XD Tutorial: User Experience Design Course with Adobe XD Course

[Music] hi there my name is Daniel Scott and I'm an Adobe certified instructor together you and me are going to learn how to become a user experience designer using the software Adobe XD together we'll use this UI UX software to create beautiful user interfaces as well as really streamlined user experiences during this course we'll work through an actual freelance project that I have on at the moment it means both a website and an app built so it'll give you a really good idea of how to kind of manage your own UX projects now this course is aimed at complete beginners so there's no need to have any experience in design or UI or UX you don't even need to know what those terms mean yet we're gonna start right at the beginning and work our way through step-by-step first you'll learn how to construct a good brief and UX persona then you'll learn how to create some simple wireframes from there you'll learn how to implement colors and images properly in your designs you'll learn all the do's and don'ts when it comes to web and mobile fonts but also cheat a little by exploring some of the pre-made UI kits that can really speed up your workflow will build our prototype both our website design and a mobile app design connecting pages and adding full interactivity ready for user testing I'll share with you all the secret tricks inside Adobe XD that can really help you speed up repetitive tasks learn how to run your own user tests and then make the necessary updates based on those tests you'll know how to make both simple and advanced microinteractions and transitions before the end of this course you'll have fully interactive prototypes for your website and your app that you can share with your clients well impress your colleagues with realistic mock-ups all the way through to exporting the right files and getting all your design specs ready so throughout the course you'll be working on actual project but as well as there I'll set assignments not homework okay for you to complete I'll give you the brief I'll give you the files and I'll set some tasks and that will mean you'll be able to develop your own skills but also you'll be able to create your own projects ready for your own portfolio so I hope you're ready to upgrade yourself learn Adobe XD and become a user experience designer I'll see you in class is this driving you mad it's like upside down and what does it even say it says iLab I think well I live anyway it's a cool little New Zealand brand and it drives my Irish friends mad so I wear it all the time but that's enough I'll see you in class hey there you made it in the course welcome a couple of things before we get started is that you need to download the exercise files so I've got some files that you can use to play along with the course there'll be a link on the page here somewhere to download those so do that first next step will we need to make sure that XD is the latest version of the version ok so we just need to make sure yo XD is the best it can be so we'll jump into the computer now and I'll show you how to do that alright the first thing is you need to have downloaded the Adobe XD software to your computer ok you can go to and you can actually just go to adobe.com / XD and it will take you to this page here and then along the top you will have once it reloads there'll be an option to say it's free there you go go and download it ok so once you've downloaded it you might already have it on your computer then once you've got it you need to double check you've got the latest version so I've got it open here ok there's a 60 I'll close that one Danny's can be using so you've downloaded it installed it but you did it a few months ago and unlike some of the other Adobe products XD gets updated really quickly so you just got to make sure you've got the latest version so to do this you go to the app ok so the Creative Cloud app is this little kind of curly cloud thing here click on it at the top if you're on a Mac if you're on a PC it's in your taskbar down the bottom just look for that icon make sure on EPs and then scroll down to find XD if this is open you are to go this is update you need to click on it and update it if you don't have or can't find in the CC app you can just open up the product okay so find out on your machine open it up go to help and go to updates and you'll end up in the same place but a little kind of like drag you there you go now to note about this course Adobe a pouring lots of time and effort and money into updating XD and keeping it fresh so I feel like there's an update every like week or two so and what I'll do is and when there are any significant updates or anything noteworthy what I'll do is I'll create a new video at the end of this entire course called updates and in there I will throw all of the any updates that might have come in so if there's no such video at the moment that means there's no such updates but eventually there will be alright so we've got our exercise files you've made sure XD is installed and up-to-date let's get started all right couple of things we need to discuss before we move on is some of the terminology that gets used in both this course and in the industry just so that you you know what I'm talking about when I'm going through the course and the main ones are if you've ever seen like job applications online would they say you need to be a UX UI designer or a product designer so we'll cover kind of what those are and what the different responsibilities are now before we go on if you for me I act as all of them okay I work as a freelancer so I take on small projects and I have to do that all so I'll discuss what they all are individually and basically if you're in a small 1 2 3 4 5 man agency or design shop you are going to be it you're gonna be the UI designer UX designer in the product designer and if you're working at larger companies larger organizations or big bigger agencies you might be split off and be one of these things individually so what is it UI designer is the person responsible for making things ok so you'll be looking at kind of sites of website design you'll be be looking through you know consistent icons you'll be building you'll be looking at fonts and colors kind of visual themes throughout the app or web design Siri UI designer user interface looking at the page furniture or the things that are on the page so you can be just that okay a UX designer often is all of the UI stuff plus you are looking at both the brief and the users that are going to be using it so maybe the personas that you've built okay and building for that and then testing that okay so working through the actual testing and then coming back and adjusting so you eye designer often won't have that other part okay so yeah that's a UX designer you do the UI but there's there's kind of some other parts around it which we'll discuss in that course so that's the UX designer all right the last term we'll cover is a product designer so what is a product designer versus a UX designer now often and if I'm a product designer what I'll be is obeah ux designer as well as a product designer but I'll have more ability in a team and you can't really be a product designer in a small agency or by myself like I am you need to be in a bigger company because often the product designer is has a lot of managerial roles okay so you be in charge of not only the UI and their kind of user testing but you'll be working with the stakeholders the clients and getting direction from them you'll be working with the engineering team who's actually building this thing and potentially the UI designers multiple UX designers and you'll be making sure everyone's kind of heading in the right direction putting the right way that's not the word but you know what I mean so a product designer has kind of a global kind of sense of the product from lots of different teams and we'll deal with them all individually and kind of make sure everyone's going the same way okay so you'll be you'll be in charge of making sure budgets are heard timelines ahead meetings are held you'll be doing all the meetings and the stand-ups so product designer I guess here is a is a bigger role if you're kind of from maybe traditional design think of it like a studio manager okay there's is a bit more kind of organizational things involved so to recap product designer Kay will look after the entire project with lots of people make sure it's all going well and is working perfectly on budget and is working for the users and is all on the right timeline okay not sure waving my hands out here but feels lofty that role okay then there's a UX designer whose sole focus is on the user okay they want to make sure within the budgets that they've been given by the product designer okay and the timeline budgets they want it within those boundaries they want to make sure that the user experience is amazing they whatever the goals are they are getting hit and you will test them and design and get it ready and if you're a UI designer and often you're that you have kind of lacking there the testing phase okay you are and looking at the more kind of traditional way of working when we're building websites where it's just kind of like getting it up getting it out and and the other thing to look at is that if you're at a small place or doing your own stuff like me you are all of these okay so you just turn it all happened but those are the kind of key terms you need to understand when somebody's advertising for our product designer and you know if you're brand new you might not be ready for that because you've never dealt with you never run a stand-up which is kind of a meeting where everyone stands up quick meetings in the mornings but and you enjoy there you know the user you know the user experience design side of it but maybe not the product designer side other thing to note is that most people the term gets used real loosely all of them and so you'll see all students will email say is this a job that I can do and there's somebody said when a graphic designer web designer UX designer videographer a product designer and they're just kind of thrown it all in there because it's either going through an HR company that's not too sure about the roles or they're just looking for somebody who could be the best the junior role and it's got product designer in there so often you need to hurry clarify with whoever's got don't don't say I'm not gonna do it okay you need to find out what the role involves because they're just kind of often jobs can be too vague okay what they really need is somebody who's you know a really good print designer but they're just thrown in other things so really kind of find out from Hoover's advertising their job or the key kind of what what the high percentage of that job work is going to be what field because nobody can be amazing at all of them so check that out now lastly in this course we're looking at being a UX designer okay so we're gonna look at briefs we're going to look at the personas take those into account make a beautiful product test it come back make it amazing and yeah that's going to be our job in this course and we're gonna use Adobe XD to do it alright that's it let's get into the next video we'll quickly look at our brief and the personas that we're gonna use to build our product in this course alright let's jump in there now ok so before we get started I want to quickly just outline the brief for this project because this is an actual project from one of my clients and I thought that would be a nice way to kind of explore XD through an actual project so what we had to do there's kind of the UX research side of things and we had to build out client brief which I'll show you here and we had to build out the persona okay just like who their target audience is going to be so let's have a little look here on the screen ads yeah both what the client sent me as an initial brief and then what we had to actually move it into so we had an actual project to work through all right so let's check it out here now okay so first up like any good creative job and you've got to kind of get the brief right especially for UX because often the client and especially clients I deal with haven't really run through a lot of UX projects before so I guess an unsure what's and what's in covered what's not covered those sorts of things so a brief is always essential for any project right so I figured I'd show you the one that we got so this is the brief we got from the client so basically was pretty thin they've got a website bring her in laptop comm and they've built this kind of back in for it for their trainers to use and they want to kind of just release it to other trainers to start using to potentially use it as a product okay so they want a website they want an app they very very very kind of basic so what I did is I had a little look through their details okay through the analytics for their website I know that about them because I've dealt with them before but basically I went through the kind of UX research project working out who the competitors were what the product does it's you ESPYs who the potential users would be okay and built out brief so this is the thing that I emailed them okay and basically just covers the basics of most briefs came let's just quickly run through it if you're not understood you can just skip on and we'll stop making XD stuff but in this case okay project name description good just kind of basically that's what they've CID and so just kind of outlining the description who's it for is quite important okay so we built a persona I'll show you that in a second what the persona actually looks like but this is what we agreed with the client who the potential persona is now the big thing with personas is that you can guess and you can have a biscuit but you need to revise potentially who your persona might be because you might go yeah it's definitely this person but you need to allow wiggle room and bit of spelling and grammar okay so we've built out who we think the client is for we build out a features list okay and just to make sure that we know what's actually going into the wireframes at the beginning what the important parts are okay we leave out things like a footer or other features that are kind of just normal there the Contact Us page needs to be there all of that stuff so this is the kind of unique stuff for this project competitors and product inspiration this just helps us know and the client know that we're aligned in terms of this is the kind of thing we're building going and deliverables this is super important so we go through two parts is wire framing and then there's high fidelity basically high fidelity means you know why frames are really simple - LED has all the fonts and colors and images so we build wireframes purely just for client and approval okay I don't go out and test wireframes we'll talk about that later on then we build a hope fidelity prototype and then we go out to some user testing based on the user testing we'll do usability report and that can be big or small basically just feeds back what you found out on your user testing then once that's all finished and we've tidied up any of their problems with the user testing we'll grab all of the UI assets for the developers and that just means giving them images and code and icons and symbols so they can build either the app or the website so that's where our job's gonna finish okay so I always have a like a not included just in case the client just just to kind of make sure the boundaries are set nice and clear so they've asked us to prototype the back end okay which is the kind of instructor side of this website there is also a student side of it which they've already got develops they don't they don't want us to redesign that so I'm just making sure it's clear they told me there it's clear we're not covering that because they expect to use their kind of current systems the instructor side that we're going to be testing costs okay so this is what I charge for this job and jobs very often they kind of start at about two two and a half grand us and get up to about ten grand for larger projects this one here basically go work out what my day rate is and it's roughly about $800 and then I kind of work out how many days I need to work with something like a timeline add in a bit of a buffer and then give them an hourly rate after that so that if they do start asking for stuff that's not covered and the deliverables and you can say sure I can do that but it's going to probably take me another half-day and then they know your hourly rate so though no that's you know it's gonna cost XY and Z and I find that's a good way from stopping the job to creep out so job creep happens with every job they go or can you quickly just add this extra little thing and you kind of you add it and you you'll decide later on if you build them for it or not and then the job overruns and you you either surprise them with a giant bill or you just suck in those costs which suck so I make too sure that the beginning I give them a set cost because that's what everyone wants nobody wants an hourly rate but give them an hourly rate as well so that when you're chatting and they're like oh hey um can you also do this and you like sure it's going to probably take me three hours they know what ya lee raiders and you can edit to your bill and everyone's clear right from the beginning i always ask for 50% payment upfront okay to start the work there's so many jobs that i end up starting that never kind of get finished so i like to make sure I get from two percent up front so I can cover my costs for the initial part like that it's the most important part they're kind of doing the UX research and working out the features that's a kind of a super important part the job I think so I was asked for a percentage upfront you might have asked for something smaller than theirs but 50 percent is quite common and then 50 percent on completion deadlines okay every jobs a little different and but yeah this is what we've done so there's a kind of a them and me so I'll do the user research to get started with and the wireframes get delivered to bring your laptop thin then they give me feedback by this certain date then I give them the high fidelity then they give me feedback on that high fidelity and then it actually goes to user testing and then we're allowed for a couple of weeks but user testing this can be different depends on how like for this project we're gonna do a lot of what's called hallway testing or over-the-shoulder testing we're gonna try and meet up with people to do physical live stuff find people that match our persona and actually work with them know again we're not gonna cover full-on testing here I've got another course for that check out how to be a UX designer for some of the testing techniques but yeah we're gonna do over the shoulder stuff possible probably do some unmoderated testing where we go do you say users testing comm I find this really useful and you can just send it them and people record themselves sheeps quick and it's something you don't have to organise meetings for and you recording so you can snip out that so you could show the client some of the results okay then there will be a user testing and completed report and basically just feedback about this is what happened in the user testing these are the changes we're going to make and you make those changes and once the final changes have been done will hand over the assets to the developer to get built which in this case would be I'll probably end up doing the web side of things okay at least the front-end web design stuff but the app and the backend development will have to be done by a developer which is totally out of my zone or more of that creative side the front inside so yeah that is the kind of brief that we seen through to the client always make sure that because I bet you a hundred percent promise that this will not get hit the the fourth of December mainly because the feedback okay so your client will see this date and say they'll do it but things will just turn up late you know just be one or two days late and I just make sure as soon as it is a couple of days late I revise the next timeline okay so that they know that it's them that pushed it out so when it is like two months overdue it's not because of me it's because of their poor feedback okay so be really kind of rigid at the beginning saying that's yep it needs to be here by this date and as soon as they're late add that to the time and just kind of push that out because this is gonna look long if it pushes over to the next year because there's gonna add like another couple of weeks in the middle over Christmas so we should have been handing this over kind of mid-december and before you know it it's February and then they had in their head middle of December so just be very clear about timelines and deadlines now again this is my process and you might be working an agency and that four thousand dollars just wouldn't cover the rent so you might be starting in the five thousand and ending in the fifty thousand dollar mark depending on how large the project is you might be just getting started and you might be taking on work a lot cheaper than that you okay you might be doing designs for fifteen hundred or even five hundred to get your first job but I figured I'd show you where I'm at as a freelance UX designer so you've got some sort of idea of pricing and timelines and briefs let's have a quick look at the persona that got made all right so this is the person that we built for this project now and the initial brief can about a rough outline what we've done since then is some UX research into who this person is most likely to be the nice thing about this particular client is that they have lots of google analytics and have a strong youtube channel so it's easy to get an in see actual hard data about who's using the channel who's using their product and then talking to the client about who this potential person could be ok so and then what goes into this will really depend on your project so we've given this guy a name Peter that's a fake stock library image but I feel like it represents the person we give them an age his job title in a place he lives ok now what goes in here what you really want to do is be able to communicate well after reading this know the person okay so do you need to write down the toothpaste to users or the carry drives potentially but potentially not if it's a Prius or a Ferrari that's kind of an indication potentially of what kind of person he is okay so and some I've seen some personas they're just getting to us like my new should detail I guess what you want in there is just so you can have enough in here to kind of walk away and go I understand where Peters coming from in relation to my product ok so it could be shorter than this probably not much shorter but I wouldn't make it too much longer either so have a read through this just so you understand who Peter is while we're doing this project what I've done for you is in the exercise files there is a folder called persona template and you can use this if you want there's an illustrator file you can switch out the images and fonts and stuff and use it if you like you have total permission to use it and but you have read through and see how Peter does things so have a read through and understand Peter and its position so that when we're building an XT we can make some decisions based on what Peter would want not what the client wants and not what I want personally all right so that's the brief and personas let's get on to the next video all right so we're gonna start wire framing in XD now wire framing or low fidelity okay is the term used often high fidelity just means the I have version with the fonts and the colors and the images okay that it looks exactly like the final product the wireframing or low fidelity just has some has one font one color real basic layout now for me the wire framing is the probably the most important part that's the bit where me as a designer ice that's where my value comes from my guess is working out the user flow okay how they get from A to B how long it takes how many steps how easy it is that sort of wire framing is where most of the value comes from for me as a designer even though I love the high fidelity stuff the wire framing I find is quite important now do you test the wireframes ii've frames to send to the client so they can check it to make sure that everything's in the right place but I don't use it for actual testing for actually end users or the personas you can I find I'm quick enough at getting the high fidelity versions ready for testing and I prefer to test with those with all the right marketing material right imagery fonts and all that sort of stuff in there and so yeah the other thing is in terms of wire framing I'll do them by hand first like I'll use something like this and in my book real quick this doesn't go to anybody but me okay so I'll hold it up the microphone disappears and you can't really hear me hopefully you can see that maybe you can even hear me but yeah it's just real basic outlines these pages and pages of these and I just go through and kind of flesh out the ideas where everything needs to be going and then start building a next year just quicker this way you might prefer go straight to computer that's fine too and yeah so let's actually go get started in X T now and look at some of the UI kits final ext time he keeps promising it I promise next video hi there this video is all about working out how wide your design should be okay so we're doing website but this works for mobile devices as well and apps how wide should my first page beam there's some easy tricks to work it out let's get started now all right I promised you would get started and we are kind of let's open up XD and the first thing we need to do is work out what to start with in terms of page sizes we're going to be working on a web first design okay because all of our users at this existing company are using the using the product via the website first and only small percentage are using it via mobile you'll have to decide on you know your product and what you're doing yours might be mobile first so you just start with this for this particular course we're going to work with mobile and then build an app and but you might be working just with an app or an iPad app depending on what you're doing so to get started with just always pick this one to get started with this and 920 wide okay and we're gonna change the size as we go along so just click on this and it opens up a page let's save it it's got a file let's go to save I'm gonna put mine on my desktop I'm gonna make a new folder for it and this is my instructor HQ mmm mock-up okay it's the folder that's gonna go into if you're on a PC there's like a new folder icon at the top what is dump it on your desktop now if you are in a Mac and you can't see any of there because you're like oh it looks like this click on this little arrow here you'll be able to see a lot more of the details like favorites you can click on this top I've made a folder and we give this file a name I'm gonna call it an instructor HQ and this one's the mock-up and this is gonna be v 1.0 give it versioning numbers like this okay and when you make teeny tiny changes maybe spelling or just a little bit of changes you'd call it Yury save it as one if you make big fundamental changes you call you'll change that kind of whole number there okay it's just a good way of keeping track of where you're at especially if you've seen versions out to a client and they're like hey have you done this and you can double check they're looking at the right version and not like out of date version cool save it so in terms of the page width okay this is it's is 1920 it's the pixels across okay the width and that is too big for a website at the moment let me show you what I mean so let's check out this website here so you can see it stretches to the edge but there's a kind of an internal boundary that's why we use 1920 which is kind of like the full width of the screen that I'm using okay and it's a really big screen and really common really large size and but within here we've got something like internal boundaries can you see everything kind of lines up within that little gap there like this one as well you see the color stretches to the edges and but the nav the our background does but not the inside part so there are some sites there do the full use of the screen which is really cool and what we can't do at the moment though is with an XD to see this one he responds can you see a justice as we work along we can't do that next day we just have to pick a size and design for it and then later on we can adjust it for the different break points but really we can't make this happen until the website actually gets coded and done so we need to pick a size and how do we do that step back into XD so it's 1920 pixels across so within here we need to put some boundaries how wide should it be there's a couple of good ways to check so one of them is under w3schools com the site here is just a handy resource for we've designed things if you type in browsers so slash browsers and if you come down to the browsers display you can start looking at things like in the whole wide world in January 2018 what is the most common size so in here this is a really common size to be using at the moment it changes all the time it's gonna jump up to that eventually but at the moment this is that kind of really common size you can see 32% 34% even of the world use that size the next common is this so if you hit this size and it all fits within this kind of width okay it means it's going to look fine on this but these lower sizes it's not gonna quite fit in but you can see the percentage is getting quite low now you need to decide who your clients are so look at your persona remember our guy Dave I want to say Dave go remember you just gave him a name and he's a technology business he's gonna have probably this size screen so we're gonna say this and above you know if we use this size it's gonna cover everything he's not gonna likely have any of these low ones but I say you're working with you know a site that is maybe developing countries and they don't have I mean not up to date screens you might go for something like this 1024 is another common like this a smaller size you want to go for the other thing you can to double-check is and if you're working with a client who already has a website and you can ask for them to check out their Google Analytics so and I've asked for access to these okay so and I looked at the analytics and they gave me a sign-in they can give you like a view only access so you can't mess around with this stuff but you can ever look and what you're looking for is go to the audience check out their technology and I'm gonna look at their browser wait for it to load you can see they're all using Chrome okay well at least 67% of them what I'm looking for a screen resolution here you can see a large percentage of them are using this now 1920 and you can see this 1366 a good percentage of them and then it kind of you can see this size here okay that kind of fits with in between these okay so 1400 pixels across so if I do the size it's gonna capture this this this this this cuz the roll you get some smaller one thing here down to 4% so if you've already got stats check it the other thing you might check is and if the client comes and says yeah let's really work on this website you might find that really you should be working on either the mobile version first or it you know a mobile website version first or an app you can check if they've already got data like this you can go into things like mobile look it over view you can see in here a huge majority of this particular website 88% are using desktop so if the client came to me and said look let's build this mobile app I'm good to refresh the site or a mobile version of the website I'd be like let's look at doing the disk top first because this is where everybody you might want it to be mobile but really the majority of people are using it this way you still might end up going this way but at least gives you some data to actually talk about rather than looking at hunches in as well if you were going to be testing on a product to receive you know how well this mobile phone is going and click on devices and will tell you like you can see a huge percentage of them are using an Apple iPhone and you can do some sneaky stuff by looking at screen resolution and here to decide like what version of the iPhone people are using that often this can give it away although phones new iPhones this will be an iPad and yeah so alright so we've decided we're going to use the size of 1366 so we're gonna jump into X D and put that in okay so what we want to do is we want to keep this 1920 across because we like to design I guess with just as extra stuff this is the final thing we're gonna be making we want those extra stuff on the side here because designing within the 1316 can be really tight and I like to see what happens with the flow on the outside so what we're gonna do is just set up a column okay in the middle here to give us that visual guide that's this kind of like light blue thing here so let's do it I have the app board selected you click on the name at the top that's the easiest way okay you click on the word here and what we want to do is over here it says grid click on this and where it says layout okay where this drop-down is and we're not gonna use square it's done more for mobile app design we're gonna use layout because we're doing the web one now in terms of the columns I'm not sure what's here by default but what we're going to do is the easiest way to get it exactly what you need it to be is we're gonna say we want one column and click in any other box you can see we just got one kind of big column here we can say I want this column width to be 1366 I'm gonna click in any other box what it's done is is worked out the padding here on either side is 277 either side and what I'm gonna do is I'm actually gonna work within this wireframe just to this I just want to know where those edges are and that said I'm gonna leave it there you might be working to a grid system okay and you might be a designer working two grids or you might be a web designer and you know you have to use a framework that uses like a set of grids it's just handy for consistent layout if there is you now change it back to 12 so do this thing first get it the right width and then divide it by 12 columns click in the other field okay or tab out and you can see it's just gone through and added a nice little grid this doesn't export okay doesn't preview in any of the devices it's just here so when you are drawing things out and you're trying to line things up you can see it snaps to it and it means you can start doing things we get some consistency across so everything fits within this grid system we'll look at it a bit more when we get into the kind of high fidelity part of the course so what I'd like to do though is click on the name I'm gonna turn mine back to one make sure it's it to 1366 and what you might find is that sometimes the numbers jump around it's because the divisions are quite hard to do 1366 math wise is quite hard to divide by 1920 so you might find this changes a little so I'm just gonna force it to be won by 1366 I'm gonna make it my default so every time I make a new page it's gonna jump to this the next thing we want to do is adjust the viewport height it just means remember when we looked over here analytics we we looked at technology actually this jump to this one remember the kind of default display size was there it is 1366 by 768 okay so that's a kind of initial view or viewport height just means when somebody opens up the website on their screen they're owning in a C they're not gonna see a thousand and eighty pixels they're just gonna see seven six eight and hit return and that little imaginary line here it's not imaginary it's there but that line there doesn't print as well doesn't come out it's just there to show you this is your above the fold this is your stuff that people will all see based on if they are using that screen so you're gonna make sure all your call to actions above here or your hero images are above this line here anything below here okay potentially has to be scrolled to see now what we're gonna do is a bit of navigation okay so the basic navigation before we move on is zooming in and out there is a tool over here which I never use okay click on it click once you zoom in hold down the option key on a Mac or the Alt key on a PC and click once and it zooms out what you'll find is you'll never use it because you'll use the shortcut now we're not gonna go into too many shortcuts but they're just some that I just the tool is too hard to use so on a Mac hold down the command key so look down your keyboards the Apple key and hit the plus on your keyboard and that will zoom in okay if you hold down the minus so command key down hold - it seems out okay so plus plus plus zooms in command - - - zooms out if you're on a PC it's similar you hold down the control key so look down grab the control key head plus plus plus to zoom in and - - - to zoom out the other thing we need to work out is how to move around unlike some of the other Adobe products there's no kind of scroll bars here so look down keyboard grab the spacebar key hold that down your hand turns into a little hand you click hold and drag it around so give that a go hold space bar click hold track a couple more things before we go because we're looking at the grids here they're quite dark King insider design over the top so you can click on and see this little colored box here it says columns click on it once and you can pick a different color if you like I'm gonna leave mind whatever there was I can't remember it was we're a vaguely this color but I'm gonna lower the opacity of it okay so you might pick a different color a different hue by dragging this around now really messed it up okay and just lower the opacity so there's a hint of it so I know the edges are but it's not interfering too much with my design okay and they click out two other things I want to do zoom out a little bit remember you shortcut command - or control - on a PC click on the name and what that does is it gives you the kind of overall settings for the artboard that's what this is called the big empty page what I want to do is I want to be able to see the bottom slider here and make this quite long because we're gonna add lots of bits and pieces to it you'll end up changing this depending on your content but I just want you to make it nice and long now plus what we want to do is rename the artboard so you do that by double clicking it here okay and just deleting what's in there and I'm gonna call this one home page home page even and I might give it the pixel width just to help the developer later on everybody know that that's how wide it is I often do that okay just because the actual page is 1920 across but I want to just say look that's what I'm designing for here nice let's save it file save I'm not gonna do this long version anymore I'm gonna use that using some of the easy shortcuts like command S on a Mac or ctrl s on a PC and we are ready to get into the next video alright let's jump over ok the next thing we're going to do is we're going to start building that navigation you saw at the beginning and how we're gonna do it we're gonna cheat we're gonna start with some other UI kits that are out there and when we talk about UI kits ok that just means like a template somebody else has made them for us and it has a lot of the elements that we can use that's gonna help us go fast especially at this kind of wireframe stage ok so there's some that are kind of built into XT and I'll show you the way to get other ones from so in XT if you go to file and under get UI kits ok there's these options in here ok so we'll look at these these ones here later on one we want is this one called wireframes now you'll click it it'll take you to a website and you to download it now what I've done for you of us I've already downloaded this one and it's in your exercise file so we'll go and open it so let's go to file let's go to open and in your exercise files this one called UI templates I just downloaded them just to make it easier for this course they're all in here one we want is in wireframes open that up and we're starting with the web wireframe okay let's click open alright and this is the kind of template for wireframes okay and it's really amazing like somebody's gone through and given us all the kind of like basic UI elements that building blocks for a good wireframe there's navigation it's buttons footers all sorts of cool stuff you can see somebody send some landing pages portfolios real handy stuff to get started but the one thing I want to cover here is that you might have a little button down the bottom that says you are missing fonts that's pretty unlucky for this particular one but I know it has happened to my students so watch this if i zoom in and say you know if i click click click click click click click click and keep clicking until I select some text it says this arial if you don't have a rolling machine it's weird but I know I think George is used in this one as well so let's say I'm gonna fake it I'm gonna open up a product sorry UIKit that I know I definitely don't have the font for so don't do this yourself just I guess I want to show you this thing it says a missing fonts you're missing Vance ah okay so what you do is it says it's for missing fonts you click on show missing fonts and unfortunately that's kind of all the help it gives you at the moment so exit is not particularly handy it just says these are the missing fonts sir Cyrillic and this one here I see good say well I don't put that font there so if I copy that and close it and I go off there's no like magic one place you just go to Google and say font download and see if you can find it and install it that one there looks like it's on uh font free there's all sorts of places to try and download those another place you might try is google fonts okay so fonts google calm or fonts todo be calm you can often find a lot of the fonts used in templates here I doubt you're gonna find Ariel in Georgia because they are so common you're gonna have to go to Google and just ask where they are so let's say yours has opened and it's close it down we're in the wires when I'm gonna zoom out okay a couple little other navigation shortcuts that we need to learn and is kind of member word zoomed in and out that was fine and so I was omen okay and I'm in nice and close and if I want to come all the way back to see all my artboards you hold command 0 on your keyboard ok or that's on a Mac and ctrl 0 on a PC the other kind of too handy like navigation shortcuts you'll learn is you can use them in here we're gonna use this one that's command 1 and we're gonna use command 3 okay so you can go this long way if you're like man how many shortcuts it in too early for that um I'm not gonna give you too many just the ones that I think are really important the ones you're gonna have to learn real quick to make XD kind of usable for yourself so this one is command 3 so it's control 3 on a PC if I click on this little dotted line at the top here it's kind of that little dotted line indicates I'm clicked on there's a whole artboard and I hit command 3 control 3 on a PC it just zooms in to your selection so that's quite a handy some kinds 0 to go back out come on 3 to go just kind of see that selection the other one is command 1 command 1 is kind of handy because it shows you a hundred percent so this is where you should be doing a lot of your design work because this is the way that the users going to see it so you know they're not gonna see it zoomed in they can't zoom in on a website or an app you can because you're in design view you need to be making decisions at command one on a Mac or control one on a PC things like font size and how big the images needs to be done at a hundred percent yeah the little thing with command 3 where it zooms in if you have something really small selected ready command 3 Wow it's massive ok so sometimes just clicking on the artboard and zooming in rather than having an individual object come alright so what we want is we've got all these UI elements and that's the cool thing about this Web thing right somebody's gone through and designed UI elements things like footers hitter's buttons there's landing pages pre-designed for you just a great way to get started what we're gonna do is I'm going to use one of these hitters here I'll use this one here I'm gonna copy it so hit it copy okay and jump to your other artboard if you've got more than one artboard you can kind of see them behind each other by grey this top bar here you can jump between windows this way window okay so that's the one that I'm creative and that's the one I was looking at and you could just toggle between these two or if you're super fancy I had command until thee on a Mac or command tab on a PC and they're just toggles between them but it might be one too many shortcuts for one video ok so we'll cover them again later on in the course but I'm gonna paste it in here and we're gonna run into our not first problem but our first thing to kind of identify if I undo that so edit undo okay which is command-z or control-z on a PC you'll see my assets panel here if you can't see the assets panel it's one of these two icons down the bottom here the top one you can see I have nothing going on in here but if I pay something all this stuff appears like where do these symbols come from so the designer who made this original wireframe here has made symbols which we'll look at to give the later on but for us it's gonna cause us issues mainly because it that are linked so if I change this one it's gonna update that original one in here so we want to just break the link the easiest way is to right-click it okay and go to where is it saying unlink symbol that little green link icon goes away and now we'll get these things over here you can leave them there they're not gonna do much but I don't need them so I'm gonna click on you hit delete on my keyboard click on you right click on delete and I select both in the same time and delete them so just get rid of those symbols it's not what I want I didn't make them cool so this thing here is all still grouped that's fine I'm gonna kind of drag it towards the top the cool thing about XD is it's got really helpful smart guides so if you're zoomed out far enough remember our shortcut command 0 or ctrl 0 okay so you can see the whole thing and if you drag it you will see it just eventually wants to snap in there which is really handy now it's all grouped in one little unit what we're gonna do is right-click it and say ungroup hopefully now I can click off in the background and there are all kind of separate little pieces he all these buttons here because what I want to do is with it ungrouped I want to grab this blue box and I want to drag out the side to the right and grab that little dot to the edge there just so it kind of spans there I'm gonna keep the navigation where it is it's kind of handy there but I want to just push that blue bar to the edges all right so we've got started we've used an existing template to get kind of the basics going I showed you what happens when you don't have the right fonts often I just ignore the fonts and go and change my own ones now so see these guys here and I know that guy is Ariel I can just go change it to something else that I've got on my machine we also know that often things can be turned into symbols and have that little green link you can right-click it and unlink it and I'm grouper just so it's all it's a nice little constituent bits because we don't need that XD logo there we're gonna go and switch that out in a second all right that's it let's go into the next video hi there welcome to the video all about type-in XD actually just getting the basics right now if you are an adobe nerd and you like man what am I going to learn from this type video stick around XD has some quirky text things plus we throw in some tricks and tips for distributing and duplicating it's worth your time hang about let's get started alright to get started grab the capital T tool and I'm going to zoom in a little bit I use my shortcut command 1 okay it's commands one's really good when you're dealing with type so it's control 1 on a PC that gets you to a hundred percent remember it's just better to be dealing with that when you're dealing with text okay be seeing it the X the actual size that your audience is gonna see it when you're making decisions on how big it is and how small it is so grab the capital T and is to type boxes if you click once you get what's called a point text box okay and this is good for headings and it goes on and on forever okay that's just the way it is the other type box if I go back to my black arrow okay to kind of deselect out of that and then go back to my type tool and if I click hold and drag I get what's called an area tix box okay and the difference between this is when I mesh it see what happens it's gonna fix width so hitting's body copy navigation body coat you're gonna use this for a body copy things that have like multiple paragraphs and I don't know lorem ipsum net type of stuff you can convert each of them I could say black arrow I could say you I want to be an area type box now that there's a little icon for point text that's the one for area text and so you click on this I think kind of changes a little bit over here but what's what happens double-click to get inside I can start typing and you can see it has a fix with the way thing about it though is and the actual height of that box is just that blue dotted line look what happens when I go back to my black arrow because there's all those other ticks what happens to it just kind of disappears I move it down so you can see it but it just gets kind of lost underneath this so that's what there's a little blue dot in the middle of his white circles mean to indicate if I drag it down any of these icons I drag it down you can see there he is there so if you end up with a box like this you make it too small okay that little blue dot appears and it's not as important it's called over set ticks in something like InDesign it's not super important when you're doing a mock-up it might be though and so keep an eye off a little blue dot so you can convert one to the other point text area text a couple of things we're gonna go move in now and start kind of fixing up our navigation now when you are working in wireframes don't be picking fonts okay I'm just gonna leave it as Arial leave it there something really simple it's not a time to be picking fonts and will do proper fonts a little bit later in the course when we start doing high fidelity we'll look a little bit more the real basics though before we move on is I've got this box selected you can see over here I'm not gonna go through everything I am actually because it's real quick lift align Center right align okay you've got underline this is the space between letters so I put up to tweenie it's gonna open up there let's put it up to up something really high 200 ok space between letters that's the space between lines put it up to 50 and this is the space after the paragraph so if I go into here and I put a return in between these two and I open it up so I put a return in there there's no spacing but if I go actually I like spacing when there's a return you can see not between the lines but after there's a return so that's where I put our little in Turin all right a couple other things to show you about ticks a little quickie an XD I'm gonna delete that stuff and what I want to do is I don't want to use this this is an XT loco I'm just gonna delete it I'm gonna put in the company name don't be tempted to put in the logo here like it's really hard as a designer to not start putting in the logo but then you start using the brand colors and then the fonts and then Y frame is not a wireframe anymore it's like a half-baked high-res version so just stick to the actual ticks so uppercase is kind of an eye suade ever remove any kind of design from it just keep it all very standard the other thing I'm gonna do here is I'm gonna circle the text and make it white so it can be seen at least across this the other thing is font size remember I'm at a hundred percent remember command 1 on a Mac control 1 on a PC so I'm picking the right size and it's quite big right it's a real common body copy size wall for wireframes is at 16 pixels so I just clicked it over here and hit 16 and hit return so often I'll just have 16 everywhere maybe the headings will be a slightly bigger size to indicate kind of what a hitting is and what or not and the other thing to do is on the black arrow uses a little white dot here okay when you're in point text okay which pretty much mean most of the text that I'm doing here except for big chunks of body copy are going to be this point text because here's a little dot here and there's a couple of things it's kind of weed and if you click hold and drag it down it's a great way of adjusting the size okay so and this one here doesn't have a drop-down or a slider so you have to keep typing it in there so you just like a little bit just drag that the other weird thing it does is you can see there if I'm right over the top of it it's up and down if I come out just a little bit so not quite on the circle but just outside anywhere here click hold and drag it it's rotating now you can see it over here there's my rotation and it's up to you but I'd stay away from rotating ticks it's quite hard to do in an app and coding a website weirdly and it can be done but yeah you developer might hate you if you start rotating ticks and he's gotta go try and make a consistent rotated text you have to have a real good justification for that pain anyway so we've got our ticks here a couple of things I want to like this here what does this as a sit TenPoint when there's a little bit small for what I need and so I'm gonna click it delete it goodbye guys I'm going to duplicate this across you can copy and paste it okay if you slick something and go edit copy and then edit paste it just ends up over the top of it so you can see they're just there so what I find is a little easier is with the black arrow so clicks and before you start dragging so I'm going to drag it over here hold down the option key on a Mac or Alt key on a PC you can see just kind of while you're dragging makes a copy I find that quite useful so I want a couple of things this first one here my wireframe is going to be the example you like having an example version of it I'm going to hold down my option and drag pricing so you type this in as well now the reason we are keeping these in separate boxes because obviously I could just put in space bass bass bass bass bass bass bass space and then put in log in and that's fine two things one is it's hard to kind of adjust that spacing that's not a real big problem what ends up happening is in XT which we'll see later on when we start doing mock-ups if this is one big text box with all the dick yeah different like words in it you can only get it be a navigation item for one thing because it's one text box you can say this whole pocket tix goes to the example page but you can't split it up so with these all in their own little type boxes it means later on when we get in the course we can actually get this button to go to something different from this one so you'll get in the habit of that so I'm gonna have a couple of these and I have log in and we're gonna have start trial okay another thing while we're here is you can see how I can see the edge of this thing if you can't see it sometimes clicking the white background cooking the edge of the artboards a nice easy double click on the edge of the artboard is a nice easy way to select the whole out board otherwise it's clicking on their name when you've got the whole artboard selected you can adjust these columns here mine's quite light I'm gonna adjust mine mainly because I want you to be able to see it okay you can see there through the video sometimes the videos don't show the contrast very well anyway that's a handy trick double-click the edge and you get the outboards kind of overall settings that is not the trick I wanted to give you the one is and I want this to kind of line up close to here I want them to be all kind of distributed so on the same spacings there's a couple of ways you can do it you can select them all okay so I've got everything selected including my now I'm gonna hold shift and click the navigation okay so that D selects it it's maybe a bit advanced here so let's just go click hold shift hold shift hold shift hold shift so I'm holding shift when I'm clicking them makes a nice big selection and up here there's your aligns ok on this one here the distribute horizontally you can see shortcuts up their hangout click on it it just spreads them all out what you will find though in XD is let's say I don't do that and it's our line this went up and I'm like yeah it's about perfect if I start dragging this I'm not doing anything you see those little helpful smart guides appearing you can see when I get to here it's kind of like the little pink thing appears it says would you like them to be 41 pixels apart you're like yeah I mean it's too good look at that okay I end up doing that a lot more than kind of trying to remember the shortcut or I have problems with horizontal and vertical I always click the wrong one anyway alright so that's the basics for ticks we are going to look at it a lot better later on when we get into kind of web-based fonts and do some fancier things for the moment that's what we need to get going with our wireframe simple text point text point text area text there's a couple other little tricks in there alright let's jump into the next video hey there this video is all about creating buttons we're gonna make a nice simple button with rounded corners and you can see here we created some swatch colors we can use throughout the document plus we kind of add some of the just kind of cool components to our homepage wireframe everybody's let's get started alright so colors aren't huge in wireframes just some subtle colors to show kind of hierarchical changes and kind of separation of different areas so that's what we're gonna do now first of all grab the black arrow and click on your navigations this kind of blue box here okay with it selected and you should it should have no no border okay and have a fill so the border is the color on the outside and the fill is the stuff in the middle now click on the little blue box here and this pulls up a little color palette now we're not gonna go and change this blue thing just yet okay basically what I want to do because I want to reuse this through it I want to hit this little plus button it just means it's gonna be easy to find again when I'm drawing different text boxes I can click on this and make sure it's all matching up the same color while you are here it's really handy to have and you can see this little dot here this is showing me there you can see I'm changing it in here it's not really what I want but I'm going to go back I'm gonna drag it all the way down drag drag and just keep dragging it past here so it's jammed in the corner and add that so I want a full back I'm gonna drag it all the way to the top and a full white and then I'm going to click on the little blue so that my navigations back to that blue color what we'll do is in exceed is a default color as well this and if I click on this can see that border color even though it's not on you can click on it and say add that that's the kind of default gray color there goes through all of XD we Mars will keep it consistent and say we're trying to guess it so call these colors there's just one of the color I want to add and what I'm gonna do is I'm gonna click on the background so let's double click the edge or click the name over here to get the whole board selected and what I'd like to do is at the moment it's filled with white I'm gonna fill it with a slightly off-white color so you can see here I don't want to be this color but I want it to be just down off here it's gonna mean there's gonna be a nice contrast when we draw our little white boxes over the top of it that makes no sense to you at the moment okay because we haven't drawn them but let's just make it a slightly off-white if you are typing it in you can type in hash if 0 if 0 if 0 okay that's called the hexadecimal code if you're new to web design that is often the the the color that gets used to describe it if you're kind of from our graphic design background and you're dealing with RGB or CMYK that's what we use kind of dealing with web and app not always but it's the most common one you can use RGB or hue saturation and brightness button hey come and while we are here we're miles hit plus so I've got that kind of like tinted background color go so we've got current some pre-made swatches so we can get consistency through this document what I want to do is I'm gonna click off in the background I'm gonna grab my rectangle tool and I'm gonna draw a rectangle that goes from the edge here okay all the way on the side all the way over and it should snap which is cool this is gonna be my hero box now this hero box okay or the Welcome box or this top main focus this is kind of like above the folds member this dotted line here okay so that's what people initially are going to see so this is kind of we Amane call-to-action would be or you make marketing message or you main sale promotion so this is kind of its referred to as a few things but often it's the hero image go on what I want to do with it I'm gonna move it up a little bit and a couple things I didn't do is I put in a little bit of padding into the edges of this because I didn't want it banged up against the edge but it's kind of not what we're doing here we're using this extra space here so I'm gonna have all these guys I'm gonna get him the edge there you ditch this everyone's lined up nicely alright so once I'm here I don't need this column at the moment there's kind of discolored column to show me the edges I'm gonna use this white box because I have this this column I guess gets annoying for me in terms of colors now to turn it off the long way is click on double click the edge okay or click the name and go over here and just turn off that for the moment there is a shortcut though and I've try not to do too many shortcuts but I end up throwing them and just for the people that really you can just click on the edge and turn it off that's no big problem but if you were on a PC it's ctrl shift and I want to say apostrophe apostrophe okay I'll show ya oh that's on a PC on a Mac it's this one here that is command shift and that one there on my keyboard it's kind of just across from the colon which is next to the L key okay you might have to mess around and see if you can find it okay so there's a shortcut is quite a bit it won't work unless you've got the app board selected or anything inside that outboard so you can see I just kind of toggle on and off quite a bit when I'm just working but now got this hero box it works and that's why I've got that contrast with the background I want this all kind of segmented up so that this is kind of hidden the background these have a little bit more importance the other thing to do is I don't need it to move anymore I'm gonna start working on top of it but I'll ends up getting in the way so you can lock it so there's a long way up here object there it is lock you can see the shortcut command L or you can right-click it and say lock either way I want it locked and now I can't move it you can see which is really handy if you want to unlock it just click it once with the black arrow and you can see this little locking icon just click it and it comes back to life so I'm gonna use command L ctrl L to lock it all right next thing I want to do is put some text in the middle grab your type tool and what I'm going to do is click once and before you start typing we all need to make sure probably by default yours is stuck to white as our font color so when you start typing it's not gonna up here so just set it to black and yours is probably stay at the left hand like left aligned I'm gonna set mine to center and mine's defaulted to have it occur so I'm gonna use the Arial now if you are like man I can't deal with Arial or how Vertica as a designer it's just too basic and something like source sans or open sans is a real common one you can download them from google fonts or Adobe fonts and they are at least a little bit more stylish but are still really crystal clear and simple so I'm going to start typing and I'm gonna call this one headline slash hero box so it depends who's going to if I was designing for engineers and other designers in the industry we can call it hero box but sometimes a client who doesn't know like they'll be like here or what and so that's why double double with it headline hero box and what I'm gonna do actually is I'm going to work through and use this blue color throughout and so I'm going to limit my colors to those people there okay so I've got a really limited color swatch you could change the blue thing to something else that may be trying to go on brand colors just maybe something a little different if you're sick of blue next thing I want to do is I don't put it in the middle so we're just really handy like deets stuff in the middle you just drag it until it kind of like finds its home one thing you can do though it's little trick if you have two things selected this doesn't work but if you have just one thing selected it goes hey what am I gonna line to if you click on these buttons and it assumes the app would see that it only works when you have one thing selected yeah that's my hero box I would like tis the right size this but its Helvetica it's gonna be Arial to keep consistent and look exactly the same all right I need to put a button in here you sort at the beginning so buttons you can go and steal one or create one a button can just be a rectangle what we might do is do a little bit more practicing of the jumping between different app words when we are back and open up you probably still have yours open and open recent there's wires web one okay remember this father for you was just a second ago in the last video for me it was over the weekends there's like a whole few days ago there's what it's not open still alright and there's a zillion buttons to find there ya go you can see there's slightly designed there's some rounded corners we'll look at that ourselves but you can see the different kind of designs were button sometimes it can be quite hard you're like has a button look often like I'm pretty I like to think of myself as a pretty good UX designer but often I'll draw a box I'll draw a button and it will just look like a text inside of a box and you're like man sometimes it's bad I've worked on projects where people just like well where do i click on like the button and they're like well where's the button I'm like that box with the text in it and it just hasn't worked out so sometimes things like rounded corners alright so that's given us an idea instead of copying and pasting it the reason I don't like copying and pasting is because if I copy this jump to my other document and remember on my Mac its command and Tildy which is the little wave key that switches between buttons and on PC it's ctrl tab to switch between open documents anyway so if I paste this in if I have a farm on my and farm on my assets panel and I paste it in can you see it bought through a symbol which is cool work and do that thing where I where I right-click it and say actually I want it to unlink symbol and then I'm gonna delete this guy over here goodbye so I've just connected at all mmm you could do that way I'm just gonna show us how to make it and plus we'll learn how to do a rounded rectangle box at the same time so command one so I'm at the right size so I'm not making a giant button and that's about the size I want it to be I want it to fill with the blue you see how handy those little swatches are now and with the border I'm going to turn it off what I'd like to do is introduce this little option here okay so this first option and if I type in here like say four pixels you can see it just gives a little hint I'll zoom in for you so you can see there's a little hint around the outside there of rounded corners and you can decide on what's right for you you might go back to that mock-up and just see what they did and copy that this we've all learnt dan makes terrible buttons and the only difference is see this option here this is all of them do the same thing this one is I can do them all individually so if I do two two two and which is this guy if I turn them up to 20 you can see I can make fancy curved buttons but we're getting away from we're getting back to their terrible button ideas but anyway that's how to do rounded corners I don't make sure it's in the center of the document remember our little trick a that's going to work because I know that centered and it's lined it up nicely but remember if I have one thing selected and click on this it just goes into the center I'm going to grab a text box instead of trying to recreate it I'm just gonna copy and paste you okay so go to them I'm gonna make him Wow white move them over this one's going to be start trial all right I'm gonna select both of these actually you're just gonna drag him he's in the middle command one control one zoom out yeah it's kind of working now we're at a point where in terms of type we've only used 16 points ok real common body copy size but we're gonna have to show kind of hierarchies of what's more important because this thing here is quite small well it feels small comparison to this I know that's kind of more important to this to describing this box than this is so what I'm going to do is I'm going to introduce maybe probably just two font sizes I'm probably going to pick something like 24 okay so it's clearly different that's more important in this and I'm gonna try to stick to that I'll probably get to pick one smaller font size okay sorry probably down to something like ten point for like T's and C's and kind of really small insignificant notes but stick to kind of really stick to two or three font sizes throughout the wireframe even in the kind of high res version will do later on or the high fidelity version will end up with maybe just five font sizes just to keep it all really consist all right so now you can kind of skip ahead now because what I'm gonna do is duplicate this to get how all the different kind of sections going so I'm gonna make him in the middle here we go I'm going to I want this to be unlocked you can right-click it or go command L on a Mac ctrl L on a PC zoom out a little bit I'm gonna grab it all okay I just drag a box black arrow drag a box through it all and I'm gonna hold down the you can copy paste and then drive it down not sure we're driving it but I hold down the option key on a Mac Alt key on a PC and I can drag it down okay so there's that one how many do I need I'm looking at my hand-drawn wireframe here I showed you the wireframe pretty terribly in the video it was like hey look I had a back look through that video and you it doesn't focus at all so if you are looking at what like wireframe is he doing in the exercise files under images there is ah then the bottom here is the wireframe one so that's kind of what I'm working from I took a scan of it rather than sticking it to the camera so I'm kind of just building this thing up and so one two three four five boxes so it's gonna do here I'm gonna go one two and you'll notice there it's these pretty good at trying to like guess and like the spacings so I'm gonna have five of these and I'm just gonna change the tick so it's not very exciting from here on I promise not to throw in any extra tips or tricks so you can skip on or you can hang out if you can't reach the button to turn it off you're stuck with me alright so this one doesn't have a button this is the Welcome video that we're going to be using and it is on auto play whatoplay and muted so it kind of starts playing but it's kind of off so people can kind of see what's going on they can unmute it if they need to all right this one here is the instructor ecosystem that the building instructor eco system in fact actually what I'm gonna do is I'm gonna get the editor speed this up so because oh I promised no more tips okay one tip and eyes you'll notice throughout this course and if you've done any my other ones my spelling is terrible so there is this new handy thing I know it doesn't seem like much but for it's awesome it so you tune on spelling and grammar and it's gonna do cool things like well make me look a little less bear when it comes to typing and I'll show you what it does can you see you get the lovely and dynamic spelling and gives you suggestions and which is not helping me at the moment let's hope I can spell time for graphics so now I'm gonna speed it up no more tips and I will see you in a sec you all right so that wasn't really worth hanging about for but yeah we've got our boxes in then we can start moving forward onto the next video hey there welcome to the video this one is all about icons okay we need them to kind of indicate what these things do is an image play buttons we could draw them but if you're lazy like me we're gonna go off and appropriate them not steal them cuz they're free I'm gonna show you a couple of cool places maybe Adobe Market Google material plus icon finder and I'll show you how to kind of use them recolor them plus some little resizing tricks so hang around gotta make some icon if I make I mean steal from other people okay so we need those icons where do we get them from you can steal them from other UI kits okay they like the wires one we've got here the problem I find with using these they're totally fine the problem is just got to dig them out cuz there's no like search for icons in this thing you've got to kind of like look around and like let's say we want that image icon okay or the play or pause I know it's not in here cuz I've had a hunter an already but you end up doing this great for ticks and kind of more of this interface UI but this particular wireframe doesn't have the bits we need and how we're moving around just to remind you hold the spacebar key down click on hold and drag your mouse so if you can't find them in here you can't find a lot in different UI kits you can download some of the ones I have in your exercise files whereas do you get them from or where do I get them from like where is the easy place there's two main places that I use and the first one we're gonna look at is called the Adobe and market song as I'm out actually I'm gonna switch back to our document and Adobe Market is tied into this like little a Creative Cloud icon so hopefully you've got a Creative Cloud app installed if you don't go to adobe.com and look for the Creative Cloud app should be installed on a PC it's down the bottom right and on the Mac it's up here and that's what it looks like you might have seen it before you gotta log into it so if your organization has blocked this some of them do and this is not gonna work but most people do so we'll go through it what you're looking for is this one called assets and there's one called market okay and there's a little search icon the cool thing about this is that there commercial use okay and it has a few different things in here we're gonna look at it throughout the course what it's really good for his icon just has loads of ones you can use so they're searching the net for like bad old clipart kind of icons or emojis or or wing-dings webdings if you're young you might not know what those that anyway I'm gonna focus a little search icon and I want to find an image please and I could to have an icon but because this thing is so heavily weighted towards icons I don't need to add that okay you can see there that's kind of like a real good generic icon for yeah for an image you can just hide on the ones you watch remember this is a wireframe so and what you need to do before you download it is click on just the big icon image version of it you're looking for this one this is SVG okay it's a scalable vector graphic it's the kind of a nice reusable victor victor file better than JPEGs better than PNG because we can reshape it and recolor it in XD if this is PSD so a Photoshop document that can be okay and you need some photoshop skills to be able to yank it's not like a it's not as super easy as SVG later on in the course we will go through photoshop and how to do all that sort of stuff and a bit more advanced but that's kind of further through the course and it's not really for now so find an image icon hopefully it's a SPG and click on download it's gonna ask you to put it into one of your cc libraries so what we're going to do is we're gonna create a new library for this course okay and we're gonna call this one I've already got an instructor HQ so we're gonna call this yhq xD class and that's what we're gonna put everything for this course if you've never used a cc library before okay I'm gonna click return did I click return I didn't I'm gonna do it again we'll speed this up all right mr. bout a little bit there and there it is the answer clicked on it and what happening is in the background it's downloading it okay and you're like oh yeah I just clicked off down here disappeared it's gone into this one here file and click on this one that says open CC libraries okay and hopefully I I see a my instructor HQ XD class you'll see that there's my little graphic in here come on and to use it it's pretty easy just click hold and drag it out don't drag it into anything okay just drag it kind of on the edge here I've learned a couple of things there Adobe Market okay we're to get things from so we can go into here this is a little confusing to go back to find another one you gotta click that arrow and here you could type in say I want the play button okay problem with that is that it doesn't quite i've already had a look in here and it doesn't give me the buttons i want plus i want to show you a few other things because he loads of play buttons if you want to get rid of that you can hit the little cross and when you do find something you like say it is this you can click on it check what kind of file it is and then had download and pick your library when you're finished with it just click outside of it and then you just need to open up your file and open up cc libraries now if it's a big icon which is unlikely to be but it's a it's a big image it can take a while to download we drag that out onto our desktop and at the moment it's connected which can be cool okay means it's connected to the Sapphire just the library item which we'll look at a little bit later on this will update for the moment though what I want to do is close that down and I want to break this link just click on it and it's now broken from the library so it's kind of if I update that library item now this is not going to change the reason to do that is because I want to break this apart we're not really breaking apart I want to change the color of it cuz it's black at the moment I want it to be the blue so what I can do is I can double click on the double click on it just keep clicking on it until you see this over here and you can change the fill color okay and then to get back out just double click on the background it kind of like double-click it to dive inside change the color double click to get out let's get it to be about the right size now I'm gonna show you a little trick here I'm gonna show you a little thing that happens in XD if I drag this down can you see something weird happening you can see the little dot and what ends up happening by default is this thing over here called sponsor of resize is turned on if I turn that off and do the same thing can you see it doesn't mess around with that dot so there's gonna be times in this class where that's really awesome and when it's really not it's in the really not function at the moment so I've turned it off scale it down okay and I'm gonna use it on this one here okay so that's what that's guys gonna go I'm gonna duplicate it it's gonna go on this one there's gonna be an image as well and the FAQ is not gonna have an image no what I'm gonna do is I'm gonna just move these guys up holding shift just like the more than one and here we go there this one though I want to have some different icons and let's say I can't find it in here okay can't find it in this one so I'm gonna show you another place where I get my icons from all right and here we are it's a website it's called material I owe its run by Google and it's a I guess a a place where especially if you're new to web design or app design it's just a really awesome place to get like there's lots of not only like icons which we're gonna find but if we click on things like design there's just a lot of articles research projects and if you read this site back to back you'll end up with a lot of the language used in kind of UI design and it just gives you good examples and you get to meet really famous you high designers there are famous ones okay so it's just a really good central resource for UI design what I want to do is go to tools and I want to find the icons I want to steal some cool Y cons from them okay so tools then click on icons there's lots of other things in here and that I just want this so in here there's some cool stuff so down the bottom here just a real good large chunk of the hots of icons and the best bit is that's searchable so over here I can filter by name I want to find the play button okay and down here's a bunch of play button you can decide whether you want filled ones outlined ones rounded ones two-tone ones okay so there's just a nice consistency across its like icons are quite easy to find I guess online but it's hard to find ones that are consistent across such a large broad amount of different icons they all look like they're from the same place so I'm gonna pick I have no idea what the difference between these two are gonna click on it down the bottom here it says of the selected icon I'm going to click on and actually no yet do you want the dark version or the light version doesn't really matter my case PNG or SVG that's my question to you now it's a test which is the better one and SVG is okay because I can edit it PNG I can't it's gonna be a graphic it's gonna be an image don't click on it whoops okay I don't want that one I want the SVG this website in general is a little hard to use which I finds a little this is not it's non-traditional that pushing the boundaries of what you can do with website design so you get a little lost in here don't worry I do too when you download it you stick it on my desktop and you can start using it I've already downloaded it for you so you don't have to go through all this process okay so once it's downloaded I'll show you what to do in a sec so I've gone through and I've gone and click on that and I found a mute button and a pause button and re like a restart button and I've got them already there it is replay okay so I download this for you just to save some time so it's jump back in to XD alright so I bring in those icons is an official way and unofficial way and so the proper way is file I'm gonna go to import and I'm gonna find them in my exercise files I'm gonna go to icons I'm gonna bring in the play button that I made for you I just name them differently to make it easier as well add some crazy names down from the material sight import and there it is there I'm gonna zoom in on it now remember the shortcut we had there's command 1 gets us 100% what's the one that gives us all the way zoomed in like super big command 3 or ctrl 300 PC just whatever you have selected okay so I had it selected first two zooms in so it's just a handy shortcut so you here fill I'm gonna double click on it so I get the gray DH the black background cuz I don't want to change this white arrow here I click on it and go to my little little consistent blue command one zoom out and that's my little icon that's my first one here look first one there I'm gonna zoom out command zero control zero I'm gonna stop saying shortcuts soon because you're gonna punch me but fill a little bit of the first class I'm gonna repeat myself what I want to do is select all of these you can see I want this one this one I can just drag a box around them all and command L ctrl L on a PC to lock them all so that I didn't run into that problem command one this guy needs to be a bit bigger and he's gonna go there so that's the official way of doing it I'll show you they're kind of down in duty down wing okay is what I'll do I'll find my exercise files grab my icons and I want the player to got that one I want mute and replay we use both of these it's gonna click hold and drag them and that's an easier way to do it okay Wow is it easier I don't know it's the way I do it anyway just drag them in Mac or PC you can just kind of like have the window open on your kind of finder or in your windows and just drag things and images icons I find that it's the easiest way to work now I'm going to kind of get these positioned the right size now you'll notice that resizing this one it's kind of doing some weird stuff so if you know some people know some people don't if I hold the shift key down while I'm resizing so if I hold shift down you can see I can't distort it okay so with it off I can squish it okay I'm gonna undo but it it undo its a holding shift it's gonna get me the right sides ish same with this to the right size ish double click it you up blue and don't look like you you I believe that's why SVG's up awesome scalable there Victor and the graphics alright so I might look in nice yeah you get pumped over now sometimes the smart guides where it's trying to line things up and you're like stop lining up I just want to move it a little bit you see that's quite hard and what you can do is just select it once with a black arrow and with your keyboard just kind of tap it across I'm just using the arrow keys okay just a little plain ol arrow keys alright the last place I'd go to four icons if I can't find it up in here in the assets market and I and I can't find it on material or it's just not the right one Rhino just I don't agree with the mute button okay so you don't like it you can go to some things the only other place I go to I got icon finder calm and I go into here and I type in new and there are paid ones and free ones I'm cheap I shouldn't be but anyway I go in here and I say I wanted to be free I wanted to be Victor and these are the ones that are free and Victor okay so you might decide that like I prefer this style the cool thing about it is a you can get SPG's make sure there is an SVG version of it and and what can be cool if I can click on this one I've done a part of larger groups of free icons as well because that's the one I'm gonna download you can see it's part of a bigger group it's not a huge group all right there's a huge group in this one okay so and what I want to do is download the SVG okay so that's the other place I go to you might have your own place there's not like that place to go and but yeah try market try material and then after that you can do some just google searching or try icon finder calm all right I have the icons I need we are going to move on to the next video I'll see you there everyone this video we're going to do this we're going to put in our footer and we're gonna put in some lorem ipsum for our frequently asked questions look at some kind of basic font stuff with bullet points which actually don't exist but we'll cover them all in this video right now alright let's grab that footer first I'm going to steal it from there's wires document there's a chunk of options up the top here I'm gonna grab this first one copy it switch paste now and keep doing this because you're gonna work with lots of like other UI kits to get started a lot of people do okay just to kind of get elements that you might not have designed before and you're gonna end up with all these kind of like random symbols so I'm gonna click on the little link to break it okay actually that doesn't work it worked with that cc library but in this case we need to right-click it and say and where's the unlink symbol so it's no longer a symbol and all of these guys I'm gonna delete so I've selected them all like the first one shift-click the last one right-click goodbye just to tidy it all up okay another thing I want to do is I want to ungroup it okay so I've right clicked it ungroup so that I can kind of work with this bit and just drag this to the edges okay neat little trick our trick is if you hold down the I'm gonna zoom in to vary weight in is if you set i want to drag this one and this one across okay but if you hold down the Alt key on a PC or the option key on a Mac and you grab this side here watch what happens skew see whoa both move so gonna handy so that's my footer what I want to do actually is I want to slick this whole thing and drag it up a little bit because I want it to be there and I want to adjust the artboard okay because there's too big a gap there so to adjust the app word size double-click the edge drag it up and you'll notice that it doesn't snap like the Apple doesn't snap to anything okay just kind of moves around begin lumbering giant does whatever it's once what you can do is get it close and then grab all of this stuff again drag a box around at all using my black arrow and just kind of move it down and it will it'll you know your your footer will snap to the edge of the app word but not the other way around just so you know now we should go through and do all the text adjustments okay and I'm not gonna do it for the moment just cuz you don't want to watch me typing but obviously this is not quite consistent with the wrist of the wireframe now before we move on we're going to quickly look at lorem ipsum why because there are going to like this Q&A section here I would like to have some fake text in it and you use what's called lorem ipsum just fake mixed up Latin words to as placeholder text so we're going to go through it now and show you a kind of a quick duty way to do it now and later on we'll turn it and also using fancy plugins and some more advanced stuff but for the moment what we're going to do is I want to go grab some ticks that I've got in your exercise files so here it is it's in ticks and fonts and there's one in here called placeholder text and I just have this sitting on my hard drive in my My Documents because I just go out and grab it all the time I'm like I just need a line for this Q&A in kind of placeholder ticks and you can see Latin words they're actual words just mixed up okay so I'm going to copy it and I'm gonna grab my text box I'm going to use our area text box okay and click and drag it paste it in make it the right color use black make sure it's 16 and I want to put bullet points in the front of it now you'll notice that XT doesn't have a whole lot of text how ability okay and so if you want to put it in a bullet point you have to workout I know on my Mac if I hold down the option key and hit 8 I think it's alt 8 on a PC you can get a bullet point but just so you know like if you're like hey where's the you know the strikethrough button it has underline which is Kovach's an upgrade believe it or not from that earlier version but then it doesn't have some of the font stuff so you gotta fake it there's my like question and I'm gonna have my answer and I'm just going to grab a bit more text I want a chunk of that it's just good because like if you start adding real text in here I bet you people start coming like clients come back to me and say oh that's not quite correct that question that's all that's not up to date and you're like it's not the point of this meeting to kind of correct my grammar and type which is terrible and what I will do though is my space after it's gonna be 0 and I'm gonna go and just copy and paste a few lines of this thing so I'm gonna put a return in pretty faking it at the moment I'm not gonna spend too much on my panic paragraph spacing it's just placeholder text to give the idea of what's going in there we used kind of an icon for an image but this one's gonna be placeholder text go and that's lorem ipsum just so you know as well you can go off and get fancy that's where I get my lorem ipsum lip simcom loads people use this one ugly sight but it allows you to go I want five paragraphs generate and it just gives you the tics that you need you can that's exactly what I've copied and pasted it into that word doc a long time ago and they value my privacy which is good and the other thing you might do is you don't have to do but just so you know there's lorem ipsum there's cat Epsom okay you can generate three paragraphs of capes and it's junk like it's placeholder doesn't make a whole lot of sense but it's kind of funny there's Star Wars ipsum is gangsta Epsom it's kind of like Snoop Dogg Lauren EPS isel anyway just you know there might not be appropriate I just thought was funny okay so we stole the footer and we edit some lorem ipsum I will show you later on some cool plugins when we get into that but more advanced XD stuff but that's gonna work for us as a placeholder now in our wireframe our friends let's move to the next video everyone this video is all about making new out boards and saving some time so we duplicate things we're creating a kind of a new page and our website plus I'll show you how to make an app or mobile website size as well it's really easy couple little tricks in there so let's get going alright create a new page and you there's two ways they outboard tool you can click on it it's the second icon at the bottom there and you can pick let's say you want I'm now working on my app so I want to click on the iPhone X okay and with this tool selected you can keep kind of adding them you can add more if you like I'm gonna undo that because that's not what I want to do I want just another version of this homepage I could start with this okay and that works perfect I want to start with a 920 and I want to set copying and pasting things across now and duplicating is gonna be easier but I wanted I do want to show you this little trick well a little trick is something XD does by default but it's really handy so you can click on this navigation copy it if you click on the name of it okay or make sure the whole artboard selected if you paste it puts it exactly where it got it from okay so it's kind of really handy just so you know it's when you copy and paste things it doesn't just end up in the middle it puts it back on the page where you need it you'll notice that I needed to really select that whole thing copy it paste it they can be a really handy way to just move things across but there are things like the background color you'll notice didn't come across so I'm gonna undo a few times and I'm gonna duplicate it a couple of ways of duplicating the page and there's the official way so if I go to my layers panel so down here okaywell upwards panel so it's the second little icon nor the last little icon down the bottom this homepage is what I've got I can right click it and say duplicate just sticks it next to it that's totally easy way to do it but because we're all hardcore and XT users already we can use the black arrow remember we duplicated boxes by just kind of like holding alt on um alt on a PC or option on a Mac while we're dragging do the same thing with outboards so hold down the option key on a Mac Alt key on a PC you can just get duplicates I do this all the time that's the easy way it's rename it okay I'm gonna now call this one the sign up that's the stat trial start start trial here we go the stat trial page what I want to do is I want to just delete everything now you can see I can't delete if I delete now I'm not gonna get rid of these boxes so with them all selected though I can go to my command L or ctrl L delete them or you can just right click them and unlock them you can see there how much time that it saved a little bit at least the background colors in there my footer and head is there and I'm gonna put some stuff in for the trial starting the trial so I'm gonna jump to our wires page there it is there I'm gonna show you another little trick pricing where I want forms so what I can do black arrow select all of these so the whole thing selected and if I hit command 3 or ctrl 3 kind of just highlights because I had that whole thing selected it's kind of made it fullscreen so which one do I want I want this one yeah so I'm gonna click on that copy it jump across paste it it's gonna go in here I'll do and I'm gonna grab this text copy and paste it bring it across and this is my start trial start trial and that's all I want from this page and I'll I was I want one of these now the default because I'm using the default I could copy and paste that across but because XD has a default of white with that gray around the outside I can just draw the box and reuse this it's gonna bring in a little trick we need alone we need to send this to the back because it's obviously above the ticks there now the easy way is to right click it and go to this one this is send to back you can see the shortcuts there that's what I use but it's just right-click it send it to the back and now we've got a little bit more consistency across both pages and it makes it clear what this thing what this page does lock it come on del ctrl L on a PC that's what I want to do for this video making new upwards simple easy use the tricks when you're duplicating to the navigation and the footer doesn't have to be copied and pasted it across by our friends I will see you in the next video hi everyone it is the class project time it is time for you for me to give you a brief give you your own persona or person to follow give you some assets give you some things to do so that you can practice because following me in the class mmm step by step is good but doing it on your own is where the real kind of learning comes from so there's a couple of things you need to look at so in your exercise files there's a folder called class or first of all open up this file okay it's just in your exercise files it's called class project notes XD design it's a word doc and it's gonna give you like this is the one we're gonna do now class project one a little bit further on in the class I'm gonna give you a project to project three they look daunting they're not and I promise you the people that bothered to take the time to do these will be the people who get good at it start remembering some of their shortcuts which is not important but getting it flow going and start really cementing what we learn in this class plus it's a good way to build something for your portfolio you don't have to do it I'm not gonna check but I'd love to see what you do do if you decide to so this is the first one class project number one it says review these two documents okay there's one called it's in this folder go we're doing class project one class project two will be the final right at the end of this course I'm gonna set you another course to go and do it has a bit more creative freedom or is it's quite prescriptive and what we're doing here when my when I'm sitting these class exercises okay so I want you to read these two ok the brief and the persona we'll have a look at them in a sec then I want you to build a wireframe using these are the kind of features that need to go on the home page wireframe so like here now xD course we've built it out the hero box and the Welcome and I has this thing and it has these things in the nav that's what we've decided for the instructor HQ these are the things that need to go on your wireframe so that's the homepage and what we did in this example is we created a start trial page you're going to create a Contact Us page instead so there's a slightly different client well slightly completely different they are a furniture manufacturer okay they want an e-commerce site which we'll look at in a second and so on their Contact Us page you need to create a second artboard tell us what you need to do and you need to get one of the examples from the wires or you can create your own if you get stuck or should be in a contact us form you can check out other sites just look at other venture sites for example and when you're finished you're gonna create a jpeg of your finished work and upload it to us so that we can hey you can prove that you did it and B so you can get some feedback from me and other people during the course it's quite a large amount of people who kind of get involved in this so it's nice just to post your work and get some feedback it'll like I got a huge volume of stuff that goes up so I can't reply to everything I try it I jump in all the time and try and add some comments and things but I guess it's just a way of being held accountable for yourself if you know you're not gonna do it unless you're paying less you're being checked or stick it somewhere there's a great little thing to work through it's the way to share it though I'll go through that now before we go through the brief is that this is a file export we're gonna go through exporting properly later on but for the moment this is the bare minimum in XD once you've got it to this phase okay you've gone through the brief you designed it and you've got everything here like this and a wireframe you go to file you get exports and you go to all artboards okay and this will allow you to go I would like to have a JPEG okay quality leave it or 100 us and stick it somewhere I'm gonna put mine on my desktop in my instructor HQ mock-up I'm gonna click export and those are the JPEGs you can share where are they mmm this tub there it is there so I've got my home page and my stat trial page you can see how important it is to name your artboards now you see home pages taken it from here and start trial over here if you just ignore it and just you know it's called web 1920 - one - two - three and you're gonna have to rename them when they come out to here so naming our boards is helpful in XD when you have done it I want you to share it where do you share it I'll show you in here this is a couple of places this website has an assignment section okay where you can kind of post things and yeah put them in there that's the best place depending on the page that this appears on you might have comments down the bottom which you can put it in so you can paste your JPEGs in there the other place is social media I'd love you to do this okay do them all posting the assignments and on social media and make sure you just tag me so I can take a look give you a like give you a review and just be held accountable so if you're an Instagram person I am at bring your own laptop on Twitter I am Dan loves Adobe and there's a Facebook group here click on it it'll take you to the group here it is it's called bring your own laptop online it's just a group if you search for it on Facebook you'll find it is a closed group for students only so ask you'll have to be you can see one person is waiting to join this group is about how many people it's about four hundred and forty five in the moment and you'll see just like loads of cool content from the different courses post it up get reviews there's no XD in here at the moment because I'm making the course right in front of you and but there will be piles on the I bit too by the time you get there post ask questions the only thing I asked is that you if you post one you have to respond to one it could just be a thumbs up well done love it it could be critique of the vast first because I can't get in here every day I'd be great if you put one up and post something for you to respond to somebody as well constructive criticism I really need a new image here anyway back to the word doc so build a home page build a Contact Us page share it with me so it looks long but it's actually not that difficult let's have a look at both the brief and the persona so you get an idea of what they look like so they are in your exercise files in your class project won so many furnitures what we're going to do this one will do at the end that's like an end exercise so a mini furniture I've got a brief and a persona PDF open those up and I live the working files in there as well if you are like oh I want to steal these and use them for my own briefs and personas there's the working files that illustrate that you can use those but we're soaping the PDFs for the moment and where are they do they are this is the brief bit fancier than the last one that we're doing for instructor HQ I thought I'd fancy it up for you so basically the only thing you have is you have a logo so the brand already exists I've given you the logo it is in here okay don't worry about it for the moment don't be tempted to put it on the site because wireframes remember super simple don't use it but I've for the upcoming rest of it there's gonna be logos in there for you to work with here's the client it's a new business selling affordable high-end design furniture made in Ireland that's where I currently live I'm from New Zealand but living in the sunny Ireland so that's the client the primary objective of this brief from what they want is that they want to build an e-commerce site where people can browse and purchase furniture for home delivery the persona will go through in a sec okay so our target audience actually this jump to that now where is persona okay so Katherine is alpha she's 50 she's an executive she lives in Dublin have a little read through this but basically she's well-paid she's kind of at a point where in her life where she is kind of doubling down investing in kind of a home and stuff now that the kids are off at university she's in for the style but she's not kind of in it for you know prices I was definitely a big part of it and she's updating her house she's lived in the house forever it's a four-bedroom house but now she's got a bit more room and the kids aren't there messing it up she's now kind of like she's always wanted to but it was always just a pain identify with Katherine I've got two tiny kids there's no chance of them leaving anytime soon but you do not want to update your house would you like yeah he says guys the moment my babies crawling on everything he's pulling himself on every chair so basically we've got no chairs in the house cuz they're all locked in a room anyway she loves to browse style guides online and this is I think a big part of what would be for me when I was designing this and maybe not too much for the wireframe but you know she likes that whole Pinterest liking gathering ideas kind of scrapbooking stipe things before she makes a purchase so that might be something to include in the design for the website so I hope you can see how a persona can really help you like because I'm not Katherine I am NOT fifty year old woman executive living in Dublin I got that bit but everything else is not me so me as a designer though I can really identify I can kind of see her in my mind's I'm like I ain't kind of feel like what Katherine is about so when I'm designing I can be designing for Katherine not for myself because of us for myself it'll look very different at the moment it would be is it baby-proof and how good does spaghetti wipe off it so the nice thing about this is that when the client comes back and says oh I think we should have this or they contradict some of your designs it's fine but you can say actually I don't think Katherine would go down that route I think because sometimes their client forgets is around they're like I want this you're like oh do we really need this Katherine I don't think we'd like it easier to say that that Katherine wouldn't like it then for you to say actually your ideas are dumb that doesn't not go down well at a client meeting but you can argue for Katherine as a UX designer it's your Judy so back to the proof so we're designing for here we've gone through our design and worked out what features need to go on the home page and and yeah what things need to go on here this is a little prescriptive for a brief because I want you to not be kind of like flying around in the dark going to give you some things for it to go on the homepage so there's a shopping cart contact us and so this thing it would go in then like now we need a contact us button we need a shopping basket kind of icon in the corner there's a search box on there somewhere harro slider which is that hero box but maybe one of those little slightly things there's a section that says new in store and there's a section in here this is these are the these are the sections like these okay so chunk chunk chunk so new in store and inspiration ideas would be another wiring clearance okay so have all those an end to be a footer these could actually be in the nav and they should be like tabbed in with these guys and even though it's his logo here weird the wireframe Stacia this will go in eventually but not at the moment just type it in so you're gonna build two pages these are the pages we'll do later on okay don't worry about them for the moment I wanna make this this first exercise too long even though it's a really long video of me explaining what you need to do but you'll end up with three pages the home page a category page which is often like so we've got home like because it's a furniture shop there'll be like different categories of furniture and then specific things in there so let's say things that live in the living room there'll be a big list of those including three seats sofas and armchairs and whatever goes into a living room so this would be a category page so it'll list the most popular you can reorder by size different inspiration and then you'll actually click on one of them cool this looks cool and you'll end up in this product page where these things will be available to the user competitors and product inspiration so both me and the client of do as the writer of this briefer decided that these this is the kinds of sites that we like have a look at habitat and made calm for the kind of look and feel that's kind of the style they're looking for here are the deliverables will give them wireframes will give them a high fidelity once that's tested would you use a testing we'll get all the stuff over to the developer for them to build here's our cost we talked about payments earlier on and there's our timeline so that my friends is what you need to do so that's the kind of this brief as the thing you're going to be doing for the whole course the particular chunk I want you do at the moment is just homepage best page send me a JPEG all right let's get on to the next video hi there in this video we are going to connect our pages up you can see the little wires there we're gonna preview it and we're gonna make our wireframe interactive watch this ready to click the button jumps to a different page go back to the home page it's simple but quite the milestone in our course let's go work out how to do prototyping now in XD alright time to add interactivity we're gonna get this first this button to go first so we can click on the blue button or the text in the middle so I've got it selected and we're going to switch to from design to prototype okay so you're toggle between these quite a bit when you're building our wire frame in a mock-up so design does all the design stuff you can see over here changes I can do fill and fonts and stuff prototype it gets quite simple what ends up happening at the big differences see this like little box I'm gonna zoom in a little bit so you can see it okay this little tab up here so no tab tab this guy is really handy click hold and drag so when they click this blue button it's gonna go to this start trial and you just drag it to the side you can see it can go anywhere in here something goes blue see not blue blue Strega here let it go and you'll see it connects to whatever the middle of the our borders use is dive down here that now is connected let's just see what it does by default so to preview that you click this little play button up here click on it the launch is just like a little preview window and you cuz it's separate from XD it's just kind of separate little window and if I click on it ready ah cool huh basic navigation what kind of trapped here now we can't get back so we're gonna close it down hit the little red box to go back and our case we're going to click on the logo it's really common on a website in an app if you click on the logo you go back to home base so with it selected I can click hold and drag it and it goes back here so we ignored this before okay this little pop-up little window we're gonna leave it all at the moment by default and have a look a bit more in a second because I want to show you how to preview so and if this little play button remember play let me click on it home button goes back play that's fun okay but this window you can close it reopen it close it reopen it if you are like me and you are working with more than one screen not everyone is you don't have to but I'll just quickly show you here on my phone what I do is my setup I've got MacBook Pro it's nice portable but the screens a little small so I fixed that by plugging it into this big LG monitor well do you do some really cool 4k monitors cheap cheap enough like I think it was like four hundred u.s. so it's not cheap that sound pretty cool anyway and so what you end up doing is it's remember we hit preview before okay and it appears oh yes here okay and we kind of have to close it down to get back to XD so what are you end up doing is clicking holding and dragging it over here so it just appears on this window come on and I never close it down just stays open and the cool thing about that is if i zoom in hang on I need to put my hands down for shortcuts sorry sorry sorry alright I need a I need a I need a cameraman following me around I don't have that so I've zoomed in really close here okay I'm gonna go even closer real close so this you see the screen there you see over there it's still at its normal size so you can be designing in here and doing things and actually just checking it over there to see whether it's the right size rather than going back to 100% the other thing is it's a live preview so I'm gonna kind of see if you can see both of them see the giant blue button on the right okay I'm not sure if it's on the left or right in the video and get confused but if I click and drag it can you see it's dragging on both okay so it's live preview which is super handy the other thing I want to show you is something you can see it's quite thin there okay it's not and if I try and make it bigger you might have done this already you're like what's gonna make it bigger and it does this and the black bars appear why is it showing me black bars it's because over here if I go back to design view it's back here in Camtasia of switch back to from prototype to design and I'm gonna move across click on my art board homepage name okay zoom out remember this viewport height okay the viewport height is what's determining they're kind of what you see on that laptop so what you can do is you can adjust this and that will give you a taller box on that laptop the only problem with that is that we're kind of designing for the seven six eight so we want to just keep that little little box window so we can only see that much so know what's up kind of above the fold but there can be a bit painful when you're working so we'll jump back to the cell phone now and I'll show you kind of how it works all right see you back and what we're going to do is go to prototype actually no bean design and remember you can change it over here and viewport you can also just drag this line and this is what I'm gonna do I'm gonna drag that line up and down up and down and watch this up and down you can see so I got too far it's gonna try and put too much into the viewport and your laptop or my my laptop screen can't show it I want to find just this happy medium off of that okay so my viewports ended up being at 10:43 and it's good for previewing on this but I need to realize that remember the fold kind of finished up here so I just need be conscious up there but I can't deal with the black box black bars so I just I just might viewport to help me show on my laptop how confusing was all of that hopefully it wasn't too bad let's jump back out now all right one quick little thing is loads of people asked me in different videos what monitor that is cuz always talked about it so I'm just gonna show you here so you can go off and google it and figure it out if you want to buy it that's the top there is the LG 2 7 UD 8 aw I bet you can't buy that anymore it's about a year old now and depending on when you're watching this video it could be like 20 years old but it'll have family members that you can buy so um don't go buy it you don't have to but people email me all the time about that so I'm just trying to cut that question right out of there alright back to the video alright I apologize I look at some of that video just shot on the cell phone it was average and not a cameraman I hope you found a useful though and last things I want to kind of just quickly take off for this kind of basic prototyping we're going to do like full-on prototyping later on we've got our kind of high and high resolution version going or high fidelity okay so at the moment though we're just going to cover all the basics what we need for our wireframes it's a couple of little things is if I click on this and go to prototype if you need to break the wire okay so say you're like oh I don't want to connect that anymore there's two things you can do the easiest is to click drag drag drag and just let go you know and it will just kind of snap back to its home the other thing you can do I've undone that is you can click on it and say I'd like it to go to this so you're saying I want it to win this button is tapped I want to transition to this page okay which is our start trial and there's the name of the art board up there you can say none and then gets hurt as well everything you can do with that trick is let's say you're in here really close and like we've got two outputs and it's pretty easy you'll have you can you can have hundreds of artboards it's not uncommon what you can do instead of Church rag2 like the hundredth artboards to like it's just too hard you can click on this and say actually I don't want to drag anymore dragging this cool but choose an artboard I'm gonna click a start trial and you can see it's done the wire house we mount it's connected it instead of dragging it's just another way of doing it the other thing is you can kind of see it here if I have black arrow click in the background I'm on prototype and I go edit select all so command a on a Mac ctrl a on a PC just signal you can get is kind of nice you can see all the wires going all at once you like have I done all the buttons it's really easy to see in this case and the one you don't have done is start trial I was playing around with that and the break so you don't have this one so that's the one we do need so start trial goes to the same box so I'm gonna click hold and drag it and connect it and this one here goes back when it's done all right that is the intro to prototyping and using their live preview on a different monitor let's jump into the next video hi everyone in this video we are going to talk about pop-up modal's okay or overlay boxes remember in the last video when you click the start trial button you ended up at a new page we're gonna do something when you click this button you're ready for it's just kind of like pops up over the top fades out the background and we don't have to jump pages it feels a little bit more fluid that's the word it's definitely popular at the moment so we're gonna close it down open it up close it down so we're gonna learn how to do that now in our prototype in Adobe XD alright first thing to do to create a modal is we still need this artboard but we don't need a lot of the stuff in it and plus we're still in prototype mode from when we're working the last video so the switch to design and we are going to say goodbye to you never gonna click on that goodbye to the all the footer so I've just got this last chunk left okay and where should it be all this stuff up there to make sure you get rid of everything you don't need and so what we want to do is I I just want this chunk and I have to make sure you got a white box in the background or something to overlay over the top of the homepage like you saw in the intro and let's just give it a try as is there's a few other things I want to do to it but let's just let's just cut to the chase tend so we're gonna go back to prototype mode and we're gonna say when that button is clicked what's going to happen instead of going over here and going to this tap transition we're gonna go to tap still but we're gonna say overlay and that's the magic sauce what's gonna happen is it's gonna overlay that page over the top of this one excluding the background okay so just the physical things on this page this is just give it a preview to see what it looks like okay give it a preview come on you'll notice by default if I click anywhere it gets rid of it so that's something that just happens by default a couple of things happen there one is I did a shortcut to open this preview okay so it is a command inter on a Mac or ctrl inter on a PC so it look down your keyboard the Enter key sometimes it's the return sometimes it's got just a little arrow on it okay so hold those down that launches the preview which is cool and let's all have a little look at this thing so so you'll notice is a dotted line so the solid line shows a transition then this one here is an overlay okay and the other thing that's happening in here is that it's going to that page it's dissolving which is fine it's got everything else that's perfect weight ends up happening to this page if I click on it you'll notice this little icon this little icon here says whenever when anything else is click just go back to not the page next to about whatever page you got it from so hours are called return to previous outboard so if I click the start trial button on like one of the hundred other pages it's gonna load this page and when I click off it's gonna go back to that original page do you get what I mean so it's not going back to home page it's going back to wherever you came from which is really cool sometimes that can be turned off though like I've broken it where it's just disappeared like that you're like how do I make that happen again so you on it and you say tap which is perfect and you go to this one that says action previous outboard and then it turns into that little return button then goes to that couple other things I want is I want that little cross because cooking anyways a bit weird for people scare go back to that wires uikit okay for the wire frames I've closed mine down where are you wise okay and I'm looking for the cross I could go to Adobe marcador materials but I know it's gonna be in here it's gonna be easy enough to find curl his across is across I'm going to break it apart here so I'm gonna right-click it ungroup symbol grab that cross jump back into my other documents and I'm gonna put it in the corner here and because I've used that blue like that we had in that first one it's just made it easier I have to recolor everything every time I'll show you a trick for recoloring at all at the end of you are like man hit that blue so hold shift down make it a little bit bigger now it's gonna be my little cross even though you can click anywhere I still feel like you need a button actually click so preview what's the shortcut command inter or control enter on a PC click on the air-cool ha close it down nice one of the things I like to do close it down is zoom out is I'm gonna grab a big rectangle because if you saw at the beginning it kind of grayed out the background okay there's an easy way to do that just grab big old rectangle give it no border give it a fill of our black and then just lower down the opacity of this thing and then go back to your arrow tool like arrow right click it send it back all right so we're going to give it a preview there's gonna be a couple little issues we need to fix so previewing and the we thing is it previewed from this page you might already run into this where sometimes it's previews from the homepage and sometimes from this so what ends up happening is if I have nothing selected so my black arrow just click in the background it's gonna default to this homepage why because if I go to prototype and I rise zoom in in the top corner here can you see this little home icon that just indicates that if it is not sure which page you mean okay it's gonna start from this little home icon you can change that you could say start trial could be my home so that's the default but it's a bit we'd go back here the way to override that and what we did there by accident is if you click the outboard name start trial you're kind of telling a mix T just previewed this one for me even though I haven't set it as the home okay and if I click it it's gonna start from there if I have nothing selected it'll start from their home screen okay so what's wrong let's give it a click kind of half works and it's kind of in the middle thing you like I went into the top bits and the middle bits gains a little bit weird so let me show you the two things that are wrong one is it's the this first option here if I go back to design remember when we're doing my crazy cell phone footage we changed the viewport height we should probably just switch it back to matching the both of them because that's the line that I need right when I'm previewing so I'm gonna copy it and go back to this it's up to you they just have the mesh doesn't really matter if you've gone for the shorter or the taller of the viewport Heights okay I was going to go back to that original one where we're dealing with the three six six wide in seven six eight just so I'm aware that that's the you know that's the line that I can't design underneath or at least a lot of people won't see what I put under here unless they scroll there's gonna get rid of part of it let's preview that back to my kind of like skinnier model but that's okay if I click on this kind of works they're still at top chunk super here and I'll show you why that is so if you go to prototype and I click on this and I click on my button you can kind of see it here this big green thing okay it's gonna grab that and jam it and start it wherever the top of those green boxes so what I want to do is close it down can you close it down I'm just cooking on the blue box and grab that and just move it to the top okay so instead of being kind of hot part the way down I've just dragged the cinder bit to the top now if I preview and I click on this kind of covers the whole thing here we go cool huh I love pop-up modal's you might not like them it's definitely a phase that the internet isn't and I'm in ok it's just a way of instead of jumping through like 20 pages it allows you to kind of jump you know you still be able to see where you are you can go back to it and you don't have to have this like completely separate page to jump back and forth just it feels like an extra in a less extra step even though really it's not just a trick so shoot for login screens just something that's quite small definitely great for like help boxes there's you know if you click on the little question mark to give yourself a little hint it can be helpful and the trick we did today as we put under design we put a big black box and we just lower the opacity down and kind of covered it up to make it really stand out against the background alright friends that is it for this video I will see you in the next one alright it is class project time again back to the maynooth furniture so you've done class project one where you made your homepage in your contact us page we're gonna do basically the exact same thing as we did here okay I want you to prototype using prototype mode and connect these two pages from your own Maynooth one so you're gonna have a home page plus a Contact Us page and you can just say whether you want to do this whole and pop-up and it's normally referred to as a modal okay that pops up over the top and and yeah connect it up so you can go back and forth when you've done that I want you to send me a screenshot or add it to the assignments here or the comments or share it with social media and the way to kind of prove it or at least show it's quite cool demonstration for your clients as well to see how this all connects so if you go to prototype mode and go to edit select all it selects everything on that on every app board okay and it just gives you so there's little wires that run everywhere okay just gives you kind of a cool little I don't know wireframe flowchart type thing take a screenshot now how do you take a screenshot on a Mac you hold down your command key your shift key and for and you get that a little target nothing really has happened yet until you click hold whoops gotta get rid of that little shift command for click hold and drag it out see if that's you you might not have heard that but it took a big kind of snapshot e sound okay and what will happen on your Mac is on your desktop now will be a JPEG I've got mine going to a special folder called screenshots but there it is there I've got that done so on a Mac select all then command shift for drag box around here that a little snappy noise and you'll have it on your desktop on a PC not really a PC person I used to be but I've listed them here it turns out there's like a few different ways so you either hold your Windows key and hit print screen and that will take the screenshot or on some versions of Windows you hold the Windows key and you hold ctrl and Press print screen print screen is often tied up in that above you're kind of cursors or run your arrows keys so receiving file - is print screen there's another one where it's if you're on a laptop I think if you're hold your Windows key hit the if in the function key normally down the bottom left of your keyboard and then hit print screen one of those things might work and you'll end up with a folder called screenshots inside of your pictures folder so go to my documents pictures and there should be a screenshots one in there if I'm wrong please drop it in the comments so that you can help other and Windows users I'm not a big Windows user so I hopefully one of these ones work for you once you've done it share it with me share it with a group and it's more you might get much feedback because like you know the wires but it's kind of just keeping you accountable before we move on and of course to practice your new fancy XD techniques all right to the next video hi everyone this video is all about working with groups and isolation mode there's just some quirky things that happen with groups inside of XD so let's cover them now so the first thing is we're still in prototype mode let's switch back to design mode we're going to make a group and then work out kind of some some tricks for working with it so let's grab our black arrow let's draw a box it kind of starts out here and drags across all of these including the text okay you'll know you've got it all when you can kind of move it all in one big group so what I'd like to do where they're all selected you're going to go to object and they go to group ok so command G or control G on a PC and now it's a group everything that really changes is I don't have to kind of be as careful when I select I can grab any of this blue area and it's all selected but you know what a group is and you're like there better be more for this entire video not much more but let's have a little look at working with groups so I'm gonna zoom in come on three it's a good one in this case it's gonna go around the whole selection and what I'd like to do is I don't I want to say I want to switch one of these and want to switch example and around with pricing so instead of ungrouping it moving it and grouping eking you can go into what's called isolation mode and it's a fancy name for just going inside the group diving inside you do it white double clicking so gonna once I get the whole thing but if I double click example you can see there's weird little lightly colored cyan box appears around it okay and it just means I'm inside of it and what that means is I can move this within the group okay so if I move it over here where is something I can see it can't see it you can kind of see it down there like the white text against the grey background this just says I'm still in isolation mode because there's that box around it but if I click out in the background here okay so you can work within groups without having to ungroup them that's I guess what I want to get and through to you here so then when I'm working with symbols in the next video it's a little easier so double-click them again put them back and I want to switch these two around so I want to go you over here you have the same grouping your grouping them to come back out just click anywhere outside the box and that is isolation mode is he not lined up he is not lined up as he it's a bit higher okay I'm gonna use that one alright that's it you can dive into groups and come back out again without having to try and regroup them all and that seems like a simple thing here we've got a really simple wireframe but when you get into some more detailed multi card you eyes with the repeat grids and all sorts of fun stuff later on know that you can dive in and out makes it easier alright on to the next video hi there this video is all about making symbols symbols are just objects that are connected together and they're really handy for things like footers and hitting navigations like we've got here you can see it's on all of the pages watch what happens when I let zoom a little bit if I adjust this logo here notice what's this one over here and I'll drag this one over here you see and you know just when they all go and adjust you can see how beneficial that will be when you've got lots of pages they're all using lots of shareable features symbols easy to make easy to update let's jump in now and work out how to make them alright first up what is a symbol all the symbol is is it's kind of like a group but what we do is we create a symbol instead of a group and it means that when I use this navigation on lots of different pages when I update it because it's a symbol that all update so you can see how useful that is when you get to something like this where you've used something on lots of different pages and instead of just copying and pasting it and trying to update it all manually you can update one update the symbol and they'll all update so let's work out how to do that now so first up we need to be if you're on your layers panel switch to your assets panel little icons down here and there's a competition who's got the most random symbols in their symbols library I've got one because I've been quite good throughout this course I've been deleting the symbols that I didn't need write in the comments on the notes how many you've got okay surely it's gonna be more than one two anybody three its competitions who's got be like the worst so before we go any further I'm gonna have nothing selected I'm gonna select everything that's in here right-click it and delete it where do those come from again just to make sure you're aware the person that made theirs wires I forget who made this but they have created lots of symbols in here okay and when you copy and paste them in they come along for the ride so let's find symbol go through one of these if I copy it and paste it you see it just appears over here my symbols library okay so delete all your symbols so we're gonna start fresh slate we're gonna click on this everything that you want is part of the symbol we've made a group already you don't have to make it a group but it is it's all nice and lock together to create a symbol you just go over to here make sure you're in your assets panel symbols at the little plus and there is our first symbol it's called symbol for we're just not very exciting I'm going to call top nav top nerve okay and that's a little icon of it there because it's that long thin blue thing it's a little hard to see but you get the idea right you notice one of the differences is can you see it's got a green line around the outside where it didn't before it was blue and the real big perk now is if i duplicate this page because I need a new page and so remember you can go to your layers panel have nothing selected right click homepage and go to duplicate there's the last time I'm gonna do it or you can see their duplicate is command D on my Mac I'm gonna do it my way the rest of the course I'm gonna zoom out a little bit I'm going to hold down my option key on a Mac Alt key on a PC and just make a duplicate I want to get rid of all of this I'm gonna unlock these wrong shortcut down command L or ctrl alt on a PC to unlock the boxes and over here I want to rename it double click it let's call this one dashboard hey return you can now rename it over here okay if you're on this layers panel or you can double click it over here so I've got our dashboard and the cool thing about is cuz we duplicated it it's got the symbol top nav on both of them now let's say the client comes back and says actually Dan we don't like the word login means we're gonna use sign-in or let's say like I don't know I go through problems of like is it login I know take includes me to be log space in but you see lots of sites use login and is that more like it's all about the users not about I don't know my grammar in English is terrible but I have arguments about what you should use and say the client comes back and says actually it's sign-in even though you know they've decided through testing that the audience will prefer sign-in and that's cool and you notice how we got in there it was just like we did for that group kind of skipped over that a little bit so it's a one big unit but if I double click it to go inside I get that green halo or on the outside and I can adjust it mmm if I when I get out of it I just click on the outside so I've adjusted my symbol but what's happened over here it's have a look it is still logging ok like yeah didn't he say that that's what symbols are for okay what you need to do is once you've updated it you can tell it you can say actually you my friends you know right you and I'm gonna say push overrides what that means it's going to push this override so over over in the original which used to say login and I've changed it to sign in and push those overrides to the other guys click it and you'll see over here it's now sign-in some things don't require you to push overrides overlooked and physically moving things doesn't watch what happens it's mainly just text you can see both of them okay a little hard to do on your video because it's gonna be quite small but hope you get the idea can you see this teeny tiny squiggle of a logo I click it I move it can you see it's moving on both of them.we so physically moving something changes on both of them if I go through and click on this blue background and change the color of it you can see it changes on both its when you're dealing with text and texture means where you need to push overrides now the way we generated the second symbol was by copying and pasting the original homepage and let's say we don't do that because let's say I want to grab all of the footer okay I want to convert him into a symbol so back to my assets at the little plus this one is gonna be called footer you notice that this guy's not okay so I can make changes to this one I double click did pick a different color it's not changing because remember we only we only kind of made this symbol now this version over here is not connected so I'm done I want to delete that and the way to do it is we could use our trick where we just hold option on a Mac Alt on a PC to get a copy or you can drag it from the symbols library here okay so goody assets panel and grab the footer just drag it off either way someone's got a green line around the outside you are good to go now what does the things should be symbols like these icons should so be symbols because if later on the client comes back and says that's not good I don't like the design of that you'll have to go and find every instance of it so you click on this now set plus okay and this one's going to be I always start with icon - and then this is an image so you've got a list of icons over there the trouble is is I need to bend him and duplicate him just best to and start working with symbols early on in your design rather than you can't fold these back in later because it's there's no point and so yeah anything you feel like it's going to be reusable and you want to update convert it into it's simple you can update them easily by double-clicking it and going inside of them unless you're doing text if you update text you need to right-click the symbol and go to push overrides all right those are symbols we're gonna do some hike or symbols later on in the course when we get a bit further because you can connect them between documents and we can go down the rabbit hole of symbols which we'll do later on when we get a bit more advanced but for now it is time for the next video hi there welcome to this production video and if you see any of the video titles throughout this course as long as it may be another one or two production videos are just videos where I actually have to make something like this didn't exist in the last tutorial and we need it going forward but it's nothing very exciting it's a blue box with text in it so you can skip ahead and just do that by yourself and I'm gonna leave this video in here for the people that are new and just want to see how it gets done and any tips that I do along the way if you're gonna skip along the text is hidden in your exercise files it's called a left nav there's all the ticks you need you could put in random text though big thing you need to do is just make sure it's a symbol you can see I call it left nav over here but it's a short video you could follow along or you could skip it let's get started poor not alright first thing is we're going to create a big blue box I'm gonna grab my rectangle tool I'm going to practice my shortcut for showing me the columns so I can see the edge anybody remember what it was I want to see that big kind of cyan : you need to make sure that your artboard is selected first command shift and hit the apostrophe key if you like what's the approach of your key was he talking about is under view it's this one here so that's the kind of command shift and whatever their key is on a PC it's control shift and that key cool so I want a box that goes from about here all the way down actually all the way down my page I'm not sure how long it's going to be you end up resizing the pages all the time it should snap to the edge if it doesn't grab your black arrow and to see if you can adjust it again watch snip okay and I'm gonna have mine you can't change the default at the moment okay if you're like man I wish it wasn't always having this great order and a white fill you can't change that at the moment as far as I know and trust me I've looked but you might be in a later version of it and they might have adjusted that for you cool so I'll use it just to make sure I've got the edge here and turn it off again now I have no art board selected so I spend my time going command shift ' and nothing happens so you've got to click on it and then do their shortcut and disappears all right and next thing I want to do is there's nothing fancy you're gonna happen in here I'm gonna grab one of these guys fancy I'm gonna go into this copy it and if I paste it now it ends up being as part of that symbol there's no what I want I want to copy it out so I'm going to copy it click outside of the box so it's deselected now paste it and it kind of comes out and it's not connected to that symbol or you might describe the type tool it might be easier knows left nav I have the text in your exercise files or is the exercise files there's one in there called text and fonts there's one called left nav so if you camp bothered typing it in we can't spell like I can you can double click paste I don't make sure mines left aligned that's perfect and what I'm gonna do is I'm going to hold down alt grab this have another one another one how many do I need not very exciting tutorial I know three four okay any four of them and the reason I'm not putting them in is one text box do you remember and because I don't want I wanted to be separately clickable when I start doing my prototype I didn't even count before that seems like enough so I'm gonna speed through it now ready city speeding paced and we're back the reason I just don't jump to this cuz I don't know I want to show you there it's a couple of things couple of shortcuts but I also want to make sure that you turn this into a symbol okay so I'm gonna select a everything okay make it a symbol and I call you a left nav left nav and that should be us short little video totally skippable just make sure you've got this little grouping going over here that was boring the next video repeat grids you're going to love super exciting hi everyone welcome to the video about repeat grids repeat grids are one of X DS like secret SuperDuper awesome powers watch this I've made this little card here I'm gonna make three of them all four no three and drag them out and just kind of repeats forever really handy for repetitive like search results or these kind of cards for this dashboard make some quick and easy you can adjust them really easy but you can go into them and make like those simple changes can you see this one's 3000 that one's 1000 really handy let's jump in and see how to make it alright to get started with our repeat grid we're gonna do it on the dashboard I'm gonna borrow this text here copy it click on this one paste it this is gonna be my dashboard page dashboard dash board he's a left align text even cool so we need to draw the first unit okay and we're gonna be dealing with these things called cards cards are just a term used to describe like a nice little unit so let's have a look at this example here so this is one of the examples in your exercise files under UI kits and it's have a look there's a bunch of cards in this one so see this little unit here it's got like so look who is a bit of 1mm typical a nice typical one it's got like this white box got this little like graphic and the top images it's got a like it's a unit it's a reusable repurpose Abul unit okay they're called cards and this one here is quite an is a card as well they're having lots on cell phones as well but we're looking at web ones at the moment so let's make our own little wireframe card and it's gonna be ugly remember no design just some basic stuff so I'm gonna draw out a white box I'm gonna grab some text elements I'm gonna zoom this up because it's not very exciting you all right we're back just made some basic text and actually this is gonna be dollar signs go and the one thing I will note in there is that I did use the resizing ticks for the remember as long as it's point text you can use a black arrow to do that it's kind of cool and I made it bold that's it so I've got this card and I want to repeat it you can copy and paste it that works okay black arrow copy paste by the repeat grid is one of the neat tricks there XD has and what it is is you select all of your text with your black arrow then grab this one here that says repeat grid in the top right corner and you just drag any corner any side at the bottom or the top Riddhi city it's just magic you're like how magic is that just duplicate I can do that but look does it down here as well you still still partly impressed where it gets quite impressive is there kind of spacing watch this I've done nothing I'm still on the same arrow but when I start having my cursor between these guys you can start to see oh look at that okay so you can start say that one I'm gonna drag it can you see that a little number over here easier there so I'm going to get to say let's say I want them to I'm gonna turn on my shortcut command shift ' okay and or control shift apostrophe on a PC okay I'm gonna drag it in so they line up there you see how useful letters and it's 20 ok it clicked on it and you can see 20 at the table I can't really point it it yeah so I can just this one to 20 I need to see this side there so they're both at 20 so got there's a nice even spacing if you've ever done the distribute centers fun game in Illustrator or InDesign or any program that's not fun at all so the repeat goes just we're all handy for that where it's also really good is it's kind of like a symbol watch this if I move it if I double click it to go inside this first one you see they all are connected I can do little changes so I can do things like this one here is now 3,000 they don't update so you can do some like this one here is called stats this one's called forecasts you can do you know ticks adjustments and they can all be unique okay and you can still users repeat grid if you need some more watch this click out take it back on and it still is repeat grid you can see it's repeating it lovely but you can do some little ticks demeans to make them all kind of look and feel individual we'll do some more hard core and repeat grids later on when we start using things like images and pulling from CSV files it gets you can be pretty hardcore with it but for the moment it's just a really quick easy trick for doing repeating anything we could have done it for this text over here but I wanted to do it for something a little bit more exciting like these cards one thing to do though is so you do need to physically you know you need this one to be over here and this one to be different you often you'll need to ungroup these things so I'm gonna click off in the background coconut once there's an option up here it says ungroup the grid okay and that just kind of breaks it all apart so it's no you can't do that repeat grid thing anymore it's still one big unit so you can ungroup it right click ungroup and then you've got all these kind of like different parts to it now which is quite cool so you might just use the repeat good to kind of get it in there duplicate them quite a few times get the alignment or nice and then ungroup them and work away I'm gonna undo that because I want it to be back to this repeat grid just case later on I'm like actually I need a couple more of these or I need to adjust the spacing cuz I've played around with this left now how many do you need in this example to follow me doesn't matter up to you cool so that's the introduction to the repeat grid let's get onto the next video hey there in this video you are going to learn some of the issues that you can run into with using Adobe XD especially with resizing symbols you're gonna learn how that's a weird thing that can't be fixed but we'll work out how to do it the other thing is when you're working with the P grids sometimes they're just disappear you're like what do we do now okay so we're gonna work through that in the class plus how to add an update to repeat prints all right buddies let's jump in okay first thing we're gonna do is just duplicate our dashboard we're gonna end up with that courses page so double-click the name the top here causes I'm going to bin our dashboard and I'm gonna rename this this one it's gonna be called courses so instructor can log in check their stats and see what courses they've got made and edit them that type of thing that's what this is meant to do anyway now I'm going to show you a couple of issues that you'll get around to you might have already run into them already so and I'm gonna create like a little repeat grid here the first thing I'm going to do is draw a little shape for our placeholder video I want it to be an image like a little thumbnail so I want to grab the image and we might have it in our assets panel we do there I can't imagine I drag this out it's a bit big and I want to shrink it down and that is gonna run into our first problem so symbols are awesome the problem is there can be different sizes no no you're like what I'll show you a link at the end where you can go to and request this feature from Adobe you might be in the future and it might be totally doable it's not at the moment so what ends up happening is like I want to resize this right I can't resize it until I like double-click it and now I'm inside that symbol and now I can resize it okay remember we have to turn our responsive resize off we did that earlier in the course so I made it smaller okay you know I come out of it by just clicking outside and that's curved resized oh what's wrong then go back to the original though back at the beginning here where are you these guys got teeny-tiny cuz they're all connected so I'm gonna undo undo again oh you can't undo that even extra problem no you can't that's gonna keep undoing every now back in the beginning now back to the original size alright so and what do we do basically it's just there's no real good right you unmake it not a simple so right-click it say ungroup symbol and now it's not as simple anymore though and not connected so I'm gonna shrink it down and this just happens to be I might just probably live with it the biggest size but I guess I wanted to show you here is a problem so now I can resize it I could turn it into like another symbol I could say actually there's a icon image large and small but how much how helpful is that now kind of loses its just be my small version why not just do that all right so that's one of the problems the next one is I'm just gonna skip it here well get the editor to zoom this forward and cuz I'm just gonna build some stuff I need to create our problem first so I'll do that and I'll explain it in a sec so I will see you in a zippy sick you all right you back and so you're playing along you're gonna have to do this and so create your little thumbnail have video image thing just a bit of sample texts nothing just like a placeholder and I grabbed the tick check mark from the wires web that we've been using and the trash is just in your exercise files in the images and icons and there's one in there called trash so we do it and I want a few of them right so I'm gonna use our sweet new repeat grid so selected them all repeat good please they go green you just go wham I love that okay so we've got lots of them cool now where is the problem this is the problem you run into is I actually want this two things I want to do I want to add to this repeat grid okay I forgot give me nearly just kind of show you I guess is I want to add like an edit button there's a turn it on and off there's a delete but I want there to be an edit button so you can go into the course and do submit it so how do you do it first of all let's bring in the Edit icon so I'm just gonna go to my import so file import there's one in here called edit okay so it's in the exercise files not in images in icons I've got a separate folder icons let's go to edit and bring in the SVG there it is there okay what colors are gonna be and going to switch it to the blue to match everything else cool so I wanted to get in here and repeat so how do I get it in there I grab it I go edit cut okay it's gone and then I go double click to go inside and it's like what you did with symbols repeat grid shares a lot of they're kind of same sort of functions okay so you double click it to go inside and you don't have to doesn't matter what you've got selected in here as long as this kind of like thick green line appears I can just go paste you can see it appear to all them and there's just the way of getting stuff in afterwards okay if it wasn't in the originally cool so I'm gonna have it edit it'll do cool so that's how to get stuff in there not really a problem where the problem lies is there's more of a trick to kind of add to repeat codes the problem is this is actually I've decided I want this to line on the edge of my grid here okay so just under where it says start trial and these all do we're on line so just like to go inside didn't get it double-click don't click on something easy that was easier to click on some inside my repeat grid and I stick doing you guys I go just come over here okay they all just disappear it does a bit weird so you've got two options now I'm gonna undo that so the option might be just actually let's just click on this ungroup the grid delete all these guys and just do it properly you know get them lined up first i've ungroup them all I'm just gonna coming them back now I can make a repeat grid fine but that's a way of doing it another way is this it's a bit of a not sure it's kind of like drag and shuffle was what I'm calling it dragging it shuffling alright so what we want to do is we want to say drag it to the right you're like what that's why you can't drag it to the right because there's just more of them appears but if you drag it out kind of we you need it to be and then come back in here and find the gap so you drag it out and then you kind of just shuffle these guys across okay until they're out of the picture of where you need these fellas to be then I can drag it back in to get rid of them bye guys but there's enough room now for these fellas so now I can double click it drag it across they move them across and sweet and I made it have I made it look easy kind of and I always find how like if you if you are following along like I'll give that a go seems easy and you're like men reckon my head does Rick my head too so often I just ungroup it inside again and so yeah just so you know there will be times we like I just want to move this to this way you're like I can't because there's the edges in there so I'm just gonna extend this out but it's just some issues when it comes to repeat grids it might be easier just to ungroup it right-click it I'm group grid and delete everything you need and just start again so that is int we learn how to add new things to an existing repeat grid which is cool and then we just kind of identified one of the problems of dragging it kind of to the right where the it was earlier defined plus we look to the problem of symbols okay and the weird thing where you can't resize them and also at the beginning that I told you where to go to go and vote for this thing I've talked about it before I think so adobe uses this thing called user voice okay user voice is a way that we as users have a voice okay what means we can go in and say hey dobe that thing and really needs to be fixed and and if you go to Adobe XD comm nope Adobe XD dot user voice calm and do searches in here do a search down here for this one it's called scale and resize symbols individually it depends on like whether you find that a big deal for me half it's not my heart so my biggest problem with XD it's just one of them but give it a vote okay you got a login okay or sign in with Facebook or Google and what they do is they just look at all the ones that have votes and start making adjustments on the ones that have issues and the other cool thing is often you can find workarounds down here there'll be some of the Adobe people jump in and say hey there's a workaround it's not great but this one here it's kind of a thousand one hundred and seventy four votes alright that's it let's get onto the next video hi there this video is all about some prototype tricks okay we're getting quite close to the end with our wireframe for at least our desktop and there gonna be some things we like man that's taken a long time or it seems very exhausting I'm gonna show you a couple of tricks to fix that watch this really navigation on all pages all linked are so good I think it's good anyway let's jump in and work out how to do it alright we're coming to the end of our prototyping hour at least our desktop will do the prototyping and app in the next couple of videos but we're coming to the end of this and I want to share with you a few tricks for prototyping because if you're working on a large document man there could be some big issues with by just a lot of repetitive tasks that can be fixed with a few little tricks so we're in design view and let's say that I want to use this start trial button again I'm gonna grab it grab both of these copy it and I need to use it on this one over here I'm gonna paste so we're gonna have this like start trial button down the bottom here not for a good reason really just I want to show you so by copying it in design view if I got a prototype now it doesn't do anything right it's just a button that I've got again then going link right I've got it go zoom out and I guess actually you go and link here now but we already did that right so to show you a different way of doing it it's pretty easy and you can see the button already has that on it right but if I if I copy and paste it by a design view it only grabs the design if I grab it by a prototype so just be in prototype okay I've clicked it both of these I've copied them it'll bring both the design stuff so there blue box and the text but also if I paste it over here you see it brought my lovely little animation as well or my overlay okay so it brings both of them this is super handy if you're like I'm gonna copy everything from a page bring it across you might as well do it in prototype mode you'll forget I do like it you have to relink everything so another thing you can do is when you're duplicating pages get in habit of not doing in design view even though that's the more natural place to be doing it grab prototype and let's say I won another courses page our dashboard page I don't have any prototypes done on this one it's fine see the home page we want to duplicate it I'm gonna do it down here just for Google's okay remember we've been holding down the option key on a Mac the Alt key on a PC but we've been doing it in design view the head go in prototype view see this one I duplicated I've got some of that navigation already going there's not much going in here but you can get the idea right if you've linked the entire nave you don't have to redo it every time you duplicate a page so it's to prototype now the cool little trick you can do is the navigation is the big one you end up having to redo loads what I end up doing is I'm gonna make a duplicate of the home page okay this is just gonna be my never hold a page it's not gonna go out to the client I'm just gonna use this for myself we're gonna get rid of everything on it including the empty boxes there's nothing on here right so what I'm gonna do is I'm going to copy and paste using prototype view to this guy here because what I want to do is I want to grab the logo and when that's clicked it goes to this page okay when the pricing I don't have that yet example is going to go to my dashboard okay so it's too far away so I'm just gonna use a little arrow when it's clicked transition to dashboard go and start trial is definitely something that already works so when that is clicked it's going to transition it's actually going to do the overlay to start trial and it's gonna go landed in the right position cool the reason I do it on its own page you're like why don't just do on the homepage and then use that because the home page has one problem is I want to link to the home page from this and I can't do it because this is I would like you to link to and you can't link to itself okay so whenever you copy and paste there say use this is your like your default you copy it you update it you copy it and you paste it on all these it's not gonna link back to the home page so I have this kind of like throwaway page and all it does is hold my navigation it's gonna hold both that and their left navigation on it giving it probably a little bit too advanced I realize as I'm explaining I'm like this might be a two to hard core at the moment if you do you like man he's baffled me just forget what I said in the last like minute or two okay for the people they're like mmm this is actually helpful carry on we'll do a little bit longer before we move on so we've got our that links there that looks to that other links to that it's perfect so I'm gonna show you another cool trick is say so I'm gonna burn all these because otherwise I have to go through and click on example and link to there it's an example into there so it's a bit of a pain so I'm gonna grab all you you fella you've gone you've got all of these and so this is my like one that I've just updated I've done at exchange or link somewhere else or added a new button I'm gonna copy it and you can just click on the name hit paste click on the name paste good my name paste remember we're always doing in prototype so all the links come along and that works not when you've got like a hundred pages though okay I'll show you another cool little trick is I click on the word here hold shift click on stat trial I'm holding the on that shift key the whole time clicking on all the course names and then watch this ready paste butts in the limit at the same time it's great for foot is and navigation and yeah I'm gonna do the same thing with this left hand now I'm gonna grab you my friend copy yet come over here paste it okay this is gonna be courses page is gonna go to my courses page dashboards gonna get my dashboard and it's not making like if you're like that seem like much of a change it's a whole lot nicer we've got all of these pages built out oh so now I can copy up grab them delayed this guy goodbye delete this guy goodbye both of these hit paste you either like there was only two of them what do we quickly to link them well they could still be the case oh I might have just gone a bit too advanced too early I'm gonna leave it in the course well like 22 videos in now we're getting the swing of things but that's it some tricks for prototyping if you take nothing else out of this course is if in doubt just copy and paste using prototype not design because you get best of both worlds all right see in the next video hi there this video is all about navigation tricks and tips it's also just identifying some of the problems okay some of the things you like why wouldn't he explain us a good way of doing that sometimes this just isn't we'll go through them now ways that I get around them and if you've got bitter ways I'd love to hear them drop them in the comments I'm always looking ways navigation is probably one of the harder things to do in XD navigations one of the I guess troublesome things I find using HD to try and go fast anyway the one I use the most is basically what I do is if I need to go to a page that's far away there's no like jump to page button which is annoying okay so all I do is I help command down on a Mac ctrl down on a PC we've done these shortcuts before but I'm going to show you how I use them to move around oh come on zero I click on the page that I want to get to I click on anything in it go come on three rooms in on it and then I come on one so we're on a PC it's control all those things so it's a bit weird so I need to go back to the first page ready come on zero click on something come on three one three is just to close but at least you pulls your like focus all the way over to their app board then you can head on command one not nice I know that's the way I get around if you've got a bit away zero three one works for me anyway now the real big thing that I found speeded up my workflow is my mouse okay so not everyone's gonna have this you might be working on a laptop with a little touchpad kind of squirreling away with that I do there lots but next here real super helpful when there's a mouse with one of those wheels in the middle lots of them ever I'll show you I'll jump out onto my cellphone and I'll show you my one at the moment because I quite like it it's pretty cool and but that's probably the best one to go in and out okay in and out up and down so naturally I'm just gonna be on this page here and if I use my scroll wheel up and down okay it just moves me up and down the page which is cool if I hold shift though it goes left and right which can be quite handy you can just kind of like zoom across from holding shift so nothing held down up and down with my mouse and then shift left and right where the real magic happens if you hold down the option key on a Mac or the Alt key on a PC use you might have seen me do this in the course it's just really nice like so commands here oh and all you do is point your mouse to where you want to go hold down the option key on a Mac Alt key on a PC and as scroll we scroll it back out goes to we have your Mouse's and that's probably the biggest thing I just I don't know how I discovered them like just I started holding down keys to see if it would work works on lots of programs as well so other Adobe ones point where the mouse wants to go and then zoom in and out now I'm going to jump to my cell phone because this particular mouse if you like ooh that sounds like a good idea all your mouse just isn't doing that as food it's kind of like going and doing in small bits I'll show you the one that I've got real quick everyone we're back to a bad audio and bad cell phone footage but I wanted to show you this mouse and yeah it's nothing fancy where is that I found the name of it it's called this the M 720 triathlon multi-device Mouse you're pretty that was got a different name you can buy that by itself you don't need the keyboard I bought both of them because I like bluetooth and I want it and it connects to I can have it connected see those buttons there one two three and see that one two three on this one I can have it connect to my computer if it's on one button if I have to I'll turn it off it connects to my phone by bucho's and both these two and it's weird it's cool you can use your cell phone using a keyboard and a mouse you get a little cursor and all and and I find it really good for things like Instagram where and I want to like type and Instagram and not try and smash away at the tiny keyboard I've don't never works for Mackey left oh sorry an iPhone I'm using Android I've got a pixel three Google's phone so it definitely works for that anyway the main reason is I like it is because it's really handy for using XD so let's jump in XT that's the scroll wheel I was talking about right and normally does this right you kind of just go up and down just and Sandy but and this one here has a cool function where normally it's this like little clickety click click click thing like this off though watch this it's spins watch it watch it you see it spins on forever and that's really handy handy and when I'm zooming in and out okay I'll jump back to us actually you saw it in the last one I can't hold the option key down on this zoom in but it's going up and down it means I can just kind of click it and it keeps ooming in or sliding up or left the ride and that little wheel stopped spinning and real handy how handy you might find it they're not that expensive these things and anyway that's either store I'd give you my little tip all right that's gonna be it that'll be it for this video as well we will jump into the next one I'll see you there hi everyone it's back to our class project okay so you're gonna be working on your maynooth furniture project and there's gonna be kind of two main things we're gonna learn use some of the tools that we've learned so far plus you're gonna build a couple of pages so I want you to first of all go through check your assets panel and just delete anything in there that shouldn't have been in there you know how they're if you copied from that wires out boards you might have brought in stuff unintentionally so clear it all out and then make your top navigation in it foot cymbals for me give them names then I want you to create a new app board called your category page okay so it doesn't have to be living room and I've just given you a suggestion here so and remember we had a home page and then you can't just like dive straight into products okay you could link to the home page the products but often people want to go and look at bedroom or kitchen room living room dining room that's her stuff and so pick one of those categories can you're gonna have lots of stuff in there so let's say it's the living room you're gonna have a list of things that go in the living room like um cheers and couches and I can't think of anything else but have that list because I want you to practice using your repeat grid so make one kind of listing either a card or remember the cards we did were like these ones here on the dashboard okay so and kind of nice little cards or it might be listings this kind of way more like a category listing so do that on that page and what else we grid so also lists out everything you think should go on this page so I haven't given you specifically what should go on this categories page so have a look at some existing sites it doesn't have to be other it can be any sort of e-commerce site but you might as well look at stuff that you know in terms of furniture shops and just see how they do if you go to one of if you know if you go to Ikea and go to their kitchens what's their kitchen page what kind of gets listed on these pages so you get an idea of what potentially should go in there you got to remember to keep Katherine in mind as well member our persona so what would she need to make a decision so it might be very different like Amazon's gonna have a lot of different stuff on that kind of like category page then say something like habitat or IKEA or eBay so we're gonna have like the more good different users using it so and keep Katrina in mind to decide what should go on that page so that's that page the category page you're also gonna create the product page so that would be okay so homepage click on living room alright I click on armchairs or I click on an armchair from that page and I go into it okay the little three seater and I go into it and what would be on this page so again go through some of that other links up here or your own ones list out what you think Katrina would like and what would help him make a decision to buy move out goal is for her to be able to buy and get it delivered to our house so list out what should go on that product page and then add that to your y frame once you've got those pages okay category page and then a product page you can pick any product and prototype them all together so just get all the links working so that you can actually test it and click through from the home page to the category page to the product page get all those mock-ups working then using some of the techniques we've used earlier take a screenshot maybe for the wires and the pages you've done and share it with us remember on this page or in the assignments or in the comments or on social media remember Instagram I am bring your own laptop and on Twitter I am Dan loves Adobe also remember there's a link here in the word doc you'll find it one of them for the Facebook group and the other thing you need to do is if you upload one you've got to jump in even if you don't upload one jump in and give somebody else a thumbs up smiley face or some some criticism constructive criticism okay or is what you liked about it we're all getting started and a lot of people are doing an isolation kind of in their spare time or you know that it's just nice to jump in and help out other people as well I'll try and jump in as much as I can as well and that's it that's class project over on to the next video hey there in this video we're going to mock up a basic part of our app link it up look at some of the specific transitions that you will use for an app and some of the things you need to be aware of when you're working with other people as you like it's alright let's get started okay so to create our phone we're gonna use the app board tool okay it's the second from the bottom okay a portal currently iPhone x10 is the latest one or eight okay so I'm gonna do it for the iPhone six seven and eight they use a quill standard kind of height and width and the iPhone X has that kind of like little chunk taken out of the tops up to you may click on it and it adds it I'm gonna add mine just down to the bottom here and there's no real reason for that you might have them in a separate document gave me any trouble is you have to copy and paste bits across bottom so there's my first little app board you might be in the future and there might be a nine or eleven or twelve okay obviously just use that you can also see over here there's watches there's all sorts of other things going on over here Microsoft Surface anyway so we're gonna double click the name at the top and we're gonna call this one onboarding so this is actually what I like to do is I'm gonna put app really big at the beginning just so that when we were musing my transitions it's easy to differentiate my app upwards from the website ones and cool I was gonna add a few graphics to this I'll get the editor to zoom hid because all I'm gonna do is draw a few circles and stuff sauciness ik you all right I'm back do some circles skip next what is onboarding I figure I better explain onboarding is often that's that part where you launch an app and it kind of tells you it either hypes you up and kind of gives you features or it'll explain how to use the app and in less cases is just gonna be hype and we're gonna have some onboarding like and your instructor HQ will save you time and will earn you money those types of things so I want a few of them so I am going to duplicate it a couple of times and it's gonna be fine we're gonna have onboarding number number one number two number three mmm like you you'll be kind of tempted at wireframe stage you're like who adds some actual stuff in here but it's best just to keep it all very vague otherwise you end up with discussions of not so much the kind of you know wireframe discussions you end up in language discussions and actually I might pick just some of the real basic colors here we go yeah and I'm gonna switch these around I want you to have the full of bloop you to have the fill of weight and then the last one just so everyone knows we have their ads white blue there is a point to this video okay and some specific stuff to do with phones or at least apps I do one last page it's gonna be my kind of like login page I'm gonna go steal in a second and that one's gonna be blank ish for the moment just a placeholder here until I go and make a proper login page at least go and steal it cool one of the big differences is with the prototyping so in this case I'm gonna switch the prototype and actually we're gonna start using a shortcut for that on a Mac it's actually weird it's the same on both if you hold ctrl down on both Mac and PC believe it or not so the control key and hit tab just toggles between design and prototype design prototype instead of clicking these two or changing it up here okay so and what we're do now is um I want to prototype and win this next button is clicked okay it room is the last thing you did I don't want to overlay I want it to when it's tapped I want it to transition but I want it to slide or push left okay so an experiment with both of them to get the feeling like they both kind of have different feelings of what's going on so and let's have a look at slide left always get slide left and slide right wrong one of them it's one of them see the slide left of slide right so I'm going to test this game and let's give it a preview remember command enter on your keyboard to open up the preview and it's not going to go the right page how do we get it - you can either click on the name and it will go to whatever page you have selected to preview or you can set this and that will be the new default and that's what I'm gonna do so okay so I'm gonna now command return or control return on a PC and now I can go next and you can see the difference instead of just doing a transition it's kind of sliding it along to get the idea it implies that you can slide left and right and on your phone you can click and drag which we'll look at later on your ceiling they're kind of like overlap sitting slides over the top and the push okay has a similar sort of feeling and let's go push left push left left preview you can see the whole thing goes across it's up to you it's definitely more phone centric though okay we get to the last page and what I'll do is I'll get skip to go to skip to the login page and now we're gonna use our sneaky trick we learned before is I'm going to copy it and as long as we're in prototype I can say delete delete grab both of these and it paste you can see all they all go into a lab or does nothing to them and but they retain their transition so now I'm gonna preview skip don't want skip I did I do want skip that so it just skips to the in page so that's one of the differences when you prototyping a wireframe on a phone you wouldn't do that when you put prototyping the website it's just something functionally you can't do on a website there's you can yeah you can do overlays okay but you can't get a whole site to push to the right I've never seen it anyway I doubt you can do it technically you couldn't in your flesh days move all flesh next thing I want to show you is this login page and I'm gonna switch back to design view and I'm gonna open up the so file open in your UI kits so if you go to exercise files you are templates they're wireframes there's a special one for mobile so we've been using a wireless web why is mobile you know open up and some like this one's super good and stupid detailed check it out come on so there's UI elements signup onboarding newsfeed all sorts of cool stuff already made so what I'm gonna do is I'm gonna grab one of the sign up ones I'm gonna grab the sign up seven and copy up and I'm going to jump back to this paste it and it's gonna end up almost lined up nicely alright so now what I will do though is I'll grab all of it cuz I'd I've already linked everything to the login page so I just want to kind of like drag you across here okay there we go if you are dragging things across from one artboard to the other can you see it doesn't want to snap okay I just drag up onto it anywhere let it go and then start dragging it around it'll snap now a couple of things if you are borrowing UI kits one is you're gonna have a messy as it's panel anything you come across there arrow came across it's in there somewhere it's hiding down here and so you could decide whether you want to keep that and there or not and what the big thing is is that to keep this thing looking from a crazy-big it's pretty something I see but it's a pretty detailed right and from just keeping it consistent what I've done is they've trimmed lots of these book you sees a little bit hanging off the bottom this one here is hanging off the bottom they're just left the initial view which is not quite right like there's all this stuff down here which if I preview let's have a little look switch back to my one shortcut command inter control enter if I skip along to the end I can't get to that bottom stuff like there's no way of scrolling down to it and so all they've done is kept it kind of hidden to make that view look consistent really what you first thing you need to go and do is I can find it there it is there click on it and just drag so click on the name and just drag it down right so you need to find the end and remember it doesn't snap to it it's gonna get close so now you can still see the initial views there it's a little dotted line it's the same as what we had with the disk top view you can't see 667 you don't want to change it especially on a phone okay and but no on a preview it I can scroll up and down cool huh okay so that's gonna be it for our app at the moment we're gonna build more of it out for just a couple of things to think about when we are mocking up this wireframe for an app and we can push left or slide left and if you're using other UI kits you're just got to make sure that you extend them down as long as they need to be and ensure that their viewport that stays the same all right let's jump into the next video hi everyone this video is all about testing on our phone ok so we build that little mock-up wireframe of an app and we don't want to like we've been testing so far using this remember we went it was a command inter yeah I apologize when I'm facing this way you can hear me when I'm facing this way not so much the microphones are there but anyway and we've been testing just on the computer remember this thing ok and just kind of skipping next and that's cool and works but just gonna phone us so much better right so what we need to do is you need a couple of things you need a phone you need it can be Apple or Android it doesn't matter so an iPhone or an Android phone you need to have it plugged in you need a cable so you can do it wirelessly at the moment you plug it straight into your computer now be careful with the cables I've had a trouble like not all cables will carry data some of them are just charging cables if you cut a cable and it's like taped up and was bad to start with it's probably not gonna do this thing so just make sure if it's not working find a cable that looks legit okay there's not although you can't tell to plug them in some of them all work so you've downloaded the app you've opened it up and it'll ask you to sign in with your Apple ID note your Apple ID it'll ask you to sign in with your Adobe ID so sign in you'll end up a screen looking like this and the one you want to use is live preview so it's kinda middle one I click on that and the cool thing about it is it'll start opening hey the screen that I have selected here so I'm gonna close down that and you can see there's the blue thing and there's a matching on the screen watch this I'll click the other one oh the gray one then there's the black one is it working there's the black one okay so it's it's totally live so what I'll be doing is I'll have this propped up I just got my little stand here okay and I have it sitting here and I'm constantly open remember my desktop view is over there cause the open on my laptop and my phone constantly opened there and the cool thing about it is especially when you're picking things like font sizes and your logo size you need to really see it on the phone not not on this on that on a monitor here so it's live as in check this out I'll move it around ready moves around on the screen and moves around my phone okay I love it and what else can you do and this is totally usable so remember we added that prototyping before watch that's next next okay up and down cool huh so we're gonna like if you were testing this with client okay and you want to show them how it works you just bring your laptop along plug this in and they can actually start using the wireframe I don't test the wireframes very much but and when we get to and what do you call it later on in the course when we do a high fidelity version this is a great way to do user testing little tips is the main when is three fingers three fingers on takes you back to kind of like a screen where the last cue things like you can browse the app words rather than just like trying to navigate through them you can actually just see them all you can save screenshots and share and all sorts of other stuff so three fingers is the only real main one getting it back to the demo mmm now there's times where this doesn't work when is the cable one is if you've got there's two things right you've got a Mac or a PC so that's one of the things you really got one of those two and for your phone you've either got Apple or sorry an iPhone or an Android phone it's one of those two there are some others I know but they don't work okay but most people have got Maxell pcs iPhone or Android that is a Mac this is an Android works perfect that is a Mac if I had an iPhone it works perfect okay so max good you got a Mac works on both Android and iPhone if you've got a PC or Windows PC okay windows mention it's a Windows PC it'll connect to an iPhone perfect do this live plug-in thing if you've got Android though no worky okay so there's a workaround which I'll do in a second but if you if you don't have a Windows connected to an Android you can skip a lot okay if you actually everybody hang around because it's actually quite useful because the problem with this is it's connected okay but if you want to have this on your phone so you can be walking around and like meet somebody like hey ah man you should really look at this app that I'm building okay you can kind of make it offline and it comes along with the phone it's not you know you're not gonna see it update straight from the screen on the ear but at least you can take it around with you so it's good for everybody you can just take a nap around and it's totally kind of usable but it's the only way if you've got windows to Android all right so let's jump into the computer now and i will show you how to get that working all right jumpin okay to make this work doesn't really matter if you're a poor ol windows person with Android phone and actually they keep changing like they're updating the software all the time you might want to double check before you go off and do all this because it might actually just work by now there might be yeah might all work but even if it does this is a handy way of not having it connected to the phone remember not using a cable it means you can walk around with that cool little mock-up on yourself so to do it all you really need to do is or the big thing is file you need to go you just save yeah save as you need to put it into your Creative Cloud Files folder on your machine so cuz you've installed XD you're gonna have this file somewhere on my Mac it was just installed on the favorites here on a PC I'm not exactly sure where it is you can check it by going to the Creative Cloud app on Mac it's up the top PC it's down the bottom go to your preferences okay which is a little dot here and go to preferences and in here click on Creative Cloud so you're on general credit floud click on files and it should tell you your folder location so in my case it's and I'll show you where is it credit card files its and all of this stuff so one of my users Daniel Scott sitting in there you must do a search for try and find it and maybe add it to your favorites on a PC it's gonna be in a different place but this is where you want to save it so I'm gonna go file save as already saved mine okay I've saved it in here click save and what's going to happen is your cray flower app is gonna start sinking I'm gonna go back from preferences then the bottom here I'll say sinking sinking sinking sinking sinking there will be little icon change for this it'll look like it's kind of doing something and eventually it'll be uploaded to the cloud and that's it what you can do now is jump back to your phone I've got it in my hand here after mention to load it up and you'll get the option it'll actually default to something called XD documents we've been using live preview if you're still stuck in live preview mm but give it a three finger click and you'll be able to kind of code back out of that or way back to the home screen okay and on the home screen this is XD documents you might have to refresh it by dragging kind of down on it to refresh it or closing down the app and opening up again and I can see my app there is there I can open it and I can use it just the the exact same way as using the live preview okay I can click through it and start working with it the only difference is is that I can't do the live updates so say I make a change here on my screen and I go through and move that over there it's not gonna live update what ends up happening is I have to do a save it'll have to sync and then it will be available so it's not like a really fluid thing but it's fine for doing a big bulk test it's not as exciting as like the full on next II computer looks fancy as well people walking past and you're doing stuff on your screen that's updating on your cell phone how cool all right I hope you found that useful let's move on to the next video hi everyone welcome to this video of spot the difference what's different between this mock-up in the last video yeah three seconds did you get it it's this thing here it's a status bar okay so we've added this for a bit of realism when we're mocking up our iPhone versions okay so I'll show you places to get it from and yeah that's what we're gonna do let's go get it and add it now alright to find out Laos tennis icons a couple of places for iPhone which we'll use here and I've downloaded it for you in your exercise files if you want to get it yourself because I'm gonna use the iPhone 8 it's gonna be the future when you're watching this so iPhone 9 or 10 or 11 what have they call the next one you might want to get that icon they haven't changed for a long time so you might still use it but you can see in here file UI kits and you can go to this one that says either iOS okay for the iPhone versions or Google material off you don't windows you can go there follow the link download it but I'm gonna cheat you can cheat - because I've downloaded it for you in your exercise files in UI templates and we're gonna open up apple I can hide it a little bit I'm gonna use the iPhone 8 options okay and open it up so in UI elements open that up and yeah there's a handy group of stuff that we're not gonna use too much in the wireframes except I want all of this stuff okay so what is it called what is it called you like Oh whereas this call it's a status bar but you might not know that language you can click on it right-click it say reveal and symbols it'll actually see there it kind of highlighted it so it's called the status bar I'll call it as notifications okay so the status by here and if sometimes it's nice to know what Apple calls things versus Google okay and you can see here this is the light status bar so I'm gonna select it copy it move the cross and I'm going to zoom in on this guy paste it there it is there now it's linking back to that original am i that worried about it me some reason it does bug me that it's connected to another artboard it's useful when you're doing it but when it's connecting to something else I'm gonna make it a local symbol so it's just kind of stuck here or you can ungroup it to break it and to make it your own symbol there it is there light status bar we can use our trick to copy it across all out boards and remember it's like that at once boom boom boom paste it's not the only place to go get it it's probably the easiest right and but remember you can go to the Adobe assets marketplace and start searching for it now that you know what it's called okay so look for the status bar and you might look for the one for Windows or Android easy peasy now you'll be like why are you adding that your phone's already got it especially your testing on a phone it doesn't actually show up so when you are testing on your remember the last video we were doing in using the live preview actually deletes well it hides everything on your phone and just shows you the mock-up and if you're trying to go for a like a realistic look you want to have those status bars at the top there but you don't have to but we need it for this next thing because I want to show you how to do a fixed position in the next video so basically we're doing it so I can show you something else so add yours and I will see you in the next video alright by default if I preview this login page I scroll down watch the status bar goodbye ok so we just want to fix it super easy to do click on it click on that one then preview it job done easy peasy and I want it to do to all of these fellas if you copy and paste it that little setting will come across or select them all turn it on and we'll do it for the navigation as well it's kind of cool so I'm gonna zoom out ok grab you you I'm holding shift and just clicking these guys once and say fix positioning now I'm going to set my homepage back to this fella where is he we're gonna move to prototype what was the shortcut anybody remember it's control tab on both Mac and PC so the home page so when a preview go to the right place and you can see your nav is fixed to the top ok so that is how to do fixed positioning nice quick video let's jump into the next one hey there welcome to this production video it's just a video where we need because the moment we've got kind of parts of these we need all the rest of these so a dashboard or login screen and we need to connect up all the wires we're not gonna learn anything particularly new in this video we just need these bits to carry on so yeah you can watch you can watch me unlike double speed if you know how to change the speed of the video because it's not super exciting you can even skip it I'll allow ya but if you're hanging around let's get started alright first up I want this app I want change this is actually the signup page quarter the Logan and this one sign up okay and duplicate it holding down my option key on a Mac Alt key on a PC log in and I want bits and pieces from this so I want to ungroup it command shift G on a Mac ctrl shift key on a PC grab you deleting stuff dragging stuff around don't click the edge drag it up here we go down a little bit nice and this little line looks like it kind of it's probably not strong enough you have to let's 5 at the mock up sign up log in a couple of things this is a group okay so I'm double clicking it to go inside or you can ungroup it's probably easier I want to come down there we go instructor HQ and I'll talk like these get rid of these guys and click on this paste it oh that was weird because I had the text selected when I copied it if you're in here and copy it you just grab the text but if you click it when it's not all highlighted and copy it it's very different so if you're finding that that's because they don't highlight the text and copy it alright next thing I want is my dashboard oh thank you dashboards dash board and this dashboard actually has enough none of the stuff on it I want to get some tics like here I'll copy that this is actually gonna be the instructor dashboard and would spell can't spell again all right I'm gonna grab this part you copy down here paste way too big it's not far for the right size though I think go in there by luck how many of these will line I want a few so I'm gonna double click the name oh just click the name once even check it down sort that out so that fits in there let's pretend it doesn't yours is a bit big so and what I want to do probably the easiest because it's in a repeat grid we can't do like responsive even though it says we can do responsive resize we can't at the moment so I need to ungroup it grab you guys been in mine fit I'm just showing you what you would do if you didn't because a nice little trick is I have them all selected ok and make sure responsive resize is on auto it's on it's a little now a little slider to the right and it's Auto on watch this when every size that can you see does cool resize e things maxi I like a loop and remember if it's one unit which is I can use this option and remember we start using a shortcut shortcut school if you can guess what their first little carrot is there and on a Mac it is the control key so there's command control see come on control see actually not even sure what it is for PC you'll have to hover above it and see really handy shortcut alright back to our repeat good grid grid goodness it is late is 11:30 p.m. on Sunday night okay so a little bit tongue-tied there let's do one more thing let's grab it from the wires one we had so we had remember wires mobile and open that up and UI elements I'm looking for the menu either those lines or as other one they they use like see this one here with the three lines one short it's mean to indicate I mean you so I'm gonna double-click to go inside copy it jump back to my other paste it in grab it it's hard to grab those three little lines okay and it's gonna sit up there little we're gonna use that later on as well alright so those are all the bits we need I'm gonna get it to connect all up so switch to prototype member control tab so switch to prototype mode and I'm gonna select all to see what I've done okay so I get to here and when that one's finished I'm going double clicked it because it's kind of in part of a group I don't want that whole thing to go and it actually would be fine I'm gonna double click it to go inside the group and I'm gonna say when you finished go here tap transition I'm gonna use that whole app version well instead of a dissolve I'm going to use we used we didn't decide which we're gonna do I'm gonna do slightly if it looks nicer and I'm gonna do the same thing for this and it will remember the last thing I changed it to which is cool we're gonna do menu a little bit later on when it pushes it across give it a quick test to make sure I've got everything actually we have to get this signup button that's fine when you click login' no not the text so have it select it as I like a little there's a couple clicks as a group so click it once double click keep clicking you eventually can select the tics I just want to click it like that so get the little arrow so I can say when login button is clicked jump to sign up and sign up button over here jumps to login and this one's gonna be weird it shouldn't be slight left this one should be slide right I'll show you what I mean give it a preview I click on sign up who sign up preview and you can see when I go to login it makes sense to go that way but when I go to sign up it needs to really go the other way because if it doesn't you'll get this when your preview when you're testing and if I use if I left it as slide left just feels real weird which this stop will sign up preview and login I go back this way it goes the wrong way okay I want you to toggle left and right so that's all right friends those are all the components we're going to need to carry on with this tutorial that's what we need these little production videos just need I need this stuff to keep going we haven't learned anything new we've practiced some stuff right but that's gonna be it it's gonna be it for me tonight as well I'm gonna go home have a sleep and I will see you in the very next video you'll be able to check you'll be like he sounds heaps better in the morning or you'd be like men remaining some coffee in the next video count 1 alright bye now hi there in this video we are going to show you how to share your prototypes online email its people they can give comments you can give feedback it's quick and easy let's learn how to do it now in Adobe XD alright so it is time to share our wireframes outside of our machine we've been testing locally ok hitting our command return or control inter okay and kind of testing it here got it all working got the designs going so my flow is I will see in this off now I'll create a link which we're doing a second and I'll send it to a colleague somebody that knows me and we can go through and they're not you know they're not particularly good in terms of user testing they're not the right people but the good is to test that functionality I wonder so next thing after that as I want to send it to the client and I don't want it to be broken or something not working or something quite confusing so I send it to them I send it to Malcolm or Taylor and they'll go through it for me and give me some feedback on like hey you've got to do this sword that doesn't make a lot of sense so hopefully you've got somebody you can use for that and if not use the kind of Facebook group of social media stuff we've been using in the class projects to get some feedback and but yeah it is ready to go like you can test this with actual users so remember like say your Maynooth project human with furniture and say Katrina you could find a user that's kind of like Katrina and you can get them to test the wireframes feedback and a lot of people do that I don't I don't find I've yeah I don't find it as useful I like just to test the high high fidelity versions I work with the client with the wireframes to make sure all the structures in there before I go off and start picking fonts and colors and designs in UI design that's where I use the wireframes for quick duty so that when I'm building the kind of nice version that is gonna go for Katrina I can add all the right marketing material the right colors the right feel for that user but I don't often test the wireframes up to you either way we're gonna send we're gonna create the link you do it up in the top right here click on this like little box with an arrow in it and you click on this first one is there's publish prototype cool give it a name I spent my wrong okay it's taken the name of my actual file up here and so you can just use that definitely give it versioning number case of version 1.0 because you will do loads of updates you can decide to allow comments you can get it to open fullscreen I'll show you that in a second I don't like opening fullscreen it removes the comments and a few other things hot spot hence I'll show you you can require password so you can create this public link as weird you're a public link and a private link the public link is just in a URL you can email to anybody you like and they can add comments if you had a password they need to have a password to be able to work with it the alternative game which is a little weird you can create a private link click on this this is does the same thing generates it uploads it to the Internet but you actually have to list out via email addresses who can actually access it so they'll get an email saying Daniel has sent you a private link click here to access and they'll need to log in with that same email address that you sent the link through if I send it to Malcolm at gmail.com he'll have to use that to log in that's what the difference between a private link and a public link but you can add a password anyway I guess the passwords easily shared amongst people kind of but private link has to go to those people anyway I'm gonna create the public link okay this may take forever this may be quick I'm in a pretty slow satellite broadband which is average at best like six up come on little satellite broadband is not much images in this so it shouldn't take too long I'm surprised that's pretty good so once it's done nothing much happens right it's these little icons are kind of weird the strange place for these okay you've got three options this first one here is for embedding the code on your site so if you're not too sure what embedding is or how to use an iframe on a website ignore this one okay it's basically you can kind of have your own website and kind of put this in it so you might be able to brand it okay so I don't exactly often just one here's the one this is the money copy link click on that and it says link is copied okay this one here will open it up in a browser just so you can see what ends up happening what I want to do now is show you my flow so I'll now create an email and just paste that link in there okay so I'll open up my Gmail and I'll say here Malcolm here's the URL and just paste it in there I'd love your feedback now what happens on their side let me open that up so I'm gonna open it up and you're out pretending I am a new person so this is what they see and I love what XD have done here alright so this is what they will end up in so they'll need to do one of two things they need to sign in with their properly sign in or just as a guest if they properly sign in they can use a variety of things pretty easy either their Apple ID or you can explain to them just use your Facebook or Google either way you need to sign in if they don't want to do that they can just sign in as a guest you can see it down here super easy sign as a guest give themselves a name I'm gonna be Danielle today I am NOT a robot what is a bus you'll want to play with me bus bus bus bus we're verifying all right definitely not a robot alright submit and we are ready to go so what ends up happening on their side they can add one of two comments so they can add a general comment to saying love the design which they don't because it's just blue blue with simple things but you'll notice that will be a comment and that's just a general comment doesn't really you know just kind of vague for the page they can be more specific okay so you can say like and should this be should this be login and you can click hold and drag that little pin and say you okay so you can ask questions about specific things hit submit you can see in here now that one matches one makes it really easy to kind of pinpoint stuff and actually talk about those specific things other things they can do in here if they click around can you see those buttons cannot if they're like trying to click on stuff that doesn't work can you see it actually highlights the things that actually do click OK so that was that bit back here where we see it allow hot spot hints ok sure hot spot hence you can turn it on and off they could cycle through it if they don't want to use the buttons because the actual buttons work right I can click on this and it works which is cool and all they can cycle through it go back to home and that brings up a really good point if your home is set to another page it's likely to be right in here we might have set our home to the app because we're working on it and what I mean by home is if we're in prototype a zoom in at the top here ok and I click on not that one there this is my home page I've made that the home so that's the first thing that's going to load in that link if I change it to down here okay that will be the first thing loads you'll also notice that because I set my home to up here do you notice in my link here I've only got four pages it'll only upload the things that are connected so it'll connect this page with start trial it'll have the example because that is linked so if you have a page like this fella here he has outgoing links but nothing going to him from the home page so the home page is kind of like boss whoever you set to the home there will it'll upload everything that is connected if you've got junk just lying around it will not be part of it you can see down here isn't so how do you get round that what you'll end up doing is one of two things you'll have your app on its own XD document so you're creating new and just copy and paste this over so you'll have to another way of doing it is I've generated I set this at home I've generated my published prototype okay got it going what you can do is I can click on this you can have more than one same outboard okay so mix the file I've set that to the home now I can say actually I want to create a new link so this one here I should have named Clinton's so they're both called instructor HQ mock-up so what you should do is call one instructor HQ mock-up home website and one called app so I'm gonna copy that link and I can send that to somebody else let's have a look you can see here this one loads up with the app and because these apps don't link to the website we only see these guys so now you might be like okay how do I deal with both of these over here because it is kind of weird and only really identify as one okay so the last link you did I can go through an update so the way to work with more than one link like we just did okay you can close it down and click on this and this one here it says manage published links click on that and it would take you to this page these are all of my mock-ups that have uploaded okay there's the first one the website version and then it's the other one which I named the same bad can you rename it from in here you can't I'd been it and do it again okay so here you can click on it and I can permanently delete it okay and I just reload it using it giving it some better naming but here's where you kind of work on all the different parts okay you can see different mock-ups that I've got and yeah from within here you can actually just click on them and say copy link and share them this way for you as the creator it's nice to actually just be able to go into these things instead of clicking on a little tick there just click on them to open them up and you end up looking at the very similar view okay but this is you looking at it so let's actually open up the other one this is the one that I wanted cool so you can see I'm now back being Daniel you can see Danielle that's not a robot has added some comments and I can come in here and say actually that's really awesome no this is gonna be sign-in I can also make comments I'll make comments in here as let me just add that one and I'll make comments in here if I am the owner just explain some stuff so maybe like hey this button doesn't work you can add your own comments you can say actually love the design thank you resolve that quick it has been it other things I haven't shown you was full screen okay just go full screen which is pretty nice okay the problem is is getting out of it you have to descale so I find if they're new to it sending it to the client I won't do full screen because they don't know how to comments they can't see them another thing I want to show you is what ends up happening is when people do add comments watch how they come to you you don't actually as a user they don't come to XD it's a kind of I wish they did I wish they just loaded in here is like little notes but they don't so it's quite it's fine what happens is they email you you can see here you have a new email you have an email from Adobe XD saying you've got a new comment on this mock-up you've made from Danielle and a couple of notes from them you can click on it open it you'll end up with the exact same screen here you can see what they've asked or done a couple more things I want to show you is in XD let's say and they've asked about that button you go off and change it right and so we're gonna go to the design I'm gonna go inside and actually we're not gonna change that because it's gonna update all of my thing I'm gonna give something a little simpler okay I'm gonna change this they say the buttons not big enough okay it bends big now so I'm gonna save this and I'm gonna go into this and published prototype I mean you got to decide what you need to do okay so I'm gonna update the link and that way anybody that's using that link in revisiting that page will see this new change you can create a brand new link okay so there will be some people with the old version version 1.0 you can make another version called 1.1 and click new link I wouldn't want that I just want that updated so update it I'd go back into here and just resolve the thing that said this buns not big enough I click resolve and that would be it there'd be a nice big button in here so that's how to update it one of the other things is so you doing it at first design couple of things is you definitely want to make sure that this is the home and then how do you share it so you can do it we saw it back in the website version it was just a small square in a millivolt browser to get it to work on a phone and there's a couple of things you can go into here and say I want this to open fullscreen okay I'm gonna update it then you grab that link and what you need to do is tell the person who's testing it to copy and paste that link directly into their browser so if they're using an iPhone I'd be into Safari or Google Chrome which is not super smooth okay if they are you know or get them to up say you send them an email okay send them an email with the link and say just tell them click on this link via your phone's email okay so if they're using email that's both on the desktop on their phone click on that link via their phone and open up in a browser full screen they'll be able to test it and add comments all right so that's it for sending stuff off to get tested the simple cut-down version is click on this like prototype click create public link and just copy the URL in email it to people ask for feedback you get emails explaining what they've done you can go and resolve it update it change it yeah that is how to share a prototype all right let's jump into the next video hi there in this video we're gonna create a video of us interacting with our mock-up so instead of sending them like an interactive mock-up we are gonna do it and just record ourselves both doing it and talking over it I just send it to them it's more like a presentation here's the video here you see me kind of interacting with it there and a pause it so make a video send it to them and demo what rather then get them to kind of explore alright let's jump in and work out how to do it alright so we want to make a video of ourselves using the mock-up kind of just walking through it and talking through it so that we can send it on to the client so instead of them trying to like maybe muddle their way through it all you can just kind of present it ok so to do it I'm first of all going to move to prototype and just make sure my home button is set to the home page and then basically all you need to do is you preview it using your normal shortcut okay so we've got this up and what will end up happening is I'm going to shrink it down so you can see a bit easier now this works only on a Mac well at least this option here does there's a workaround for Windows but for a mech there's this little icon so basically click on it and you need to remember that it's doing two things it's recording your screen but also recording your what you're saying okay so remember that so I'm gonna work through in a hi welcome client person there's a mock up you can start trial these I can fill in their details click on the start trial button and you just talk through what you've done and why you've done it I closed it down and when you finish you hit escape we can click the button again and magically XD will save a video for you I'm gonna stick my on my desktop and put it in here this one's going to be cold and you use the same name as that that's about it right and that will end up with an mp4 that we can share you can either email it if it's small enough or you might have to upload it to YouTube and share a link or Vimeo now the window users might be going like hey I don't have their button well you might do at the time of this recording it didn't was only a Mac only option there's a workaround for Windows you can hold down the windows key down your keyboard hits G I think you have to have the latest version of Windows and it will launch the kind of native recording software that's on Windows and then you don't just record this window records everything on your screen but that can work just as well and it's just really handy when you are like instead of having to ask people to work through it you just kind of like display it for them I signed some clients just they don't want to I think just just yeah just let's get through this process and they want to be presented with ideas rather than them kind of like exploring the other thing it's useful for is when you actually get to user testing so you go to a meeting you meet with somebody who's never Katherine for maynooth furniture so you find somebody who's like our user and we sit down in front of them and we kind of present them with this mock-up to start working with and you just explain to them I'm gonna record you click record and ask them to talk through their their experience ok and it can be used to go back to the client and say look these these are some of the results from our user testing so it's easier way to do that all right that is recording your interactions it's getting into the next video hi everyone it is class project time so you have mocked up your Maynooth furniture wireframe I'd like you to create your own public link okay I'd like to give it a name a new prototype version 1.0 okay and I want you to give the link to somebody send it to your mum yeah son your brother just somebody to give you some feedback to say it's part of your class and you're trying to learn and we'd love a bit of feedback and so that you can both help educate them on how they need to do it because good to give them some instruction to say hey here's the link and love you dad comments and then just to see the whole process of new getting comments back to you what how they come back and just so you've got that flow going and also post it in the social group so posted to the assignments here and comments here and also any other social media accounts okay Facebook group is a good one remember if you do post one is to jump it in and leave somebody asks a comment so that's a really important one this one so instead of just a hey that looks great one jump in and sign in and give them a comment because then they'll get feedback from other people in the loop and they'll get an email about it okay and yeah super handy so easy one to do to jump out there publish it get some feedback so you get a feeling of how that works all right next video hi there this video is all about mood boards people never know what I'm saying it's mo OD your mood like happy sad we want to mood for our designs we're gonna build it in XT we're gonna look at inspiration places get an idea of the feel the look the mood before we move on and actually start building our high fidelity mock-ups alright let's jump in right so it is time to start with the high fidelity version of our instructor HQ xt project and high fidelity just means it's got all the images and all the it looks exactly how it's gonna look when it's finished so fonts colors images that type of thing but before you get started in terms of doing the design I find it's really useful to create a mood board first so whether you use this mood board to go to your client and say this is the kind of look and feel that I'm going for you know this is the kind of zone I feel you've communicated to me or whether you just use it personally it'll depend on the relationship with the client sometimes it is pretty casual and you can go back and say hey here's a mood board and do it pretty casually just in an email to see where you're on track sometimes though in a larger kind of job you might have to go back and present concept ideas okay so mood boards will only be used for you personally so you might have to go back and pick kind of maybe three visual themes for them to pick from nelle depend on a couple things budget client expectation those sorts of things so either way it's really handy to start with a mood board just to get your ideas and you know get inspiration now where do you get it from everyone's probably got their go-to place for inspiration could be Pinterest Instagram I use these places so I use Behance dribble and nice with two eyes dribble with three bees okay Behance is Adobe's one it's really good one so the cool thing about it is once you've been using it a little while it says recommending stuff for you that's kind of in your zone and once you're in here so go to behance knit and you can do a search you can say I want to find all the kind of UI UX things I might go in here it's weird you got a search on this top chunk of PS if I go you I click return you can see it's just kind of cool UI stuff okay and you end up just kind of loading you're like oh man I really like this maybe just the colorways or the kind of squiggly thing is you find the bit you want and I just do screenshots okay so my Mac its command shift 4 and it just does a big old screenshot around it and that'll save it to my desktop if you're on a PC we talked about this earlier can't quite remember off the top of my head for a PC or you can right click these guys and start saving the images and paces up to you so once you've so this is one place right we've got Behance dribble with three B's is another really useful place and same sort of thing in here just go through open up loads lots of screenshots and so nice you can do a search I did a search here for UI the cool thing about nice is that once you like it you can say I want to add it to one of my board so you can hit plus and you can say I want to add them too my board you crepe boards and you can add to them there's like a little collection a little group of stuff you say actually I want to add that to it okay so you it's free for the first couple of boards okay and you say I want to add that I want to add that to this pass of HQ board just some random board ahead and then you can open up that board this is a there's all of my boards there's the pace of HQ one okay and I click on it and it will load them up in a cool nice little collection it's really pretty much alright here's my passive HQ board you can see it's got very kind of like even though I thought I was picking random stuff to go in it all has a very similar kind of colorway and very kind of look to it and what's really nice about this is you can export this as a PDF in it's just so very good you can link this to people so you can sin to decline and say this is what I'm thinking and also like there might be bits for you like actually that there is very large and you're like actually I just want it to be smaller actually even smaller hold alt to reduce there you go so holding option on my Mac I can just keep making it smaller until it's like not such a significant part and then you could say that I'd like to be a really big part of the feel of this kind of mood board so this is some cool ways of getting ideas nice as a nice way of getting them all together but what you might do is just do what I do here at XD is and we're gonna just dump them all on the page so that we can always see them rather than being on this like separate website so before we move on and we're not gonna upgrade our wireframe I don't often do this like the wireframe was good and it's been you know clients have proved it and they love it and we need to move on to the high fidelity version you could just start switching out these colors for images and stuff I don't want to do that I want to start with a new document I like starting fresh again so we're gonna start with a new document we're gonna make it this web 1920 again I'm gonna name this our board we can call this one homepage we're gonna save this we're gonna save it to our desktop I'm gonna put it in that same folder but this one here is going to be our eye HQ this one's going to be our high high fidelity high five this one's gonna be version 1.0 I click Save and what I end up doing is I've got almost screenshots right brig done a bunch them okay they are in your exercise files or in images and I just put them all in here in this mood board I'm gonna open that up so there's a bunch of screenshots okay what I like to do is just grab all of them actually grabbing all of them runs into a small little problem I'll show you in a sec so I grab them all and I dump them all into XD they kind of zoom off to the edge there you can see they're kind of zoomed off all that side so you can stick them all so I've just gone it it sticked all I'm just going to drag them all across and I actually know shrink them down remember hold shift to scale them down proportionately that's why I kind of dragged in maybe 10 at a time or five at a time and now what I'm gonna do in Bray out I'm making myself like a caveman move board it's not as pretty as the nice one but it's gonna work and I'm gonna have it small enough so I can see it kind of just up here so when I'm designing I'm kind of like taking notes pulling colors from and looking at font compositions and the hierarchy of type or from these kind of style guides that I've got that both me and the client have gone yep that's kind of where we want to go with this so I find that's move board just up here is just as handy now one or two other places you can look for for ideas especially if you're new to UI design is in the Adobe market so under your Creative Cloud app remember up the top here on a mac down the bottom on a PC go to assets market but it says featured drop that down if you've got a search already going in here you might have to kick cross there go to the featured and go to this one that says user interfaces so there's a lot in here free to use and the cool thing about this is not only is it like visually quite cool they're actually usable things like UI kits in here that you can actually start using the buttons for they're allowed you like to use them commercially I'm scrolling you can see it's just loads of them in here it's just a cool way to go order to head up google and type in UI ket's ki TS and there's ones you can pay for ones you can buy you might use that kind of inspiration to get started cause it's really specifically UI and not only is it just like they kind of home pages it'll have all their nitty gritty like ticks and checkboxes and edits and form fields and has a little bit more going for it alright so we've got our visual kind of idea our mood board going let's move on to the next video hi everyone it is class project time this one is about generating your own mood board form the new furniture so go out look at any inspiration sites you like it could be competitors to the furniture industry or it could be the things like behance or dribble or nice and build a mood board and I want you to kind of stack it in to XD like this just kind of just above it so you're gonna create you page okay brand-new homepage for your high fidelity version of the new furniture dump all the images in and then once you've done it I'd love for you to see a screenshot so do a screenshot of your mood board like this it's kind of like whatever you've got and then I want you to share it via the regular ways okay on the assignments panel in the comments or in social media I'd love to see everybody's theme and it'd be interesting to see how that develops into your kind of final product as well alright so that is your class project go off and do that and once you're finished I will see you in the next video hi there this video is all about creating something called a baseline grid some of you will know what that is some of you won't basically it's lots of squares like this to add a bit of visual consistency with things start lining up allowing the design to kind of breathe a little while you're working everything has its place everything's lined up nicely let me show you how to make one and why you might use one all right so we've done a little bit of this before but we're gonna go into a little bit more detail now especially with the grid okay and something called a baseline grid system let's do the columns first because they're easy and they just kind of recap so no click on my word homepage I'm gonna say I want a grid I wanted to be layout I want it to be I'm gonna turn into one and I want to make sure that it's my 1366 wide okay so then I know I'm kind of within those gaps if you do then want to use a twelve column grid which a lot of designers do you can tow it in there and just use this kind of columns to add a little bit of consistency throughout all the web pages I don't want to add consistency for this particular one and also you can do six doesn't have to be twelve okay it can be for just something as easily divisible okay but I'm just gonna use one now we're gonna introduce this thing called a baseline grid so you can have both a layout and a square grid okay both of them and I'll show you what they are basically cafe zoom in here you'll see that and at the moment I've got a square grid okay and it is for pixel grid okay and I think my colors are the pair City is quite up quite high I'm going to turn it up to really strong so you can see it a little clearer on the video so basically what I've got now is XD Sid every I'm just to give you a guide okay every four pixels I'm gonna draw a little square and it just allows you when you're designing to add some consistency we're gonna cover this more and more because it's it's not a hard topic but it comes more obvious later on when we're working through fonts and a few other things and you don't have to use a baseline grid I'll show you what it does I'm gonna switch to our old version of the wireframe okay and in here I'm gonna click on the name and do the same thing to and on the square grid and and I'm using eight here okay instead of four and what it's gonna allow me to do is can you see there's no there's no consistency can you see this one kind of see the lines here there just don't want kind of the they're just kind of over the place and I'll show you what I'd ended up doing double-click to go inside and what I want to do is I want to try and adjust this so that it's that's it'll snap okay so it's that snapping to these grids so that you've got at least some sort of like consistency across these guys so I'm going to click on them drag them out so he's lining up you can see now there's a bit of it's just one of those things if you're new to design when I first started in designers like why would you bother all the grids then after a while you start realizing there's just so I know when things start lining up and I kind of consistently left and right lined up there's a relaxing of the design kind of like takes a breath and kind of goes hah okay everything kind of lines out which is nice but for a long time I just didn't care but I dunno okay you can see here I want the spacing is you know or this to be consistent with this so I'm gonna go into this one and just bring it in especially are not using columns a grid systems really handy just to lock it all in make sure the types all locked in you can use your arrow key to type it around you start the filming that's just a quick little introduction of what you use a baseline grid for why you'd bother we're gonna turn it on in this vision we're not gonna have it so dark you know what size should it be and we'll look at this later on but basically divide you whatever your body copy size and by half that's gonna make life a lot easier so I'm going to use 16 point and went for my body copy I know that because I use 16 point on everything if you don't know yet don't worry you can change this later on but then I'm using 16 points so I'm gonna divide it by two which is a pixel squares and I'm gonna turn this down so it's not so deafening visually deafening I'm gonna introduce a couple of shortcuts I might have done this before but it's command shift and apostrophe will turn on the layout okay so these kind of like giant column if you do just command apostrophe it turns on the grid so you ended up kind of toggling that on and off quite a bit so I'm just holding down my command key which is control key on a PC and it's clicking the apostrophe key and and just actually those on and off all the time to get things to line up if you can't get yours to work with that shortcut it's whatever appears these are the two that you want on your computer and you can see in my case just command apostrophe all right so I've created my columns I've created my grid system what I'm gonna do is well before I go is I'm gonna turn it on and I'm gonna set it I'm gonna make this the default so whenever I make a new page it's gonna do this same with the layout I'm going to make this the default so that every new page has this if you decide to not move on with the grid I'll understand it's okay but for now let's jump into the next video hi there I hoped you enjoyed the video my name is Daniel Scott if you would like to do the full course there'll be a link in the description for that please give this video on youtube here a thumbs up really helps me and what I'm doing also consider subscribing to the channel I release a video like this every week for your viewing pleasure alright bye you

Channel: Bring Your Own Laptop

Views: 2,614,853

Keywords: ui design, ui, ui designer, ui design 2019, ui designer 2019, 2019 ui design, 2019 ui designer, ui vs ux design, how to become a ui designer, user interface design, adobe xd, adobe xd tutorial, adobe xd course, adobe xd cc 2019, how to become ux designer, ux design course, free ux design course, ux design tutorial, user experience design, free adobe xd course, free ux course, free ui course, free ux tutorial, logo design tutorial, free xd course, free adobe xd

Id: 68w2VwalD5w

Length: 227min 12sec (13632 seconds)

Published: Mon Aug 26 2019