Skip to main content

XD App on Your Phone

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

Daniel Walter Scott

XD App on Your Phone

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

25. XD App on Your Phone

Next Lesson: Fixing the Position

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

XD App on Your Phone

Hi everyone. This video is all about testing on our phone. Okay So we build that little mock up wire frame of an app and we don't wanna like we've been testing so far using this. Remember we went was the command inter it's over there, apologize when I'm facing this way, you can hear me when I'm facing this way. Not so much the microphones there. But anyway we've been testing just on the computer. Remember this thing. Okay and just kind of skipping next and that's cool and works but testing on the phone is so much better. Right? So what we need to do is you need a couple of things you need a phone you need it could be Apple or android doesn't matter. So an iphone or an android phone you need to have it plugged in. You need a cable so you can't do it wirelessly at the moment you plug it straight into your computer. Now be careful with the cables. I've had a trouble like not all cables will carry data. Some of them are just charging cables if you've got a cable and it's like taped up and ...

it was bad to start with it's probably not going to do this thing so just make sure if it's not working find a cable that looks legit. Okay because not all for you can't tell just plug them in or some of them will work. So you've downloaded the app you've opened it up and it will ask you to sign in with your Apple I. D. Not your Apple I. D. It will ask you to sign in with your adobe ID. So sign in, you'll end up a screen looking like this and the one you want to use is live preview. So it's kind of the middle one. I click on that and the cool thing about it is it will start opening hey the screen that I have selected here. So I'm going to close down that and you can see there's the blue thing and it's a mattress on the screen. Watch this. I'll click the other one, the great one and then there's the black one. Is it working? There's the black one. Okay so it's it's totally live. So what I'll be doing is I'll have this propped up. I just got my little stand here. Okay and I have it sitting here and I'm constantly open. Remember my desktop views over there constantly open on my laptop. I have my phone constantly open there. And the cool thing about it is especially when you're picking things like font sizes and your logo size, you need to really see it on the phone, not not on the on the on the monitor here. So it's live as in check this out. I'll move it around ready, moves around on the screen and moves around on my phone. Okay. I love it and what else can you do? And this is totally usable. So remember we added that prototyping before. Watch this next next okay up and down. Cool. Huh? So we're gonna like if you were testing this with clients, Okay. And you want to show them how it works, you just bring your laptop along, plug this in and they can actually start using the wire frame. I don't test the wire frames very much. But when we get to, what do you call it later on in the course, when we do a high fidelity version, this is a great way to do user testing little tips is the main one is three fingers. Three fingers on takes you back to kind of like a screen where it will ask you things like you can browse the upwards rather than just like trying to navigate through them. You can actually just see them all. You can save screenshots and share and all sorts of other stuff. So three fingers is the only real main one. Okay. And you go back to the demo and now there's times where this doesn't work. One is the cable one is if you've got these two things right? You've got a mac or a Pc. So that's one of the things you've either got one of those two and for your phone you've either got Apple or so an iphone or an android phone. It's one of those two. There are some others. I know, but they don't work okay. But most people have got macs or pc's iphone or android? That is a mac. This is an android works perfect. That is a mac. If I had an iphone, it works. Perfect. Okay, so max good. If you've got a mac works on both android and iphone, if you've got a PC or Windows pc. Okay. Uh Windows mentioned it's a Windows pc. It will connect to an iphone. Perfect. Do this live plug in thing if you've got android though. No working. Okay. So there's a workaround, which I'll do in a second. But if you if you don't have a Windows connected to an android, you can skip along. Okay. If you actually everybody hang around because it's actually quite useful because the problem with this is it's connected. Okay? But if you want to have this on your phone so you can be walking around and like meet somebody like, hey, oh man, you should really look at this app that I'm building. Okay. You can kind of make it offline and it comes along with the phone. It's not, you know, you're not gonna see it update straight from the screen on here. But at least you can take it around with you. So it's good for everybody. You can just take a nap around and it's totally kind of usable, but it's the only way if you've got Windows to android. All right, so let's jump into the computer now and I will show you how to get that working. All right, jumping. Okay. To make this work. Doesn't really matter if you're a poor old Windows person with an android phone and actually they keep changing like they're updating this over all the time. You might want to double check before you go off and do all this because it might actually just work by now and there might be, yeah, it might all work. But even if it does, this is a handy way of not having it connected to the phone. Remember not using a cable. It means you can walk around with the cool little mock up on yourself. So to do it, all you really need to do is, or the big thing is file you need to go either save. Yeah, save as you need to put it into your Creative Cloud Files, folder on your machine. So because you've installed X. D, you're going to have this file somewhere on my Mac. It was just installed on the favorites here on a pc. I'm not exactly sure where it is, but you can check it by going to the Creative cloud app on Mac. It's at the top pc It's down the bottom, go to your preferences. Okay. Which is a little dot dot dot here and go to preferences and then hear clicking on Creative cloud. So you're on general Creative Cloud, click on files and it should tell you your folder location. So in my case it's under I'll show you where is it? Creative cloud files. It's under all of this stuff. So it's under my users Daniel scott sitting in there. You have to do a search for a try and find it and may be added to your favorites on a pc. It's going to be in a different place, but this is where you want to save it. So I'm going to go file save, there's already saved mine. Okay, I've saved it in here, click save. And what's going to happen is your credit card app is gonna start sinking. So I'm gonna go back from preferences on the bottom here will say sinking, sinking, sinking, sinking, sinking. There will be a little icon change for this. It'll look like it's kind of doing something and eventually it will be uploaded to the cloud and that's it. What you can do now is jump back to your phone, I've got it in my hand here, you have to imagine to load it up and you'll get the option. It will actually default to something called XD documents. We've been using live preview. If you're still stuck in live preview, remember give it a three finger click and you'll be able to kind of go back out of that way back to the home screen. Okay, And on the home screen says XD documents, you might have to refresh it by dragging kind of down on it to refresh it or closing down the app and opening up again and I can see my app there he is there, I can open it and I can use it just the exact same way I was using the live preview. Okay. I can click through it and start working with it. The only difference is that I can't do the live updates. So say I make a change here on my screen and I go through and I move that over there. It's not going to live update. What ends up happening is I have to do a save, it'll have to sink and then it will be available. So it's not like a really fluid thing, but it's fine for doing a big bulk test. It's not as exciting as like the full on next to the computer. Looks fancy as well. People walking past and you're doing stuff on your screen. It's updating on your cell phone call. Alright. I hope you found that useful. Let's move on to 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