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

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.

Class Project 09 - Hi-Def Mockup

Class Project 09 - Hi-Def Mockup

Lesson Info

60. Class Project 09 - Hi-Def Mockup

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