Alexa Voice Commands
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
Alexa Voice Commands
Hey there. This video is all about voice commands in adobe XD. You can ask your mock up questions and it can give you answers. Let's give this a whirl, what is my monthly earnings? Your current monthly earnings are $4528. Cool. Huh? Alright. Let's work out how to do this now in adobe XD. Alright. Quickly before we go on, why are we putting in voice commands now? Probably more typically it's within an app. Okay. And like google maps here, you can hit the little microphone, say uh give me directions to home And it will do a search based on your voice and give you the directions. I use it all the time on my phone. I do things like set alarm for 3:00. Okay or send a reminder or directions home. It's really handy so we can mock that up in XD. The other thing that's really useful for and it's becoming more and more popular is these little guys, these kind of like in home assistance, there's a couple of varieties. The main three are apple, that's there. One there, the homepod google has one c...
alled google home and amazon's is probably the most popular. Okay, this is called the Echo. Now you just plug them in if you haven't seen one of these, just plug them into the wall. There are little speaker, you can ask it to do stuff, get to play music. I'm not really, I haven't really brought into this thing yet. I use my phone to do lots of that sort of stuff. But hey it's meant to be the coming attraction. So you might be asked to mock it up just so you know, I remember this is the homepod google home and amazon echo within them. They have their own little artificial intelligence. Voices. Okay. Apple, Cause they're Siri amazon cause there's Alexa and google just calls it the google assistant at the moment. But they like to change the name of everything every five seconds. So who knows what they're going to call it tomorrow. So there's the actual hardware and then the software is the kind of stuff inside. So let's look at how to mock that up now in adobe. XD. Alright. It's pretty easy. What I'm gonna do is I'm going to do it to this dashboard here. Okay. So this dashboard, you need to be in prototype mode, click on the dashboard title. Okay. I'm going to break any link that I had to it. So click it and at the top here where it says trigger, you've got, we've done tap before. We've done drag. We've done time now it's time for voice. So the trigger for this transition. Well trigger is going to be voice and this is where you the commanders, like what you're going to ask it. So we're going to tell it to open courses page. So that's what it's going to be looking out for then what is it going to do? The action? We're going to get it to transition to an outboard called we need to give this a better name, this is going to be my courses. Okay. And over here we're going to say do this voice lost it. I'll speed this up. Okay, transition to my courses page there, is there? Oh wrong. I've got two courses pages. This is going horribly wrong. Okay. Always put up in the front of it normally. Yeah, the idea. Alright, so that's going to be it. You've got to remember this. I always forget this. Open the courses page. Especially I'm gonna demoing it for somebody. I'm like, I'm saying all sorts of things, I can't remember what it is. So write it down if you're gonna go dimmer it to your clients or impress your boss so that you know, write it on your hand. So now all we need to do is open it. So I've got this upward selected. I'm going to go to preview and what you'll notice is down the bottom here. Can you see hold space bar while speaking now on some computers, you might have a little warning from your computer saying, hey, it's trying to activate your uh your microphone on your laptop or computer just say yes, I agree. Okay. And you might have to relaunch XD. That's just a guess and mine didn't ask for it, it's fine. So I'm going to hold down space bar in a second and ask, I can't even remember now what it is, Open the courses page, we'll see. So for this to work, you need to hold down space part and you need an internet connection so we'll give it a go open the courses page. You can't just say anything it needs to match what you wanted to do and hopefully it'll transition in a second to that page now mind takes forever because of my really slow internet connection. It worked. Cool. So yeah, I love it. Okay so the big thing is is that if it's taking forever it's either broken or it's your internet connection is either non existent so it won't work ever or it's really slow and like mine just takes a bit of time now you don't need a fast internet connection. Like I just happen to be in the middle of nowhere for where I do my recording. So at home works perfectly fine. That's one way of doing it using it for navigation. The next thing I want to do because instead of navigating, I wanted to I'm going to break this link I wanted to voice, I'm going to ask it what my monthly earnings are. So it's not going to leave this page, it's going to read something back on this page. You have to be very you have to tell it what to do. So the command that's gonna be what's my monthly earnings, I'm going to say speech playback and you have to physically write what you wanted to say. Okay so to save you just type some stuff in, copied and pasted it. So it's going to read this back to me. So give it a test, remember command return on a Mac control return on a Pc and we're on the wrong page. Gotta remember what you've asked it. It's a preview now. Mine, I'm just gonna leave this in here. I'm previewing and it's not appearing bottom bidders. I have to prove you kind of twice. For some reason, I'm not sure why. Remember to hold down space bar. What's my monthly earnings for the internet pigeons fly off, gather data and come back And your current monthly earnings are $4,528. The projected total for this month is $12,500. Also can I just say you're looking very handsome today Dan. Have you done something with your fringe? Low, low booty up, knock you down. All right, so you can get it to talk to you. You ask the questions and it responds sometimes a little sometimes nice, sometimes a little regressive. Haven't seen my fringe since the early two thousand's. Okay. Next thing I wanna do is we've asked the question and it gave me a result. You can actually have more than one question and answer on a page. Let's say I want to respond to it again or ask a few different questions. The way you can do it is the moment we've got attached to the whole art board, you can see it here. Okay, The whole up board is waiting for this question. But what you can do is you can actually go back to design view and you can attach that transition, sorry, that voice interaction with actual objects as well. Okay, so you can draw a little objects. That's what I'm gonna do at the top here. I'm going to draw a big circle, big and obvious. I'm going to make it magenta so you can see, okay, and we can attach it to this and then hide it. It's kind of a little workaround. So while it is visible, let's switch back to prototype and let's add some more of this voice stuff. So I'm going to say there was a low, that was low blow Alexa, we're pretending we're using Alexa, she can say stuff back, I can click off and you can test with it on, but eventually you obviously don't want to be part of your prototype. So you can go over here and go to your we've been on assets for quite much of this course quite much. Go to the layers panel. Okay, find it, I'm gonna give it a good name. This is going to be my voice trigger. So voice trigger one and I'm going to turn the eyeball off on it. Okay, This one here, the lie, going to hide it still there. Kind of you need to find it in your, you'll only be able to grab it again in your layers panel. Okay? But it will be yeah, it'll work. So let's give it a whirl again. Let's give it a test. What's my monthly earnings? Your current monthly earnings are $4,528. The projected total for this month is $12,500. Also, can I just say you're looking very handsome today Dan have you done something with your fringe? That's a low blow Alexa. Sorry dan. My passive aggressiveness is set too high to change this setting. Please enter the menu and shoes user settings. All right. And that is voice interactions. We've done it with our app. I'll show you a Ui kit for amazon's echo kind of the ui version where you actually have a screen on it. A couple of things. You need to note that you can't change things like the Voice. Okay? It's stuck at that lady's voice. It only works with kind of us. English works fine with me and a kiwi from New Zealand and it seems to do fine. Pretty clever. Let me know in the comments if you have a different accent and it doesn't like it. Other things you can't do is you can't record it. You can't hit record on this, start using it holding space bar and try and it won't record all of that at the moment. Give it a try in your version. It might be something they update, remember they keep updating XD like every month. So give that a whirl doesn't work at the moment now, this does work in your mobile app. Okay? So you have done mobile testing earlier on in the course? So you'd make that the trigger button, okay? And you can click and hold it down on, you have to hold it down in your app okay? The, the XD app and you can ask the questions. The other note is to remember to write down all the commands because I can never remember them going to a client meeting. I'm like, look at this and then I'm just a fool. Kind of talking to my phone and it's not talking back. Alright, so have a look at that Ui kit. So you can find the amazon ui kits, there's a few of them around XD have kind of commissioned a couple. So if you go to file UI kits and go to more UI kits, it takes you to a website. It'll take you to this page and then, right in the first one is one of the newest ones, alexas kind of XT mock up. So we'll give all the Ui components standard in Alexa. Now, my friends, is it for voice interactions, I'll see you in 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