Skip to main content

Full Vector Change

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

Daniel Walter Scott

Full Vector Change

Lesson 73 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

73. Full Vector Change

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

Full Vector Change

Hi everyone. It's time for another micro interaction. This one is going to be this cool little sun moon thing. Okay. And it's going to be using things like our pen tool or the vector drawing techniques we learned earlier on. So instead of just like moving things around and changing colors are actually going to distort stuff. Alright, let's get started. Alright so this is where our sweet new vector drawing pen tool skills are going to come into play. So first thing I'm going to do is draw upward with my outboard tool. I'm going to make a little icon backing. Okay, so I'm going to copy this just because I want the rectangle, I want it to be square. So I'm gonna make it 51 x 51. Get rounded corners. How many rounded corners? Five messing about down now. Okay, so I've got this, I'm going to lock it. Command el control l on the pc, unlock it because I need to rotate it no good reason. Anyway, so we're going to start with the sun and move to the moon. We're gonna draw the sun lips. Still dra...

g it out, give it no Phil I'm gonna give it a border a border of that kind of slight off white. I'm not sure why I like that at the moment. I'm gonna use three Fine. Get in the middle of everything. Nice. I don't want to put my little son sparkles around the outside so I'm just gonna use the line tool, draw him out and I wish you could change the default, It's always one and it's always this gray color so I'm gonna change it to that. Off white. I'm going to change it to three and it's a test. How do I get the little rounded ends here? Remember? Okay because I don't want the little stubby ends. It's the capping. Okay, so with that selected over here, it's this rounded cap. Nice. So that's that one, is that centered kind of, I'm going to make a duplicate of, I'm gonna select both of them actually gonna group them. Makes them easier to rotate. So group it copy it, paste it have a just about outside of it copy and pasted. Um If you just hold nothing down it can move these things around which is cool but if you hold shift while you're rotating it it will lock it into kind of like basic. I wanted to be 45 degree angles kind all the way around. The reason I grouped it just so that it pivots around this middle point. So now I want to do is I want to select all these guys and um group them because I want to animate them separately. Right? Um So and group so I got a bunch of different shapes. It's all a bit big so you select it all because my background is locked allows me to do that even then it's still too big. Maybe you should be at command one or control one to realize how big your icon is massive. That's going to be enough for the moment. Cool. Move on dan. Alright, can't do it. I'll fast forward it though, so Alright now we're back. I just had to make it look nice so we've got our first shape. What we're gonna do is duplicate this art board and we're gonna do the moon on this one. So over here, what we need to do is we need to double click this okay with our black arrow, Double click it. And now we can see these anchor points and the handles, handles of the bits that poke out the anchor points, that kind of central bit of the seesaw and I'm just gonna kinda drag it in there, kind of like a moon. The other thing I want to do is kind of make it bigger. You can't do it while you're in this mode, I'm gonna click off have become once they can hold shift to make it bigger, just outside of these anchor points. Remember not on it, just out here and rotated around somewhere in the middle. And what I wanted to happen is actually let's just preview it for the moment because it's not going to work. I'm going to show you. And so Click on this one, preview it. First of all, I haven't added my animation so when this gets clicked, let's switch to prototype mode. When the button gets clicked it's going to go tap and it's going to go to order animate. Cool. So let's give that a go ready City. Just kind of faded like it seemed not what I wanted to watch. What happens just fades across. This happens because of one of the rules. We can break the rules, but it means that remember I hear in my layers panel, if I click on this one, I've got an ellipse and you can see the little icon, it's like I am in the lips. I am clearly a square over here because we've destroyed their lips. I'm no longer in the lips. I'm this little pin path type thing. So there's different names, which is not really the problem. It's mainly that it's a kind of a different core object. So to make this guy over here instead of being an ellipse, you want that, you can't make them both ellipses because he's not an ellipse. But you can make them both paths. So with the selected go to object and go down to path and convert to path. You are no longer no longer an ellipse. You can see he's a path. Problem is he has a different name. So we've got um 235 and 236. So let's just call this one Sun Moon. Just make sure they're both called sun moon. It's over here. You're my friend called Sunday, lovely. Now let's give it a go. Let's have a little look ready. Look at it morph doesn't go back yet. Let's make it go back. So when this is clicked actually, let's win this whole art board is clicked. You can just make this button actually let's just do it for this button. When this button is clicked, go to you can say go drag it back to this one here or you can say go to previous outboard. It will go back to where it was often. That can be more handy if you've got more than like it's a nonlinear animation. You can get to it anyway, preview it's Clickety click. Cool. Huh? Can't really zoom in. The editor will zoom in. Okay, so you can see it. I love it. So what do we do with the sparkles? Let's have a look. So they start their on this one. We want to go to design. I've grouped all mine together. You don't have to, I'm going to group them all because I want them to go all separate ways. This guy's going to go up so it's gonna go over here Now when you're dragging a held shift to get it to go strapping down. But dragging this way you just kind of like guess it and it really wants to go out 45 degrees. You can do some cool stuff with like adding, I know 20 pixels and then minus ng 20 pixels on the X. And the Y. If you want to get nerdy about it but nobody's going to notice you might be very different. You might have a very different opinion about that casual dan? Let's just get it looking good. It doesn't matter if it doesn't work properly. Okay. The other thing I want to do is when it's out here, I want it to be faded. So I'm going to select them all. We're going to use a shortcut, select them all hit zero on your keyboard But we can't because if we type in zero doesn't work. Okay we can get down to 10%, which is probably near enough that we need casual dan. But I'm gonna select them both and put them all at zero. All right now let's give it a preview. You ready. Can't prove you from this outboard, but I can prove you from this one. Ready city victor goodness does not work. Okay, why didn't the little sparkles fly out? Because I grouped them over here. So over here, it's a group. Okay, and saying I am group # 28 over here. The little sparkles are, they've got their own little names. So let's go and see if we can fix this. So it's a new group. It they all come back to life, luckily they also have the same name. Yeah, preview it and preview the right art board, preview it and there we go sparkle sparkle out, The moon changes. Just a simple thing, but you can see cool little micro indirection. You might be asking yourself why, why have you got this Micro indirection. How does it fit in with the instructor? HQ. It doesn't just needed an example. Sunday moon seemed like a good, seems like a good and easy thing for us to all do and get our heads around. Remember john to dribble and look for the gifts and get ideas of how it might work for you and your app, especially when you're working on your own projects. Alright, let's jump 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