Creating a mobile responsive UI website design in Illustrator CC 2017

Hello, beautiful people! In this tutorial we're going to make our mobile version. You can see it's a little bit different, we've done lots of left aligning, and columns. In mobile, we're going to break it down, we're going to remove some boxes, you can see, we're missing some, we're missing some lines, and we've gone for some centred bits, and probably the main bit is our lovely mobile menu, or our Nav sandwich, or our Hamburger menu. So let's go and build that stuff.

So, similar process is the tablet, we're going to work on-- I'm going to lock the artwork, and unlock background, so I can move this across. I'm going to select all of these pieces, hold 'Alt', crop them across, try and get them to snap, they don't, I have to work that out afterwards. I'll select all three of these, joining, and snap in the corner. Still not wanting to snap. I was fine if you zoom in, it wants to snap a whole lot better. My problem is, a couple of these aren’t quite lined up. Now they're looking good.

What’s probably going to be, is it's going to be a lot shorter. I know this because I've already mocked it up for this tutorial, so you'll probably going to do this on the fly as you're working. I'm just going to make it a little smaller because I know. Now, remember, resizing this one's a little bit weird, if I just grab the corner-- It's kind of actually going to work in this case. Can you see, it resizes it, but if I do some weird stuff like that, it makes it long and skinny. So what I might do is, hold 'Shift' till I get to about there, I want to re-size down, now I double click, click on the outside, which is the kind of clipping frame. I'm going to drag him in to match that, and then I'm going to grab the inside of this, and just kind of move it along, so it fits, and then scale it down a little bit. Double click the background to come out, and we've got our nice little faded background. This guy needs to be adjusted, and this one's going to be a lot longer, I assume. We'll have to adjust that one when we get down to the bottom there. 

Cool, lock the background, unlock artwork, and start shuffling it across. Probably the biggest change in this case is going to be how the menu is going to work. We've only got two buttons, so we'll probably get away with just having buttons, but not many people have just two buttons, so we're going to use a Hamburger menu, or a Nav sandwich, and we'll turn on my guides. Remember, we're using only two of the columns instead of the whole 12 just so that it's not going crazy when we're trying to—We haven’t got columns everywhere. 

So what I'm going to do is, a couple of things. The logos have to shrink. It's stayed the same at tablet, but I'm taking the decision to shrink this down at mobile. So it's going to have to get smaller. How smaller? Just so I can fit my Nav sandwich in here, so it doesn't get too bad. You can switch our logos to different format, that's totally possible in HTML, you can hide one kind of logo, and you might have a different stack, maybe something stacked on top, for mobile, but for the moment there's my little Nav, and we're going to draw a Nav sandwich. Now the Nav sandwich is just those three strappy lines, it's become the universal thing for doing Nav sandwiches, or mobile menus. It's just three strappy lines in this case, and your developer, or you, as a designer, when you're building it in say, Dreamweaver, or something else, can manipulate this pretty easily. 

Drawing a line, I'm going to make sure-- I'm going to use my off white, and I'm going to make sure it's nice and thick. How thick? Remember, go 'Command 1' to look at the actual size rather than trying to zippy zoom. I thought that was an okay size, at that size, when I zoomed in, but that's obviously too wide. So I'm going to need 3 pixels, I'm probably going to tighten it in, and again, it's really hard to do that from out here, so I'm going to zoom in again, and I'm going to tighten this line in. I'm holding 'Shift' while I'm tightening it in just to make sure it stays in the straight line. With it selected, I'm going to hold 'Alt', drag him down, drag him down. How's that looking? Full screen. Yeah, it's better, right?

What I might do while I'm in here, just to make sure they're all equal distance apart, is the 'Distribute Vertical', and they're all fine. Nice! Put it in there. You might like this one, you might like the rounded corners at the end, so this one's got kind of flat ends, and that's what I want because that kind of fits everything else that I've done, square edges. We see a round, edgy person. What you can do is you can select on these strokes here. Open up your 'Stroke' panel. It's not open, there's mine one there, but if you can't find it, go to 'Window', and go down to 'Stroke', and what you're looking for is this 'Caps' here. At the moment it's on the, unfortunately named, 'Butt Cap', but you can switch to 'Round Cap', you'll notice it just kind of makes them a round Hamburger menu. Up to you. Alright. Zoom out. Great! I can probably get away with my logo being a little bigger. On mobile I don't want it to be too small. Actual size, guides off, yeah, looks fine.

Next is, I'm going to do something quite different in terms of the layouts, so I'm going to grab these-- I got this group first, and I'm going to copy him across, and what I'm going to do is I'm going to group them together. I want it to be centered on this artboard. We kind of did that a little earlier. So we're going to go to our 'Window', we're going to open up 'Align', move it down here. I want it to go center, but what I want to do is, I want you, my friend, show options, and I want it to align to the artboard. So I want you to be centered at the artboard. If I hadn't grouped them first, watch what happens. I group them, they're all kind of go centered, but that's not what I want. So I group them together, so, 'Command G', or 'Control G' on a PC, or right click 'Group', and just make sure I'm going to align it to the artboard, center. Cool! He's going to go to the top there.

I'm going to keep the font size the same? I think so. This bit here, I'm going to copy him across, and I'm going to butt him up to the edges. What I'm going to do is, I'm going to make sure the font size comes down. It's pretty easy to change the font size when you're a web designer, so I'm going to do that, I'm going to make it centered, and I'm going to grab my black arrow, align tool. Don't need to align this because I've used align with the text up here. So yeah, he's going to be centered there. And, how small? Maybe just a tiny bit smaller. Here we go. Nice!

Next bit, the line, I'll bring this whole little gang in at once. Hold down 'Alt', drag him across, we can copy and paste him, and what I'll do is-- Actually what I might do is turn this line off for mobile, it's one of those weird quirky things where I've-- I've played around with it before, and I didn't like the line, so I'm going to group all of this together, all three of these are grouped, and then I'm going to make sure it's aligned to artboard, center it, turn my columns off. I feel like this is maybe a bit too big a font, so I'm going to select it all, and maybe move the font size down to something a little bit smaller.

Little changes like that, the web developer, or yourself, will be able to kind of check it, but if it doesn't look visually different then probably you might have to go and check, so you might have to make a note to yourself to make sure you indicate to them that that's actually just a font size smaller. No complaint. You might have to write to CSS just for one little font size, but that's why you're a designer. You get to make the big, or tiny font decisions. Great! I'd probably turn this up a little bit at the bottom, mainly because it's not lining up, so I'm going to unlock the background, grab him, nice. 

Next thing I want to do is save it. And let's look at how we're going to do with these thumbnails. Now, up until now we did stacks of-- we did 3 columns, then we did 2 columns, and this one we're going to do 1 column as per our wireframe. Now, I've got my wireframe printed off next to me, and I'm just kind of copying that as I go, so what I'm going to do is grab one of these guys, move him across, turn my guides on, and align him up, stretch him out. The weird thing is that he's actually the biggest he's ever been on mobile, weird, huh? Like desktop, he's actually the smallest, he's a little bit bigger on tablet, and he's the biggest on mobile.

You can see there's lots of decisions being made on mobile, a lot of people will design first for mobile, it's not my-- being my experience that it's-- It's better to work with the most used screen, which in this case is the desktop. So, we've worked him out, and he is, how wide? Okay, 399. So I'm going to grab him, and I'm going to go-- Actually I'm going to bring all of these guys across. I'm shift clicking them all, all come across, I’ll jam them over here in the artboard, and I grab these two, because they're linked, 399.5. Awesome! I know we did them separately before, but when they’re all lined up on top of each other, you can change the width, because they're all lined up next to each other.

Now, it's a matter of stacking them. We've got to copy that stack from tablet. You next. Who’s next? You are next. We're totally running out of space. And what we're going to do, just because I'm going to turn this into a web design tutorial as well, we're going to use Dreamweaver, that make this, rather than just designing it, is we're going to actually turn these two off, just so that the page is not like this epic scrolling massive mobile version, so that it loads nice and fast on a mobile in case people aren’t in wi-fi range. I do it mainly so that I can do it in our web tutorial to show you how to turn things on and off, or turn that line on and off, and we'll turn these guys on and off using CSS.

So we've got these adjusted, and we'll bring in our footer over here, so we might have to extend this down a little bit. You. How far? Not sure. My background. Oh, the background wasn't locked. A little bit lower. Locked the background. Grab you three, bring them across. And what I'm going to do is, I'm going to get the social ones to-- I'm going to group them together, so 'Command G', or 'Control G' on a PC. It's aligned to artboard, I'm going to center them, so I've centered them there. I'm going to stack these. That's something I can do easily in HTML as well, is I'm going to regroup these guys, I've grouped them so that I can send them on the artboard, and I'm going to drag them down. I'm using my keyboard shortcuts just to get it down in this case. Oops, they weren’t grouped, they were just kind of overlapping each other. So I'm undoing, back, back... undo, undo... there they are. Now, right click them, and 'Group' them. Now if you center them they shouldn't stumble on top of each other.

Nice! Tidy up the artboard. And, that my friends is our mobile version. Unlock him. When you're doing this, it's probably not going to-- like this is something I've designed previously for this tutorial, you'll spend like I do, an amazing amount of time nudging this up, moving this across, changing those colors, playing with that font, to get it all looking how you want it. So don't be afraid if you've got three or four versions of your mobile because it's the hardest one to do.

That my friends is our little responsive web design. Let's move on to the next video.