![]() In that case, I share the link freely and make sure that they enter the password in order to see that prototype. Anyone with a password would basically just put a password on the front door. If you've got a client that doesn't license any Adobe products, they can create a free Adobe ID that they can use to view your prototypes - they don't need to license the Adobe software. I can limit it to only invited people, so that can be people that have Adobe IDs that I invite by their Adobe ID email. Under Link Access I can control this so that anyone that gets the URL can look at it, let's say, I put it on a public website and I want to share it broadly. For now, I want to go with a Design Review. And you're welcome to explore them by kind of clicking on the info, this Eye button as you change out the options in the drop-down. ![]() In the View Setting drop-down, there are lots of options. I'll come here under the Link Settings and I'm going to go ahead and stick with the name that I defined, Onboarding Tutorial, so that's based on the flow that I defined here. This is a great way for you to make sure that you're publishing just the artboards that you want if you have a rather large site. Notice that these artboards here on the left weren't linked, so they're not included. So I can see on the canvas, all of the artboards that are linked to that flow. Here on the right-hand side in the Properties Inspector, I get specific options that allow me to share this prototype in different ways. Like the difference between Design and Prototype, the UI stays pretty much the same. What I'll do is, come here to the upper left-hand side of the application and click on the Share mode. Now that I have that named, I'm ready to publish it up to the web to show to my client. I'll go ahead and give this a name so I remember which flow I was looking at. And if I zoom out a bit, you can see that all eight artboards, in one way or another, are linked to that first artboard. Now, the way this works is, any artboard that's linked to this artboard that has the Home screen is going to be considered part of the flow. Above that, I now have the ability to assign a label to the flow that I've just clicked on. It's actually a House icon and if I click it, it'll become blue. Notice to the left, there's a greyed-out icon. I can indicate that by coming to the first artboard in the flow, this Landing artboard. Next thing is, here in Prototype mode, I want to let XD know which of the artboards on my canvas I want to publish up. ![]() I'll go ahead and close out the Desktop Preview. So, let's assume for a moment, I want to test this out first with my client to make sure that I've actually designed the experience that they wanted. At any time, the user can step out of the Onboarding Tutorial, by clicking on the Skip Tutorial, which takes them into the main workflow. But you could slow it down if the user was actually reading these cards. Now, I set the time pretty fast so that you could understand what I've done here. We're using Auto-Animate and it's now transitioning between each of those tiles to give the user more information. Now, after about 3 seconds, if the user doesn't click to start shopping the collection, it does a Time transition to my tutorial. Here in that Desktop Preview window, I have the first artboard that I designed. For that, in Prototype mode, I'm going to click on the first artboard in the sequence and then in the upper right-hand corner, I'm going to bring up the Desktop Preview window. So, let's go ahead and take a look at this flow so we're familiar with it. For the most part, I'm leveraging a lot of the skills I showed you in some of the earlier tutorials, along with a few more bells and whistles. At any time, they can come in and skip the tutorial. So the idea is, if a user comes to the landing page and isn't sure how to navigate the site, after about 3 seconds, this will automatically transition to the set of three artboards where the Auto-Animate transition goes between each of the tiles, and gives them guidance for how to navigate the site. In this set of four artboards, what I've done is designed an onboarding tutorial experience. So, let me give you a little bit of the back story for how you might use them with your stakeholders as you collaborate. I want to use all of these artboards throughout this tutorial. Here on the right-hand side, I have eight artboards. I'm in Prototype mode right now and you can see that here in the modes on the upper left-hand side. You don't need to have the Layers panel or the Libraries panel open. If you're following along with me, you'll want to have Step 01: Publish a prototype in the collaboration practice file visible on your design canvas. In this first step, let's take a look at how you can publish your prototype to the web.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |