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

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

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.

2,000+ classes ranging from fundamentals to advanced techniques.

Class Project 11 - Micro Interactions

Class Project 11 - Micro Interactions

Lesson Info

74. Class Project 11 - Micro Interactions

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions