Skip to main content

Class Project 01 - Wireframe

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

Daniel Walter Scott

Class Project 01 - Wireframe

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

12. Class Project 01 - Wireframe

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 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.

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