Skip to main content

Prototyping & Interactivity

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

Daniel Walter Scott

Prototyping & Interactivity

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

13. Prototyping & Interactivity

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

Prototyping & Interactivity

Hi there in this video, we are going to connect our pages up, you can see the little wires there, we're going to preview it and we're going to make our wireframe interactive. Watch this ready to click the button jumps to a different page. Go back to the home page. It's simple, but quite the milestone in our course. Let's go work out how to do prototyping now in XD. Alright. Time to add interactivity. We're gonna get this first this button to go first. So we're gonna click on the blue button, not the text in the middle. So I've got it selected and we're gonna switch to from design to prototype. Okay, so your toggle between these quite a bit when you're building wire frame and a mock up. So design does all the design stuff you can see over here changes. I can do fill and fonts and stuff, prototype gets quite simple what ends up happening in the big differences. See this little box zoom in a little bit so you can see it. Okay, this little tab appears, so no tab tab. This guy is really han...

dy. Click hold and drag so when they click this blue button, it's going to go to the start trial and you just drag it to the side. You can see it can go anywhere in here. So it goes blue sea, not blue blue straight here, let it go and you'll see it connects to whatever the middle of the outboard is. Usually it's a dive down here that now is connected. Let's just see what it does by default. So to preview that you click this little play button up here on it. The launch is this like a little preview window and because it's separate from XT, it's this kind of separate little window and if I click on it ready. Ah cool. Huh? Basic navigation. We're kind of trapped here now we can't get back. So we're going to close it down at the little red box to go back in our case. We're going to click on the logo. It's really common on the website and an app, if you click on the logo, you go back to home base. So whether it's selected, I can click hold and drag it and it goes back here. So we ignored this before. Okay, this little pop up little window, we're going to leave it all at the moment by default and have a look at a bit more in a second because I want to show you how to preview So and hit this little play button member play, we click on it, home button goes back play. That's fun. Okay. But this window, you can close it, reopen and close and reopen it if you are like me and you are working with more than one screen. Not everyone is and you don't have to, but I'll just quickly show you here on my phone what I do is my setup. So I've got a Macbook Pro, it's nice, it's portable but the screen is a little small, so I fixed that by plugging it into this big LG monitor, LG do some really cool four K monitors cheap cheap enough, like I think it was like 400 U. S. So it's not cheap but pretty cool. Anyway, so what you end up doing is remember we hit preview before? Okay. And it appears it appears here. Okay. And we kind of have to close it down to get back to X. D. So what I end up doing is clicking holding and dragging it over here so it just appears on this window. Cool. And I never close it down, just stays open. And the cool thing about that is if I zoom in, hang on, I need to put my hands down for shortcuts. Sorry? Sorry, sorry. Alright, I need a I need a I need a cameraman following me around, I don't have that. So I've zoomed in really close here. Okay, I'm gonna go even closer real close. So this you see the screen there, you see over there, it's still that it's normal size so you can be designing in here and doing things and actually just checking it over there to see whether it's the right size rather than going back to 100%. The other thing is it's a live preview so I'm gonna kind of see if you can see both of them to the giant blue button on the right. Okay. I'm not sure if it's on the left or right in the video and get confused but if I click and drag it, can you see it's dragging on both. Okay, so it's live preview which is super handy. The other thing I want to show you is something you can see. It's quite thin there. Okay, it's not and if I try and make it bigger, you might have done this already. You're like well it's going to make it bigger and it does this and the black bars up here. Why is it showing me black bars? It's because over here if I go back to design, view, it's back here in Camp Tasia. I've switched back from prototype to design and I'm gonna move across, click on my outboard homepage name. Okay, zoom out. Remember this viewpoint height. Okay, the view port height is what's determining that kind of what you see on that laptop. So what you can do is you can adjust this and that will give you a taller box on that laptop. The only problem with that is that we're kind of designing for the 768. So we want to just keep that little letterbox window so we can only see that much. So we know what's up kind of above the fold but that can be a bit painful when you're working. So we'll jump back to the cell phone now and I'll show you kind of how it works. Alright, see you back and what we're gonna do is go to prototype actually know being design and remember you can change it over here view ports but you can also just drag this line and this is what I'm gonna do. I'm gonna drag that line up and down up and down and watch this up and down. You can see so if you go too far it's gonna try and put too much into view ports and your laptop on my my laptop screen can't show it. I want to find just this happy medium of that. Okay so my view ports ended up being at 10 and it's good for previewing on this but I need to realize that remember the fold kind of finished up here so I just need to be conscious of that but I can't deal with the black box black bars. So I just adjust my view ports to help me show on my laptop how confusing was all of that. Hopefully it wasn't too bad. Let's jump back out now. Alright one quick little thing is loads of people ask me in different videos what monitor that is because I always talk about it so I'm just gonna show you here so that you can go off and google it and figure it out if you want to buy it. Um That's the top there is the L. G. 27 U. D. 88 W. I bet you can't buy that anymore. It's about a year old now And depending on when you're watching this video it could be like 20 years old but it'll have family members that you can buy so um don't go and buy it you don't have to but people email me all the time about that so I'm just trying to cut that question right out of there. Alright back to the video. Alright I apologize to look at some of that video just shot on the cell phone. It was average not a cameraman. I hope you found it useful though. And the last thing I want to kind of just quickly take off for this kind of basic prototyping. We're going to do like full on prototyping later on when we've got our kind of high high resolution version going or high fidelity. Okay so at the moment though we're just going to cover all the basics what we need for our wire frames. There's a couple of little things is if I click on this you got a prototype if you need to break the wire. Okay so say you're like oh I don't want to connect that anymore. There's two things you can do. The easiest is to click drag, drag, drag and just let go in no man's land and it will just kind of snap back to its home. Alright wait there for a second little course update um in the rest of this video I'm going to discuss making adjustments to this. Okay. And what you did in the past as you clicked on it and it all these kind of adjustments here popped out. They've changed XD now. So all of these exact same settings when you click on that button instead of being a pop up, What happens is you click on it okay? It appears all over here, same stuff. Just all the triggers and types are over here. I'm going to discuss what these do throughout the course. Okay. But you was confusing where it didn't pop out here anymore, but it's over here. It's not too big a jump and now, you know, all right back to the course. The other thing you can do, I've undone that is you can click on it and say I'd like it to go to this. So you're saying I wanted to win this button is tapped. I want to transition to this page. Okay. Which is our start trial and that's the name of the outboard up there, you're gonna say none. And that gets sort of it as well. The other thing you can do with that trick is let's say you're in here really close and like we've got two outboards and it's pretty easy but you'll have, you can, you can have hundreds of art boards. It's not uncommon what you can do instead of trying to drag to like the 100th art boards to like it's just too hard. You can click on this and say actually I don't want to drag anymore. Dragon is cool but choose an outboard. I'm going to click the start trial and you can see it's done the wire as we mount it's connected it instead of dragging. Its just another way of doing it. The other thing is you can kind of see it here. If I have black arrow, click in the background, I'm on prototype and I go, where's the Edit, select all. So command a on Mac. Control a on a pc to select all. You can get this kind of nice. You can see all the wires going all at once. You like have I done all the buttons. It's really easy to see in this case and the one you don't have done is start trial. I was playing around with that in the break. So you don't have this one. So that's the one we do need. So start trial goes to the same box. I'm gonna click hold and drag it and connect it. And this one here goes back when it's done. All right. That is the intro to prototyping and using their live preview on a different monitor. 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