Skip to main content

Production Video - Login

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

Daniel Walter Scott

Production Video - Login

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

28. Production Video - Login

Next Lesson: Sharing Wireframes

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

Production Video - Login

Hey there. Welcome to this production video. It's just a video where we need because at the moment we've got kind of parts of these, we need all the rest of these. So a dashboard, a login screen and we need to connect up all the wires were not gonna learn anything particularly new in this video, we just need these bits to carry on. So yeah, you can watch, you can watch me on like double speed if you know how to change the speed of the video because it's not super exciting, you can even skip it, I'll allow you but if you're hanging around, let's get started. Alright, first up, I want this app, I want to change, this is actually the sign up page, called it the login and this one. Sign up. Okay and duplicated, holding down my option key on a Mac or a pc login and I want bits and pieces from this. So I want to um group it, command shift, G on a Mac. Control shift, E on a pc, grab you, deleting stuff, dragging stuff around. I don't like the edge, drag it up. There we go down, a little bit n...

ice. And this little line looks like it kind of, it's probably not strong enough to it's fine for the markup. Sign up, log in a couple of things. This is a group. Okay, So I'm double clicking it to go inside or you can run group. It's probably easier. I want to come down there we go instruct Director HQ and I'll double click these. Get rid of these guys and click on this, paste it. Oh that was weird because I had the text selected when I copied it. If you're in here and copy it, you just grab the text. But if you click it when it's not all highlighted and copy it, it's very different. So if you're finding that, that's because of that, don't highlight the text and copy it. All right, Next thing I want is my dashboard, you go thank you. Dash board dash board and this dashboard actually has no none of this stuff on it. I want to get some text like here I'll copy that. This is actually gonna be the instructor dashboard dashboard. Can't spell, can't spell again. All right, I'm gonna grab this part here. You get a copy down here, paste way too big. It's not far off the right size though. If I go in there by luck, how many of these I want, I want a few. So I'm going to double click the name, Just click the name once. Even track it down and I'll sort that out so that fits in there. Let's pretend it doesn't yours is a bit big. So um what I want to do probably the easiest because it's in a repeat grid. We can't do like responsive even though it says we can do responsive. Resize, we can't at the moment so I need to um group it grab you guys and them might fit. I'm just showing you what you would do if you didn't because a nice little trick is I have them all selected. Okay. And make sure responsive. Resize is on auto, it's on it's a little now a little slider to the right and it's auto on. Watch this whenever you size it. Can you see? It does cool. Resize the things I see, I like it and loop and remember if it's one unit which is I can use this option. Remember we start using our shortcut shortcut school if you can guess what that first little character is there and on a Mac it is the control key. So that is command control, C. Command control. C Actually not even sure what it is for pc. You'll have to hover above it and see really handy shortcut. Alright. Back to our repeat grid grid grid goodness. It is late is 11:30 p.m. On sunday night. Okay, so a little bit tongue tied there. Let's do one more thing. Let's grab it from the wires one we had so we had remember wires mobile and open that up and you are elements I'm looking for the menu. Either those lines or the other one that they use. Like see this one here with the three lines. One short. It's meant to indicate a menu. So I'm going to double click to go inside, copy it, Jump back to my other, paste it in, grab it. It's hard to grab those three little lines. Okay. And it's gonna sit up there. My little we're gonna use that later on as well. Alright, so those are all the bits we need. I'm going to get it to connect all up so switch to prototype, remember control tab to switch the prototype mode and I'm gonna select all to see what I've done. Okay, so I get to hear and when that one's finished, I'm going I double clicked it because it's kind of in part of a group. I don't want that whole thing to go into that actually would be fine. But I'm gonna double click it to go inside the group and I'm going to say when you are finished, go to here tap transition. I'm going to use that whole app version. Well instead of a dissolve, I'm going to use we used we we didn't decide what we're going to do. I'm going to do a slight lift looks nicer and I'm gonna do the same thing for this and it will remember the last thing I changed it to which is cool. We're going to do a menu a little bit later on when it pushes it across. Give it a quick test to make sure I've got everything actually we have to get the sign up button that's fine. When you click log in though. Not the text. So have it selected as like a little a couple of clicks as a group. So click it once. Double click keep clicking. You eventually can select the text, I just want to click it like that. So I get a little arrow. So I can say when login button is clicked, jump to sign up and if you click the sign up button over here, jump the login and this one's gonna be weird, it shouldn't be slide left, this one should be slide right, I'll show you what I mean. Give it a preview. We're going to click on sign up. Don't sign up preview and you can see when I go to log in. It makes sense to go that way. But when I go to sign up it needs to really go the other way because if it doesn't you'll get this when your preview, when you're testing. If I use if I left it as slide left, just feels real weird. Watch this, we'll start with sign up preview and log in and I go back this way it goes the wrong way. Okay, I want you to toggle left and right. So let's go to slide Right, Alright friends, those are all the components. We're going to need to carry on with this tutorial. That's why we need these little production videos. Just need I need this stuff to keep going. We haven't learned anything new, we've practiced some stuff right? But that's gonna be it. That's gonna be it for me tonight as well. I'm gonna go home, have a sleep and I will see you in the very next video. You'll be able to check you be like he sounds heaps better in the morning or you'd be like, man may need some coffee in the next video. Can't win. Alright by now.

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