Illustrator - UI & Web Design using Adobe Illustrator

Creating the Tablet and Mobile wireframes in Illustrator

Daniel Walter Scott || VIDEO: 1 of 45

Download Exercise Files



You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Okay, lovely people. This is what we're going to be building in this tutorial, we're going to finish off the desktop, build the tablet and mobile versions of our wireframe. I won't be offended if you just skip to the next video, because it is literally just kind of doing the same thing but working to a different grid.

Did we learn heaps more? We learnt how to make a stripy line over here. So if you want to hang around for a stripy line, let's get into it.

Alright, so we need to finish off our desktop view, so we’re just going to add another row of images, I'm going to select all three of these guys, hold down my 'Alt' key, drag  them down, and we're going to add in some social accounts down the bottom, so my rectangle tool, it's going to have 'No fill', kind of 'Off white' fill on a 'black' stroke. And my ‘Social Icons’ are kind of reach across, not exactly sure, but that's going to be my ‘Social Icons’. Grabbing this copy just so that the fonts look exactly the same. Like I said, it's hard to grab when you’re at some zoom levels, you got to grab right in the middle, and this is going to be my 'Social Icons'. And, put it in the middle. Copy and paste that, and this is going to be my ‘Copyright’. What I might do, just to save some time, get my ‘Type’, and get it to right align, so that it goes, 'Copyright', alright, 'Copyright 2017', and interesting thing, is under 'Type', copyright symbol's under something called 'Glyphs'. To use it, double click it, and you will see it will appear in there, close down 'Glyphs'. Helpful panel that was. I'm going to put in 'Sample Company'. Black arrow, just kind of range it along so it sits on that column there.

So there's my desktop finish. Now what I'm going to do is I'm going to zoom out a little bit, grab my artboard tool from the bottom here, I don’t want to have a bit of a padding at the bottom there. So, back to my selection tool, and we're going to start with the tablet version, and the easiest way I find to get started is just copy and paste it across, and in my case I might grab these guys. You can copy, paste, and drag, or hold ‘Alt’ while dragging, line him up there. My hero box needs to come into the first one. And this logo box is probably going to be the exact same size on this side. I know my navigation is reasonably small, so it will fit in here, you might have to adjust the size of your logo on tablet. It's just a matter of working out what looks good at tablet size, the different layout that you plan to use. So I’m going to go through. The big change for me is I would like to just do two of these guys, so I'm going to bring them across. Actually what I might do is bring one across, because again, it have to be resized. So I might as well do one of them, and then duplicate him. It’s lining up with everything. Zoom in a little bit. ‘Command 1’ to make sure it's perfectly lined up, and I'm just going to drag it a little bit, and I'm going to hold 'Alt', and I'm going to make two of these guys. I’m going to make my artboard bigger. Zoom out a little bit. Artboard bigger. I've kind of lost my grids down here. Up here, we can work it out, so I want them to go 3x3. 

One of the nice things that's happened, can you see, on the right here, it says, "Would you like the gaps to be the same?" Some of the cool things you can do with Illustrator. Next thing I want to run along, is my 'Social Icons'. I'm going to zoom out again. We're just kind of rebuilding it over here. I can't see my guides, so I'm going to have to show you how that works, so I'm going to align these up. I could probably just get away with - can you see it actually snaps to the guides at the top there? You might have the question of "How do I fix this?" So what I need to do is, two things, it's easier if I move these bits, kind of just over here, for a second, then go to 'View', 'Guides', 'Unlock Guides'. Now I can select all of these guys. And, with the black arrow, it's not as useful as the white arrow, so the white arrow, and I select all of them, I grab these little anchor points - which you're going to learn a little more about later on - you can see I can drag them all down. Now, you want to drag them down straight, maybe you can hold 'Shift' to drag them straight. I'm going to go back to locking our guides, 'Lock Guides'. I'm going to grab this stack back, guys back into position, make sure you get the same gap, nice. 

My artboards going to have to get a bit smaller, and what I'd probably do is, my ‘Social Icons’, it’s going to get smaller when it gets to tablet, and maybe they'll share the space in here. You might have to change that a little bit when I've got the actual icons in depending on how much the client has. I’ve only got a few that will work. 

So, last bit is the mobile version. I might just kind of get in early, and get this guy to be a lot taller. What I'm going to do in this case is, this is where probably the - I've started with desktop, and moved to tablet, and then to mobile. I find that's the way I work the best, but it's very common and cool to start mobile first. It's the hardest one to design for, and I agree, but I find that people that come to my site, desktop is a huge majority so I spend more of my time on desktop, and I kind of go back for mobile. There's lots of people who argue that that's the wrong way of doing it. If you’re doing app design, there's no point doing a desktop version, so you'll start with this kind of smaller screen, and it is the hardest one to design for, so it's up to you.

I'm going to grab some bits that I need, I'm going to probably grab all these guys, I’m going to hold ‘Alt’, drag them across, you can do just one by one. And what I'm going to definitely have to do is, the navigation's not going to fit, so we're going to move it down to, basically it's called the Nav sandwich, so I'm going to grab my logo, move that across, and in this top part, along the top here we're going to draw ourselves a hand burger menu, or a Nav sandwich, so there’s three stripy lines. We're just going to use three stripy lines, so I'm going to draw one, draw two, and draw three. Mine have no stroke applied to them. Before you start drawing you should probably check that you've got black lines selected. I'm going to do mine separately, they're still there. I'm going to grab you guys, you're black, and I'm going to make the stroke better. Be at actual view, so you can get a sense of the size that it should be. There's no definite size for them, and I'm going to make sure that they're separated correctly, so up the top here there's one that says 'Distribute Centers'. It's just kind of like lines, that's what I'm going to do for my Nav sandwich. Grids off, grids on. It’s about the right size, maybe a bit big, but that's okay. And what's going to happen here, this is going to - get down towards my grids back. Here's my big hero image, it's going to be a lot smaller, and the text here, although I didn't change the font size over here, because I allowed it a bit more room, when it gets to mobile, I'm definitely going to have to change the font size, to something smaller. What I might do is actually just make sure I’ve got – so it ends at this ‘Diam’, so I'm going to make it a bit smaller. 

You'll notice that here I'm not going to line up with the grid, there's a couple of tricks we can do that kind of force that to happen. So I’m going to delete. That's all gone. Maybe, line it up nicely. The other thing I'm going to do is select it all, and I'm going to change the format here, so these things you can do easily, like when it goes from tablet to mobile, I'm going to make sure it lines up center, and it's going to be okay, nice and easy thing to do. So this guy is going to be centered in here, as a big button. And the font size gets a bit smaller.

Next thing I want to do is, make sure this is lined up. What I'm going to do is, instead of - these are just going to stack up on top of each other, so I'm going to copy and paste one, move it across, get you to come out to meet the sides there. It's actually going to be bigger on mobile than it is in any other view. And you can kind of see from this view here - I've got to make sure that these things are lining up perfectly. You get in there. 'Command 1'. And what I'm also going to do is, instead of having six, I'm going to cut it down so that actually we only have four of these. Why? Mainly because I want to show you what it looks like - how to turn them off when we get to building our website, so we can turn these off in code, so we only have four of them going, and just so that it's not so epically long. You can see here, I've got four of them already, and the pages are already much longer than the tablet version, so a lot of scrolling. 

I'm going to do down the bottom here, I'll grab this 'Social Icon', and I'm going to stack these guys differently, so I'm going to have them on top of each other, because they just couldn't go side by side here, and that's something you can do in code as well, easy enough. Copy them when you’re dragging them. Tap it around a little bit, grab this one, and there they are there, centered on top of each other. Spacing's good. Artboard tool. That is going to be our wireframes. 

So this might be the biggest, longest, boring of all the tutorials here in Illustrator. I promise, we're going to get into some super, fantastic, fun designing, color, using image, mind blowing-ness, in this next, I promise. Alright, next video.