Subscribe or Login to watch video

Login or Subscribe to watch video

41 - Class Project for Adobe XD


Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

So it's Class Project time. This looks a little daunting, but I want to give you some boundaries. Yes, it's hard to do a project on your own for your own portfolio without some sort of restrictions. So you can adopt as much of this or as little of this, as you want.

So basically the company Bring Your Own Laptop has a website already but they want to redesign. There's a link here, right there, I'll show you the page. It's bringyourownlaptop.com/xdproject, and it will take you to the page that they want to use as an example. This is what it looks like at the moment. They want you to go through and redesign it. It's getting old, it needs like a paint, in terms of colors, and fonts, and imagery. Also they want to see what you can do in terms of the user experience. How to rearrange this to get the most.

So let's have a look at the details. Let's have a little look. So this is the client, they want a new project. In your exercise files here, there's one called 'Class Project'. Inside of there, the brief that we're looking at right now, behind here. And these are logo options that you can use. So logo's the only thing you really need to use, everything else is up to you. Colors, fonts, images, up to you. Now in terms of the images you've not been given any, so you can use anything that you like. Maybe watermark stock library stuff. Go to freeimages.com. There's loads of places to get images from. If you don't want to use this project for bringyourownlaptop.com you can use your own options. Option B is just to use your own client.

Who's it for? It's for creatives. That's creative individuals that need to upgrade their skills. They are tech savvy enough but they might be junior designers, they might be still students but they need to learn Photoshop, or Illustrator, or InDesign, or XD, like you are. So those are the people we're targeting.

Here's the feature list. The video plays the most important bit. It says here it should be video centric. So everything's evolved around this video. There's nothing more important than this video and then the movement to the next video, because they're in a chain. So that's the priority. Navigation, those are the things that should be included. And these feature list, just needs the course title. So that's the overall course, like Illustrator essentials, but then there's going to be specific video titles like introduction, how to get set up. So Course title, overall, Video title, this thing you're watching. These columns, Video Transcriptions, Search Bar, let's have a little look.

So there's the Search Bar. This is kind of where you're up to, the next button. These are the downloadable files. There is User Comments over here. And this is the Video Transcription. So this is the video name, and this is the course that it comes from, the larger course. Everything else -- so that's the main features. Have a little read through that list, of what needs to be included. That's it for that. These are the competitors, go and have a look at these guys. Just to see how they do it, to get inspiration. The deliverables, basically I want some JPEGs into the comments section. They like you to make a Wireframe option, and a High Fidelity option. If you've got no time, and just want to quickly make something I'm okay for you to jump to High Fidelity. I'm not going to chase you down for your Wireframes, but if you want to kind of do this properly for your portfolio do a Wireframe version, then the High Fidelity, like we did in the course. Take a screen shot, or export a JPEG and put it into the comments section, or link it somehow.

This one here, I like this new prototype wires. This means, when you go into something like XD, like an upper project, and if I zoom out a little bit so I can see the whole thing, go to 'Prototype', then go 'Command A' on a Mac, or 'Control A' on a PC. I just want to kind of see-- you don't have to use this many Artboards but I just want to see the wires, so I can see the user flow where you need to be going from the different pages. So take a screen shot from here. On a PC, I think it's 'Print Screen', and you can paste it into Photoshop. On a Mac, you can hold 'Command-Shift-3' or '4' depending which one you want to do. So just send a screen shot of that, just so I can see it. And in terms of the links go into XD, and show your link, and post it in the comments.

This one here says, 'Publish Prototype' we did this earlier on, and you created a public link. Copy and paste that, so we can see, and I can interact with it and other users can leave comments. If you are looking through other people's, drop in comments, it's really nice when other people start adding kind of-- make sure it's constructive criticism, but criticism nonetheless. It's going to be nice to see the work flow that happens with the commenting. So jump in, check out other people's links, and add comments yourself. You can login as a guest, that's fine. And also upload it to Behance. Behance is a great place to put your portfolio stuff, if you don't already. Put up all the JPEGs that we described at the top here and put it into a Behance portfolio, if you don't have one already. And you have got a budget of zero, smile face.

So that is the project, go out, do it, dump these deliverables into the comments sections. I can't wait to see what you come up with. Make sure that you check what other people do. Comment in them, give them some props, ask questions. You can be really helpful for people new to XD to get some sort of feedback. And I'll try and jump in there as much as I can to give you feedback too. All right, let's get on with the rest of this tutorial series.

ALL ACCESS: $19.95 per Month + Cancel anytime