Skip to main content

Navigation Tricks & Tips

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

Daniel Walter Scott

Navigation Tricks & Tips

Lesson 22 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 2000+ more >

Lesson Info

22. Navigation Tricks & Tips

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

Navigation Tricks & Tips

Hi there, this video is all about navigation tricks and tips. It's also just identifying some of the problems. Okay. Some of the things you like, why wouldn't explain It's a good way of doing that sometimes there just isn't we'll go through them now ways that I get around them and if you've got better ways, I'd love to hear them drop them in, the comments are always looking Waze navigation is probably one of the harder things to do in XT navigation is one of the, I guess troublesome things I find using XD to try and go fast anyway. The one I use the most is basically what I do is if I need to go to a page that's far away, there's no like jump to page button, which is annoying. Okay, so all I do is I will command down on a Mac, Control down the pc. We've done these shortcuts before but I'm gonna show you how I use them to move around. Come on zero. I click on the page that I want to get to. I click on anything in it. Command three which zooms in on it. And then I got a commander one. So...

you're on a pc. It's control all of those things. So it's a bit weird. So I need to go back to the first page ready. Command zero click on something, come on 313 is just too close, but at least you pulls your like focus all the way over to the art board then you can head on command one. Not nice. I know, but it's the way I get around. If you got a better way 031 works for me anyway. Now the real big thing that I found speeded up my workflow is my mouse. Okay, so not everyone's going to have this, you might be working on a laptop with a little touch pad, kind of squirreling away with that. I do that lots but next year real super helpful one is a mouse with one of those wheels in the middle. Lots of them have it. I'll show you I'll jump out onto my cell phone and I'll show you my one at the moment because I quite like it, it's pretty cool and but that's probably the best one to go in and out okay, in and out up and down. So naturally I'm just gonna be on this page here and if I use my scroll wheel up and down okay, it just moves me up and down the page which was cool. If I hold shift though it goes left and right, which can be quite handy. You can just kind of like zoom across from holding shift so nothing held down up and down with my mouse and then shift left and right where the real magic happens. If you hold down the option key on a Mac or the old key on a Pc, you might have seen me do this in the course. It's just really nice, like so commands hero and all you do is point your mouse to where you want to go, hold down the option key on a mac or a PC and just scroll the wheel scholar back out, goes to wherever your mouse is. And that's probably the biggest thing. I just, I don't know how I discovered them. Like just started holding down keys to see if that would work works on lots of programs as well. So other adobe ones point where the mouse wants to go and then zoom in and out and I'm gonna jump to my cell phone because this particular mouse, if you're like oh that sounds like a good idea or your mouse just isn't doing that as fluid. It's kind of like going doing in small bits. I'll show you the one that I've got real quick. Hi everyone we're back to bad audio and bad cell phone footage. But I wanted to show you this mouse. Um Yeah It's nothing fancy whereas that I found the name of it, it's called this the M. 720 triathlon multi device. You're pretty that has got a different name. You can buy that by itself. You don't need the keyboard. I bought both of them because I like Bluetooth and I wanted and it connects to. I can have it connected to see those buttons there 123 And see that 123 on this one. I can have it connect to my computer if it's on one. But then if I have to I'll turn it off, it connects to my phone. Bye bye. And both of these two. And it's weird. It's cool. You can use your cell phone using a keyboard and a mouse. You get a little cursor and all. And I find it really good for things like instagram where um I want to like type in instagram and not try and smash away at the tiny keyboard. I don't know if it works for Mac, you'll have to, sorry, an iphone I'm using android, I've got a pixel three google's phones. It definitely works for that anyway. The main reason is I like it is because it's really handy for using XD. So let's jump in next D. That's the scroll where I was talking about, right and normally does this right, you kind of just go up and down and just you know what you do and it's handy. But this one here has a cool function where normally it's just like little Clickety click click click thing. If I click this off though and watch this, it spins, you watch it, watch it, can you see it spins on forever and that's really handy. Um Really handy and when I'm zooming in and out, okay, I'll jump back to us. Actually you saw it in the last one. I can't hold the option key down on this to zoom in but it's going up and down, it means I can just kind of flick it and it keeps zooming in or sliding up or left to right until that little wheel stops spinning and I find it real handy. How handy you might find it. They're not that expensive these things. Um Anyway that's I just thought I'd give you my little tip. Alright that's gonna be it. That'll be it for this video as well. We will jump into the next one. I'll see you over there. Bye now.

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