Transcripts
1. Introduction: hi there, and welcome to my second wire framing class with actual R P. Eight. This class covers more in depth and complex topics and skills and techniques that will be perfect for someone who has already gotten their feet wet with actual ER and just wants to learn a little bit more and make their wire frames really stand out if you already have viewed my introduction to actual video than your perfectly prepared for this class. If not, I would suggest that you go back into my first video, which is called an introduction to actual R P eight, just to get your feet wet with the software. And so you know what I'm talking about. As you go through these videos, make sure you talk about your own class project in the comments below as well, a submit any questions so that other students could benefit from your own learning. Thanks and let's get started
2. Masters and Groupings: This first class covers two important techniques for making your wire frames more efficiently. The first technique is called Masters, and the second is called groupings. Now I'm using this wire frame that I made in my very first actor class. It's just a really simple wire frame. So if you don't have this or don't know how to make it, I would suggest going back to my first class and introduction to action. So you understand how this was made. Now I have my site map here with several different pages, but they're all blank right now. I know I want to create more screens of this wire frame, but I don't want to have to create every single element over and over again because that would just be too much work. But I can do something called Creating a Master. And the way you do that is, you select every element that you want to be in your master. In this case, I'm just going to select things that I want to be. Ah, sort of like a template for the remaining wire frame screens. So I'm selecting all of these. You see, I have selected the big iPhone layout as well as the top bar and the burger and the footer . I right click and I select the option convert to Master. And I have the option here to name my masters. I'm going to name it, um, iPhone layout hit the continue button, and I can see this has become red, and this is basically my new master. So if I go to the Masters tab down here and I click on the master, I can actually see my master come up. Ah, and this is basically like a master template of whatever you want it to be. So this could be a background of the rest of your mobile wire frame. So if I wanted to drag this into a different page, I can easily do that. I just click this and I drag it here and now I've got the very same template that I had that I had created from scratch on the home page. But I've got on the second page as well, and I didn't take that much work to get there. So masters air useful when you have several pages and you know the layout is going to be the same. So you just create one master layout and you're able to copy and paste that layout wherever you like. Um, of course, here I can start adding things on top of my master if I want to add, you know, maybe this is a different screen and I want to add new text. So if I go into libraries, my default libraries at a heading here this is maybe my home page and you can see if I move the master this way, it goes this way or that way. However, I'm just going to keep it where it was. And then this text, I'm gonna move center. And of course, I can continue adding things in this area. This would be like the area where, you know, I might add extra features that would only be visible on the home page and not on the log in screen, like what we have here so masters air useful in that way, Another thing you can do with masters is actually edit the master itself. So if I double click down here into the masters pain, I can actually open up the master itself and start editing these pieces like Maybe I want something like this or something like us. And then if I go to the new pages, you can actually see that the changes were replicated across all of my masters. Changing this Masters are useful because you'll never have a problem moving this around or having any misplaced elements when you do go to make more changes to these different pages , so now I'll take this master and put it on the other pages. That way I have a template of exactly what I need. I could also go ahead and rain in these pages now, since it's actually my log in page, This is going to be my home page. I'm not sure what these will be just yet, but the nice thing is, like I said, I have the masters in here, so I don't really need to worry about re creating this template over and over again. The next thing you can do is something called a grouping, and a grouping is useful when you have many different elements. But you just don't and you have to move them or alter, you know, alter them or whatever, but you don't want things. Teoh, go out of place. You want them kind of all to stay together. So here have selected a bunch of different elements. If I right click on these elements, I have this option that says Group. Now you can see on the pain over here on the left and the outline. These elements are now nested under this file called Group, which is super useful because now I can actually take who wrong one. If I actually select this group, I can take it and drag it anywhere I want. And I don't have to worry about my elements going out of place, and I don't have to worry about individually dragging each element across. So this is super useful when you've got a big wire frame or a complex wire frame. Or maybe you've got something like a form design where you know how the spacing between the elements and you just don't want Teoh mess that up in any way. When you're manipulating, things are moving things around. Well, you can do within. This is within the group. If you double click on an element, you can edit that specific element so you can still go back and edit specific elements if you want. Well, that's it for this lesson. The next lesson will be about creating user flow charts and user journey maps through actioner. Actual has special, dedicated libraries where you can create flow charts. Teoh do things like site maps or user journeys, or defined the flow of your application for your stakeholders.
3. Flow Charts: this video will be about creating user flows, site maps and task flows in actual er, using actors built in tools. So these kinds of things are really useful when you have a lot of screens or you want to show maybe the way users would move around in these screens or you want to show the site map or you want to show the way things are organized for your ah stakeholders or other team members. So the first thing we will do is create a new page to display this new flow chart, and we'll call this site map because I'm going to use actors tools to create a site map of my application. Ah que is go to the blank canvas and the first thing the next thing Will Dio is navigate to libraries down here and choose the library. That's his flow, and you will see all of these different shapes here that you can use to build your site map . And we have different things. Rectangles, stacked rectangles, um, you know, different shapes. Um, we've even got a person here, an actor. So these air useful. If you have a flow chart or you have a task flow that you want to sort of, um, you know, build out so people can see it, and you will see a lot of these different shapes. You know, you can assign different actions to these different shapes and things like that, depending on what you want to do. But right now, you know, since we have a site map, that's pretty simple. It's just gonna have four ah sections to it. I'm just gonna use the rectangle. Well, I'm gonna Yes, I will use directing. All drag it here. So this is one shape that we have and you see that they have the shape has all of these, um, you know, little places where you can resize. Um, and this is all these are also places where you can add connectors. So this is one shape, so we'll call this, um, you know, for our site map for our application, we've got four pages we gotta log in. Ah, home page accounts, 70 settings and a message center. And these air not designed out yet. I just name them that way. Um, just so we would have some sample pages to go off of. So in order to create the site map. Ah, we want to have the right hierarchy. So this the top section will be the home page on when we want to create Within the home page are two others called account settings and message center. So we can probably put these down here center, and we also have the log in screen. So let me just copy paste this. I've got the same shape here and we call this log in. So is the way I have arranged. This is we've got the home page up top because this is sort of like the top level page. Ah, for everything we're gonna be doing within our application. That seems pretty logical. And then, you know, down here, we've got three other things that weaken Dio from the home page. I mean, this could be log in, slash out, but they're just actions that we can take from the home page. There sections kind of, you know, these air. This is the way the hierarchy is for my application. And so, ah, you know, these are not very different from the other shapes that actual has in its other libraries. You know, you've got the default library with the different boxes and stuff. But the flow library is useful because when we want to start connecting these shapes, we can actually go up into the upper left hand corner and select the connector tool. And now our amounts has changed it connectors. So we can actually, if you hover over one of these sides, you click it and you can actually start drawing lines between each box like this. Now, I've actually connected our boxes, and we've actually made basically a site map, and we can kind of adjust this. You can adjust the lines to be whatever shape you like. Whatever size you like, you can adjust this. And now we see that we've got the home page and we've got three sections branching out of the home page so we can actually show hierarchy here. And if you know, if we had more pages down here, we continue tohave more sections here. And maybe, you know, maybe we've got subsections within each of these pages. You know, maybe we'd have, like, ah, subsection for account settings and maybe I want this to be we're still in connector mode, So let's go back to select mode up here so that we can choose the shape of this box. You know, maybe I would have, like, other subsections under account settings that I want to see how we can continue to just keep doing this and and you can connect the lines like this to each of these subsections. And I always say we have the beginnings of a site map. And again, this is super useful for your state borders, and you can do the same thing here. We could even copy, piece all of this stuff and actually put it and put it here. Maybe just make sure that these connectors air connecting, and we can continue to do this. So the flow icons are super useful with an actor and, you know, just to give you an idea of the other icons that are here, there's a stacked, um, rectangle. Sometimes we use this and user flows. I know the rounded rectangles air used often to sort of initiate or end a flow. It's sort of like the start point or the ending point. Um, you know, we've got other shapes, like try it, goals. Actors, I go. This could similar. This could simulate a human element within a task flow. Ah, and other things like that. So and of course, you can change the style of these, you know, just like with any other element. You can change the color. Um, you don't have to have a great and it could be solid. You can change the border so you can change it to really be whatever you like the lines as well. It does not have to be this color line. I know you can change it to be like, right now it's red. You can change to be green or whatever you like to do. So, yeah. This is a super easy way to illustrate your site map or the way you're application is laid out as well as the way you know, maybe users would want to flow through an application and see how it actually works.
4. Simple Interactions: So this video is going to be an introduction to interactions and actual er, And by that I mean programming your own interactions and making your prototypes come to life and actually start working like it would be the real thing. So interactions could be done in many different ways. And I'm just gonna focus on one for this lesson. And then for the next video, I'll show you a couple more methods. Um so to begin, I want Teoh. Start with the ah screen that I have called the message center. And I built out a little Ah, you I for sending a message. And what I'm going to do is program an interaction for this button, the send button, so that when we send a message, it's gonna actually have another screen that says Your message was sent and that's a message. Send confirmation screen. So what we do is we click on the button. Ah, the element that is a button and you open up the right hand pain called Inspector, and we'll see that, you know, here we've got Inspector, and it's were inspecting the rectangle here so we can even call this the send button and under the there are three tabs here there's properties, notes and style, and under the Properties tab is where we will see how we can start creating interactions. So interactions is here, and there are many different events that we can assign to this button. As you will see, there isn't on a click on mouse, enter mouse out and even more events down here That looks like there's about 15 to 20 different types of interactions that we can actually put on this button. Um, and we're just gonna focus on on Click so I will click this. That says on Click Ah, which will assign a click event to the button. So I'll go ahead and double click on Click and this will open up the case editor and the case editor is where you ah, edit all of the interactions that you want for your these different elements on your prototype so on. So we have on Click, and we want something to happen when we click this button, and what we want to happen is we want the other screen that says message confirmation. We want that to show up, so what we'll do is Ah, for case one. We want to open a link. So click this section that says open link in current window. So now we're actually adding an action here, and we Then we'll go ahead and configure the action in this third pain over here, and the way we'll do it is okay. We want to link to a page that's already in this design. That's true. We actually want to link to this page the message, send confirmation, and you can see that this is just the list of all pages. It's just saying, You know, when we click the button, we want to open a link and the link is gonna be one of these pages and you can actually link to anything you can link to an external. You are. Ah ah, You can go back to a previous page like if you had linked to a previous page, you can actually go back to it. You can reload the current page so that super useful, Um, a very intuitive. But we're gonna go ahead. And so we want a link to the message, Send confirmation screen and we'll click. OK, and that's it. That's all it took Teoh put an interaction onto this button will see. There's a little note here that says one, Um, it's a little note that shows that, yes, we do have an interaction for this, and you can see and again in the top right pain we have now programmed in interaction that says, Okay when we click the button, a case happens in that case is to open this screen that's called message son confirmation in the current window so we can even test this out, would go to preview, and now we're actually opening it up in the browser. And this is our prototype. We can't even type in here a subject, and you can even whatever, cause I made these text boxes so they're actually we can actually type into them. And now when we click this, it now goes into the confirmation screen, which is great. That's exactly what we want. In the next video, I'll show you some more complicated interactions. Um, these are pretty simple. And again, you know, you have so many different events that you can choose from here. It really makes actually a very powerful tool to create working prototypes. Um, so I'll see you in the next video where we talk about, Ah, little bit more about interactions and I'll show you a couple more different ways to do them.
5. How to use Dynamic Panels: Hi, everyone. So this will be a quick class on an introduction to a dynamic panels, which is another video that goes along with how to use interactive elements within, actually to make your prototypes interactive and work and feel and look just like the real thing. Um, dynamic panels are part of actors, libraries, part of extras default libraries. So if you go to the left in the library is paying you click default and you scroll down here, you will see an option here for dynamic panels. Um, if you drag one of these onto the screen Ah, you'll come up with what looks like just a normal box. But these types of panels are special because they actually have different states, meaning you can actually put different things in this panel, and they will show up at different times, depending on when you want them to show up. So, for instance, this panel that I just dragged into the home page screen um, this has already won state called ST one. And I can add states as I wish, and states are just sort of like it is what it says. It's sort of like, Ah, a state of being, if you will, of this panel. So anything that's in this shape win state one. Now we're opening up State One. Ah, will be Onley in ST one. It will only be there when you show state one. So maybe I will put an image here, Justus An example. I could put some text, so something like that could be in state one. You know, it could be anything you want. Um, so you can see in our outlying these actually show up under State one. And the outline who go to ST to weaken, do the same thing, Um, and just put something different. And of course, you could keep going and going and going and doing as many states as you wish going back to home page State One is what shows up here. Ah, but we know we have another state called state to. And so this is sort of the beginning of how you use dynamic panels where we know we have different states. And now what we want to dio is start to toggle between those states. So, you know, maybe one thing we could do is have a button that says click here. So if I have a button here and I would like to change I would like to make this panel interactive By using this button. I can do what we did in our previous video, which is double click on Click. And here we've got a couple options here in the case editor. If we want to change the dynamic panel, we go to the tab that shows says widget, and we can do set, panel state. And first we look at configure actions set. We're gonna actually said it to state to, since it's already on ST One initially and we click. OK, and now this interaction appears of a button here. So basically what we're doing is, as we click the button, this panel is going to change. Everything that's in this panel is going to change to the state to rather than be on state one. So if we want to quickly preview this and let's see if it works, we're in home page. So this is our dynamic panel. We click here and it should go to state two. And it did go to State two. So dynamic panels are a great way. Teoh ad Ah, whole bunch of interactive elements at once. Or if you've got a section of your app that you know the whole thing is going to change or , you know, you want to do a bunch of different how you say states are modes. Ah, of that of just like in that particular section of your app. Like here. We just did it in the home page and we just had a dynamic panel here we could make. This is Bigas. We want her. A small is we want, um if you know that you're gonna have something like that. Dynamic panels are really useful because you don't have to go changing every single element at once. You can just create a state with all the elements you need and as many states as you want with as many elements as you want, and they will all change all at once. So that's it for dynamic panels. And that covers most of what you need to know for interactions with an actor
6. Class Assignment: Okay, so now that you've mastered most techniques within ACTU r p eight and most techniques that I would consider to be intermediate to advanced, which includes things like user flows, interactions and dynamic panels, your class assignment is to create your very own interactive set of wire frames, complete with either a site map or a task flow. And also make sure that you publish it to acts, share and in the comments, share a link to your new set of wire frames so that we can all see them in the classroom. And we can all comment and suggest changes and improvements, etcetera, etcetera. Um, this could be a set of wire frames for an app that you decide on building yourself. Maybe it's an idea you came up with. Or maybe it's a redesign of an existing application or an existing website or product that you think you could do better. So I would love to see your projects again. Make sure to publish your projects onto acts share, get the link and put it in the comments in this classroom so we can all see it. And if you have any questions, don't hesitate to reach out. And good luck. I look forward to seeing her designs
Sarah Khan, UX Designer
