Skip to main content

Working with Type

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

Daniel Walter Scott

Working with Type

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

7. Working with Type

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

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

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