Skip to main content

Class Project 09 - Hi-Def Mockup

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

Daniel Walter Scott

Class Project 09 - Hi-Def Mockup

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

60. Class Project 09 - Hi-Def Mockup

Next Lesson: Mobile Phone Mockup

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

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

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