AIUX - Responsive UX Starter Kit

Hey, what's going on, Matt? Here with AI ux.

And in this video, I'm going to show you how to get started and.

Get fast on your next responsive wireframing.

Project with Adobe Illustrator. Let's dig in.

All right, first of all, quick keys, zoom in here. All right, so the selection tool, hit the V key to bring up the selection tool, and you can select things. If things are in a group, you can double click with a selection tool to isolate that group, double click again to get further down into a particular group. The direct selection tool is the A key. So with the A key, you can isolate quickly individual elements inside of a group. So all of these things are grouped, and I'm isolating them by moving them around. But you can also draw shapes around points of objects and kind of edit them individually. So you can grab this, pin the point on this line and drag it up, or I can kind of go in here and drag one of these circles somewhere else. What's also cool is you can. So I can select an object and a point by holding Shift and then kind of edit those and move those around independently. Even though this is all within one group. The pen tool is going to be the P key. And this is going to allow you to quickly draw lines if you want, and just kind of make this one the same style as this. So you can see, but you can also draw shapes with the pen tool, or you can draw lines that some things point to another. And the type tool. So I've got these letters on these keys here. So if you hit the T, the T key and click, you will have a text path. You can also draw a box with the type tool and type inside of a box. And if you have a lot of text inside of a box, you can take the type tool, take the selection key, and kind of expand these shapes. The eyedropper tool. So if I draw a square and I select it, I can use the eyedropper tool to make it be the same color as any of the things that I'm selecting and take on the same properties. And the rectangle tool, like I just used the M key. So you can click and drag to make a shape, or you can click to create a specific specifically sized rectangle. All right, and on the Edit Edit artboards tool, that's going to be the shift. Okay, so if I hit Shift O, you can see I can move these artboards around, and I've got all these different artboards that I've placed that are moving around. So that's Shift O. And stroke and fill focus toggle. So if I draw a rectangle and I have this gray fill and this black stroke or dark stroke, I can select the shape and hit X to bring to focus one of these fills or strokes. That works well. If you're gonna pick a new color for the fill and then you want to pick a new color for the stroke, rather than coming over here and clicking, you can just hit X, click a new color and let that be that. Also, if you click this and you hit shift X, it will reverse the folk. The folk, the stroke and the fill on that shape. And then like I showed in the beginning, all this is within a group. And to. To group objects, you select two of them and you hit Command G. And so now I have a group. And if I take this group and click onto this group and hit Command G again, that's going to make another group. But if I hit Command Shift G, then that will ungroup those objects. Command Shift G again, those are ungrouped. I can click here and hit Command Shift G. That will ungroup these kind of individually as they were grouped. So it just works great for keeping things kind of organized in layers without actually paying attention to the layers. It kind of helps you go faster. All right, these global colors. So these are basically the only colors that I use when I'm laying out, like, a new. A new wireframing project. Because when you're wireframing, you really want to keep things just very simple and basic without worrying too much about typography or color. So right here, you know that this more button is going to do a little bit different action than some of the other ones, which is going to kind of expand our navigation. And so for all of these wireframes, I use these very basic colors. This is kind of like a background color that I use your simple white and a very dark charcoal black that's not quite as harsh as a full black. And then kind of the primary call to action color, which is this blue here. And then for errors and kind of success messages, I'll use these, this red and green color. And then for the occasional, like, icon or secondary button, these are some other simple gray colors that I'll use. But I've got all of these colors listed out as these, these global colors. And I'll go to a list view so you can see these. And what's great about the global colors you can see in this document, I've got some blue here, some blue here, and some blue here up in the navigation. So if I went and actually change this blue to a different color. Every single instance of that blue where it's used is going to now be that, that color. So I can go down here and you can see how these changed or go back and you can see if I make it a little bit more extreme, like a neon green, you might be able to see it show up a little bit more. So it's basically any, any stroke or text object, anything on the canvas that has that color will change. And so that can be really helpful if you're, if you start your wireframes off with a particular primary color and then you want to change it to maybe a different brand color or just mix it up a little bit. The global colors make it incredibly powerful to use. All right, so in this next little section I want to show you what I've done here on this mobile navigation. So I'm going to hit Command Shift H to hide my artboards. So I've got these, these devices right here kind of pre drawn to show these wireframes. It really helps to contextually set, you know, what you're looking at on these screens. By having like a mobile, a tablet and a desktop. It is definitely possible to have these designs in place without those. But without them they just kind of add a little more context about what you're looking at and why you're kind of making these decisions. So this is a kind of an iPhone 5 size which has a width of 320 pixels. So I'm going to select the rectangle tool and go 320 by let's say 50 pixels. All right, I'm going to use select this and hit the eyedropper tool to select Whoops. To select this kind of carry on these properties of this search bar, which is also what I'm using for this, this navigation and also the search area. Alright, so I've kind of shored that up a bit. I can go to this transform panel and see that's actually 44 points tall. Go to my transform panel to align to a pixel grid so it stays nice and sharp. All right, and so now I'm going to just option drag and duplicate this thing because I know I'm going to have this AI UX logo, this kind of circle and my name here. So using the type tool I can click onto this area, say okay, we want to use some products space a few times. Tour 1, 2, 3, 4 more. And so with this one, just to show a little bit more interaction, I'm going to. Oops, I can't hit X to switch the stroke and the fill because that will type an X. I'm actually going to have to click it this time and change that to blue and then we can adjust the size of that here. Now I could leave it like this, but I kind of want more space. I'm going to do a few more spaces in between these and I'm going to grab this logo, copy it out of that group and pasting it down here. Now, just like the rectangle tool I showed you with the M key, the Ellipse tool is the L key. So you can hit the L key and drag your shape. For this I'm going to use the Eyedropper tool just to kind of quickly move through producing this. I'm going to hit my type tool again to type in this thing. So if I hit Command Shift R I can right align this thing, go down a bit in size. This icon is one I'm using from an icon font. But you could also use your quick keys, the, the L quick key and the M quick key to kind of create a quick little icon for like a user avatar. I select these two little points up here. I can round the edges by pulling in on that thing. Going to select these, hit the Eyedropper tool and move this over and just do a quick little align objects there, maybe move this head up a tiny nudge. Alright. So you can see pretty quickly. I'm kind of building out this navigation. This is another icon font that I've used. But again you can create these really quickly with Illustrator. I'm going to draw two little circles here. You could definitely, you know, make these a little more precise. I'm just trying to do them quickly so you can get a quick feel for this. I'm going to hit command. Command eight is going to give me kind of knocking out that center. It's also equivalent to using this pathfinder, kind of using these to change the, the appearance of that, of that path. And then I can create a little tiny rectangle here for the stem of the magnification glass. Just gonna align this and Command G to group this thing and then I'm gonna shift, rotate that guy, type in search, select that all and then Command Shift L will turn that into a left aligned type path. So I'm gonna, I'm gonna just eyedrop this thing because I've spent a little more time designing that old one. So you can just see pretty quickly. We've got our mobile navigation done and now I can select all this stuff and just hit Command G And now I have this little chunk of navigation and header stuff. So if I want to create a background for this thing, I'm going to just click up here and I'm going to go 320 by 667 which is the iPhone iPhone size to the eyedropper tool here. Command Shift left bracket will send that thing the back. Let me add a little stroke to this thing. All right. Now actually the 667 also includes this thing that I'm not showing in my design. So I'll just bring that up. You can see I just use the direct selection tool quickly to bring those points up. Alright, so now that we have this screen, I'm going to go ahead and drag a couple of these devices up here just so you can see how. How I'm going to kind of scale this design up. So I'm going to move this up here, zoom in there. So I've got that design. Now I'm just going to, since I've grouped this, I'm going to option drag this thing over here to the iPad view and kind of nudge this one in place. Now like I said in the earlier in the video, you can double click into this group to kind of isolate it from everything else. So what I'm going to do is use my Direct select tool to select the points of this shape, all of the right side points of these shapes and I'm going to deselect this navigation and then I'm going to pull all of this right over here to the edge of that wireframe of the iPad, zoom in to check that thing out. And so now we can see we can start making some different decisions about our navigation. Now we don't really need a two tiered section for this thing. So we can maybe bring this up here and delete the second bar, grab this search section and bring it up to there. And again we're not saying that these are specific breakpoints, we're just kind of getting a feel for what might happen on this kind of tablet view. And I can take these points, pull them down here to the end of that view. Alright, so now that's a pretty decent looking iPad or tablet navigation. And now we can do the same thing, copy this whole thing by option dragging to the laptop and we can kind of decide if we want to put a container around this thing or in kind of instead of extending fully left and fully right, let's say we just wanted to do kind of a standard 1280 pixel wide content container. So we'll do 1280 on this background shape. And then what we can do, we could do the same thing with those, or we can just click into this group and I'm going to deselect this background shape, pull these points over here so it's aligned to that edge. Now we can get out of there, and we will just kind of pull it over here centered with, with the laptop. And so now we don't necessarily want these edges to be kind of showing like this. So we're going to go back into this and pull these points right here all the way back to the left edge. Because we could have that as our background that extends, but then keep our, our content within the confines of that kind of 1280. And again, 1280 is just a quick guess. You know, you could obviously change that as the design progressed, but now you can start to see how the padding and margin on each side would work. But also you can see now we have a lot more space up here, and the search bar doesn't necessarily have to be that big. So we could take this search thing out of here. I'm going to group it and hit Command X to cut. Double click to bring our isolation mode out. And I'll just paste this thing back in here. I'm going to double click to get into only the search, bring this in kind of quickly move this stuff around, maybe make this a little bit smaller, reposition some of this stuff here. All right, now, since we're not going full screen, I'm gonna round the corners on this a little bit and now place this whole search thing maybe like right over here by the account. And just for fun, 1, 2, 3, 4. Move this up just a little bit. Just kind of doing this quickly just to get some ideas for how this could change. So now you can see we've got a quick little mobile navigation, tablet navigation, and now finally the possibility of what could happen on our desktop. Now I'm just going to delete this stuff because I've already got a different design down here.

Now, without going too much further with these little components, I am going to show you how to export the stuff. Now, you can see if I hit Shift O, you can see these different.

Art boards that I've.

That I've created and kind of drawn around these individual pieces. So in order to do that, you, when we start off with just one screen, you can add a new artboard by hitting Shift O and then just dragging a new artboard, you can drag it around. Like if this wasn't an art board, we could drag it around this existing artboard content. I'm just going to do a command Z there, but so you can create multiple artboards by just creating them like this. And then once you've got those artboards in your artboard panel, you can see which ones are created. And then you can see I've just named the individual ones right here by double clicking and change the name. So from number one down to number nine, this will determine the order that they will show up in your PDF that you export. You can arrange these the same way you can arrange layers. I'm going to just delete these three because I don't need them. But now that I have these six artboards in my Illustrator document, now I can command Shift s to pull up the Save dialog and do a PDF and I'll just save it to my desktop AIUX Starter Kit PDF. This use Artboards is selected by default. I already have one on my, on my desktop, so it's asking if I want to replace it. Now right here you can, you can disable the ability to edit this in Illustrator. Most PDFs you can open inside of Illustrator and edit the contents. So you can choose whether or not you'd like for people to be able to do that. In this case, I don't really mind, so I'm gonna just leave that selected and save the PDF. So now you can see I have a PDF here and open it up and you can see that's multi page. Some of these art boards are smaller and some of them are larger, but that's okay. We can, we can just look at this just like any other PDF and anyone you share it with can do the same thing. Let's go to Single page so we can see it a little bit better.

We've got our quick keys, our global.

Colors, and then we have our devices and we have our user flow and a bit of a content map. So now that is how you export the PDF.

Alright, there you have it. The AI UX starter kit. If you'd like, you can visit learnaiux.com and download all, all of these files.

And start using them on your next project.

Thanks so much for watching.