 the opening screen. Oh, nice. I'm not going to do that now. Okay. So this is how I set up. This is how Actra looks when you set it up. Now what I can show you here, and I'll go through this again for you. So you can see these words, these little icons here. They might be a little hard to see, but this says base, and this one says 320, 768, 1024, 1200. So if I pull that out a little bit, base is essentially my, it's sort of where all my stuff goes. It's my home base, right? And I keep my base at 1200. And if I go here, I can actually create my grid here. So I can actually work with a grid system. And then all I do is click on 1024, and it shows me what it looks like on a 1024 screen. And then I can just nudge things over. And same thing with 768. And you can see I basically am using the same content and just reflowing it, similar to what you would do in any design exercise. And this I haven't gotten a chance to do yet, but, oh, that explains why it looked so weird. Yeah, so this I haven't gotten a chance to finish yet. So let me show you how I set this up. So I'm going to create a new document. There's a couple of things that I want to make sure I have before I start. One of the things I want to have is the widget libraries that I normally use. So the widget libraries, like I said, they basically give you a bunch of widgets, like rectangles and buttons and links, that you can essentially drag and drop into your frame. So this is similar to Balsamic if you've ever used it. It's the same basic theory. The one that I like, Font Awesome is one of the ones that I use constantly. And this one called Flat Widgets is another one that I use constantly. So I'm going to show you where to find them. If I go to Aksure.com slash, I want to say it's Downloads, Download Widget Libraries. Yes. So if I go here, Aksure.com community slash community slash widget libraries, I actually can find a whole bunch of different libraries that I can download. Most of them are free. The one that I use that's called Flat Widgets is actually, where are you? Right here. It's called Web Widgets. So there's also boot strap as a widget library. I've also used sketchy widgets here, but honestly, it's a little limited from what I've seen. So I stick with Flat Widgets, but I'm going to try this common sense UX library. Or you know, I'm going to wait because I don't want to, how do I get it? Okay, buy now. I'm not going to buy something right now. Let's say that I was going to load a library in here. What I would do is hit this button here and load the library. Okay, and then I'm looking for something called an RPLIB file. And I actually have those in my Dropbox UX templates. I have you here. All right. So this right here, this RPLIB file, that is a widget library. Okay, so I'll just let's do this one because I don't think I have it. So this one actually has a slider that I can use. So let's say that I want a slider on the homepage of Drupal.org. So I just drag one in there. And now what I'm going to do is I'm going to create a rectangle. I'm going to use my Flat Widgets library. And here I can actually change my default style here. And I can use this widget style editor to actually create a new style. And I'm doing that because I can create a linear gradient. And I'll just make it two shades of blue. And then I can select this again and give it that new style. And now I have a blue box. And so if I wanted, was in a meeting with a stakeholder, and I wanted to make that gray scale, I will know in one second how to do that. Oh, I'm going to get to that in one second, actually. All right, so we're not going to do this, we're not going to do the, all right. So the first thing I need to do is set up my adaptive views in my grits, right, because that's going to give me the base to work with. So I'm going to start by going to, let me look at my slide deck. I love when I know how to do this, as soon as I'm in the middle of doing it. And then the minute I get to my slide deck, I forget what I did. Ever had those days? Because I had all the commands here. Okay, project adopted views. Okay. So the first thing I'm going to do is go to file project, I know projects, and then adaptive views. Okay. And then the adaptive views, pretty much everything that I'm adding to this project, I'm going to hit this little plus icon when I get to a dialogue screen. And I can hear I can actually select one of my presets. So the first preset I'm going to choose is a large display. And then I'm going to have another one for a landscape tablet. And then I'm going to have another one for portrait tablet. And then another one for portrait tablet. Another one for portrait phone. So what that should be able to do is give me the ability to now set up grid and guides by right clicking and saying create guides. And now I can chat, I can decide that I'm going to use a 12 column grid on 1200. So that's going to give me guides that I can now use to say, Okay, this is how I'm creating my document. Okay, so here I've got a header. And I'm going to go ahead and just copy the Drupal logo from the page I just showed you. So I'm going to make sure that base is selected every time I'm working. So if I go here, and then I want to have a couple of say I want to have a couple of images here. Okay, so this is a pretty simple drag and drop layout. And what I'm going to see is if I go to 1200, it's going to look like this. If I go to 320, it's going to look like this, but it's going to show me. It's actually going to show me this pink line here that tells me where everything's going to get cut off. So I can actually decide on the 320 view only, I'm actually going to delete this, move this up, and move this up. And then if I go back to base, everything's still the same. And same thing with 1200. Same thing with 1024. So 1024, again, it's also going to show me where things are going to get cut off. And so I can just decide, okay, well here that kind of looks like it'll be good there. And here I can also set up my grid and guides. So this is a 12 column 960. So this, again, is going to give me a place to work with. And then here, what I'm going to see is this is like really not fitting. My Drupal association logo is like half off. So I'm going to decide here that this is going to be like this. And again, if I go back to base, 1200, 1024, 768. And I can see how all of these things are going to change as people are looking at them. Now the other thing I want to do is put these buttons in here. And I'll just copy and you'll notice when I select these guys, do you see the red dashed line that's around that? That's because I've created a master here. Okay, so I'm going to show you how I did that. What I'm going to do here is I'm in my flat widgets library and I'm going to find a tab. So this is my inactive tab. This is my active tab. And these are just styled differently. And for right now, I'll keep them at the same default. So I'll keep them as the default styles for right now because what I really want to do is I want to turn this into a master. So it's always going to be, so it's always going to be in the same location on every page. So what I'm going to do is take these two along with this rectangle in this Drupal logo, I'm going to right-click and I'm going to convert to master. And I'm going to name it Drupal header. And so now if I do that, I can actually see it in this master's menu here. And I can add it, I can add a new master here, but I can also right-click and I can add it to every page in my document, which is what I'm going to do right now. So now if I go to page one, I've already got a header. Page two, page three. The next thing I'm going to do is I'm going to do that top nav that we have on Drupal.org, which I think I had which is right here. Get started community documentation support, download extend. All right, so that's going to be a top menu, which is a horizontal menu, menu horizontal. And again, I'm going to keep this white for now. Get started community documentation. So let's just have three. So let's say this is my menu. And I want this to stay the same here, but I want it to move in different locations depending on where I am in the experience. So I'm going to keep this here in my base layer. And then I'm also going to convert this to a master. And the reason I want to convert this to a master is because if I change or add a piece to this menu, I want to make sure that it actually reflect on all of the pages it's going to be on. And this is going to be on every page. All right. So this one, again, I want to look at my base layers, say, okay, so on 1024, it's over here. So I need to move this over here on 768. I need to move it over here. And I might need to now move these down a little bit. And then here, I might need to figure out an entirely different option for this because it's just not going to fit. And now when I go back to base, I can actually edit my top navigation, which is not what I, this also happens sometimes, not important right now. So if I publish this now to actual share, what you'll see here is I can create an account or I can use my existing account. And I have an existing account. But the thing that I want to do here is I want to make sure that I'm using a generator that's going to actually generate all of the different adaptive views that I'm using. So I can actually edit this generator. It's going to give me all of the pages. It's going to generate any page notes I want to put in. It's going to give me all of my widget notes, my interactions, which I'll show you in a minute. It's also going to include any web fonts I'm using. And this is where we would have, for example, font awesome. And this is where you would actually link to the CSS file for font awesome. And then I can also give this a password that I want right now. And now we can see the demo and we can actually see how it responds. And it's really that simple. It's a very traditional process. Basically what I do is I go and I create all of the different widgets and I add them to my process. I add them to my page. And as I'm going, what I might do, and I'll show you now a different one that I'm going to do, so now what I want to do here, so we're going to work on the dashboard now. All right. And what I want to do, let's say here what I want to do is I want to actually show in the settings widget, I want to make one of those little contextual widgets. So what I'm going to do, that's what we call a dynamic panel. So what I'm going to do there is I'm actually going to put this little menu there. And I'm going to put a couple of links in that menu. So now I'm going to group all of these. I'm going to right click and I'm going to convert that to a dynamic panel. And I'm going to name it configure. And then I need to set up an interaction so that on click I am toggling configure. And then I can also set this to hidden. And what I should see if I preview this is that if I click on this, it shows. And so the thing that it didn't do is push it to the front. So that's a mistake. Also a pretty typical process. But obviously it's pretty boring to sit here and watch me do things. So what questions do you have in terms of things you'd want to do with Aksher? Yeah, no. Yeah, it's specifically it's specifically for just generating like I couldn't take we couldn't take this and put it into blue cheese. The reason I created this as close to blue cheese as possible was because I wanted to be able to not only sort of show what it might look like on Drupal.org, but also to to help the developers a little bit. But that, yeah, that was pretty much it. But the biggest things that you want to learn here are dynamic panels and the adaptive views. Other than that, it's really pretty easy. And then the biggest thing that I want to do here is because I'm doing this, I want to create a note that says that says contextual menu, something there. And then I also project I can have page notes. Are there any other? And here if you look at page style, so I can actually decide right now that I don't want people to look at this in color, I want them to see it in grayscale. And I can also change the font. So I can decide I want it to be a weird chalk boardy font and I can make it really sketchy. So that way if I preview it should give me that didn't work. That's strange. Okay. So what other things might you need to do in a prototype? Yeah. Yeah. Yeah. So for example, like name, like an interaction. Okay. So there's two ways that you can do navigation. If I do that menu that I showed you, so that horizontal menu, so this horizontal menu, I can actually add sub items. So I can add this item and then I can actually add sub menus. And so in that case, all of the interaction is built into the menu. So you don't need to even worry about it. You just use this and you're done. If I'm trying to do more of like a drop down fly out kind of menu. Yeah, like what I did with the gear, that's the kind of panel that you have to use. And I want to, I want to see how I can, and I want to fix the interaction there because that wasn't quite the right way. So yes, interactions are basically the way that you are basically the way that you actually configure the different dynamic panels. And one of the things that gets really complicated is you can actually nest dynamic panels inside other dynamic panels. And the same way you can, you can nest masters inside of other masters. So the biggest thing, and this is like if you've used Photoshop for web design, it's exactly the same thing. Name your elements. Name them and annotate them as you go because otherwise you'd give yourself a huge headache. Yeah, so see now it works. And so that interaction was actually a toggle. And then if I want, I can go in and move this down a little bit. And so I can actually now make this a master and actually even make more of them if I wanted to. Or I could do like some kind, I could do this, I could actually make this entire thing, and I probably would make this entire thing a dynamic panel because this button, this little X actually closes the box and makes it disappear. So then I would actually take this, I forget exactly how I'd do it. I would take this box and I would convert this to a dynamic panel and then create an interaction on the X that closes the box and makes the whole thing hide. Does that make sense? So it takes a little bit of working out to figure out, but no different than you would coding it in JavaScript. And the entire point of this block is that I'm actually able to take my notes and I can make actual suggestions on how we should treat this box. So the team and I can actually discuss what, so what is it that happens with this element? What is it that happens with this box? And then if I really wanted to create some discussion, I can use my call out library, which is right here, and I can say, okay, well, this is number one. So every comment you have about this box, preference it with the number one. So that's adding a second layer of annotation because you can't necessarily respond, for example, to this note, but you have to make comments on this. So how is it that we make sure that they're going to be able to add the comments that they need to, and I'm going to be able to organize all the comments, especially when we have a ton of people commenting on it? Typically when I'm designing this, it's like me and a couple of people in a room. So it's not a huge volume of comments, but I can just imagine when I'm posting something like this that's for the entire community to comment on, that being able to filter through the comments and figuring out exactly what they're talking about is going to be really important. So the workflow, once you get used to it, is really easy, but dynamic panels are the majority of what you're doing, and so is creating notes and annotations and interactions. But once you do that, you can also create an interaction like this, for example, we could actually make link to another page that goes to the issue queue, as an example. So I could conceivably build this entire thing out, so profile to all of the different spaces that you're going through, we can see how those screens might look when you're on GDO, or on D.o., because I'm going to be doing this for GDO too. So you can see how this might add some efficiency to your workflow, and how it might be sometimes difficult to figure out when to give this to developers, but the thing I love about this is you could ping someone in IRC with a link to a page and say, hey, look at this and give me feedback, or you could ping someone over Skype on your team and say, I need feedback on this. And you can do it just as much as you would if you're building something in Drupal, but you're able to whip this out in half an hour, as opposed to who knows sometimes if you're not a hardcore command line developer. Are there any other questions? Is there anything else that you'd like to see in terms of how this is used? Yeah, absolutely. So let's say that we wanted to do a persona. So let's say I want to do a persona, so I'm going to go back to my flat widget, so I'm going to pull out an image, and I'm going to... All right, so let's say that this is my persona. So this is exactly like you would do any other document. You just put in your text, you put in your heading one, you're heading two, same thing. And you can just grab this and start creating a bulleted list. And then when you preview it, it's exactly the same. And you can click on it. Now, if I want to create a site map, let's say I want to have the home page be a site map of all of the different pages on here. I can actually drag these pages into here. And I can use this little guy to connect here to here. And when I preview this, I now see that there's these little links here, these little boxes here. And I can actually go to any of those pages. And I could conceivably put this anywhere in my site. I could even make that the breadcrumbs. Any other examples? All right. So I mean, that's a pretty basic overview. Obviously, it was relatively quick, but hopefully it gave you enough to sort of get started and get your own ideas on how you can play with this stuff. I'll actually be around and I'll stay here. So if you guys want to like come up and ask me questions and have me show you how to do stuff, I am totally happy to do that. And thank you guys so much for your time. This has been really fun.