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

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.

Mocking Up an App

Mocking Up an App

Lesson Info

24. Mocking Up an App

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