Class Project 11 - Micro Interactions
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
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
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