Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Project: Creating wireframes for websites and apps

From: Creating with Adobe's Line and Sketch Apps

Video: Project: Creating wireframes for websites and apps

{QTtext}{width:960}{textColor:65280,65280,65280}{justify:center}{timescale:1000}{backColor:0,0,0}{plain}{font:Verdana}{size:20} As a web designer myself, I find this to be extremely useful, because I'm always Adobe Line is the more precise of the apps that we're going to be talking about in This is another important area right here.

Project: Creating wireframes for websites and apps

As a web designer myself, I find this to be extremely useful, because I'm always Adobe Line is the more precise of the apps that we're going to be talking about in this course. sketching out ideas for a new website or even an app idea that I might have. And, with precision comes the ability to create some really cool things, And this app really helps me take that to the next level, especially with a lot of including mock-ups and wire frames for websites or applications. the precision drawing tools and stamps that I get to use. And that's what we're going to be talking about in this movie. Let's take a look.

I'm going to go ahead and create a new document here, and you'll notice a big And this app really helps me take that to the next level, especially with a lot of difference when you create a document in Adobe Line versus Adobe Sketch. the precision drawing tools and stamps that I get to use. You're just brought directly into the document. Let's take a look. 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. If you don't see that, you can press and Inside of the palm preferences, hold right there on that little circle, and it will connect your pen. you're going to see a lot of different things going on in here. The other thing that I check for is something called palm preferences. 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 But, if I'm actually drawing on screen, chances are my palm might be resting on there. 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.

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.

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.

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. parallel to something. 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.

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.

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.

Show transcript

This video is part of

Image for Creating with Adobe's Line and Sketch Apps
Creating with Adobe's Line and Sketch Apps

19 video lessons · 2556 viewers

Justin Seeley
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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

Congratulations

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.


OK
Become a member to add this course to a playlist

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

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

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:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com 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 lynda.com.

Sign up and receive emails about lynda.com 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.