Skip to main content

Production Video with Tips

Lesson 49 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

Production Video with Tips

Lesson 49 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

49. Production Video with Tips

Next Lesson: Illustrator in XD

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final Quiz

Lesson Info

Production Video with Tips

Hi there, this video, we're going to draw this kind of graph thing going on and now struck the dashboard, we're going to create the dashboard, there's a couple of little tricks for drawing Maybe mainly for like dividing these up evenly, bit of maths in the fields, hang around for that at the beginning and then after that it's totally up to you whether you watch the rest of it, it's a little bit monotonous me making lines and drawing stuff, but I know some people like that and they love to kind of watch how I do stuff so you can hang around. I wouldn't so watch the, watch the little tips and then after like a minute or two to skip on to the next video, but I'll be here if you want to hang around and I'll see at the end of the video or the next video. Alright, let's just get started. Okay. I'll try and lead with the drawing tips before we get into the hard work of building the rest of the page. Not even hard work. Just the work. Okay. I'm going to duplicate this page now remember we don'...

t have any prototyping if we did, we'd want to make sure we're in prototype before we duplicated it because there's no prototyping, it doesn't matter. Cool, this one here is going to be the dashboard. Cool. I am going to keep that, I'm going to change that to instructor, dashboard. The instructors log in, they get a kind of a cool dashboard, I'm going to use this thing, you know what I'm going to do just because I like the look of it. I'm going to switch the background to the kind of off white and this too, just a slightly darker color is white. Same with this. So this guy here click on the background and use the off white in the background and we're gonna make these stand out like that. Perfect. Use the same width, keep the consistency across the pages and what I want to do is I'm gonna put that graph here at the top here and then the three little cards underneath. We kind of did this in the earlier wire frames one which you should have open already dan not hiding away on the desktop. Okay, so there is there this guy here, this is the kind of page we're building this. I just used the basic old kind of cards, this one here, I want to add that graph to it. Now I would like three equal parts down here. This can be a guess How do you want to do it first of all you need to work out what your gap is going to be. So let's say you wanted to be 40, can you see that pink number? They're kind of to the left of my arrow top left, So that's going to be 40, I want it to be 40 and I want 40 to be the gap of these guys as well so to do some masses, the drawing tip we can use, we can do a lot of math in these guys. So I want to gaps of 30 so that's 61 to minus 60 off it. So the width here is going to be this Minour now I want to say 60, everyone's like no it's not 1684. Okay. You think if I was that bad at spelling math would be something that you know and somebody go, let's give them the math Anyway. So we've done that. So I've cut those two kind of 40 slots out of it. Then I can say actually I just want to divide this by which is food slash And I divided by three three little boxes so I kind of put a convoluted one in here to show you the advanced options. Okay but you might just do, I want it to be -3 pixels. You just put in -3, You can times about two divided by half. So now I should have these guys all kind of lining up nicely. You'll notice that they weren't perfect. Maybe because of this one here I left as a really crazy width, I should have leveled that off but you get the idea right. The other drawing tip is just going to be the shortcuts for the align tools, I'm pretty sure I've mentioned them before but I'm going to start doing that and I want some lines so I'm going to hold one thing if I start drawing out of line it will probably snap to straight. It doesn't okay if you hold shift while you're dragging it it will make a whole perfect little line here and I'm going to drag it to about here because I want a bit of a key going on over here. Okay I want you now there's a couple of ways of doing it, repeat grades. Really handy for lines. You can just go this many. I don't want that many but I'm gonna drag him out. That's gonna kind that was one way of doing it. I don't want my maybe one more let's say and group it. And I actually just drew lots of lines. Okay And I'm dragging them out. I can it really wants to do them automatically but if I grab all of these hold shift and deselect this back one so click that. So I've only got these guys some of the shortcuts that are really handy on a Mac. It's control control command and V for vertical um spacing and it's a church. So command control h These guys here so all of them have shortcuts, they can be super handy. The hover above them long enough there you go. So distribute horizontally. Is that's that weird little up arrow that nobody works out what that is on a Mac. It's control and I can't remember off the top of my head. I imagine it's control L. T. And h envy dropping a comment. If it's not I don't have a pc close to me to double check that one. There are some lines. I am going to make sure they're one. I'm going to lower them down. We're gonna use our shortcut shortcut for the opacity so anybody remember it was I want to lower the opacity of these lines. I could drag the slider which I just did go back up And remember what it was. Remember the number keypads just above your type? We're gonna type in 50 and 30. Just get the little lines going dragging a little bit and now I'm going to go into production mode. You might hang around. You can skip along, I'm going to draw the rest of that graph um and stylized it a little bit like you start at the beginning, you can hang around, it's not particularly fancy. I'm gonna type some letters, numbers and then duplicate them down. Same along the bottom there and then I use the pen tool to draw a graph, put a key in a drop shadow to these guys. So if you're like oh that doesn't sound very interesting you can skip to the next video. I will not be offended if you want to hang around. I'm not going to fast forward it. I'm just gonna start building it. This is the grind, this is the doing it. It's not very exciting why isn't that appearing. Ah sometimes if it doesn't appear it's because you've got your text as this. Starting off with a flurry there then everybody's like wow I'm going to hang around with this. Let's start with black. I'm going to use that. Where's my small 1? Cool. Alright. We'll put in 25 grand here. Here we go. We use the repeat grid and a few of these. How many do I want that's all matching up issue track this. You can see how good that repeat grid is. I'm gonna double click on this one and this one is going to be 15. The mess I can do. Everything needs to be divisible board by simple numbers 5000 and then we'll do zero. Alright, next thing I'm going to get them to align to the right. Nice. They can stay in there a little happy repeat. Good for the moment and we'll get some markers along the bottom here. So I'm gonna grab actually just duplicate this and I'm going to counter all that way. So I need to go this way. We'll go much 17. How many are we going to do as a long. I want to make this a quick drawing exercise. March april. We're gonna kind of cheat here by not putting them all in. I've gone back to many years. All right and now I want to rotate this around so the rotation option in the repeat, it doesn't work. So I'm going to have to un group it, roll it around now if you're rolling it around, Okay, you can use this to just type in say 90 to get it flat hoops. Oh, that's kind of weird. Right? With them all selected instead of kind of if I use that kind of rotation, I didn't realize this, you can just drag them all around. But if I do it this way they all rotate separately 90°. It's kind of weird. Huh? So I'm going to grab all of these guys. I'm grouping them first, rotate them all around, make sure they're right aligned, rotate them all around. And because responsive resize is on, it's not going to stretch them. It's just going to kind of move them out that way, which is pretty cool. All right. I should have done 2019. But anyway, now I want to draw some pen tool stuff because I'm going to fake in some graph data. So you you you big month in june this one here and this one here We come down to this bottom one and join it all up. Nice. Get to the border. Will give us a color one of our graph colors and now I'm gonna just copy and paste this. So I've got two of them. Okay, I'm gonna double click it to go inside and then I'm just gonna adjust them down in june no way up a little bit higher. Oh, it's been a real good month. I'm going to give this one the green and I'm gonna move it down here and I'm gonna send it to the back but not too far back. So in that case if you're like how did he move it forward? There's send all the way to the front, all the way to the back and these two shortcuts I was using bring forward so it just kind of goes back one or ford one Because there's a bunch of stuff all stacked on top of each other. I'll do one more graph. Let's do the copy paste. Let's do the dark gray one. It's going to have a bad august needs to be higher to be able to see behind that stuff. That's a good month. They all started quite low. You gotta line them up, send them backwards in the middle of the back. There you go. That's not a very good graph. You can't see anything. I'm going to make it slightly transparent using my little number trick. Alright, how helpful is that graph? Pretty pretty, pretty average. I'm gonna put in my little key here. I will use my thing to steal it. I'm going to have one two, three. Tell us total it's okay to leave now we're going to do a couple of other things if you're just sitting there and you can't get to the pause um repeat button. You might just be stuck with me for a little bit longer. This is what happens on the unity one and this is going to happen on skill share. If you haven't looked at instructor HQ, it's kind of a hosting thing that I founded where you can host your own courses on and sell them on your own site and connect them to your other places where you sell them. All right. So I've got these guys. What else do I want to do? I want to do the slick all of these because I want to get rid of the border. I like the Phil, but I want the shadow defaults good. So I've gone three and 6 looks nice and that's the beginning of my dashboard. I'm going to add a footer while I'm here. No, I'm not. I'll leave that. We're into this long enough. Right. You're regretting hanging around to the end. But we made a pretty cool graph. It's not very readable. I really want to go through and give it another go. But hey, we've done it and we're ready to move on. All right. I'll see you in the next video

Class Materials

Bonus Materials with Purchase

Six Completed Files
Exercise Files

Ratings and Reviews

Haseebullah Johar
 

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

Student Work

RELATED ARTICLES

RELATED ARTICLES