Full Vector Change
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final 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
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 Classes
Web Design