Working with Type
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
Working with Type
Hi there. Welcome to the video all about type N. X. T. Actually just getting the basics right now. If you are in adobe nerd and you'll be like man, what am I going to learn from this? Type video stick around XD has some quirky text things plus we throw in some tricks and tips for distributing and duplicating. It's worth your time. Hang about. Let's get started. Alright to get started, grab the capital T tool and I'm going to zoom in a little bit and use my shortcut command one commands ones really good when you're dealing with Type so it's controlled one on APC and that gives you 2 100% remember. It's just better to be dealing with that when you're dealing with text. Okay, be seeing it the ax, the actual size that your audience is going to see it when you're making decisions on how big it is and how small it is. So grab the capital T. And there's two type boxes if you click once you get what's called a point text box. Okay. And this is good for headings and it goes on and on forever. O...
kay, that's the way it is. And the other type box, if I go back to my black arrow, okay to kind of de select out of that and then go back to my type tool and if I click hold and drag I get what's called an area text box. Okay. And the difference between this is when I mash it, see what happens, it's gonna fix with. So headings. Body copy navigation, body copy, you only use this for body copy things that have like multiple paragraphs and Lauren ipsum, that type of stuff. You can convert each of them. I could say black arrow. I could say you I want to be an area type box now that there's a little icon for point text. That's the one area text. And so you click on this, I think it kind of changes a little bit over here. But what's what happens if I double click to get inside? I can start typing and you can see it has a fixed with the weird thing about it though is the actual height of that box is just that blue dotted line. Look what happens when I go back to my black arrow because there's all these other texts, what happens to it just kind of disappears. I'm gonna move it down so you can see it but it just gets kind of lost underneath this. So that's what this little blue dot in the middle of this white circle is meant to indicate if I drag it down any of these icons, drag it down, you can see there he is there. So if you end up with a box like this and you make it too small, okay, that little blue dot appears and it's not as important as called over set text and something like in design. It's not super important when you're doing a mock up. It might be though. Um So keep an eye on a little blood up so you can convert one to the other point text area text. All right. A couple of things we're going to move and now and start kind of fixing up our navigation. Now when you are working in wire frames don't be picking fonts. Okay. I'm just gonna leave it as Ariel you leave it as something really simple. It's not time to be picking fonts and we'll do proper fonts a little bit later in the course when we start doing high fidelity will look a little bit more. The real basics though. Before we move on is I've got this box selected. You can see over here, I'm not gonna go through everything. I am actually cause it's real quick left, align center, right align. Okay you've got underline this is the space between letters. So I put up to 20. It's going to open up there. Let's put it up to up something really high. 200. Okay. Space between letters, that's the space between lines. Put it up to and this is the space after the paragraph. So I go into here and I put a return in between these two and I open it up so I put a return in there. There's no spacing but if I go actually I like spacing. When there's a return you can see not between the lines but after there's a return. That's where I put a little entering. All right, a couple of other things to show you about text. A little quickie. Next d I'm gonna delete that stuff and what I want to do is I don't want to use this. This is an XT logo. I'm just going to delete it. I'm going to put in the company name. Don't be tempted to put in the logo here. Like it's really hard as a designer to not start putting in the logo, but then you start using the brand colors and then the fonts and then white frame is not a wireframe anymore. It's like a half baked high res version. So just stick to the actual text. So upper case is kind of a nice way to remove any kind of design from it. Just keep it all very standard. Anything I'm going to do here is I'm going to select all the text and make it white so it can be seen at least across this. The other thing is font size. Remember I'm at 100% remember, command one on a Mac control one on a pc. So I'm picking the right size and it's quite big. Right? So a real common body copy size. Well for wire frames is at 16 pixels. So I just clicked it over here and hit 16 and hit return so often I'll just have 16 everywhere. Maybe the headings will be a slightly bigger size to indicate. Kind of what our headings and what are not. And the other thing to do is on the black arrow. Can you see this little white dot here? Okay. When you're in point text, okay. Which pretty much most of the text that I'm doing here, except for big chunks of body copy are going to be this point text. You see this little dot here and there's a couple of things, it's kind of weird, and if you click hold and drag it down, it's a great way of adjusting the size. Okay, So, and this one here doesn't have a drop down or a slider, so you have to keep typing it in there. So if you're just like a little bit bigger, just drag that. The other weird thing it does is you can see there if I'm right over the top of it, it's up and down. If I come out just a little bit, so not quite on the circle, but just outside, anywhere here, click hold and drag it. It's rotating. Now, you see it over here, there's my rotation and it's up to you, but I'd stay away from rotating text. It's quite hard to do in an app and coding a website. Weirdly, um, it can be done, but yeah, Your developer might hate you if you start rotating text and he's gonna go try and make a consistent rotated text. You have to have real good justification for that pain. But anyway, so we've got our text here, a couple of things I want to like this here, what is this? This is set to 10.1 is a little bit small for what I need. And so I'm going to click it. Delete it. Goodbye guys, I'm going to duplicate this across. You can copy and paste it. Okay. If you select something and go edit copy and then edit, paste it just ends up over the top of it so you can see they're just there. So what I find is a little easier is with the black arrow. So click before you start dragging. So I'm going to drag it over here. Hold down the option key on a Mac or old key on a pc. You can see just kind of while you're dragging makes a copy. I find that quite useful. So I want a couple of things. This first one here on my wire frame is going to be the example. It's like having an example version of it. I'm going to hold down my option and drag over pricing. So you type this in as well. Now, the reason we are keeping these in separate boxes because obviously I could just put in space space space, space, space, space, space, space space and then put in login and that's fine. Two things. One is it's hard to kind of adjust that spacing. That's not a real big problem. What ends up happening is in XT, which we'll see later on when we start doing mock ups If this is one big text box with all the different like words in it. You can only get it to be a navigation item for one thing because it's one text box, you can say this whole block of text goes to the example page, but you can't split it up. So with these all in their own little type boxes, it means later on when we get in the course, we can actually get this button to go to something different from this one. So you'll get in the habit of that. So I'm going to have a couple of these, I'm gonna have login and we're going to have start trail, start trial. Okay. Another thing while we're here is you can see how I can see the edge of this thing. If you can't see it. Sometimes clicking the white background, click on the edge of the art boards. A nice easy double click on the edge of the art board is a nice easy way to select the whole art board. Otherwise it's clicking on their name when you've got the whole art board selected, you can adjust these columns here. Mine is quite light. I'm going to adjust mine mainly because I want you to be able to see it. Okay, You can see it there through the video. Sometimes the videos don't show the contrast very well. Anyway, that's a handy trick. Double click the edge and you get the outboards kind of overall settings. That's not the trick I wanted to give you the one is um I want this to kind of line up close to here. I want them to be all kind of distributed some of the same spacings. There's a couple of ways you can do it. You can select them all. Okay, so I've got everything selected including my now I'm gonna hold shift and click the navigation. Okay? So that diesel exit, that's maybe a bit advanced here. So let's just go click hold, shift, hold, shift, hold, shift, hold shift. So I'm holding shift when I'm clicking them. Makes a nice big selection. And up here there's your alliance. Okay, I want this one here. The distribute horizontally. You can see there's some shortcuts up. They're going to click on it and just spread them all out what you will find the one XD is let's say I don't do that. And let's say I like this one up and I'm like yeah, that's about perfect. If I start dragging this, I'm not doing anything. Can you see those little helpful smart guides appearing? And you can see when I get to hear it's kind of like the little pink thing appears and says, oh would you like them to be 41 pixels apart and you're like yeah man, that is too good. Look at that. Okay, I end up doing that a lot more than kind of trying to remember the shortcut or I have problems with horizontal and vertical. Always click the wrong one anyway. All right, so that's the basics for text. We are going to look at it a lot better later on when we get into kind of web based fonts and do some fancier things, but at the moment, that's what we need to get going with our wireframe, simple text point, text point, text, area text. There was a couple of other little tricks in there. 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.