Creating a tablet version of our UI web design in Illustrator CC 2017

This lesson is exclusive to members

Course contents
SECTION: 15
Cheat Sheet 5:23

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

45 lessons / 4 hours

Overview

UI design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.

This is a project based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.



We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.

This course is for people serious about becoming a User Interface design professional.

Know that I’ll be around to help - if you get lost you can drop a post on the video 'Questions and Answers' below each video and I'll be sure to get back to you.

Now it’s time to upgrade your skills, get that better job, and impress your clients.


What are the requirements?

  • You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.

  • No previous design skills are needed.

  • No previous Illustrator skills are needed. 

What am I going to get from this course?

  • 45 lectures 4 Hours 7 minutes of content!

  • You'll learn to design a website with in Adobe Illustrator.

  • User Interface essentials. 

  • 27 Completed files so you never fall behind. 

  • Learn how to wireframe at all levels

  • How to design for a responsive website. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.

Course duration 4 hours

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

In this tutorial, we're going to create our tablet version, it's going to look very similar, we're going to play with some of the padding on the sides here, so it's not so fat and dented, we're going to rearrange the stacking order of these thumbnails, and little bits and pieces, but we'll get ready for tablet. Okay, so let's get started.

Now, I've already kind of planned through what I want to do in my wireframes, so it's going to be easy to follow that. What I also find is, the wireframes kind of close what I want, but I end up actually changing it quite a bit as I'm working with the actual copy, and the actual images.

First on, I'm going to turn on my guides. I'm using 'Command ;', or 'Control ;' on a PC. You can see, I've decided, remember, to use these 3 columns instead of 12, it's meant to be 12, but it's just visually too hard to work with, so what we're going to do is, use our 12 here. 

First of all, let's move the background along, so what I might do is, see down here, my layers panel, you might have to go to 'Window', 'Layers' to see this, and I lock the artwork layer, and unlock the background layer, and what I want to do is, maybe select all three of these guys. What I'm going to do is hold down the 'Alt' key while I drag it, it makes a copy, just kind of move it over here, and it's going to end up on this artboard. And what I'm going to do is-- How am I going to size this? I'll probably have to adjust this again afterwards. So what I'm going to do is, I'm going to grab all three of these guys, stick them on the top corner to get started, that will get me going, and then I'm going to adjust them one at a time. So I'm going to grab you, snap you to the edge. 

Now, you can see, mine's not snapping, just kind of fudging here for a second. I wonder why it's not snapping. I’ve finally worked it out. Earlier, in the previous tutorial, I turned off 'Smart Guides'. Smart Guides are really useful. That means, that when I can line these things up-- Watch, snappy doodle. Alright. Yes, this is a snappy doodle. So we're going to drag that one in, that’s a green box, drag in the black box, and we're going to drag in this one. Now if I drag this one in you'll notice that it just kind of compresses, that's not what I want. So I'm going to double click it, to go inside, grab the edge of this, this is my crop box. I've kind of gone inside of it now. I've double clicked to go inside this group, where I clicked it before, it made a mask. And I can decide on how I want this to work. I'm probably going to get this image in the middle, to center, that's how I'm going to do it. Encode at least. And, do I need it to be smaller? Probably. It's going to resize a little bit, down to this size there. Nice! Double click the background to get back out, and we're back to square one.

One thing it didn't do is-- What I might do is just tidy this up. Here we go, nice. So there's my background graphic, I'm going to have to probably change that a little bit. I'm going to grab this big gray box, drag him across as well, grab that corner, come in, the height of this is going to change quite a bit, so don’t spend too long on it. I'm going to lock those guys, unlock artwork, and start moving this top and across. I'm going to grab maybe these bits. I'm not grabbing it all, just to make life easier. 

And what I'm doing for tablet, I'm actually going to leave the navigation, kind of there. I'm going to grab these three guys. Make sure you hold 'Alt', and don’t drag the whole thing across like I just did. I'm going to grab that, and copy it. Then I'm going to undo, put it back there, and I’m going to come over here and go to 'Edit'. Go to 'Edit', 'Paste in Front'. So, holding 'Alt' while you drag it, you don't just move it across. Nice! And I grab these three. I've grabbed all of them, including the background. If I hold 'Shift' and click this one, well I don't want it selected, I just got these guys left, copy and paste them. Came across. They still fit nicely enough there. I'm going to continue with that. All of this stuff's going to come across. I'm holding 'Alt', running it up, nice! Yeah, all looks good. 

I'm not changing much for the tablet, you can see, I'm just going to do this, turn you on and off. You can see the difference that I am doing though, is that there's padding in this one, because I got a bit of freedom of space, so I got this kind of inset, but on tablet, I'm just going to get it to line all the way up here. The height looks fine. The difference is going to be these guys, so I'm going to grab all six of these ones, hold 'Alt', drag them across. The difference with these ones is that I'm going to stack them 2x2, so I need to resize a little bit, so this guy here is going to come up, you'll notice, he's snapping at a lot of things. I'm moving these the other way. Smart guides is handy. You can see, it's not matching up, because it's a different size. I'll have to hold 'Shift' and drag it down, so it meets my guide. If you find it snapping to too many things, I find it's always easiest just to come in nice and tight, and it will forget about lots of the other things it's trying to snap to, and kind of focus.

So, I like that guy, but how do I match all of these at the same time? It's easiest with it selected. You can see it's a width of this, it's 369.5 pixels, so I'm going to grab that. Can I get them all in one go? I can't, so I'm going to do, you, and I'm going to select it. I'm going to make sure it's linked, so when I change the height, it changes-- sorry, when I change the width, it changes the height. Hit 'Enter'. You can see, it kind of scales down. So you, my friend, is going to be the same width and height. You can see they're just getting proportionately smaller. You, you, and you.

So, you my friend, you, you. It becomes a little hard if you want to shuffle that order when you're using-- it's easy obviously to do in Illustrator, but when you come to web design it becomes tough, so try and keep it the same kind of flow, so, you, you, you, and this one, and this guy, and this guy here. Nice!

I've got my line down the bottom here. Actually, I've got these gray boxes a lot longer, I'm going to have to extend my artboard. Cool! Massive! And we can adjust this gray thing afterwards. And I'm going to bring in, I'll bring in all three of you. You can go in there. This little line is a bit shorter. Sometimes it’s hard to grab this line, and bring it in, so you might need to zoom in. I find that's easier when you try to grab some of those points, and then grab you.

One thing I didn't put in the last bit, I wanted to add a little copyright notice on the desktop one as well. Just going to say, 'Copyright 2017', and we're going to put in-- We did do this, I felt like we did the copyright thing earlier on. Did we do it? We must have deleted him. 'Type', 'Glyphs', we did, I remember this debacle. And, copyright, I find it first time this time. Double click it, it appears down the bottom there. I must have deleted it. And, this is 'Dans Portfolio'. You put in your company name, if you have one. And I'm going to use a font that we're using, which is, 'Open Sans Condensed', and we're using 'Bold', I think. Great!

So I'm going to grab you guys, just these three, copy and paste them, move them across, you go there, and what we might have to do is, the ordering of this. We're still going to span about 6 now. Select them all, I've tucked that one in. So we're going to span 6, and we're going to distribute centers. Horizontally, or vertically? I can never remember. That's what it's going to look like, over here.

So that's it for my tablet version. I'll just tidy up the artboard before we finish off, and move on to the mobile one. That's kind of about right, I'm going to unlock the background, so I can get this gray thing to slide down. Actually there's a bigger gap in here that I want to mimic, so I'm going to lock the background. Lovely!

Alright, that's our tablet version. Let's move on to the mobile.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024