Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Project: Creating wireframes for websites and apps

Project: Creating wireframes for websites and apps provides you with in-depth training on Design. Ta… Show More

Creating with Adobe's Line and Sketch Apps

with Justin Seeley

Video: Project: Creating wireframes for websites and apps

Project: Creating wireframes for websites and apps provides you with in-depth training on Design. Taught by Justin Seeley as part of the Creating with Adobe's Line and Sketch Apps
please wait ...
Project: Creating wireframes for websites and apps
Video Duration: 9m 0s 1h 16m Appropriate for all


Project: Creating wireframes for websites and apps provides you with in-depth training on Design. Taught by Justin Seeley as part of the Creating with Adobe's Line and Sketch Apps

View Course Description

Capture all your creative ideas on the go with Adobe's new line of drawing tools: the Line and Sketch apps and two brand-new hardware elements--the Ink pen and Slide digital ruler. Justin Seeley shows how to pair these tools with your iPad and then use them in six real-world drawing projects: from designing logos to creating website wireframes. He'll also show how to share your work with others using the Cloud Clipboard, Behance, and even Kuler. Start now and learn how to give your creative process a little competitive edge with this new set of twenty-first-century tools.

Topics include:
  • 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
Illustrator Line Sketch

Project: Creating wireframes for websites and apps

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.

There are currently no FAQs about Creating with Adobe's Line and Sketch Apps.






Don't show this message again
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Creating with Adobe's Line and Sketch Apps.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a Member and Create Custom Playlists

Join today and get unlimited access to the entire library of online learning video courses—and create as many playlists as you like.

Get started

Already a member?

Log in

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

You started this assessment previously and didn’t complete it.

You can pick up where you left off, or start over.

Resume Start over

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.