Skip to main content

Mocking Up an App

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

Daniel Walter Scott

Mocking Up an App

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

24. Mocking Up an App

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

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

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