Skip to main content

Class Project 11 - Micro Interactions

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

Daniel Walter Scott

Class Project 11 - Micro Interactions

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

74. Class Project 11 - Micro Interactions

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

Class Project 11 - Micro Interactions

All right, welcome back its class project time and you're going to go off and make your own micro interactions for the menu, the furniture project. I don't mind if it's for your app or for your website version. Honestly, at least three examples. Okay, so that they can be simple. They can be really complex. Have a little look remember at dribble, I found one here. I love it's quite a long one, but I don't expect anything that long, but just one of these little pieces just give you ideas of what you could do and I want to see what you do. So I'm going to give you some tips on how to get it, you know, be able to share it with everybody and your clients and so you need to record your animations on a Mac, it's super easy on a pc, it's slightly harder. I'll show you on a Mac. All you need to do is N X T, you know, launch a preview and then you're going to interact with it. But let's turn the record on, this is Mac, only click on it a couple of times and then stop it. It's going to save an MP...

four somewhere, I'm gonna stick it on my desktop anyway, you can remember and then move on to the next step. If you're on a pc or Windows, there's there's a few versions of Windows out there and I'm not much of a Windows guy. So I've done some research and apparently this is all you need to do. Um apparently, so apparently Windows 10, if you're using Windows 10, hopefully there's something called a game bar. If you do a search like it's in the bottom left, you search for the Xbox app, Open that up and then use the shortcut command, Windows G. So there's the Windows key that you never hit. It's going to ask you want to record, you do record it when you're finished, see if you can save it to your desktop or save it somewhere and then you can move on to the next step with us. Mac users. I sometimes get a little it sounds it sounds like I'm hoity about Windows. I love Windows. The Windows Man, this is good, powerful cheap max, a little bit more reliable and I don't know, I feel like you're gonna be you're gonna be walking around with a Macbook Pro in your hand anyway, so once you've got your Mp four um that's hard to share. Okay you can share it via YouTube or vimeo but it's easier to share as a gift so we need to convert your MP four which is mine on my desktop. Where are you Desktop? There's my MP four. Okay so it looks good here. Okay but I need to make this an animated GIF so that it can share on social media easy you can actually upload this to like the facebook group totally just straight on onto their instagram will let you do video twitter will but the comments or assignments on this website won't. So how do you become a gift? So go to Easy gift dot com just got to deal with the ads. Okay, go to video to give, it's pretty cool as you do some cool cropping. Um If you are a video person video girl, a video guy um you can use media encoder just dump it into adobe media encoder and one of the presets is gift. It's a little bit more hardcore for us. Simple folk. What we can do is just go to easy gift dot com video to give upload the video. There. It is there, wait for it, pick upload video. It's a bit clunky this side. The ui is not great but it's a pretty amazing free service. So eventually it's gonna it's gonna show you. That's just that's just a preview of your MP four which is not that exciting. Down the bottom here is yes, converted to a gift. You can play around the different settings if the quality doesn't come out perfect for you maybe increasing the frame rates? They're fast and maybe go straight to 30. Might look nicer because he's a bit jumpy here. Okay so let's go to is it max 10. Oh you can only do that for 10 seconds. Let's go, let's have a look that's not very long. You might have to mess around with us to get the right the right output. It's a bit nicer once that's done you're like great, it's done. It's not okay. You've got to do a couple of other things you can just hit save now and you have got an animated gift. Problem with my wine is it's quite big and there's lots of white space. You have the same problem, click crop, take you to another window. Eventually the crop appears. I'm going to go, yep, I just want kind of like this chunk to share with people a loop and Danny don't click that safe. I don't mean that safe. They mean crop image, wait for the cat to stop dancing and then it's safe from here. And you will get a little animated gift stick on my desktop called Sun Moon, is that what we called it? Great name. Now my desktop here, desktop with Sun Moon. There he is the space bar. You see a little animated gift and now I can share that via social media or in the assignment section or in the comments section, instagram, twitter, join the facebook group. It's all listed here. So I want three of them. You can convert it to a gift or upload an MP four if that works for you and then share it with everybody. Don't forget to give everybody else a couple of high fives. The ones that you like to be interesting to see what you guys do. You can use the obviously the examples that we did in this class, but it's one of those things where it's kind of teaching the fish, um I want you to go off and you know, come up with your own ideas about what might be cool. It can be crazy, it can be simple. I love to see what you do. Alright, let's jump into 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