Lessons

Lesson Info

Class Project 01 - Wireframe

everyone. It is the class project time. It is time for you for me to give you a brief, give you your own persona or person to follow. Give you some assets give you some things to do so that you can practice because following me in the class from step by step is good. But doing it on your own is where the real kind of learning comes from. So there's a couple of things you need to look at. So in your exercise file, there's a folder called class first of all, open up this file. Okay. It's just in your exercise files, it's called class Project Notes. XD design. It's a word doc and it's going to give you like this is the one we're gonna do now. Class project one A little bit further on in the class, I'm going to give you project to project three. They look daunting. They're not and I promise you the people that bothered to take the time to do these will be the people who get good at it. Start remembering some of the shortcuts which is not important but get their flow going and start really ...

cementing what we learn in this class. Plus it's a good way to build something for your portfolio. You don't have to do it. I'm not going to check, but I'd love to see what you do do if you decide to. So this is the first one, class Project number one, it says review these two documents. Okay. There's one called. It's in this folder. So we're doing class project one class project to will be the final right at the end of this course, I'm going to set you another course to go and do it has a bit more creative freedom whereas it's quite prescriptive and what we're doing here when my, when I'm setting these class exercises. Okay. So I want you to read these two. Okay, the brief and the persona, we'll have a look at them in a sec. Then I want you to build a wireframe using These are the kind of features that need to go on the homepage wireframe. So like here in our XD course, we've built out the hero box and the welcome and as this thing and it has these things in the novel, that's what we've decided for instructor HQ. These are the things that need to go on your wireframe. So that's the homepage. And what we did in this example is we created a start trial page. You're going to create a contact us page instead. So it's a slightly different client while slightly completely different. They are a furniture manufacturer. Okay. They want an e commerce site which we'll look at in the second. Um, so on that contact us page, you need to create a second outboard tells you what you need to do and you need to get one of the examples from the wires or you can create your own if you get stuck with what should be in contact us form, you can check out other sites. just look at other furniture sites for examples. And when you're finished, you're going to create a jpeg of your finished work and upload it to us so that we can a you can prove that you did it and be so you can get some feedback from me and other people doing the course. There's quite a large amount of people who kind of get involved in this and it's nice just to post your work and get some feedback. It'll like I got a huge volume of stuff that goes up so I can't reply to everything. I try to jump in all the time and try and add some comments and things, but I guess it's just a way of being held accountable for yourself. If you know, you're not going to do it unless you're unless you're being checked or stick it somewhere. There's a great little thing to work through the way to share it though. I'll go through that now before we go through the brief is that this is a file export, we're gonna go through exporting properly later on. But for the moment this is the bare minimum and xD once you've got it to this phase, okay, You've gone through the brief, you've designed it and you've got everything here like this in a wire frame. You go to file, you gotta exports and you go to all our boards. Okay? And this will allow you to go, I would like to have a jpeg Okay quality leave it all 100% stick it somewhere. I'm gonna put mine on my desktop in my instructor HQ mock up. I'm gonna click export and those are the J pigs you can share. Where are they? This top there it is there. So I've got my homepage and my start trial page. You can see how important it is to name your art boards Now. Can see homepage is taking it from here and start trial over here if you just ignore it and just you know, it's called web 1920- hyphen to hyphen three. Um, you're gonna have to rename them when they come out to here. So naming our boards is helpful in XD when you have done it. I want you to share it. Where do you share it? I'll show you in here. There's a couple of places. This website has an assignment section where you can kind of post things and yeah, put them in there. That's the best place. Depending on the page that this appears on, you might have comments on the bottom which you can put it in so you can place your legs in there. The other places. Social media. I'd love you to do this. Okay. Do them all posting the assignments and on social media and make sure you just tag me so I can take a look, give you like give you a review and just be held accountable. So if you're an instagram person, I am at bring your own laptop on twitter. I am dan loves adobe and there's a facebook group here on it. It'll take you to the group here. It is. It's called Bring Your Own laptop Online. It's just a group. If you search for it on facebook, you'll find it is a closed group for students only. So ask, you have to be, you can see one person is waiting to join this group. There's about how many people, it's about in the moment and you'll see just like loads of cool content from the different courses posted up. Get reviews. There's no xD in here at the moment because I'm making the course right in front of you and but there'll be piles on there. I bet you by the time you get there post ask questions and the only thing I ask is that you, if you post one, you have to respond to one. It could just be a thumbs up. Well done. Love it. It could be critique of the vast forest because I can't get in here every day. I would be great if you put one up and post something for you to respond to somebody as well, constructive criticism. I really need a new image here. Anyway, back to the dock. So build a home page, build a contact us page, share it with me. So it looks long but it's actually not that difficult. Let's have a look at both the brief and the persona. So you get an idea of what they look like. So they are in your exercise files in your class project one. So my new furniture is what we're gonna do. This one will do at the end. It's like an end exercise. So many furniture. I've got a brief and a persona pdf. Open those up and I've left the working files in there as well. If you are like, oh I want to steal these and use them for my own brief sympathy owners. There's the working files, the illustrator, you can use those but we just open the PDFs for the moment and where are they are they are this is the brief but fancier than the last one that we're doing for instructor HQ. I thought I'd fancy it up for you. So basically the only thing you have is you have a logo. So the brand already exists and I've given you the logo. It is in here. Okay, don't worry about it for the moment. Don't be tempted to put it on the site because white frames. Remember super simple. Don't use it. But for the upcoming rest of it, there's going to be logos in there for you to work with here is the client. It's a new business selling affordable high end design furniture made in Ireland that's where I currently live. I'm from new Zealand, but living in the sunny island, so that's the client, the primary objective of this brief and what they want is they want to build an e commerce site where people can browse and purchase furniture for home delivery. The persona will go through in a sec. Okay, so our target audience actually, let's jump to that now. Where is persona? Okay, so Catherine is al persona, she's she's an executive, she lives in Dublin, have a little read through this, but basically she's well paid, she's kind of at a point where in her life where she kind of doubling down, investing in kind of a home and stuff now that the kids are off at university, she's in it for the style, but she's not kind of in it for, you know, prices are definitely a big part of it. Um she's updating her house, She's lived in the house forever, it's a four bedroom house, but now she's got a bit more room and the kids aren't there messing it up. She's now kind of like she's always wanted to, but it was always just a pain identify with Katherine, I've got two tiny kids, there's no chance of them leaving anytime soon, but you do not want to update your house because like he's just at the moment my babies crawling on everything, He's pulling himself on every chair. So basically we've got no chairs in the house because they're all locked in a room anyway. She loves to browse style guides online and this is I think a big part of what would be for me when I was designing this. Maybe not too much for the wireframe, but you know she she likes the whole Pinterest like and gathering ideas, kind of scrapbooking stipe things before she makes a purchase. So that might be something to include in the design for the website. So I hope you can see how a persona can really help you Because I am not Katherine, I am not 50 year old woman executive living in Dublin, I got that bit but everything else is not me. So me as a designer though I can really identify, I can kind of see her in my mind. I'm like I kind of feel like what Catherine is about. So when I'm designing I can be designing for Catherine, not for myself because it was for myself, it would look very different at the moment. It would be is it baby proof? And how good does spaghetti wipe off it. So the nice thing about this is that when the client comes back and says oh I think we should have this or they contradict some of your designs, That's fine. But you can say actually I don't think Catherine would go down that route I think because sometimes the client forgets as well and they're like oh I want this and you're like oh do we really need this Catherine, I don't think would like it easier to say that that Catherine wouldn't like it than for you to say actually your ideas are dumb. That doesn't not go down well at a client meeting, but you can argue for Catherine as a UX designer, its your duty. So back to the brief, so we're designing for her, we've gone through a design and worked out what features need to go on the homepage and the um yeah, what things need to go on here. This is a little prescriptive for a brief because I want you to not be kind of like, I don't know, flying around in the dark. I want to give you some things for it to go on the homepage. So there's a shopping cart, contact us. Um, so this thing, it would go in there like now we need to contact us button, we need a shopping basket kind of icon in the corner. There's a search box in there somewhere, Hero slider which is that hero box, but maybe one of those little slightly things, there's a section that says new in store and there's a section in here. This is these are the, these will be the sections like these. Okay, so chunk chunk, chunk, so new in store, um, inspiration ideas would be another one, clearance case, I have all those and then to be a footer, these could actually be in the nav and they should be like tabbed in with these guys And even though it says logo here, we're at the wireframe station, this will go in eventually, but not at the moment. Just type it in. So you're gonna build two pages. These other pages will do later on. Okay, don't worry about them for the moment. I don't want to make this um, this first exercise too long even though it's a really long video of me explaining what you need to do, but you'll end up with three pages. The home page a category page which is often like, so we've got home like because it's a furniture shop, there'll be like different categories of furniture and then specific things in there. So let's say things that live in the living room. And there'll be a big list of those including three seat sofas and armchairs and whatever goes into a living room. So this will be a category page. So it'll list the most popular. You can reorder by size, different inspiration and then you'll actually click on one of them. You're like, oh, this looks cool and you'll end up in this product page where these things will be available to the user competitors and product inspiration. So both me and the client of, as the writer of this brief, we decided that this, this is the kind of sites that we like have a look at habitat and made dot com for the kind of look and feel that's kind of the style they're looking for here are the deliverables will give them wire frames. We'll give them a higher fidelity once that's tested. Would you use the testing? We'll get all the stuff over to the developer for them to build. Here's our cost. We talked about payments earlier on and there's our timeline so that my friends is what you need to do. So that's the kind of this brief is the thing you're gonna be doing for the whole course. The particular chunk I want to do at the moment is just home page. Contact us page. Send me a Jpeg. Alright, let's get on to the next video.