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

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.

Production Video - Login

Production Video - Login

Lesson Info

28. Production Video - Login

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