XD App on Your Phone
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
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
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