Join Justin Seeley for an in-depth discussion in this video Project: Creating wireframes for websites and apps, part of Creating with Adobe's Line and Sketch Apps.
- View Offline
Adobe Line is the more precise of the apps that we're going to be talking about in this course. And, with precision comes the ability to create some really cool things, including mock-ups and wire frames for websites or applications. And that's what we're going to be talking about in this movie. As a web designer myself, I find this to be extremely useful, because I'm always sketching out ideas for a new website or even an app idea that I might have. And this app really helps me take that to the next level, especially with a lot of the precision drawing tools and stamps that I get to use. Let's take a look. I'm going to go ahead and create a new document here, and you'll notice a big difference when you create a document in Adobe Line versus Adobe Sketch. You're just brought directly into the document. There's no naming, there's no options, anything like that, everything's all right here for you. But, there are a couple of settings that I always check on when I first get into the app. First, I make sure that my pen is connected. So we'll go right up here, and as long as it says the name of your pen right there, everything should be good. If you don't see that, you can press and hold right there on that little circle, and it will connect your pen. The other thing that I check for is something called palm preferences. And this is something we haven't touched on yet, so let's take a look at this. Inside of the palm preferences, you're going to see a lot of different things going on in here. You're going to see six different illustrations of hand placements, and you're also going to see this little toggle switch at the top for palm rejection. Palm rejection basically refers to, does the iPad intentionally ignore when you put your palm on the screen? So, for instance, if I have this turned off and I put my hand on the screen like that, you can actually see that little marks were made, right there. I can undo those by pressing and holding, dragging backwards. But, if I'm actually drawing on screen, chances are my palm might be resting on there. I don't want this application to pick up on those marks. So what I do to turn that off is I come in here, go to Palm Preferences, and I turn that on. You'll see a little icon pop up over here, and that's something called gesture control. And what that's going to do is allow you to still do the multi-finger gestures for the undo's, while at the same time having Palm Preferences turned on. If you don't have that button held down, you won't be able to do any of the gestures, because the iPad pretty much assumes that it's supposed to ignore that. This is another important area right here. So what I want you to do is pick up the pen and actually look at how you hold it compared to these illustrations here. If you're right handed, you want to choose from the right-hand side. If you're left-handed, you want to choose from the left-hand side. Now, why would it matter how you hold this pen? Well, in my experience, how you hold the pen actually affects how the palm rejection works, and how the strokes appear on the screen.
So you want to make sure that how you're drawing closely reflects the setting that you have chosen so that you get the most accurate appearance of everything that you draw, and so that this application doesn't accidentally pick up something it's not supposed to. So in this case, I hold mine pretty much like the top one right here. At any time, I'm pretty much right there. You might be a little bit more angled like the middle, or you might be more upright like this. In any case, that's going to control how this tip is interpreted when you're actually on the screen. So, I always choose this one right here, and then I close it up.
Now, as far as creating the app mockup, it's actually pretty straightforward. There are several different things built in here called stamps, which make it super easy to create wire frames. Let me show you how this works. The first thing I'm going to do is turn on something called touch slide. And when I do that, you may see something completely different from me. I've been using this a little bit, so mine's a little different. By default, it probably looks something, like this. Just the two basic ruler lines. And this is the default touch slide which we've seen several times throughout the course. However, if I want to create a wire frame for an application, I might want to use something called a stamp for a device. And basically, stamps are individual shapes that you can accurately put on screen without having to know how to draw anything whatsoever. So if I want to draw an iPad for instance, I'll tap just to close it, go into Full Screen mode. I can use these controls to manipulate this little shape, and then we can blow it up. And then, to get that iPad on screen, all I have to do is double-tap, and there's my iPad. You can also cycle through these shapes, and see things like iPad, iPhone, iPhone 4, Macbook, there's lots of different shapes you can choose from in here. Pick the one that you need for the type of mock up that you're creating and just go from there. In order to switch stamps you gotta go back out of full screen mode.
So, lets say now that I've got my device, I want to start laying down some UI elements. I'll go back up to my stamps, go down to user interface, and lets say that I'm going to be building a chat application. What I'm going to do now is just collapse this, and we'll cycle through until I get to, the little chat bubble, which it looks something like this. We'll increase the size until it's about what I need it to be, and then we'll move it into place. You can move it just by tapping and dragging like this. So I'll move it a little bit over, and then double-tap. I can also create another one here. I can rotate this around. It'll snap into place using smart guides when it's completely perpendicular or parallel to something. And then I can move that. Something kind of like this. Double-tap, and you get the idea of where I'm going with that. Let's do one more. Rotate it around. Wait till it snaps, and then we'll just kind of move that guy down. Something kind of like that, double-tap. Now, let's say that I wanted to continue with this wire frame, but I wanted to go to a different screen.
Maybe there's a second screen to this, start up screen, a user interface, for a profile, something like that. Very easy to do. Here's what I'm going to do. Jump out of full screen mode, I'm going to jump back out into the gallery. And right here at the bottom, you see this little button with a plus sign. That's just going to duplicate the current drawing that I have, and allow me to iterate on top of it. So from here, let's say that I don't want the chat bubbles in there at all. All I have to do, grab my pen, turn off Touch Slide, just grab the eraser. And we'll just remove these. Once I have all these erased, I can start adding new elements to it. In addition to using the stamps, you can also just free form draw. So, let's say for instance, I wanted to, switch this over to blue, say I wanted to maybe have a header up here at the top. Just kind of draw this in. There we go. And I'll jump out of full screen mode so I can see this a little better. Maybe we've got a little icon tray down here at the bottom, and we'll add some icons to that in just a minute.
And then let's also say that I have, maybe, a profile section, right in here. And I could do these with rectangles, but I'm just doing this rough, with my pen for now. So there's a profile section, maybe it's got some text, and we'll put an image there in just a minute. And then maybe one other little object right there. Okay. Let's say that I've made a mistake here. Maybe I need to back this up. Maybe that last little piece wasn't exactly what I wanted. How do I get rid of that, instead of using the eraser? Well, I use that multi-finger gesture we talked about earlier, but this time since I have palm rejection turned on, I have to manually press this little button right here, which will turn red. And then, while holding that down, use my three fingers, to step back through. It's a little unusual at first, but once you get the hang of it, you can do it fairly quickly. So let's just say I want to step back, right out of there. There we go. And so I want to stick some stuff over there. I'll turn touch slide back on. Jump out of full screen mode, grab some stamps, and we'll be on our way. So let's grab here maybe, user interface elements. And we'll step through, until I find, there we go, that's what I'm looking for.
It kind of simulates an image frame, so we'll take that, move it up. Double-tap. There we go. And then down here, maybe I want some buttons. Let's cycle through there. And there's going to be some buttons in here. Go back, find those, rotate them around. And we'll stick those, right there. And then, I'll turn off Touch Slide and jump out of full screen mode. And so there you can see just my really quick wire frame of this profile page or whatever it might be. So in just a few minutes, we've done a chat application, we've also done this quick little wire frame of a profile page.
We can add icons, buttons, whatever we want, using stamps or freehand drawing. In any case, this is a much better way of wireframing something out than going through countless sheets of paper. I've just used two screens and my iPad, which is really awesome. So the next time you have a digital project, whether it's a website, an application, or even a digital publication that you create using Adobe InDesign, try planning it out using Adobe Line and see if you don't get better results.
- Connecting your apps to Creative Cloud
- Drawing with Adobe Sketch
- Creating digital portraits
- Touring the Adobe Line interface
- Drawing in perspective
- Creating icons with Line and Illustrator
- Collaborating and sharing drawings