Skip to main content

Alexa Voice Commands

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

Daniel Walter Scott

Alexa Voice Commands

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

81. Alexa Voice Commands

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

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

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