Paste Properties
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
Paste Properties
Hi there. This video is all about buttons previously I've just drawn rectangles that I just assume everyone will know the buttons and often that doesn't work for me. So I'll show you here. We can do cool stuff where we can just grab button styles pasted on there. Look at that. It's got rounded corners and like a real slight drop shadow looks more like a clickable button. We'll go into a tiny bit of button theory. If the button theory gets a bit boring in the middle, skip to the end where we add the logo and the buttons along the top here and make sure you've got this one. So it again it's adam, Look at that much more clickable. Alright, let's get started. Alright. Time to build buttons and good buttons. So first of all, I want to extend that out. If you remember you hold option while you're dragging our or on a pc drag the corners, it'll do both sides. I'm not sure if I've shared that with you're all going to center. I want it to be about that much and we're going to use our little plu...
g in full placeholder text. Thank you very much, puts a full stop at the end and actually that one here, I wanted to trim the bottom of the text box. Handy plug in. Okay, I want to move them all up a little bit. Maybe there. I want to put my button in now rectangles. Don't cut it. They can sometimes do I draw a lot of my buttons and I'm gonna turn my grid on. You don't have to because I want my button to be fitting the rules. Mm mm mm mm mm That's been nice going to the center. Turn my grid off. Cool. So I do this quite a bit. I'm like, let's just draw a button and that's a button. All it needs is some text in it. So I grabbed my type too, actually grab my little text block, where are you? Make sure it's all consistently the same color, the same size centered. This one is going to be start free trial. I'm going to do it all in caps. Start free trial and I'm gonna use the bowl. I'm not sure. That's not really the time to be doing it. It's okay. So that they're kind of might work as our button because it's got the right language in it. But there's so many times where I've drawn stuff like squares with text in it and people have asked, hey, where's the button to click the start? Free trial. And you're like, man, I've had to double back and kind of design the button a little bit nicer. So where do you get inspiration from? Because inspiration for buttons is one thing and also want to show you this cool piece properties function. We can do the google material. We've talked about it before, but you can just open it here. All right. You might have heard that whenever I say the word google, my phone launches, google assistance. Like hi Siri, ignore google over there. So google material is what I wanted to secretly say to my phone down anyway, we'd segway. So if you go to your exercise files, I've given you in the Ui templates and google. There's this one here for material design. You can download it yourself from the Ui kits, google material and go and find it. I'm going to open it up and in here some really cool high fidelity. That's the difference between that wires like it. We're using this one has lots of colors and fonts and rounded corners and drop shadows. What I'm looking for is buttons and I find I need stuff like this because like, there's not much to that, but it's got a tiny teeny drop shadow to it. The rounded corners make it obvious. So what we can do is I can click on it. I'm going to um group it so that I can kind of just I just want to work on the button bit and we're going to just go to regular old copy. So you could use Control C on a Pc or command Z on a Mac. Just copy it. Jump back to our design, click on this and instead of just pasting it because you just get a copy of it, which is fine. You can get an edit and you can get a paste appearance. That's super cool. It uses the same shape, but it's added the rounded corners. The drop shadows. I can go through now and pick my color. Do you think it needs to be the blue? So that's just a handy trick. Okay? It's gone through. They've picked the blur in the shadow and I'm gonna look at it 100% looks more like a button. So we've done it for a button here, but you can do it from anything in here, anything that you like, you can just copy it. Okay? And it will pull through the style for that. Something is a bit more obvious, zoom out. Let's do this text here. So you're like, you're like, oh, I like hello world here. So I'm gonna copy it. Just double click it so I can get inside the symbol, copy it. So I'm back out, grab this and go to edit paste appearance and it's going to pull this right font, the right size, the right color to match that, that is paced appearance. I'm gonna undo it. I'm going to go on about buttons for a little bit longer if you have to leave. It's okay. There's some good points. Um, I find myself like, I'll show you one of my big faux pas, one of my big foot pas Okay, I'll show you where is it? Here it is there. So I was doing this right, This is an old website of mine and you, that was the buttons, they will look like that and you can see that doesn't look like a button at all. And people were like how do I start the course. And there was a button that looked very similar to this one except it was the red color but it didn't have the rounded corners with a drop shadow. And people were like, how do I start? And you're like well click the button and they're like where's the button? So I had to double back and just kind of add the rounded corners and the drop shadow to it to make it feel like a button and needed the space either side. I didn't do it for this button. I should have Okay, but bad button, better button should be read. No, it's a bad idea. Anyway, old website now, that's not the only way of doing a button. There's lots of things you can do to kind of express buttons. I'll show you one of the Ui kits that I downloaded. That was pretty good. So it is in your exercise files under Ui templates. And there's one thing called other and this one here you can get it from the adobe web site if you go to file Ui kits other, there's this one here. This one's by Naomi Atkinson. Thank you know me. It's really good and it just really expresses. There are different ways of doing buttons right? Like there's about this one here. There's a button with a line on the inside of it. And plus there's little addition of these to greater than less than less than icons to indicate. Like go this way. Sometimes you need those to help indicate it. Sometimes a plus is better. Let's have a look bad scrolling. Where else is some more buttons you can see here. The addition of an arrow helps sometimes a little Plus I want to find the plus one. I know it's in here somewhere. I'll speed this up while I find it. Okay we're back and you might have seen it painfully. There's a whole like button section up here and there's no plus in it. So I'll just fake it. So often people will do this show that there's a more button kind of thing. So Arrow greater than there's lots of ways of communicating buttons and that's what I thought was a good example of lots of the different ones. Now, another thing to consider is the color of your buttons and what they do that red button I showed you earlier, I don't like because it kind of conveys the wrong meaning. I'll show you one of the other projects examples of working on. So this one here, right? You can tell I'm a fan of that color when we originally launched it and we did testing it was just, it was really hard but we didn't have, I didn't have this red color used and I ran out of colors for the buttons. I was just using gray or blue, whatever it was and it was like people were clicking this delete me course button and freaking out because it's a very important button and it really needed it to be read. The other thing I've tried to do in this site is I've tried to give these meanings, so I'd love all these like these buttons here are my addition buttons. So you kind of end up like communicating things with people like training them. You wouldn't want the next screen for the green, you know the green to not, you know this save button to be blue. So I tried to keep all the either additions or saving to be the green preview throughout the site is gray and this kind of like just edit is blue throughout the site and this kind of red is the be careful. I've done it for a few other things we have to do it for as well. You can see there delete save. Where is my little had to make these trash cans red as well because people are clicking them. There's another couple of things I want to show you there is something to do with the end. We're going to draw a couple of buttons but hang around button theory, a couple of cool places you explain it dot org and you search for buttons. There is some cool like I've given you the once over but have a little look at kind of different best practices for buttons. They've got some really cool stuff in here. Let's have a look at this first one here. Hey, it's even the materials button. I don't want to sign up but it kind of gives you the evolution of buttons and I guess not the evolution, but it'll give you the language to talk about this kind of like micro interactions, which we'll do later on ghost buttons. There's just lots of useful stuff you can learn about little simple things, little ui items like this. Another good places you eye movement dot com. I did assertion here for buttons and yeah, just some really cool useful information in here. Plus just some cool examples of buttons like these ones here. Is that a square? Cool. I'm not sure what to call that yet. Like the rounded corner but fully rounded square. Cool. That might not be a word. One of the other things we're experiencing with is my developer came up with this and I thought it was brilliant. So in here we can pick an image and you can upload an image and we're using the image to just instead of like a loading screen and he's got this, which what happens this thing kind of slowly but surely uploads. Watch you see it's going a bit fast now, but it kind of uploads and shows you and indicating through the button rather than doing something separate, which is nice. Anyway, there's more to buttons that meet the eye or at least rectangles that I do. What I'm going to do is build a couple of buttons that we need for this course, plus adding the logo to it before we move on. So what do we need? I'm going to match the size of this because I want it to be consistent and I lie, I'm probably going to make it a slightly smaller size to match in with the grid. Said no more grid, but here we are. Okay. I'm going to probably use now. I want to use an off white. Haven't added it yet. I do like just a slightly off white. Might just be me and put it in there And use that one. Alright, I'm going to duplicate that and use it centered and we're gonna have two buttons up here. There's a login login and use green, My second button going to be the sign up or sing up. I'm gonna make sure they're all lined up nicely. Yeah, now this text kind of sits a little bit lower in here so tap it up, I can hear turn my columns on because I wanted these fellas to be over here. The other thing I want to do is select both of them. I'm going to make sure responsive resize is on. I want you and you and I'm just going to drag it in. You can see if you've got them selected it will kind of tuck the buttons in and I need another one of these needs to be exactly the same size Nice. My column off and both of these guys do not need to be bold back to the regular And to break my consistency. I think 16 is probably public to these two guys. Nice. We're gonna add our logo while we're here as well. So go to file. Let's go to import and in your exercise files under images. I'm going to find the logo. So what do you want? We use logo one S D S V G. Okay. And black against the gray is not going to work. So I'm going to one group. It. Okay, grab all of these guys make it white group, it make it smaller, hold shift. Turn on my grid. You start to see some of the shortcuts become handy. Eventually can turn the grid off and while I'm here, I'm going to add it to my symbols library. This one is going to be my HQ logo. This one's gonna be on black on black and white. Just means how I can use it. That's how I do it. Anyway. Alright, last thing we're gonna do is I'm actually going to pull these out to the edges, holding down the option key. Ok on a pc to get into the sides. Here you go snap a Rooney and I'll use that column to kind of show the edges rather than use the boxes because I want them to spill out to the edge. All right now you can move on. I'm just going to rotate this guy around because I don't like the button is the blue and I've switched the gradient around so that I can use the lighter color, that one there to light. Yeah, there we go. Alright, now we can move on.
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