Class Project 09 - Hi-Def Mockup
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
Class Project 09 - Hi-Def Mockup
Hey there, this is the big one class project time. We've learned loads in the last few videos with images using Photoshop and basically what we need to do now is I feel like you've got enough skills to actually finish your website mock up. So don't worry about the app at the moment because we will do that in a little bit uh in future videos but the website should be complete so there's gonna be things you're going to be good at and some things you weren't good at, I guess I just want you to practice them all so that you've got an understanding of some of the mechanics of how people might work with you and to practice some of the skills you're not that good at. So you need to complete the desktop version. You need to remember when you are designing to keep Katherine in mind. So remember open the persona, try and get acquainted with Catherine again and then build three page website. Okay, so you need homepage category, page, product page up until now we've been kind of like slapping litt...
le bits and pieces on, you're gonna probably have big holes in it, you might have been a keen bean and basically finished it already. So you might have to just go through and just do these things. So in my XD project or the one we've been doing together, it's partially done. Okay. It's got bits and pieces. Uh yeah, it's okay. I want to go through and change all these to be unique. Okay, they don't have to be repeating. I need to add some headings to this one here just kind of like lumped in there. I need to write instructor dash but they're just things I need to tidy it up to go through, add your images, tidy everything up and there's a few things you have to do though. So where is it go through the brief. Okay. Make sure all the features are in there. There's a list of features to include now if there is anything and you're like, I don't know what he means by that. Okay. Don't worry. If you ask a question about clarifying the brief, it's probably going to be way too long before I get back to you. So I don't want to hold you up. So just if you're not sure what it is, either guests or just ignore it and say I don't want to do that one. So don't worry means obviously in a real job you'd go and clear it with the clients so the things you have to do. Okay. Some people are only going to have access to XD and I'm okay with that. Okay with it. It's fine if you only have access to XD, you can skip some of these. Okay. Something you won't be able to skip. Okay. Liken splash and masking images but let's say you've got access to creative cloud download and design and I want you to create one at least one thing in design. It could be that round or like we did, they know the sparkly side one could be something else. You know how to draw an in design, there's a pencil tool in in design, draw it, bring it in to XT mock up. Remember that's copying and pasting then I want you to unspool ash or any of the other free stock library images. The ones you might use more once you get at least one image, probably gonna need a couple to fill out the different tasks to grab it and use it in your document. I'd also like you to put it into your CC library either via illustrator and design or Photoshop. Okkoto is probably the easiest one. Open it up, drag it into the libraries and do that visually similar and I want you to take a screenshot of the you'll be able to take a screenshot of both the original used and the uh kind of visually similar ones. And I'd like you to use both of them in your file. So in your mock up somewhere have both used both the original one and the visually similar. You won't have to pay for it. Just use the watermarked version. I don't expect you to go and pay for it but take a screenshot of that as well as part of your homework requirements. Photo shop. I'd like you to open up one of your unflashy images and I want you to do that whole connection. I want you to practice that. So Photoshop add it to the library then from XD. Open that library up and drag it into your document so there's that connection and I want you to go back to the Photoshop original. This is the tricky bit is remember when you added it to the library? The library item is actually by itself now it's not connected to the original. So close that down in Photoshop. Don't need the original anymore. I want you to within XD. Okay, go to file open libraries and that image should be in there. Right click it and choose edit. It will open up in Photoshop and just change something about it. Okay, I don't care what it is. You might do the masking that we covered. You might do levels or curves or filters, anything that you can do lens flare. Actually banned from doing lens flares, people, you know who you are, do that adjustment. Save it in Photoshop and then watch it update XD. Just run through it once so you can practice it. I want you to show a masked image. Okay, do a circle So it's easy and clear when I'm you know when you upload your assignments. Anything just I want you to do a mask of an image. Also want you to do that thing where we blurred the background and darken the image. Okay, my voice is totally going now we'll finish this video. There might be time for a break nearly there. So I want you to do remember we did it for this one here so we darkened it and blurred the background. I want you to practice that in your assignment. It might just be a background but you can find another creative way of doing it with it. Then I want you to screenshot your three pages. Okay. So it's probably easier just to do a screenshot. I showed you at the beginning how to export jpeg but just do a screenshot of all of these guys. Okay. And I'd love you to upload it to the assignments. So just the regular place the assignments part of this website. If it doesn't have that use the comments it doesn't have that. Let's do social media. Okay. In instagram I am bring your own laptop on twitter. I'm dan loves adobe and there's a facebook group. It's bring your own laptop online. It's members only. So asked to sign up. We're pretty good at accepting members and then you can post your work and this is probably the best one because there's so everyone's going to go on a slightly different direction. Post yours comment on others once you like what you liked about them and then we'll move on to the next video so that's gonna be a bit of a task for you go off, do that, spend a bit of time, enjoy it. I know it can be frustrating when you're new and the tools are a little bit hard, but it's all about practice. You follow me blindly with the instructor, HQ one, keep going with the mammoth one. You're nearly there. Get it looking nice. So you can use it in your portfolio. Say this is something that I made. All right. I'll see you in 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.
Student Work
Related Classes
Web Design