Ui Ux Web Design Using Adobe Xd

The UX brief & persona for our real life project Preview 11:22

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. I thought that would be a nice way to kind of explore XD, through an actual project.

Wireframing (low fidelity) in Adobe XD Preview 01:58

So we're going to start wireframing in XD. Now wireframing or low fidelity is the term used often. High fidelity just means the version, with the fonts, and the colors, and the images. It looks exactly like the final product. The wireframing or low fidelity just has some, has one font, one color, real basic layout.

How wide should my website or app be in Adobe XD? Preview 13:06

Hi there, this video is all about working out how wide your design should be. So we're doing website, but this works for mobile devices as well, and apps. How wide should my first page be? There's some easy tricks to work it out, let's get started now.

Working with existing UI kits in Adobe XD Preview 07:49

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 going to do it, we're going to cheat. We're going to start with some other UI kits that are out there. When we talk about UI kits, 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 going to help us go fast, especially at this kind of wireframe stage. So there's some that are kind of built into XD, and I'll show you the way to get other ones from.

Working with type in your XD wireframes Preview 09:09

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 were like, "Man, what am I going to learn from this type of 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.

Basic Colors & buttons in Adobe XD wireframes Preview 14:14

Hey there, this video is all about creating buttons. We're going to 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 core components to our Home Page wireframe. All right, buddies, let's get started.

Free icons for your Adobe XD & UX UI projects Preview 11:45

Unfortunately Adobe has removed the free icons as an extra. Optionally, you can access lots of free icons at www.iconfinder.com

Adding footers & Lorem Ipsum to our XD wireframe Preview 05:27

Hi everyone, this video we're going to do this. We're going to put in our footer and we're going to put in some Lorem Ipsum for our frequently asked questions. We'll 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.

New Pages & Artboards in Adobe XD Preview 04:20

Hi everyone, this video is all about making new artboards, and saving some time, so we duplicate things, we're creating a new page in our website, plus I'll show you how to make an app or mobile website size as well. It's really easy, couple of little tricks in there. So let's get going.

Class Project 01 – Wireframe Homepage & Contact Us Page Preview 11:11

Hi everyone, it is the class project time. It is time 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 step by step is good, but doing it on your own is where the real kind of learning comes from.

Class Project 01 – Wireframe Homepage & Contact Us Page

This is your first class project. The instructions can be found in the following step.

Prototyping & adding interactivity to Adobe XD Preview 08:53

Hi there, in this video we are going to connect our pages up. You can see the little wires there. We're going to preview it, we're going to 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.

How to create a Popup Modal or popup box in Adobe XD Preview 07:57

In this video you will learn how to create a Popup Modal or popup box in Adobe XD

Class project 02 – Prototype Preview 02:54

All right, it is class project time again. Back to the Maynooth Furniture. So you've done Class Project 1, where you made your Home page and your Contact Us page. We're going to do basically the exact same thing as we did here. I want you to prototype using Prototype Mode, and connect these two pages, from your own Maynooth one.

Class Project 02 – Prototype

This is your second class project. The instructions can be found in the following step.

Working with groups & isolation mode in Adobe XD Preview 02:30

Hi everyone, this video is all about working with groups and isolation mode. Just some quirky things that happen with groups inside of XD. So let's cover them now.

How to make & use symbols in Adobe XD Preview 17:19

Hi there, this video is all about making symbols. Symbols are just objects that are connected together.

Production Video - Left Nav Preview 03:52

Hi there, welcome to this production video. If you see any of the video titles throughout this course, maybe another one or two, production videos are just videos where I actually have to make something, 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.

Using the repeat grid in Adobe XD Preview 05:27

Hi everyone, welcome to the video about Repeat Grids. Repeat grids are one of XD's, like secret, super-duper awesome powers.

Updating symbols & problems with using repeat grids Preview 08:54

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 going to learn how that's a weird thing, that can't be fixed, but we'll work out how to do it.

Prototype Trick to save time in Adobe XD Preview 06:03

Hi there, this video is all about some Prototype tricks. We're getting quite close to the end with our wireframe for at least our desktop. And there's going to be some things where you're like, "Man, that's taken a long time," or "It seems very exhausting." I'm going to show you a couple of tricks to fix that.

Navigation tricks & tips in Adobe XD Preview 04:48

Hi there, this video is all about Navigation tricks and tips. It's also just identifying some of the problems. Some of the things, you're like, "Why don't you explain to us a good way of doing that?" Sometimes there just isn't, we'll go through them now. Ways that I get around them, and if you've got better ways, I'd love to hear them. Drop them in the comments, I'm always looking at ways.

Class Project 03 - Symbols & Repeat Grids Preview 04:07

Hi everyone, it's back to our class project. So you're going to be working on your Maynooth Furniture project. There's going to be kind of two main things. We're going to use some of the tools we've learned so far, plus you're going to build a couple of pages.

Class Project 03 – Symbols & Repeat Grids

This is your third class project. The instructions can be found in the following step.

Mocking up an App in Adobe XD Preview 09:40

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's UI kits. All right, let's get started.

How to use the XD App on iPhone & Android Preview 08:04

Hi everyone, this video is all about testing on our phone. So we build that little mock-up wireframe of an app.

Adding iPhone & Android battery & status icons to mockup Preview 03:10

In this video you will learn how to add an iPhone & Android battery & status icons to mockup

How to fixed the position of the nav or battery icons in XD Preview 01:01

In this video you will learn how to fix the position of the nav or battery icons in XD

Production Video - Login & Dashboard Preview 06:45

Hey there, welcome to this production video. We need a dashboard, a login screen, and we need to connect up all the wires.

Sharing Wireframes for comments in Adobe XD Preview 13:32

Hi there, in this video we are going to show you, how to share your prototypes online, email it to 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.

Recording your interactions via video using Adobe XD Preview 03:13

Hi there, in this video we're going to create a video of us interacting with a mock-up. So instead of sending them like an interactive mock-up, we're going to do it, and just record ourselves.

Class project - Wireframe Feedback Preview 01:21

Hi everyone, it is class project time again. So you have mocked up your Maynooth Furniture wireframe. I'd like you to create your own public link.

Class Project 04 – Wireframe Feedback

This is your fourth class project. The instructions can be found in the following step.

Mood Boards & resources for Hi fidelity UI design in Adobe XD Preview 07:43

Hi there, this video is all about Mood Boards. We want a mood for our designs. We're going to build it in XD, we're going to look at inspiration places. We get an idea of the feel, the look, the mood, before we move on and actually start building our high fidelity mock-ups. All right, let's jump in.

Class project - Mood Board Preview 00:59

Hi everyone, it is class project time. This one is about generating your own mood board for Maynooth Furniture. So go out, look at any inspiration sites you like. It could be competitors to the furniture industry. It could be things like Behance, or Dribbble, or Niice. Build a mood board, I want you to kind of stack it into XD

Class Project 05 – Moodboard

This is your fifth class project. The instructions can be found in the following step.

How to create a 12 Column or Grid in Adobe XD 2018 Preview 04:57

Hi there, this video is all about creating something called a Baseline Grid.

Working with colors inside Adobe XD CC Preview 09:02

Hi there, this video is all about creating colors. We'll steal them from logos, we'll steal them from images.

Tricks for using colors in Adobe XD Preview 06:34

Hi there, this video I'm going to show you how to do cool quick tricks, to train transparency using super shortcuts. We're also going to go and change colors globally. Remember our wireframe? Imagine if you could just grab all the colors in one easy thing, and just go and pick a new one. Cool, huh? Let's get started with Adobe XD color tricks and tips.

How to create gradients in Adobe XD Preview 03:50

All right, this video is all about Gradients. We're going to add this Linear Gradient here. I'm going to show you a couple of places where to get good gradient ideas. Cool ones you can borrow, using your own designs. We love gradients. All right, gradient time.

Class project 06 – Colors Preview 02:14

All right, it is class homework time. So you're working on your Maynooth project again. I want you to build up colors for it. So you can do one of two options. You can do option 1, use the colors that I've given you in your logo, or you can create your own.

Class Project 06 – Colours

This is your sixth class project. The instructions can be found in the following step.

Use Web safe fonts or iOS or Android specific fonts in Adobe XD Preview 18:00

Hi there, welcome to this video, all about fonts, how we pick them, where we get them from, how to pick good combinations, more good combinations. And then how to kind of get them ready in XD.

How to use Character Styles in Adobe XD Preview 06:59

All right, this video is all about Character Styles in XD. What a character style is, is a reusable style that we get to add to our Assets Panel, so we can have some consistency.

Font & Text tips tricks in Adobe XD Preview 05:43

All right, it is tips and tricks time for working with type and fonts.

Adding our first Plugin Lorem Ipsum to Adobe XD Preview 05:39

Hi everyone, I hope you're ready for amazingness. It's time to look at Plugins in Adobe XD. Now there's lots of plugins, we're going to, in this case, look at a Lorem Ipsum plug-in, because it's nice and easy, but throughout this course we're going to look at more and more plugins as we go.

Creating realistic buttons in Adobe XD with paste properties Preview 13:15

Hi there, this video is all about buttons. Previously I've just drawn rectangles that-- I just assumed everyone will know buttons, and often that doesn't work for me, so I'll show you here.

Class project 07 - Text & Buttons Preview 02:21

Hello you, it is class project time. Now we've done quite a few videos, there's a lot to throw into this one, but actually that was a lot of fairy, right? So what you're going to do is, with your Maynooth Furniture, I would like you to create your Type Stack.

Class Project 07 – Text & Buttons

This is your seventh class project. The instructions can be found in the following step.

How to draw your own custom icons in Adobe XD Preview 04:13

Hi there, this video we're going to draw custom icons in XD. We're going to use something called the Boolean operator. We're going to draw this little Account Man. We click him, and view your account. It's super easy, let's jump in now, and work it out.

Working with stokes & lines in Adobe XD Preview 14:28

Hi there, this video is all about learning about Strokes, like dotted lines and dashed lines, and having these little rounded ends instead of kind of flat ends. So join me, it looks like a long video. We'll cover all the strokes really quickly at the beginning, then we'll kind of build out some other pages that we need for this.

Learn to drawing with the pen tool in Adobe XD Preview 14:34

Hi there, this video we are going to learn, how to draw stuff with the Pen Tool in Adobe XD. Custom stuff, easy stuff, a little bit harder, and you have a project to draw the owl yourself. Let's jump in now and learn how to use the Pen Tool.

Drawing practise with the pen tool in Adobe XD Preview 07:15

Hi everyone, in this video we're going to draw this kind of, like cool wavy thing, with our Pen Tool skills. If you've already got Pen Tool skills, it should be easy, if you're new to it, it's probably going to be a little bit tough, but good practice. We're also going to draw this kind of like wavy money note thing. It's meant to be for pricing. Let's get started.

Production Video with some drawing tips Preview 12:28

Hi there, this video we're going to draw this kind of graph thing going on. On our Instructor dashboard, we're going to create the dashboard. There's a couple of little tricks for drawing, mainly for dividing these up evenly, A bit of Maths in the fields.

Back and forth with Illustrator in Adobe XD Preview 09:34

Hi everyone, this video is all about working back and forth with Adobe Illustrator. So it's a separate product you can download from Adobe. There it is there, Adobe Illustrator. Some of you will know it well, some of you won't know it very well. I'll show you how to kind of connect with it.

Class project 08 - Draw your own icons Preview 01:49

Hey everyone, welcome back to our class project. It's been a little while, so we need to recap some of the techniques you've learned, and add them to your Maynooth Furniture project.

Class project 08 - Draw your own icons

This is your eighth class project. The instructions can be found in the following step.

Working with InDesign in Adobe XD Preview 11:38

Hello everyone, if you're an InDesign user, I'm going to show you, how to take your skills from InDesign, and how to connect it with Adobe XD.

The pros & cons for working with images inside Adobe XD Preview 03:58

Hi there, this video is all about working with images. There's kind of pros and cons, and things to consider when you are working with images.

Working with images and CC Library connection Preview 11:01

Hi everyone, this video is all about how the CC library, this thing here, connects between this, plus other Adobe products. We're going to mask out the background here with Photoshop, show you how it quickly updates via the Cloud.

Adobe Stock connection to find similar image for XD project Preview 05:20

In this video I want to share with you Adobe Stock. So Adobe makes XD, they also own something called Adobe Stock. So Adobe Stock is their stock library site. You can buy one-off images, or you can pay like me, I pay 30 bucks a month for 10 images.

Free images to use in your XD mockups - Unsplash Pexels Freeimage Preview 01:48

Hi there, this video is all about free images, and where to get them for your XD project.

So we looked at stock library stuff in the last video. Something like Adobe Stock. You might be using something like Shutterstock, or iStock, Getty images, there's lots of paid places. Where do we get images that we can use commercially, that's the big point.

Masking & Opacity & Blurring background images Preview 06:44

Hi everyone, we're going to look at masking a little bit more. We're going to mask inside circles. We'll do this cool thing where we blur this background, and kind of tint it a little bit as well.

Working with Photoshop in Adobe XD Preview 08:41

Hi there, this video is all about working with Photoshop. Now if you don't have Adobe Photoshop, it's not going to, like stop you using XD, but I guess I want to show you some cool things in Photoshop, if you do, and also just identify often, as a career, to be a UX Designer, often you need more than just Adobe XD skills. You need some skills in things like Photoshop and Illustrator.

Production Video – Infographic Preview 12:12

Hi there, this is a production video. Nothing new to learn so you can skip it, but what I'm going to do is I'm going to leave it in here. You will learn is how to draw Arrowheads in XD and just to give it away, it's just a triangle, you can't do Arrowheads in XD at the moment, so just draw it with the Pen Tool.We only do it because I want this project to look a little nicer as we're going through. So there's no new skills, just for the people who do like to watch, what I do while I do it, you can watch this video. For everyone else I will see you in the next video.

Class project 09 - Full Hi Def mockup Preview 05:38

Hey there, this is the big one, it's class project time. We've learnt loads in the last few videos, with images, using a bit of Photoshop. Basically what we need to do now is, I feel like you've got enough skills to actually finish your website mock-up. So don't worry about the app at the moment, because we'll do that in a little bit, in future videos, but the website should be complete.

Class project 09 - Full Hi Def mockup

This is your ninth class project. The instructions can be found in the following step.

How to make a mobile phone mockup with Adobe XD & Photoshop Preview 18:08

Hi there, this is a production video. We're going to produce an app version. Now there's nothing new about, or different from either building an app, or the website, in terms of the tools, they're all the same. So there's not going to be anything particularly new, but we need to build our app because we want to do some cool stuff when we do our kind of micro interactions and animation in here.

Class project 10 - Mobile Website Preview 01:24

Hi everyone, it is class project time. We're going to be working on our Maynooth Furniture, and the client's come back and said, "Newsflash; we want an app as well," I'm like, "Okay." So you've adjusted your brief, have adjusted your costs, and you need to mock up and test an app.

Class project 10 - Mobile APP/Website

This is your tenth class project. The instructions can be found in the following step.

Hidden features for Adobe XD Repeat Grid Preview 05:17

Hey there, this video we're going to look at the Repeat Grid. I'm going to show you how to dump in loads of images, and it just flows through here, plus the text all updates automatically, nice and quickly. Don't have to copy and paste images, or copy and paste text, which can be a drag. It's one of the hidden features for the Adobe XD Repeat Grid. Let's jump in now, work out how to do it.

Plugin - Content Generator in Adobe XD Preview 04:29

All right, so we're in the kind of Placeholder content and plugins, like mash up section of this course, and this is both of them; it's a really good one

Plugin - UI Faces adding random profile photos to XD Preview 03:15

Hi everyone, we're going to look at another plugin. This one's called UI Faces. It's really cool you can pick all sorts of different kinds of people for the profile photographs. The handsome people have been generated by the plugin automatically. It's really easy to use, let's jump in and have a look.

Plugin - PhotoSplash automatically import Unspash images Preview 04:31

Hi everyone, this plugin is all about connecting pugs into images for all of your pug related XD projects. It's not specifically about pugs, it's all about drawing down images from Unsplash, using our plugin called PhotoSplash. It just means you don't have to jump out to the website to grab images.

Plugin - Copy Cat or Mimic to style and images from a site Preview 03:19

In this video you will learn how to copy cat or mimic to style and images from a site

Advanced Asset Panel tricks in Adobe XD Preview 04:37

Hey there, this video is all about advanced Asset Panel tricks and tips. From the title, you might be like, "What is this video going to be all about?" Basically it's just kind of stuff, we've got to a point now in our skill level that we need a few helping tricks and tips, especially dealing with Artboards and the Asset Panels, just to make our life a little easier. Get on with it, Dan.

Advanced Symbol Tricks & Tips for Adobe XD Preview 07:53

All right, we are moving along in this course. Feels like a really good time to cover, we've done symbols before, we've done symbols loads, it's the guys in my Assets Panel, but there's some advanced features I want to share with you before you move on, just to kind of help your flow go.

What are UI micro interactions in Adobe XD Preview 07:21

In this video you learn what UI micro interactions are in Adobe XD

Button grow or full screen image micro interaction in Adobe XD Preview 06:13

In this video you will learn button grow or full screen image micro interaction in Adobe XD

Animated Image Gallery with micro interactions in Adobe XD Preview 06:39

Welcome to another micro interaction video in Adobe XD. This one's going to do some cool stuff like this; ready? It's kind of like a gallery, you can click on them, you can switch them round. I've added some terrible animations to them, bounce. We're going to work out how to make it look good, and then how to make it look terrible with the bounce. All right, let's jump in.

Full vector change micro interaction in Adobe XD Preview 08:19

Hi everyone, it's time for another micro interaction. This one is going to be a cool little Sun Moon thing. It's going to be using things like our Pen Tool, or the vector drawing techniques we learned earlier on. So instead of just moving things around and changing colors, we're actually going to distort stuff. All right, let's get started.

Class project 11 - Micro Interactions Preview 05:12

All right, welcome back, it's class project time. You're going to go off and make your own micro interactions for the Maynooth Furniture project. I don't mind if it's for your app or for your website version. I want to see at least three examples. So they can be simple, they can be really complex. Have a little look, remember, at Dribbble.

Class Project 11 – Micro Interactions

This is your eleventh class project. The instructions can be found in the following step.

Time delay transitions in Adobe XD Preview 04:42

Welcome friends, we're in the new section. We're into prototyping, more advanced prototyping. We've done this before. It's going to be Timed Delay Transitions.

How to create a popup menu or modal in Adobe XD Preview 12:16

In this video you will learn how to create a popup menu or modal in Adobe XD

Animated mobile side nav for burger menu in Adobe XD Preview 03:26

Hey there, this video we're going to create a kind of burger menu that pops in, this little Mobile Nav. Super easy to do, let's jump in now and work out how to do it.

How to make a working drop down menu in Adobe XD Preview 03:24

Hi there, this video we're going to create a Drop Down menu. Super easy, reuses a lot of our skills. Basically it's just another overlay but I like to separate them out, so that you can get a feel for what you can do with those techniques, to get to kind of like different visual effects within your mock-up. All right, let's jump in.

How to use the drag transition in Adobe XD Preview 07:19

Hi everyone, we're going to look at a different transition. , I can click, hold, and drag, it's a Drag Transition. Great on mobile phones, you can kind of swipe left, swipe left. It has a few bugs, I'm not going to lie to you, but we'll work through those.

How to make a number ticker scroll using masks in Adobe XD Preview 06:51

In this video you will learn how to make a number ticker scroll using masks in Adobe XD

How to add Alexa style voice commands to Adobe XD Preview 09:37

Hey there, this video is all about voice commands in Adobe XD. You can ask mock-up questions, and it can give you answers.

What is user testing in Adobe XD Preview 16:53

All right, it is time to talk about user testing. What it is, some of the terms, how you find people to do your tests. So that's going to be this video

How to run an unmoderated UX User Test in Adobe XD Preview 12:07

So we're going to run an unmoderated test in Adobe XD

Class project 12 - User Testing Preview 02:23

Hi everyone, it is class project time. You'd be like, "No way, I'm not doing a user test." I'm here to convince you otherwise. So take your Maynooth Furniture and get it tested. Now you can do it this skinny pants way or you can go full noise, and you're like, "I'm going to get this, and I'm going to learn from it."

Class Project 12 – User testing

This is your twelfth class project. The instructions can be found in the following step.

Mocking up your designs in situ on a real phone in Photoshop Preview 09:21

Hi everyone, in this video we're going to take our mock-ups from XD and put them into real life stills. They're not interactive, but they look really cool. Really useful for presenting to clients, maybe, pitching. Maybe haven't got the job yet, always useful for selling your ideas. We're going to do this one, we'll do that flat one.

Advanced micro interactions & prototyping with Protopie in Adobe XD Preview 02:40

Hi everyone, we're in the kind of, like pitching to clients, and showing kind of a fancier version of our mock-ups. Now XD gets us to a certain point, but there's just certain things that it can't do, right? Remember, swiping right, at the moment. It's probably being fixed by now, but can't have videos at the moment. There's lots of things that it can't do with phones, like integrate with things like VR or occasion services. All that kind of fancy stuff that phones can do.

How to add animation in Adobe XD using Adobe After Effects Preview 09:39

Hi everyone, check out that cool animation. Couple of cool things about it is that it's not all starting at the same time, which is one of the things that XD makes you do with Auto Animate. It's got a bit of Motion Blur, that Easing is nice, and it's done in Adobe After Effects. Now the nice thing about Adobe XD is that it exports to After Effects pretty nicely.

How to export images & assets from Adobe XD for developers Preview 12:56

Hey there, this video is all about exporting our assets to our developer, whoever is going to be building this thing in a format that they need it. So we've done our design, we've done our testing, client loves it, users love it, it's ready to get built, so we're going to go through a couple of ways of exporting just the Artboards, super simple, then exporting single images that we might need to get out, then we're going to look at batch exporting, tagging lots of things to go out, exporting them all as the right formats, with the right syntax, ready for our developers or our engineers to start building it. All right, let's jump in.

How to export code in XD for engineers using Design Specs Preview 10:49

Hey there, this video is all about something called Design Specs. So we've signed off our design in XD, client loves it, users love it, it's ready to get built. We need to get all the information held inside the XD document to a developer, and design specs allows us to export, send a link to the developer.

Class Project 13 – Roar Cycles Preview 10:29

Hi there, this video is a class project video. We're going to set a new project. We've done the instructorHQ one together, you've done your class project for Maynooth Furniture throughout this course, now we've got this last project here. It's a full project, like the Maynooth Furniture, but there's a lot more scope for you to be creative and do your own work. It's not going to probably come out as prescribed or similar to other people's. So it's perfect for your portfolio.

Class Project 13 – Roar Cycles

This is your thirteenth class project. The instructions can be found in the following step.

BONUS: Software Updates 2019 Preview 37:24

BONUS: Software Updates 2021 Preview 01:00:18

BONUS: Software Updates 2022 Preview 05:41

Conclusion for Adobe XD training course Preview 06:11

Oh my goodness, fancy seeing you here. We made it to the end of the course. You and me, I'm here, definitely here, you're definitely there, but not everybody kind of makes to the end. So congratulations, hi-five hug. Well done for going through the entire course.