Mocking Up an App
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
Mocking Up an App
Hey there in this video, we're going to mock up a basic part of our app. Link it up. Look at some of the specific transitions that you will use for an app and some of the things you need to be aware of when you're working with other people's U. Like it's alright, let's get started. Ok, so to create our phone, we're going to use the art board tool. Okay, It's the second from the bottom. Okay. Porto. Currently Iphone X 10 is the latest one or eight. Okay, so I'm going to do it for the iphone 67 and eight. They use a real standard kind of height and width. The iphone X has that kind of like a little chunk taken out of the tops up to you to click on it and adds it. I'm going to add mine just down to the bottom here. Um there's no real reason for that. You might have them in a separate document. Okay. The only trouble is you have to copy and paste bits across, but so there's my first little outboard, you might be in the future and there might be a nine or 11 or 12. Okay. Obviously just use ...
that, you can also see over here, there's watches, there's all sorts of other things going on over here Microsoft surface anyway, so we're going to double click the name at the top and we're going to call this one onboarding. So this is actually what I like to do is I'm gonna put app really big at the beginning just so that when I'm using my transitions, it's easy to differentiate my app upwards from the website ones. Um Cool, I'm just gonna add a few graphics to this. I'll get the editor to zoom ahead because all I'm gonna do is draw a few circles and stuff so I'll see in a sec. Alright, I'm back. Do some circles, skip next. What is onboarding? I figure I better explain. Onboarding is often, that's that part where you launch an app and it kind of tells you it either hypes you up and kind of gives you features or it will explain how to use the app in this case, this is just going to be hype. We're gonna have some onboarding like your instructor, HQ will save you time and we'll earn you money, those types of things. So I want a few of them. So I am going to duplicate it a couple of times and it's gonna be fine. We're gonna have onboarding number 11, number one, number two, Number three, like you, you'll be kind of tempted at wireframe stage, you're like, oh, add some actual stuff in here, but it's best just to keep it all very vague. Otherwise you end up with discussions of not so much the kind of, you know why frame discussions, You end up in language discussions and you might pick just some of the real basic colors. Here we go and I'm gonna switch these around. I want you to have the full of blue, you to have the feel of right and then the last one just so everyone knows where they're at whites blue. There is a point to this video. Okay. And some specific stuff to do with phones or at least apps. Only one last page. It's going to be my kind of like login page. I'm gonna go steal in the second and that was going to be blank fish for the moment. Just a placeholder here until I go and make a proper login page or at least go and steal it. Cool. One of the big differences is with the prototyping. So in this case I'm gonna switch the prototype and actually we're gonna start using a shortcut for that on a Mac. It's actually weird. It's the same on both. If you hold control down on both Mac and pc believe it or not. So the control key and hit tab just toggles between design and prototype. Design, prototype instead of clicking these two or changing it up here. Okay. So what we're going to do now is and I want to prototype and when this next button is clicked, Okay, It remembers the last thing you did. I don't want it to overlay. I wanted to when it's tapped, I wanted to transition but I want it to slide or push left. Okay, So experiment with both of them to get the feeling like they both kind of have different feelings of what's going on. So and let's have a look at slide left, always get slide left and slide right wrong. One of them is one of them see the slight left of slide right. So I'm going to test this game and let's give it a preview. Remember, command enter on your keyboard to open up the preview and it's not going to go to the right page. How do we get it to? You can either click on the name and it will go to whatever page you have selected to preview or you can set this and that will be the new default and that's what I'm going to do. So okay, so I'm gonna now command return or control return on a pc and now I can go next and you can see the difference instead of just doing a transition, it's kind of sliding it along to get the idea. It implies that you can slide left and right and on your phone you can click and drag, which we'll look at later on your ceiling. They're kind of like overlaps it and slides over the top and the push has a similar sort of feeling and let's go push left, push left. Let's have a little look which left preview. Can you see the whole thing goes across? It's up to you definitely more phone centric though. Okay. And we get to the last page and what I'll do is I'll get skip to go to skip the login page and now we're going to use our sneaky trick we learned before is I'm going to copy it and as long as we're in prototype, I can say delete, delete, grab both of these and then paste and you can see, oh they all go into all the outboard, there's only two of them but they retain their transition. So now I'm gonna preview, skip. I didn't want to skip, I did, I did wanna skip. That's just skips to the end page. So that's one of the differences when you're prototyping a wire frame on a phone, you wouldn't do that when you're pro prototyping the website. It's just something functionally you can't do on a website, there's you can, yeah, you can do overlays. Okay. But you can't get a whole site to push to the right. I've never seen it anyway. And I doubt you can do it technically you couldn't your flesh, your flesh. Next thing I want to show you is this login page and I'm going to switch back to design view and I'm going to open up the so file, open in your UI kits. So if you go to exercise files, ui templates, their wire frames, there's a special one for mobile. So we've been using wireless web, why is mobile and open up and some like this one is super good and super detailed, check it out. So there's UI elements sign up onboarding news feed, all sorts of cool stuff already made. So what I'm gonna do is I'm going to grab one of the sign up ones, I'm going to grab sign up seven, I'm gonna copy it and I'm going to jump back to this and I'm gonna paste it and it's going to end up almost lined up nicely. Alright, so what I will do though is I'll grab all of it because I've already linked everything to the login page, so I just want to kind of like drag you across here. Okay, there we go. If you are dragging things across from one outboard to the other, can you see it doesn't want to snap? Okay, I just drag it onto it anywhere, let it go and then start dragging it around. It'll snap now a couple of things if you're borrowing UI kits one is you're going to have a messy ah IPs panel, anything you come across the arrow came across, it's in there somewhere, it's hiding down here. Um So you gotta decide whether you want to keep that in there or not. And what the big thing is is that to keep this thing looking from a crazy big, it's pretty, it's not messy but it's pretty detailed right and from keep just keeping it consistent. What they've done is they've trimmed lots of these little bit hanging off the bottom, this one here is hanging off the bottom, they've just left the initial view, which is not quite right, like there's all this stuff down here which if I preview, let's have a little look switch back to my one shortcut command enter or control enter. If I skip along to the end, I can't get to the bottom stuff like there's no way of scrolling down to it. And so all they've done is kept it kind of hidden to make that view look consistent really what you first thing you need to go and do is I can find it there is there click on it and just drag so I clicked on the name and just drag it down, right? So you need to find the end, remember it doesn't snap to it and it's gonna get close enough. So now you can still see the initial views. Their little dotted line is the same as what we had with the desktop view, you can see 667. You don't want to change it, especially on the phone. Okay. And but now when I preview it, I can scroll up and down. Cool. Okay, so that's gonna be it for our app at the moment. We're going to build more of it out there. Just a couple of things to think about when we are mocking up this wire frame for an app and we can push left or slide left and if you're using other Ui kits, you just got to make sure that you extend them down as long as they need to be and ensure that their view ports stays the same. All right. 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.