Class Project 13 - Roar Cycles
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final Quiz
Lesson Info
Class Project 13 - Roar Cycles
Hi there. This video is a class project video. We're going to set a new project. So we've done the instructor, HQ one together. You've done your class project for my new furniture throughout this course. And now we've got this last project here. It's a full project like the furniture, but there's a lot more scope for you to be creative and do your own work. It's not going to probably come out as prescribed or similar to other people's. So it's perfect for your portfolio to have a look at the notes. The last one in our word doc, you can make this as big or as small as you want. Some people have the time and the energy and the desire to make both the website and the app and build out loads of different pages and a good healthy big prototype. Some of you will burn through it and just make a couple of pages and I'm okay with both of those. So, first things are, we need to go through and review the brief and the persona. So they're in your exercise files under. Where are they are under a cl...
ass project to open that up. There's a brief. Okay. And then there's a persona. So the brief is the clients called Raw bikes. Okay. There's a little logo over here, rock kind of Raw. It's a fictional company that I made up, but they are a manufacturer of small run contemporary bikes. They soul exclusively from their own website. They currently have three models. Okay. The Siamese the Sphinx and the Bengal. Okay. I kept it small so that you could build out a site and not have like thousands of products. You just got three products. Okay, the primary objective is an e commerce website. If you're like, man, I don't want to do another website, I want to do an app, you can do that, that's fine or you can do both. That would be even better. What you wanna do is decide, okay, what do I want in my portfolio? Do? Would I rather have an app in there because that's the kind of work that I enjoy or do I want a website in there or both? So when you look at the persona, let's have a look at jake, jake. This handsome man is a designer from L. A. He's a creative type, you can tell by the tattoos and the beard. He's like alternative, but in a design ary kind of way, like he can see his haircut, like it takes a lot of pride in his appearance. He's very, very concerned in the way he appears to the world. So I've written down some descriptions of jake, I've worked with the company rode bikes to develop this and we feel like this is the this is the kind of typical client or their ideal client, He likes to have, he's got money to spend and he likes real super good quality, but he likes alternative Nous that he likes to be the only one with it. He doesn't have an iphone anymore because everyone else has got one. He's got some strange chinese version thing because it has some quirky features and more importantly, nobody else has it. So he's going to fit in with our kind of bike maker nicely have a read through this so that you get acquainted with a drink and then we'll move back into the brief. Okay, so here's the feature list. Now I'm allow what I'm allowing you, you can do what you want. But this is just a suggestion often when I'm running classes, people need some like boundaries on what they need to do otherwise like any good personal project with no sort of scope, nothing gets finished because you're not sure where the end is. So this is a good kind of outline of what I want you to do and totally do this. But if you want to like I wish I could do this or add this extra thing, go off and do that. So the homepage got a logo, it's got navigation. We're gonna stick to those three bright models and what we've done is we've talked to the owner of the company which happens to also be me. Okay. But what we think is for these kind of contemporary bikes is it's really important to. So the social aspect they're kind of like the users of their bikes sharing their own photographs of them doing contemporary bike owner things. So like lots of instagram style selfies of them in their beautiful, amazing bike. That's going to be like the social kind of media streaming of things. They tagged the company, this is my bike, it's the sphinx, they're in love with it. It's a, it's their object of desire. So we are going to kind of use that on the site to promote it or at least show how important it is to us as a business, so that we encourage other people to share their photographs because we want to start that social movement, we don't have the money to be for this company to be doing kind of traditional marketing. Like other bike manufacturers were going to go for the small crowds, instagram savvy. Got good cameras prepared to take a staged photograph of themselves in front of the bike. So I reckon that should be a big part of it. So the home page, you'll have a product page for each of the bikes though, the product pages will be the same. They'll have maybe a different style for the Siamese one, the Sphinx and the Bengal. Now there's a photograph of the bike like these are made up, right? So you're gonna have to go off and pick a bike that you find online, through something like Unspool ash or pixel or if you have access to stock library, you're going to get access to more images like adobe stock, okay, but pick just decide which of these are. And I don't mind if like say the images and then the kind of owners photos aren't the same. Don't sweat it because these bikes don't actually exist. We're going to have to fudge that a little bit. So do a page for the Siamese and for the sphinx and for the Bengal something that makes them individual but consistent. Okay. And you need to conclude these things like the description, the price, the colors available, you might want to ditch that. I'm not sure. Um and kind of because it's an e commerce, you need to allow for the kind of shopping part of it. Here's some competitors that I know of that I found, but go off and find your own as well. You might know bikes a lot better than I do. I've actually got a swifty scooter, go check that out. Super cool UK guy and girl making those because I'm kind of loving a little bit like jake. I'm like I was laughing at little bits of these. I'm like, it's kind of like me, I'm kind of half jake, I'm the guy who walks into our cafeteria and well the cafe next to me and brings my own kind of like it's not even a takeaway cup is just a mug from the office. Anyway, so your deliverables? You're going to do wire frames. Don't skip wire frames and go straight to prototype. I know you want to because that's the fun bit, but remember we're doing this for two reasons. One is we want to get practice and doing wire frames and it's part of the process. Like if you ignore it now and you do it with your first client, I bet you you're going to run it. This is going to take twice as long because you didn't do this but it doesn't take super long but it will help out any way user testing. Um do some, you know, we can do it like we did with minute just do some simple testing with a friend, a colleague, somebody that maybe resembles jake and you might decide to do some um moderated tested what was um moderated testing anybody. Remember you're thinking you're like, oh yeah, it was like user testing dot com or use analytics. Okay. There's a there's actually a bunch of them out there to help you with that and you need to get the Ui assets rid of for the developers export them both. Like we did when we exported batch. So you've actually got physical files and do the design specs because it will depend on your developer and the flow that you'll be working in. You might need both or one or the other now cost you're not getting paid anything for this but we made it an official brief, something that I'd send out and while we're here is like this four grand for this project here, I'd be delivering them the four pages only, I'd explain that we're doing homepage product page and that's what we're going to test. And after that if you need more pages like the contact us page, the developer needs help with that. I can, but it's not something that really needs a lot of like user testing. And the other thing is it looks like we're paying four grand for like, you know, like two months work. It actually we won't be that many hours to remember. I'll break it down by my kind of daily rate so that four grand will be, you know, 800 bucks a day is my day rate. So it's actually less than a week's kind of working weeks worth of full time work. And the reason it takes so long is because there's kind of tooling and following with the client. Why frames will probably take me, you know, most of the day working with a client back and forth as another couple of hours, then I'll get into the high Fidelity and testing the high fidelity will take me a couple of days. Testing will take me another day. That's kind of how I base my pricing. Not everyone does the same as me. Not everyone has the same rate as me. But I guess it's interesting to see how other people do it to have a jump back into a word doc. So there are logos available, you can make your own. I don't mind, but I've given you the company logo that I've made up. There's an SVG and an illustrator file use, whichever you like. The colors are up to you, fonts are up to you. Just gotta keep jake in mind. I'm not sure Jake would be totally into comic sans and brush script. But again, this is up to you. You have your high Fidelity tested, create and share so share a couple of parts of it, share the flats go. Just export the J pigs gave all the outboards or maybe do a big screen shot and upload those, share them with us. We've covered this a few different times of where you can share it, how you can share it when you are sharing the flat, sharing the public links as well so that people can go in and have a quick round, have a test, may be laid some comments. Let's all do some institute mock ups as well. So that institute what we did when we were in Photoshop and we we found those mock ups, we could put it into an actual phone or we did it with that book as well. We're not going to do a book but try and do some institute mock ups to kind of sex up your design, make for a good presentation. I want to see three micro interactions. I've said three, you can do as many as you like if you want to practice and test them. But I'd like to see 33 your best or three of the ones that you've done. Okay. It doesn't have to be micro interactions. It could be transitions between upwards, you know when they do the auto animate and share either a video of it if you know how to do that. Remember we did a bit earlier on on how to animate a gift. Just to share your cool little interactions can be a little subtle simple things or it could be like big explosive everything flying all over the place. Animations up to you. No extra points for the people that do want to go on and have maybe have some after effects skills. You could do some more elaborate transitions and micro interactions using either after effects or pro tapi. You don't have to though. Make sure you share your work. Remember in the assignment sections of this website or the comments and or on social media. Remember instagram I am bring your own laptop, twitter, I am dan loves adobe and on facebook group if you click on it it'll load up, you'll end up with this. Bring your own laptop online and you'll see hundreds of other people sharing their examples. Okay, because there's a new course XD. We don't have any of that yet. So get your XT up there but check out all the cool stuff from the other courses. Okay Photoshop and illustrator and in design loads and loads and loads scroll forever. Okay, so share your stuff up here. The community is growing really nicely and that my friend is going to be it for the class projects. Once you're done, it's a big one. You'll be free to go to the next video. I'll see you there.
Class Materials
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 Classes
Web Design