Lessons

Lesson Info

Sharing Wireframes

Hi there in this video, we are going to show you how to share your prototypes online email to people. They can give comments. You can give feedback. It's quick and easy. Let's learn how to do it now in adobe XD. Alright, so it is time to share our wire frames outside of our machine. We've been testing locally. Okay, hitting our command return or control enter. Okay. And kind of testing it here. We've got it all working, got the designs going. So my flow is, I will send this off now. I'll create a link, which we'll do in a second and I'll send it to a colleague, somebody that knows me and we can go through and they're not, you know, they're not particularly good in terms of user testing. They're not the right people, but the good just to test the functionality I want because the next thing after that, as I want to send it to the client and I don't want it to be broken or something not working or something quite confusing. So I send it to them, I'll send it to Malcolm or taylor and they'...

ll go through it for me and give me some feedback on like, hey, you forgot to do this or that doesn't make a lot of sense. So hopefully you've got somebody you can use for that and if not use that kind of facebook group of social media stuff we've been using in the class projects to get some feedback and but yeah, it is ready to go. Like you can test this with actual users. So remember like say your minute project with furniture and say Katrina, you could find a user that's kind of like Katrina and you can get them to test the wire frames for feedback and a lot of people do that. I don't I don't find, I don't find it as useful. I like just to test the high fidelity versions, I work with the client with the wire frames to make sure all the structures in there. Before I go off and start picking fonts and colors and designs and uI design. That's what I use the wire frames for quick dirty so that when I'm building the kind of nice version that is going to go for Katrina, I can add all the right marketing material, the right colors, the right feel for that user. But I don't often test the wire frames up to you. Either way we're going to send, we're going to create the link And you do it up in the top right here. You click on this like little box with an arrow in it and you click on this first one and it says publish prototype. Cool. Give it a name. I spent my wrong okay, it's taken the name of my actual file up here so you can just use that definitely give it a versioning number. Okay, it's a version 1.0 because you will do loads of updates. You can decide to allow comments, you can get it to open full screen. I'll show you that in a second. I don't like opening full screen. It removes the comments and a few other things. Hotspot hints. I'll show you you can require password so you can create this Public link is weird. You get a public link and a private link. The public link is just in your l you can email to anybody you like and they can add comments if you have a password, they need to have a password to be able to work with it. The alternative. Okay, which is a little weird. You can create a private link, click on this does this does the same thing, generates it, uploads it to the internet but you actually have to list out via email addresses who can actually access it. So they'll get an email saying Daniel has sent you a private link, click here to access and they'll need to log in with that same email address that you sent the link through. If I send it to Malcolm at gmail dot com, he'll have to use that to log in. That's where the difference between a private link and a public link but you can add a password anyway. I guess the passwords easily shared amongst people kind of but private link has to go to those people anyway, I'm going to create the public link. Okay, this may take forever. This may be quick. I'm in a pretty slow. I've got satellite broadband which is average at best like six up come on little satellite broadband because there's not much images in this. That shouldn't take too long. I'm surprised. That's pretty good. So once it's done, nothing much happens. Right? It's these little icons are kind of weird. The strange place for these. Okay, you've got three options. This first one here is for embedding the code on your site. So if you're not too sure what embedding is or how to use an I frame on our website, ignore this one. Okay, It's basically you can kind of have your own website and kind of put this in it so you might be able to brand it. Okay, so I don't use that very often. This one here's the win. This is the money copy link, click on that and it says link is copied. Okay, this one here will open it up in a browser just so you can see what ends up happening. What I want to do now is show you my flow. So I'll now recreate an email and just paste that link in there. Okay, so I'll open up my gmail and I'll say, hey Malcolm, here's the oral and just paste it in there. I'd love your feedback. And what happens on their side. Let me open that up. So I'm going to open it up and you're out pretending I am a new person. So this is what they see and I love what XD have done here. Alright so this is what they will end up in. So they'll need to do one of two things they need to sign in with their properly sign in or just as a guest if they properly sign in they can use a variety of things pretty easy. Either their apple I. D. Or you can explain to them just use your facebook or google. Either way you need to sign in if they don't want to do that, they can just sign in as a guest. You can see it down here. Super easy son is a guest, give themselves a name. I'm going to be Danielle today. I am not a robot. What is the bus you want to play with me. Bus bus bus bus we're verifying. Alright definitely not a robot. Alright submit and we are ready to go so what ends up happening on their side they can add one of two comments so they can add a general comment just saying love the design which they don't because it's just blue blue with simple things being noticed that will be a comment and that's just a general comment doesn't really you know it's just kind of vague for the page. They can be more specific. Okay so you can say like and should this be should this be logging and you can click hold and drag that little pin and say you okay so you can ask questions about specific things and submit And you can see in here now that one matches 1. It makes it really easy to kind of pinpoint stuff and actually talk about those specific things, Other things they can do in here if they click around, can you see those buttons? Kind of if they're like trying to click on stuff that doesn't work, can you see it actually highlights the things that actually do click Ok, so that was that bit back here where we said allow hot spot hints, Okay, you show hotspot hints, you can turn it on and off. They can cycle through it if they don't want to use the buttons because the actual buttons work right? I can click on this and it works, which is cool. Or they can cycle through it, go back to home. And that brings up a really good point. If your home is set to another page, which it's likely to be right in here. We might have said are home to the app because we're working on it. And what I mean by home is if we're in prototype, I zoom in at the top here. Okay, and I click on not that one there. This is my home page. I've made that the home. So that's the first thing that's going to load in that link. If I change it down here. Okay, that will be the first thing that loads. You'll also notice that because I set my home to up here. Do you notice in my link here, I've only got four pages. It'll only upload the things that are connected. So it'll connect this page with start trial. It'll have the example because that is linked. So if you have a page like this fellow here, he has outgoing links but nothing going to him from the homepage. So the homepage is kind of like boss whether you set to the home, it will, it will upload everything that is connected. If you've got junk just lying around it will not be part of it and you can see down here isn't. So how do you get around that? What you'll end up doing is one of two things. You'll have your app on its own xD documents, You create a new one and just copy and paste this over. So you'll have to, another way of doing it is I've generated, I've set this at home. I've generated my published prototype. Okay. Got it going. What you can do is I can click on this, you can have more than one same outboard. Okay, say mixed the file. I've said that to the home now and I can say actually I want to create a new link. So this one here, I should have named, I didn't have both called instructor HQ mock up. So what you should do is call one instructor HQ mock up home website and one called app. So I'm gonna copy that link and I can send that to somebody else. Let's have a look. You can see here this one loads up with the app. And because these apps don't link to the website, we only see these guys. So now you might be like, okay, how do I deal with both of these over here? Because it is kind of weird and only really identify as one. Okay, so the last link you did, I can go through an update. So the way to work with more than one link, like we just did okay, you can close it down and click on this and this one here, it says manage published links, click on that and it will take you to this page. These are all of my mock ups that have uploaded. Okay. There's the first one, the website version and then there's the other one which I named the same. Bad. Can you rename it from in here? You can't, I've been it and do it again. Okay. So here you can click on it and I can permanently delete it. Okay. And I just re upload it using it, giving it some better naming, but here's where you kind of work on all the different parts. Okay. You can see different mock ups that I've got and yeah, from within here, you can actually just click on them and say copy link and share them this way for you as the creator. It's nice to actually just be able to go into these things instead of clicking on the little tick there. Just click on them, Open them up and you end up looking at the very similar view. Okay, But this is you looking at it. So let's actually open up the other one. This is the one that I wanted. Cool. So um you can see, I'm now back being Daniel, you can see Danielle that's not a robot. Has added some comments and I can come in here and say actually that's really awesome No, this is gonna be signing. I can also make comments. I'll make comments in here as let me just add that one. I'll make comments in here. If I am the um owner just explain some stuff. So maybe like, hey this button doesn't work. You can add your own comments. You can say actually love the design. Thank you, resolve that when you just been it other things I haven't shown you is full screen. Okay, just goes full screen which is pretty nice. Okay. The problem is, is getting out of it, you have to escape. So I find if they're new to it, sending it to the client, I won't do full screen because they don't know how to add comments. They can't see them. Another thing I want to show you is what ends up happening is when people do, add comments, watch how they come to you. You don't actually as a user, they don't come to XD. It's a kind of I wish they did. I wish they'd just loaded in here is like little notes but they don't. So it's quite that's fine. What happens is they email you, you can see here you have a new email, you have an email from adobe, XD saying you've got a new comment on this mock up you've made from Danielle and a couple of notes from them. You can click on it, open it, you'll end up with the exact same screen here. You see what they've asked or done a couple more things I want to show you is N. X. T. Let's say and they've asked about that button and you go off and change it. Right? And so we're gonna go to the design, we're gonna go inside and actually we're not going to change that because it's going to update all of my thing. I'm gonna do something a little simpler. Okay I'm gonna change this. They said the buttons not big enough okay buttons big now so I'm gonna save this and I'm going to go into this and published prototype and you've got to decide what you need to do. Okay so I'm gonna update the link and that way anybody that's using that link and revisiting that page will see this new change you can create a brand new link. Okay so there will be some people with the old version version 1.0 you can make another version called 1. and click new link. I wouldn't want that. I just want that updated. So update it. I'd go back into here and just resolve the thing that said this button is not big enough. I click resolve and that would be it would be a nice big button in here. So that's how to update it. One of the other things is so you're doing it at first design a couple of things is you definitely want to make sure that this is the home and then how do you share it? So you can do it? We saw it back in the website version. Okay. It was just a small square in the middle of a browser to get it to work on a phone and there's a couple of things you can go into here and say I want this to open full screen. Okay, I'm going to update it. Then you grab that link and what you need to do is tell the person who's testing it to copy and paste that link directly into their browser. So if they're using an iphone it might be into safari or google chrome. So it's not super smooth. Okay. If they are, you know or get them to say you send them an email. Okay Send them an email with a link and say just tell them click on this link via your phones. Email. Okay. So if they're using email that's both on the desktop on their phone, click on that link via their phone and open up in a browser full screen. They'll be able to test it and add comments. Alright, so that's it for sending stuff off. To get tested. The simple cut down version is click on this prototype, click create public link and just copy the U. R. L. And email it to people. Ask for feedback. You get emails explaining what they've done and you can go and resolve it, update it, change it. That's how to share a prototype. Alright, Let's jump into the next video.