4.64 5 üzerinden
Udemy'de 35780 yorum

User Experience Design Essentials – Adobe XD UI UX Design

Use XD to get a job in UI Design, User Interface, User Experience design, UX design & Web Design
Daniel Walter Scott
141.699 öğrenci kaydoldu
English Daha fazla
Become a UX designer.
You will be able to start earning money from your XD Skills.
You will be able to add UX designer to your CV
Build a UX project from beginning to end.
Become a UI designer.
Build & test a full mobile app.
Build & test a full website design.
You will have a project of your own to add to your portfolio.
93 lectures of well-structured, step by step content.
Learn to design websites & mobile phone apps.
Work with fonts & colors.
Prototype your designs with interactions.
Test on mobile phones.
You'll create realistic prototype complete with micro interactions.
Send your designs for feedback & commenting.
Export production ready assets.
Create your first UX brief & persona.
Create quick wireframes.
How to use premade UI kits.
Learn professional workflow tricks & shortcuts.
You will get the finished files so you never fall behind
Downloadable exercise files
Forum support from me and the rest of the BYOL crew
All the techniques used by UX professionals
Build a mobile app prototype that responses to voice commands.
You will be able to talk correctly with other UX design professionals.
You'll learn how to choose colors.
You'll learn how to pick the correct fonts.
You'll be able to send your finished work to other professionals in the correct formats.

Are you excited to get into the world of UI/UX but you don’t know where to start? This course will allow you to add UX designer to your CV & start getting paid for your new skills.

Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.

Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.

  • Aria: “This course is definitely above expectations so far. I didn’t expect to get so much insight into the briefing and the communication between UX Designer and a client. It helps to see the brief and to learn that there are different tiers of income based on projects and experience. Love It!”

This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!

First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.

I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.

  • Kate: Excellent course – Dan is an excellent teacher and I thoroughly enjoyed following along with his videos. Highly recommend! July 2018: I have updated this review with an extra star because of how useful this course has been in the months following it’s completion. I am using Adobe XD daily and Dan’s instruction was instrumental to adding this feather to my front-end web development hat.

An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.

One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.

  • Leigh: “I really enjoyed this course. I was a UX designer before the course and was looking for more information on XD and getting to know the program itself better, and this course really nailed it! It has great UX references and a few refreshing perspectives. As well as it really helps you learn XD in the process. The instructor is engaging and fun to listen to. Really really great course. I highly recommend to any new UX designers, as well as veterans looking for a refresh, or just to learn how to use XD.”

There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.

It is now time to upgrade yourself & learn Adobe XD.

Getting Started

Introduction to the User Experience Course

Hi there, my name is Dan, and I'm an Adobe Certified Instructor. Now together, you and me, are going to learn how to use Adobe XD.

Now, this UI/UX design tool is going to help us create beautiful user interfaces as well as streamlining our user experience. During this course, we're going to use an actual freelance project I'm working on. The project needs both a web interface and a mobile app. So it's going to give you a really good understanding of how to run your own potential UX project. And my course here is aimed at people new to Design, and those experienced.

Getting started with your Adobe XD project

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 will be a link on the page here somewhere to download those, so do that first.

What is UI vs UX - User Interface vs User Experience vs Product Designer

All right, a couple of things we need to discuss before we move on. It's some of the terminology that gets used in both this course and in the industry, just so that you know what I'm talking about when I'm going through the course.

The Brief

The UX brief & persona for our real life project

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

Wireframing (low fidelity) in Adobe XD

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?

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

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.

Type, Color & Icon Introduction

Working with type in your XD wireframes

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

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

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

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

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

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

Prototyping a Website - Introduction

Prototyping & adding interactivity to Adobe XD

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

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

Class project 02 – Prototype

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

Symbols & Repeat Grids

Working with groups & isolation mode in Adobe XD

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

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

Production Video - Left Nav

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

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

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

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

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

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

Prototyping a App - Introduction

Mocking up an App in Adobe XD

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

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

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

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

Production Video - Login & Dashboard

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

Wireframe Feedback

Sharing Wireframes for comments in Adobe XD

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

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

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

High Fidelity UI Design

Mood Boards & resources for Hi fidelity UI design in Adobe XD

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

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
How to create a 12 Column or Grid in Adobe XD 2018

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


Working with colors inside Adobe XD CC

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

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

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

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

Text & Fonts Advanced

Use Web safe fonts or iOS or Android specific fonts in Adobe XD

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

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

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

Adding our first Plugin Lorem Ipsum to Adobe XD

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

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

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


How to draw your own custom icons in Adobe XD

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

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

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

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

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.

Working with Illustrator

Back and forth with Illustrator in Adobe XD

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

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

Working with InDesign

Working with InDesign in Adobe XD

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

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

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

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

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

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

Working with Photoshop in Adobe XD

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

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

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

APP Design

How to make a mobile phone mockup with Adobe XD & Photoshop

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

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

Placeholder content & Plugins

Hidden features for Adobe XD Repeat Grid

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

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

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

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

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

Asset Panel

Advanced Asset Panel tricks in Adobe XD

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.

Symbol - Advanced

Advanced Symbol Tricks & Tips for Adobe XD

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.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6 5 üzerinden
35780 Yıldız

Detaylı Oylama

Yıldız 5
Yıldız 4
Yıldız 3
Yıldız 2
Yıldız 1
30 Günlük Para İade Garantisi

Şunları içerir

13 saat isteğe bağlı video
Ömür boyu tam erişim
Mobil ve TVden erişim
Tamamlama Sertifikası