Skip to main content

Infographic

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

Daniel Walter Scott

Infographic

Lesson 59 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 2000+ more >

Lesson Info

59. Infographic

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

Infographic

Hi there. This is a production video. Nothing new to learn so you can skip it. But what I'm gonna do is I'm gonna leave it in here. I'm gonna show you because I'm going to create this like little box with the you know we know how to bring in these icons. Now. I'm going to one thing you will learn is how to draw arrowheads in um XT. And just to give it away, it's just a triangle. You can't do arrowheads and XT at the moment. So just do it with the pen tool. But we'll build that will build these, we'll do some adjustments. We only do it because I want this project to look a little nicer as we're going through. And 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. Everyone else. I will see it in the next video. Alright. To get started. We're gonna add the graphics in here. I'm gonna start with a kind of a gray box because I want it to stand out from the background. There we go. Center of it all filled with black border wit...

h capacity using my number trick it's the number keyboard that will do grab my type tool, click once in the middle and switch it to center. I'm going to paste in some text. I just typed out. Save you the pain of watching me spell it or can you kind of nailed all those words though. Alright let's bring in some graphics that I've got. So we'll use import which is command shift I control shift diana pc icons, what have we got? Play, replay, mute. I want those ones there they all are all to be white and make them all the right size mean to you buddy way so big. The reason I'm putting this here is you can't actually do video and stuck in here like you can mock up images obviously, but you can't do animations and videos in XT at the moment. Okay. I feel like it's something that'll do. Um So I just need to put this as visual indicators to our both clients and our testers because what it will end up being is remember I said this is like an actual project, it's actually being built now in the background while I'm doing this course, you can see it here so I want this kind of swoosh and then underneath it is this I don't know, I like it as an idea, right? It's this video that's already playing. You can't help but watching, you can unmute it if you want and then it just explains this product. I like video anyway, you can tell a mega loads of them. So that's what I want in here. This guy's gonna get cut out by me and it's gonna have an image, video playing back here. Command one of the big enough they are now, you notice I pulled from both sides. So hold shift it locks the height and width and if you hold down the option key on a Mac or the old key on a pc, It kind of expands on both sides. It's quite handy done that a few times. I think the next thing I want to do is these infographics in here and this brings up a little bit of appointments. I want some arrows going right so I could there's no arrowheads in. You'll notice I didn't do that in the stroke because it doesn't exist at the moment. So using my line to draw the line, I wanted to be white so I wanted to be thick. How thick? I don't know. I'm guessing five looks good and I want a little arrowhead at the end. But there's no arrowhead option in here. Like some of the other programs you can jump to one of those other programs like illustrator, I'll open it up in the background there. Alright here, in illustrator you can grab the line tool, it's hiding underneath the rectangle tool. I'm gonna draw a line over here. I'm not sure why. But in the properties panel here, if you click the word stroke, you can go to their heads and that's something that will probably appear in XT but at the moment it doesn't. So you can just kind of pick it, you can change the percentage as well. Often the arrowheads are huge for some reason. So I'm gonna turn this down to say 50%. Well the opposite of what I wanted, what did I put in 550 so I can grab that, copy it and just paste it into here. You can see there's my little tiny arrow. Probably need to make it bigger. Holding shift there is there, it's still got the stroke, right? So I need to turn that to five. So that's how you could get arrowheads in there. I sneakily sneakily grab the pen tool using our sweet clicking one skill is just do this cheap, nasty well, and I end up and do what happened there. I jumped I don't know where I went. All right. So there's my sweet arrowhead, Is it even aligned? It's a droopy little little bit bit. So that's what I'll do. It's not a perfect arrow. It's up to you. I just kind of grouped them and I'll start using this thing for the moment though. I need to bring in some icons also need to make sure it's sitting within my kind of boundaries and everything so far. So I'm going to go imports. I've got some icons in actually there are images because their logos, um images. Where's my logos? I haven't actually put them in there for you? Watch this? I will flick my fingers and they will appear ready and you know the best bit. I was flicking my fingers and went to export them and then you all saw them, you're like, what about those guys? They're already there. They were totally already there. Okay. So we've got these guys are going to import them all, jeez, they're all kind of various sizes. Okay. Especially the youtube one. That's what I'm going to do is just show you go through, go through the motions of getting them already. Let's go here. Do I have to end group at 1st. I don't awesome cooking on skill share is quite the toughie. He's probably the one that needs to go the biggest holding shift. Remember while you're dragging it? This one here is gonna be interesting because if I make it all white, I'm just gonna, I'm gonna lose that circle in the middle. So what I'm gonna show you to do is um, group it. So it's now like that or keep on grouping it until you get this bit separate. I'm gonna make it like this like this and who like it's a test who thinks they know how they do this now? How do you cut a hole in that? Because I wanted to be a whole, I want to be able to see through it. You know, boolean operators and we're going to use the second one in which is always the one you want Probably and then I'm gonna switch the color to white and then make this thing just a little less generous. Same with you. So we'll get down, remember command one to make sure you're at 100% because these are all way too big so you're gonna be able to use instructor executed pulling in income from you to me. Oh well that's youtube, you to me, I'm gonna lock that so it doesn't move command el control L on a PC skill share twitter. So how are you going to earn money from twitter and then we're going to reuse these two fellas a couple of times so this will be my first one, 2nd 1. Actually I'll put it there and then tuck in this end. Now when I'm dragging it, if you drag it in it'll probably snap. If you hold shift it will force it to kind of go in a straight line which is handy. No one's not even pointing at the piggy bank. That's alright, you get the idea, it's more like a little infographic to help trying to explain what we do girl, they all need to come up, grab it all even but all grab one of these guys. Here we go. Okay, so now I want to add the rest of the dashboard features so these are not repeating grades at the moment so what I'm gonna do is I'll turn that off, goodbye cheat. I totally cheated just there. Okay it's unfair. It's just text boxes and I had them on another mock up that I was kind of practicing this course. Okay, I like to give it a once through before I do it just to make sure it's all going to kind of work and make half sense so I just stole it off that and stolen error as well. Actually I saw that from the google material. Here we go. Cool. So now I want to grab it because I made it to the right size earlier on repeat grid, get it close and then extend it out so it lines up and even lines up perfectly. Lucky I remember it was 40 pixels in between these guys so that's what we're gonna do for the moment. That will do. There's a different data, you can get a hold of 40 looking at the little pink numbers to the left there. Nothing I'm doing is going to grab it and I'm going to use it on the home page as well as like a little example. So come on, zero Click This one. Command Command three. Command 1. Alright, so I'm gonna do it in this box here. Okay, so my little sample is probably just going to be three of them maybe. Yeah three is going to be enough and I'm going to make sure it fits in by just lining it up with their for the higher and try and grab the background graphic which is that rectangle a little hard to get. No, I got him straight up. Nice. Alright yeah that's going to be extended so we go up higher. Now we've now we've done masking, we can do this a bit better So what I might do is actually make this a lot bigger this way and then kind of drag it, drag it. Not that one, drag that one hard to grab, grab the wrong one. There there we go grab them. I'm gonna put it kind of right in the middle, select both of these and I want the actually I want this the rectangle, the great thing to be in the back right This is going to bring up I guess a good point because what happens if I grab that, stick it in the back man it depends on how you grab it, grab the edge there sent to the back and using the shortcut. So now it's behind the gray box. So if I grab that hold shift, grab that as well and do my masking trick, command shift em or control shift M on a pc. It's gonna mask it but I wanted the gray box as well. So before you do it click this, copy it. So you've got a version of it, Select them both. Do you mask and then paste this new version back on the top and send it to the back end up with like two parts one is being used as a as a mask but you need the other one to kind of fill the background in as well. I'm gonna give you a new here. What is this thing? You see that thing appears it's getting in my way. Who are you? Hey man, I can't see what it is, dragging it around. If I delete you might know. I can't work out what it was. I got 12, 345 boxes. I'm not sure. I've got this big gap here. You probably sort There's another one. See this thing here. Here's some artifact from something. Can I give him a fill? Nope. Just gonna delete them. Happens to the best of us. Oh, just drag one and drag them all. Come on buddies, everybody come with me. All right. And that is going to be the end. I'm gonna kind of get this to line up. I don't want to I do want to do this because I love it to be tidied up, but I know I'm gonna have to extend it again. Mark my words. All right. So we had some arrows. We added some icons. I generated some new icons that the logos that didn't need to be generated. But we learned a little bit of stuff and we got it looking a little bit prettier. Alright, let's get into 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