Paper Wireframes For UI/UX Design | Aleksandar Cucukovic | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (1h 3m)
    • 1. Class Intro

      3:07
    • 2. What are paper wireframes

      1:30
    • 3. Which elements to include

      3:44
    • 4. Wireframe styles

      7:31
    • 5. Equipment you need

      6:56
    • 6. Drawing on plain paper

      14:49
    • 7. Drawing on dot grid paper

      13:45
    • 8. Using printable templates

      6:29
    • 9. Sharing your wireframes

      2:16
    • 10. Your Class Project

      0:53
    • 11. Conclusion

      1:49
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

49

Students

--

Projects

About This Class

82a03d0b.jpg

Paper wireframes are important part of the UX design process because they are cheap, fast and effective way to get ideas from your head, on the piece of paper, before you commit to them in your favorite software of choice. 

.

Hey designer, my name is Alex and in this class we are going to cover: 

  • What are paper wireframes
  • Which elements to include
  • Wireframe styles 
  • Equipment you need 
  • Drawing on plain paper 
  • Drawing on dot grid paper 
  • Using printable templates 
  • Sharing your wireframes

By using paper wireframes you are going to be more productive, finish the projects faster and come up with better ideas through research and communication with your clients.

.

So I hope to see you in class, and let's create some wireframes! 

.

Have a creative day!

Alex 

Meet Your Teacher

Teacher Profile Image

Aleksandar Cucukovic

Improving lives, one pixel at a time.

Teacher

For the last 10 years i have designed websites, products and apps for different companies, big and small.

With my wife i have started 3 startup companies and through the process met some amazing people from all over the world.

For the last five years i have created over 500 design products, improved the lives and workflows of over 100.000 designers from around the world.

Now my mission is to improve the lives of others, and to pass on my knowledge back to the community and to all those who want to learn about the amazing worlds of design and business.

 

Thank you for reading and have a creative day!

 Alex

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Intro: Paper wireframes are really important part of UX design process because they're quick and easy way to get your ideas from your head down on a piece of paper and explore possible layouts, end user journeys. You can quickly test possible ideas and routes your users are going to take before you actually commit and go into a favorite software of choice. This approach is going to allow you for much better flexibility and much faster delivering speed or role because you're not going to commit to every single idea you have. You're just going to explore possible layout combinations before you actually go into your favorite software. Here, designer and my name is Alex. Welcome to this Skillshare class. And in this class we are going to talk about paper wireframes. I am the design products creator and so far I have created or 500 design products. I'm also a course creator and so far I have created over 30 different courses about Adobe XD and UI UX design. In this class we're going to talk about what our paper wireframes. What are some elements that you should include in all of your paper wireframes? What are some paper wireframe styles in? How can you find your perfect style depending on the time you have on this project and the client's budget. What is the equipment you're going to need for your paper wireframes, both basic and some more advanced equipment. How can you draw on a plain piece of paper? And also how can you draw on a dot grid paper, which is a paper more specialized towards beeper wireframing. Also, how can you use printable templates to improve your speed and to present your wireframes better to your clients. How can you share these wireframes with your clients in order to get feedback and for them to see where you are in your design process. Your class project for this class is to create paper wireframes of your choice. These can be off a mobile app or a website design. It's really all up to you. I just want to see some tips and techniques from this class implemented into your paper wireframes. Paper wireframes are a great way to explore the possible ideas before you commit to them in your favorite piece of software. And there are these really fast and easy way to get those ideas down into production and to get quick feedback on it before you actually move on with your design. I love paper wireframes and I'm using them for years. And I found that they allow me to explore all of these ideas, to share them with my teammates, with my clients, with developers. Before actually spent time in software. My favorite software of choice is Adobe XD. But no matter which software you are using, paper wireframes are going to allow you just dad to save time on your project because you are going to explore all of these ideas using the pen and a paper and not going into software into too many details. And then down the line just for the clients to decide that they have changed their mind. So I'm looking forward to seeing you in this class and let's create some paper wireframes. 2. What are paper wireframes: Be provided frames are really important parts of your UX design process because they are cheap, easy, and simple way to get your ideas from your head down on a piece of paper. These ideas are just for you because in this stage, you're just going to explore these possible layouts and layout combinations you're going to explore. Are you going to, for example, use many images or more text or many icons or stuff like that. So I'm just going to explore possible layouts. You can also share these wireframes with your clients, developers, stake holders and teammates, of course, to get the input for a dam and to understand if you are going in the right direction, wireframes are a Derrick just to form these layouts before you actually progress into software. Because it's much faster to design on a piece of paper and just draw these regular shapes on a piece of paper just to get your ideas from your head and just to understand where this project is possibly going to go. In the next video, we're going to discuss possible layout combinations and some main elements that you can include in your paper wireframes. Now these elements are just some of the main elements I found or my 15 years in this business works best in paper wireframes. But of course, you can always go back and include additional elements on top of these regular elements. So I'll see you there. 3. Which elements to include: There are four main elements that you can include in your paper wireframes. And these are images, text, buttons and forms or fields. Images are there because they really helped to tell a story and to guide your users to the possible end goal. Now that end goal can be for them to purchase a product that you are using or to book a service that you're offering or any other goal. But basically images are there to help to tell the story much easier because you know that saying image says a thousand words and speaking of words, you have to use text. Now when you're using texts, you are using it in conjunction with your images to better tell the story and to better guide your users through that story. Because combination of text and images is really going to impact your design no matter what you are creating. If it is a website, if it is a mobile app or product based web product or something like that, it just going to help tell a better story and to guide your users much better. I'll give you a quick example. For example, if you're selling a shoe, Let's see, good image of that shoe is going to convert much better because your users are going to understand all the details about the shoe. Is it a running shoe? Is it just a regular walking shoe? What color is it? What materials are used and stuff like that. So all of those elements are going to be represented much better if you have high-quality images, then if you have low quality images and just text field based elements in layout on the side of that image. So using texts and images in conjunction is going to bring much more value to your users. And they're going to understand your product or service much better. But at the end of the goal, they have to do something. And that's where buttons come in. Buttons are extremely important because they're usually called CTA or call to action. And that's just what they are. Users have to perform certain actions. They have to buy that product, for example, the shoe I just mentioned, or they have to book a service. For example, you're offering a freelance service or a design service or whatever else, they have to book it at the end of their journey. So journey is supported with images and text. And then at the end there is a button, but they have to fill in some information in this design of yours. And that's where forms and fields come in. Now, forums are, can be many different layouts, combinations, and they can be used for a variety of different things. But usually dare, Dare to collect user information. For example, email addresses, credit card information, user account creation and stuff like that. So forums and fields are really important parts of your paper wireframes. Now, there are many different elements that you can include in your paper wireframes. For example, logos, avatars, partner logos. You can include breadcrumbs, pagination, different arrows, tooltips and stuff like that. But all of these elements are going to come from these four main categories which I found over the years work the best in the paper wireframing journey. Now there are many different styles of paper wireframes out there. And depending of how much time you have and how big the budget is for this project, you are going to explore these possible styles. And in the next video we are going to exploit these styles. And I'm going to show you some of the main styles used in paper wireframing, but also some of the styles that you can draw on top of these to improve the overall look and quality of your paper wireframes. 4. Wireframe styles: There are many different wireframes styles out there from just plain boxes that you can draw on a piece of paper just to put your idea from your head down on that piece of paper and just to start forming this possible layout. But once again, depending on how big this project is, how much time you have on it and how big the client budget is. At the end of the day, you're going to form different styles and explore different layout combination. So in this video, I'm going to show these styles and what you can do with paper wireframes. So if we switch back to Google and do just a quick Google search for paper wireframes if you go into images. And of course, there are many different websites that you can explore for this. But we can just explore google images because it's the fastest. You can see right here for the website, for the app, for the mobile Android design envision prototype, whatever. You can explore, all of these and basically a layout like this. Let me switch myself to here so just you can see better this image layout like this, is the most common layout because these boxes represent images that represent big elements on your paper wireframes. And these scribbles down below represent the text. Now you can show this text in many different ways. You can use thicker lines. You can emphasize the lines with color. And we're going to talk about that in some of the future videos in this class. But now this is just a plain, regular style that majority of designers out there use. You're going to use this style if you don't have too much time on this project, if the budget for the client is limited and stuff like that. But basically this is the main style debt majority of designers out there I like to use if assured, this style, for example, you can see this drawing right here. Now this is the next style and you can, of course see the text, which is the real text in this case, which again requires much more of your time. So just think about all of those things next time when you're drawing these paper wireframes. Because if you don't have too much time on your projects, if the client is not paying you too much money, then don't invest too much of your time into paper wireframes. Once again, the whole point of paper wireframes are to explore quick ideas and get them from your head down on a piece of paper. That's the whole point of paper wireframes at the end of the day. So don't invest too much time. You can see how messy these are. For example, these are just some scribbles and you can see combination of these Blaine elements, for example, these boxes, these scribbles for the texts but also a regular text like email, password and stuff like that. You can see Edit button right here. You can see this sort of drawing afford a person for the profile. You can see this checkmark for the saved. So once again, you can combine all of these omens depending on the time you have on this project. But if a close and this really quickly and explore different layouts, you can see in this one, which is well organized. And I like to personally do this style. And you're going to see that in some of the later videos in this class, I like to leave myself space on the right-hand side on the paper because that's where I can draw my ideas. I can draw possible guidelines from my teammates for the clients and stuff like that. For example, if you come up with an idea, you have that empty space on your right or left, depending on if you write with your right hand or left hand, it doesn't really matter. The whole point here is to leave a space for notes. For example, you can remind yourself later, What were you thinking at the time of creation of this paper wireframe? So next time when you go back to it, you can remember, okay, That's what I was thinking at the moment. So having a space like this is really important and it's really going to help you later down the line has for the layout once again, you can see that the x right here, but you can also see these plain boxes. But if I click on this one, you can see how detailed it is. So right here we have all of these awesome illustrations, for example. So you can explore layouts like DOS. And here we have markers. We have all of these different elements that you can use. If we click on this one, you can see this person using markers. They're using all these wireframes. And if we click on this one, you can see that this person, this designer is filling in the space of these. So for example, this is the main color of the app and you can see that she used and discolored throughout the her buttons. So you can really go for this style if you want to emphasize the color of your client's brand logo or something like that. Then if I scroll a bit more down, you can see this approach, which is approach which is used in offices around the world. So for example, designers really like to use this approach because they can easily show this to the team. They can present this to the client or stake holders because they can draw it on a piece of paper, cut it out with scissors, and then just stick it to the wall, for example. And just present these wireframes for their clients to understand the overall flow of the app or the website. For example, if user clicks on this book Session button, where is it going to go? So you can use templates of these mobile devices or website devices, whatever. And then you can simply guide your users through your paper wireframe. And if we scroll a bit more down and just trying to find, for example, this style, you can see much more detailed, much different pens are used in different layouts. So you use, you can see the pop-up menu, which is used right here. So you can use all of these elements which are going to help you, your users, teammates understand how these wireframes are going to turn into a real design later once you get into the software of choice, my software of choice is Adobe XD, which is amazing, but it's still like to use paper wireframes in all my projects because as I keep mentioning in this video and in this class, it just gives me the possibility to lay down all of these quick ideas down on a piece of paper and just to communicate them with my clients. Once again, you can see in this example, you can see in this example, you can get detailed with paper wireframes or you can get messy with paper wireframes. So it's really all up to you and the clients budget and the time that you have on this project. Because as I keep mentioning in this class, You're not going to spend too much time with drawing these detailed illustration, these details icons. If the client is not paying you enough money to do that on this particular project. So just keep those things in mind. And as for the style, you can see if you're not really good at drawing like I, I'm, I'm not, I'm not really good at drawing, but I'm still using these paper wireframes for more than a decade now, and I never had a problem with that. So you can always use a ruler, for example, just to keep it in line straight. Or you can use different papers which are going to mention later in this class. But the whole point here is get those ideas from your head on the piece of paper because there isn't a single software out there which is faster than your brain and your hand. So just keep those things in mind. In the next video, we're going to discuss what you're going to need from equipment to draw these paper wireframes because there are some really basic equipment options are there and there's some really advanced equipment options are there. So I'm just going to share those with you. And once again, depending on the client budget and how much time you actually have on this project, you are going to use one or the other. So I'll see you there. 5. Equipment you need: When it comes to equipment, there are many different choices out there. You can go from really standard equipment. And I really do recommend, especially if you're just getting started, to just start with standard equipment, especially if you've never used paper wireframes before. And then move on up the ladder and then simply purchase all of these more expensive options as you level up. So in this video, I'm just going to show you some of the equipment I am using. A novel is using over the years. And just to show you what all of it is. So here is all of the equipment I currently have inaccurately own and that I use in all of my different projects. So this right here is just blame piece of white paper. This is the printing paper because I am located in Europe. I'm using A4 piece of paper. If you are in US, then it's letter size for you. But basically, I use this A4 paper because my printer supports it. And if you remember, I just mentioned that when I wanted to share these wireframes with my clients, with my teammates and stuff like that. I really find it easiest to do so with a scanner. So I can simply take this A4 piece of paper, scan it, and then send it to all of those people in question. Next up, what we have is just this plain old pencil. And you can use this pencil to draw whatever you want on this piece of paper. And just basic equipment right there. Next up, I have in this band and you can use any pen you want. But I really recommend that you have either black or blue pen. No matter what you are using, you're always going to need to use some of those. And then I also have this band, which is completely black but a little bit darker, as you can see right here. So this band really helps me announce some of the details like drop shadows for example, and stuff like that. Or if you just want to fill it in with color. Next up, I have a ruler and in majority of my wireframes, I don't use rulers at all because I found your rulers are just slowing me down a lot. But if you want, you can always use a ruler just to help you get started, just to lay out some foundation. Because if you're drawing with free hand, obviously, your layouts are going to look like this. For example, if you remember from the previous example for the images I showed you. But if you want to, you can use ruler just to get to those perfect lines like this, but you can see how much slower and this is compared to this. So once again, we are always going to go back to that timeline and project timeline. So depends really how much time you have on your project you're going to use one or the other. Next up we have all of these markers, so you can use different markers. And this is just one sort I got from my local store. So it doesn't really matter what kind of maker this is. This is, let's see, Farber Castile, this is Pelican fiber, Gastel, this is some unknown brand, neon or whatever. So it doesn't really matter because once again, these markers are there just to highlight the color that your client is using. Let's say that we have a button, and let's create a button right here. And let's say that I want to highlight this button using this color so you can see how quick this is. And if you remember from the example I show you online, you can simply highlight this color and simply integrated into your project. If this is the client color, then once you start gaining some clients wants to start gaining some momentum. Once you start earning not a lot of money, but once you start earning enough money from these projects to start investing back into yourself and into your equipment. I really recommend that you get these now, these are what's called dot grid paper. And this paper comes in many different colors, many different sizes. Once again, same like this paper, but the difference is all of these dots. These dots are there to help you not use a ruler. Now, once again, you can use a ruler. And in the next few videos, you're going to see once we actually start drawing these wireframes, I am actually going to use the ruler because the consistency, because of the layout combinations and stuff like that, because I'm used to it at this point. In majority of cases, I'm not using the ruler because those ideas are basically just for myself. These papers, if you start using them at acquire different sorts of equipment. Because if a show, if I take this marker for example, and start drawing on it, you cannot see this marker really well because this dot grid paper is much thicker than this paper. So these markers don't really work right here. So you need specialized equipment like these are now, these are Jelly Roll pens and this one is from Saqqara. And this is, I don't know, some other brand, it doesn't really matter. So brand really doesn't matter in this case, what does matter is how these work. So basically, these fans, unlike these pencils, for example, or pens you're normally going to use, don't contain the gel inside. And this gel is what helps this wireframe stand out. So you can see because I have all of these dots, it's much quicker for me to draw without a ruler and I'm still going to have some consistency and some nice-looking layout. And you can clearly see the difference between this and this. How much better this looks like, because it's on a black piece of paper. I'm using these white pens than this because it's on a white piece of paper and I'm using these, so it stands out much better. It looks much more polished and professional. And it's really going to engage your clients much better I've found over the years because clients really like to see what you're working on because they are paying you for your work at the end of day, obviously. So you really have to show them where their money is going towards. So basically that's it for the equipment. You can start small. Everybody can afford one of these and one of these. So you can start small, you can start slow. And then once you upgrade, once you start earning money, then you can invest in different markers. Once again, did not have to be this fancy brand or the shades of markers or none of that stuff. Because you're not an illustrator, you're not drawing, you're just sketching these ideas down on a piece of paper to present them to your clients. In the next video, we are going to start with sketching. I'm going to show you some ideas and I'm going to show you how you can work with these paper wireframes in how you can actually turn your ideas that you have in your head. Put them on a piece of paper and then turn them into layouts, which you can then use in your favorite software. So I'll see you there. 6. Drawing on plain paper: In this video, we are going to draw on a plain piece of paper. And I'm going to show how you can turn our layout that you have in your head and put it down on this piece of paper. So because I mentioned in one of my previous video, our shoe example, dent, when you're using images in conjunction with tax, is really important to give them context. And it's really important to have high-quality images which are going to help tell a better story for your users. So in this example we are going to draw, we are going to use that shoe example I mentioned in a previous video. So let's get started. What I have right here, as you can see, is just a plain piece of printed paper, like I showed you previously. I have two markers which I'm going to use just to indicate buttons, for example, and clickable areas. I have my ruler and I have a pencil, and I have this band. And we're going to use the pencil for a drop shadows, for example, just to announce some of these drop shadows. So without any further ado, let's get started. What I would really like to do on all my wireframes is, as I mentioned in the previous video, where we explore wireframing styles, I've really liked to leave this part of my paper blank because it really helps me write down some notes I have, which are going to really be helpful to me later if I remember something or to my teammates or my clients if I want to guide them in a certain direction. So what do we are going to do? First is we're going to draw a quick outline. So as I said, you can use a ruler, but it's really not mandated. And you can be really strict with your angles. For example, you can do straight angles. You can use those rulers that for example, car designers use just to give all those angles and stuff like that. But I'm not going to do that. I'm not going to bother with too much details. I'm just going to do something like this. So this right here is going to be our navigation right here at the top. I'm going to use a plane and navigation style because your users are used to desert the certain types of navigations. So don't make it too complicated. Make sure to use something that everybody can understand. In majority of cases, navigations are already tried and tested. So don't try to invent hot water just because the sake of it, use navigations that already work in, already convert. Well, so in this case I'm going to use navigation. I'm going to put a logo right here. And to do that, I'm going to simply draw a circle. And I can use straight away my color so I can fill it in nicely like this. And then I can do something like this. So I can use my ruler once again makes sure it goes somewhere in the middle. It doesn't really matter. And I'm going to use Indies which indicate my navigation right here. What I'm going to do, I'm going to draw two buttons. So I'm going to do that free hand or example like this. And for example like this. This Watson right here is going to be the sign-in button, for example. Because that's the main point. I want my users to sign in and have as many users as possible. And this can be, for example, Sign Up button, which is going to bring my users back into their profiles. I'm going to write that down. So I'm going to draw an arrow like this. So it's actually using this one. So we can see it better. So sign up and this right here can be sign in. I can underline it because once again, it's much more important than sign up because you already have these users, but you have to convert new users and bring new users to your website. Next up, I want to create a nice big hero image so I can position it roughly around here, for example. And because we mentioned shoes once again, I'm not really that good at drawing, but I'm just going to illustrate this right here. Of course you can. If you're good at drawing, you can draw this. You can also take images from the Internet, cut them out, and then stick them to a piece of paper. But once again, that approach requires a lot of your time and energy. So just make sure to understand that before you actually jump into a process like that. In my case, I'm just going to scribble something that resembles a shoe. But before I do, I want to position a text. So I'm going to use a nice big title right here. Like so. And I'm going to fill it in with color like this. And then I'm going to use subtitle right here. And then I can actually use my pencil to fill it in right here. And then below that, I can use a button because these right here and describe your product shoe in our case. And I'm going to use this color again. So let's now just create some basic shapes that kind of resembles the shoe. Once again, I'm not really that good at drawing. So I'm going to say do something like this may be like this and then finish it off right here. Perhaps like this, like so and then bring it down right here. Maybe these are for the shoe laces, something like that. And let's use stripes down the side. Like so perhaps have a shape right here, and there we go, we have something that kind of resembles a shoe. And then what I can do in the back, I can actually create maybe a circle or a shape which is just going to bring our shoe to the front. Somebody like this. And there you go. This is our hero image. So the whole point of this hero image is to convert your users better. So this title is going to indicate what this is. It's a shoe. So the name of the shoe, the name of the brand or something like that. Subtitle is going to describe a bit more details about the shoe. So for example, materials it's made of or what is it for? Is it for running, is it for walking, stuff like that? And then the button, users can actually check that out and go into a separate page, which is for that particular shoe. So just keep all of those things in mind. Then what I can do is actually draw a pagination right here. So users can actually click on these dots. And let's say that this dot is filled in. Or this can be automatic slider and it can just go left and right automatically. And users cannot really click on these to change, or they can, depending of the layout you actually go for at the end. And then next what I'm going to do below that is create some sort of logo strip. So let's use our ruler and let's create some basic circles. So perhaps I can create four circles maybe. And then simply do something like this. And position this. For example, partners. Our partners stores, something like this. So let's see that this is a well-known shoe. And then these partners can represent all these famous stores, for example, where this shoe is salt. Next up below that, what I can do is include a video for example, like this. And I'm just coming up with ideas. I'm just testing these things and just exploring these things. So perhaps we can do something like this. Maybe I can create a circle straight away, like so. And then use this pen to put a play button in the center like this. So this can be a video. And then behind this video what I can do is, for example, include a nice drop shadow like this. And this drop shadow is going to indicate that users can click on this particular video. But I can also do indicate that this is the image. So although it's a video, it is still an image element. And then what I can do right here is put a nice big title and then put a big subtitled behind it, sorry, below it. Put it like this. And then for example, button where users can actually click and go and do a certain action. So let's say that this video describes this shoe or the process of creation of these shoes or something like that. Below that, what we can do is, for example, provide some services and provide a background about the services that this website actually provide. So for example, a part from selling the shoe, maybe they're taking secondhand shoes and then putting them on their website and maybe they're refurbishing them. So you really have to speak with your client about all those details and about what they are actually doing. But in our case, for example, maybe we are not just selling shoes, maybe we are also selling clothes. So for example, you're selling t-shirts, we are selling jackets, we are selling all of these things. So I'm going to put these three boxes for my images. And let's use something like this maybe. Just to indicate that these are our images. Once again, if you are doing this free hand, you're going to be much faster. But I'm just going to show you in these videos that you can use a ruler like this. So these are the images and let's say other services. What are the products? So once again, I can know later when I go back to here what these are. So perhaps we have our beer text. So for example, title of this product. Then we have a description like this, and then we have a link. So I can do it like this. And then I can highlight it using this color. And then I can point to it here and say link. So users can actually click here to access this product. What we can do below that is perhaps we can put a big image and big hero image or a video which is playing on loop like this. So perhaps model with the product. Like that. And then below that we can finish this off, for example, with another section like this. So maybe we can, for example, say something like about the manufacturer of this particular product or something like that. Or perhaps we can even show another product here with an image. And because we used a left layout here, maybe we can use our right layout here just to break up our layout a little bit like this. And I can call this product image like this. And then what I can do is put a title right here, nice big title. Put a subtitle here, my Excel, and then put a button here. So once again, users can purchase this product or at least visit a page to purchase this product. Below that, what we can do is we can create a contact form. So what I can do is put a title here, subtitle here, for example, and then a bunch of these. So let's fill this in. Let's fill this in. So what this is, for example, I can put it right here. So contact form. For example, if we would love to hear from you, contact us using the contact information below, and then address, contact number, e-mail address or something like that. Then we can put our contact form here. So these are form fields like this. And I can, for example, put a line like this just to indicate, for example, your e-mail, your name, your address, something I did. And then below all of these, we can put a button, let's put a buy them right here just to break our layout a little bit because we have a left button right here, like this. And then what I can do at the end is I can break this off. For example, like this. And then I can put a logo right here, like this. And I can put a menu navigation item. So let's see 1234562345. Maybe I can Jeremy another one right here. So this is going to be our nav like so. And for example, original copyright 2022, and brand name like this for example. And then you can put the terms of service. You can put privacy policy or something like this. So you can see in just a couple of minutes, ten minutes or so, you can create something which does look quite nice and it really does show to your client's DA, idea that you have. And you can put that idea like this on a piece of paper. Whatever graph right here is to put background shallow. And for example, a can you point to that, call it in drop shadow so that clients, teammates, developers, everybody involved can know what you actually meant by this. So there you go. That's how easy it is to draw on a plain piece of paper. And if you're just getting started or if you're already started, already in this business, I would really recommend that you use this paper because it's extremely cheap. It's extremely fast to draw on as you can see. But in the next video I'm going to show that a dot grid paper, the black one which I have, but you can also get many other colors. And just to show you how that looks like, this layout looks like on that piece of paper. And then you can compare what you actually like better. Plain piece of paper or that dot grid piece of paper, if you want to splash a little bit more money onto that. So I'll see you there. 7. Drawing on dot grid paper: In this video, we are going to use that black dot grid paper which I showed you. And we're going to create exactly the same layout that we did previously with the plain white piece of paper printing paper. And I'm going to show some differences between this dark piece of black dot paper and that white piece of paper. So let's get started. And first things first you have all of these different thicknesses of your pens. So this is number 5, for example, this is number 8, this is number 10. Obviously, the bigger the number, the thicker the line is going to be. So I'm going to get started with just this latest one. So I'm going to do the same as before. I'm going to simply create the outline. And it's much easier to line your ruler here because you're using these dots. So I'm going to do something like this. And I'm going to do something like this for example. And as I said, is much faster and easier when you can actually count how many of these dots you have. So first things first, let's create that navigation so I can create a circle for my logo. And because I don't have an orange color that we used previously, I'm going to use in this one just to fill it in. Like so. And then I'm going to use the same style. So let's go this just to indicate these. And I'm going to just create those two buttons once again. So I can create a button like this, On button like this. And then I'm going to use in this and gray color to fill in my sign-up button. And I'm going to use this purple color to fill in my Sign In button. Once again, you can use different colors. If I take this and let's test this read and see if it works any better. I don't think so. But let's actually go with it. It's much darker than this purple one actually. So I'm going to actually switch like this, but obviously, depending on the client color, you're going to use one or the other. I already mentioned that. So let's move on for the next one. I'm going to use number eight because I don't find these lines are thick enough. So let's line it up like so. And you can see straight away heart darker. This is, so I'm going to use these for my title, for example. Let's fill it in like so. Then I'm going to use debt and gray one for my subtitle. Like this. There is not much difference but you get the point. And I'm going to use this red one for our button. Let's fill it in nicely, like so. And then I'm going to use those circles for our pagination. Let's fill this in, like so. And then I'm going to use this lighter one to create my shoe. Why can this, for example, like this? And of course, depending on how much time you want to invest, how much time you have on your project. Once again, I can keep repeating myself or you can invest depending of the project in question. So let's feel the same. Let's draw these lines really quickly, like we did previously. And if you remember, we had that circle. Now I'm going to use number 10, which is the thickest one I have, like this, and simply fill it in with some background color right here. Now what you can also do is you can, for example, fill these in with this color. Like so once again, I'm always going back to how much time you actually have on this project, so you can do whatever you want with this. Next up we have that logo strip. So let me actually created right here. And we had those circles. So it's position four different circles. Like so. And below that we had that video like this. Like so. And I'm going to actually create a circle in the center. Why does? And just see where is my number 10. So here it is. I'm going to simply draw that play button inside using my white color. And I can continue using this number 10 for my title. I can use this gray color for my subtitle. And let's see, I can use this number 5 and can use that for the button and then simply fill it in with my red color like that. Next up what we have are those titles. So let's actually keep using number ten. See titles. I'm going to do this free hand like this. So main title, subtitle. And what we had below that are in those images. So the great thing about this paper is that you can actually count. I'm not going to bother because we already created this layout, but if you want, you can actually count how many of these dots you are using for your layout. So you can make sure that all of your lines are perfect, all of your heights are perfect. Which in turn is going to create a much cleaner layout. So once again, depending on what you want to achieve, what you want to use, you can go with one or the other. I slightly prefer this black paper because details stand out against it much better than on a white piece of paper. It is of course, a bit more expensive and then white piece of paper. But depending on what you want to achieve, what you want to create, you're going to go with one or the other. So there we have created those and let's continue with this one. So we had that title like this. I'm going to switch to this one for the smaller lines like this. And finally we had that link at the end. Like so. Next up we had that big image. So let's use this one to break it up a little bit. Like so. And I'm going to simply use free hand not to waste too much time. And I think the best option would be actually to outline this a little bit better with the number ten. Like so because it's actually going to outline the entire website much better than that number of five. But as I said, you can explore and do whatever you want. And let's now move want to create that title. So let's do that. I'm going to position that title here. We're going to have that subtitle. And what we had then is in that image. So you already see some smudges on a paper. Hopefully it's not too distracting when a camera, but what you should do with these is wait a little bit, just so, just give them a bit more time to set. And then once they do, you can continue creating, but you should really give them a bit of time to set. And 2, form a little bit like this. And then we have our button. Let's use red one. Now really trying to go as fast as possible here, just not to bore you too much with these details because we already went through this process once with white piece of paper. So what we had to be low and Dan is the title. So let's try to keep it in the same line. So we have the title subtitle. And then we had the title on the right. And then we had the subtitle below it. And then we had those lines. So let's actually use bit thinner one. This is number eight. Let's go with number five because I want to show those smaller lines right here like that. And then let's see. I can use a number 8 to actually create those form fields like this. So you can see you can easily switch between using a ruler or going with this dot grid, because that's the whole point of having it in the first place. So you can see without the ruler how much faster I can create these, but still keeping the same layout, the scene consistency, Everything looks just like it should. Finally, let's position our button right here. This, fill it in with color. This, like so. And finally at the end, Let's wrap things up. Let's create that footer. I can position this like here, and I can wrap this up. Footer came up a little bit bigger than before, but it doesn't really matter. And what I can do right here is create those six. So 1, 2, 3, 4, 5, 6. And I can draw my circle for my logo. I can use my color, fill this in nicely, and finally, post see below that. So let's use a 10 or one. So let's put it in a center actually. So I'll see it's whining, whining to, and what I can do is use the number ten or even better number 8 to indicate the terms of service, for example, privacy policy. And there you have it. Of course, you can draw all of those details. So let's go with this one, for example, partner stores. But I don't want to bore you with too many details because we already went through this process before. So basically that's it. That's how you use this dot grid paper and black dot grid paper. In my case, I really should find ticker markers, ticker these gel pens in color to accent these colors a little bit better because some colors work well, like this golden color, which I'm going to show you. So for example, you can use that for your buttons, but if you want to use the exact color of your client's brand, then you are going to struggle in some cases, especially if you don't have these. Now, this is one of my favorite brands. It's called Sakura. It's from Japan. And they really created these awesome looking bands. And you can see how, how good of a result you can actually get with these pens. So they actually sell these in variety of different colors and you can purchase those if you want to. But a DC-3 cost as much as 20 of these. So that's the whole point, that's the whole reason behind it. But I wanted to show you that you can get these in different varieties, in different prices. Seem like with these markers that you are going to use for a white piece of paper. Now, let me actually clear this off and let me actually show you the difference between this black piece of paper and white piece of paper. So here it is. It's the same layout using two different techniques, using two different papers. So here we have this white paper which we already covered, and here we have this black dot paper. And you can basically make your judgment. This is much cooler and it's much faster to create using free hand because you have this dot grid. But if you want a tool, basically get through the pain of using these because once again, they're filled with this gel and this gel is going to translate onto a piece of paper. I'm willing to go through that because my clients are much more blown away by a result like this, then a result like this. But if you're just getting started, if you cannot be bothered using these and maybe looking a bit more professional but being the price. Then of course you can go with these. Obviously whatever you choose to create your pipe paper wireframes on. Much more important what story they're telling and the layout, and how the layout looks like, then what paper are you using? But of course, going back to it, you can use cheaper options. You can use much more expensive options. But at the end of the day, the result is what matters and not the piece of paper. There is actually one more tip I want to share with you in this class and that is to use templates. And we're going to get to that in the next video. So I'll see you there. 8. Using printable templates: One great way to improve your speed and productivity while working with paper wireframes is to use principal templates. Now, these are just templates of well-known devices, for example, phone devices, browser devices, watch devices, and whatever else you're working on, you can use tablets, you can use laptops, whatever you want. So in this video, I'm just going to show you a free resource which I am offering so you can use it. But there is also a caveat to that. You have to fix some of these sizes because they are a bit older. I'm also going to provide templates which I'm going to show you in just a second, which are printable in PDF so you can print those straight away. But I'm also going to show you some premium links in the PDF. You can click there and visit them and purchase them if you want to. But it's not really mandatory. I'm giving you all these free resources, but if you want, you can purchase those premium ones. So here is my website, web donor, dotnet, and these are printable devices, templates. As mentioned, I'm going to leave the link down in the PDF and you can click to access these, simply download them. They are Photoshop files. You can open for a show files in Adobe XD as well if you don't have Photoshop and what they are basically are just mockups of these fonts. So we have smartwatches, we have mobile phones and you can see iPhone 7 and Galaxy pixels, Samsung Galaxy S7. So these devices are a bit older at this point, but as I said, you can just use them. For example, you can remove these buttons, you can remove these cameras, position the camera in the center, for example, to get more up-to-date device, let's call it like that. You can also combine these elements, but as you can see, there is no notch. But I'm going to show you in just a second. I'm going to provide you with the printable template in PDF. So you can have a phone with an arch, we have tablets, we have Google Chrome browser, and that's basically it. So just come right here and download now, and that's basically it. And to show you what you're going to get, these are printable templates, which you can get inside of the PDF file format. Simply print these out. And as you can see, this is the browser which I just showed you. These are the phones which have the notch on top. So I actually gone ahead and created those. And these are smartwatches. So for example, for Apple Watch or something like that. So how can you use these little, Let's go with this one, for example. Simply draw on them. And they are really useful because you can actually show to your clients and to your teammates how all of these are going to look like once you actually put them on in your software and once you actually start creating. So for example, let's use a logo right here in the center on all three. And let's use our ruler. In this case, you can see why ruler here is really useful. Because I can, for example, put a tab bar right here at the bottom on all three of these at the same time. So you get the point. You can simply draw right here. And I purposely left all of this empty space around. So for example, you can still do this. You can put text here, you can do whatever you want with this. But basically printable templates are going to save you a bunch of time, especially if you are presenting later to a client. I found these are extremely useful when you're creating mobile apps like these. And when you're creating watch concepts like these, because you can see that these watches are just a tiny bit smaller. So creating on a mock-up, basically, that's how the end product is going to look like at the end is really useful to show to your clients. But what about the web? Well, that's a little bit tricky. What we have right here is Google Chrome, basically a template. And what you can do right here is if we go back to the example which I showed you previously. So we can, for example, draw that shoe once again. Once again with my epic drawing skills right here. But you get the point. You are going to use this to show quick concepts to your clients. And of course, what you can also do is flip this around. So use in this space and just use this bar. Flip it around and just reposition and here at the top inside of Photoshop. And then you're going to have much more space down below. What you can also do is use that same approach. So use this bar, flip it around, narrow it down a bit, and just position it right here on the top. So in that case you're going to have all of this space down below empty. So these are just some of the examples I wanted to show you. These are free. You're going to get them. You can simply download and use them in your project right? Now, if I go back to here, this is the one from my website, web donut.net. And I'm also going to provide some premium resources with bunch more of these devices, with some guidelines, for example, and stuff like that in the PDF. You can get those if you want to. And you might be asking yourself, it's all great with using this white piece of paper, but what about that fancy black.com piece of paper? Well, it's a little bit tricky with that because you have to make sure to align all of these mockups using that grid. So just make sure whatever you are purchasing your dot grid paper from, make sure to ask them for dimensions or even better, you can simply use a ruler and then you can measure the dimensions between the edges of your paper. So just the outer edges of your paper. So for example, this edge, this edge, this edge, because the center doesn't really matter. Why do we do that? Well, when you are creating these and putting them down on the piece of paper before printing, you can just make sure that you measure them correctly ended everything fits as it should. Then when you print them out, It's going to look lined up a coherent, everything is going to match with your dot grid. So then when you start drawing everything, I'm going to make much more sense because if you print these out like this, then all of these frames are not going to line with your dot grid, which then defeats the purpose of the dot grid in the first place. So just make sure to pay attention to details like those. Once again, using templates like this is a great way to present to your client or your teammates just to show them how the finished product might look like. So just make sure to check them out. Once again, I'm giving you free and premium resources so you can decide what you want to use. 9. Sharing your wireframes: As he said throughout this class and these wireframes on paper are mainly for you and for your ideas just to figure out the possible layouts you're going to use in your design once you actually get to software. But if you're working as a part of a team with another designer, or if you just want to share your process with the client. And the client wants to see where you are at this project at this particular time, then you can actually share these paper wireframes with your client. But how can you actually do that? Where if the client or your design teammates are local, you can simply take a piece of paper and just take them to the office and to show them that way. If you remember, when I show you possible styles for the wireframe in previous video, you saw that some designers are actually cutting those wireframes from the piece of paper and then present them that way. You can also do that. But the easiest way I've found over the years, especially with clients who just wanted to see, were just curious because majority of smaller clients, especially don't really understand your process and they don't really know what paper wireframes are and digits one to see what they are paying for. So in those cases, what you can do is simply use your phone, place a piece of paper down, make sure you have good lighting, and then just snap a picture of your phone. You don't have to share all of the paper wireframes because if you, for example, have 20 different pages on a website, you're going to have 20 different pieces of paper. So you can just share one or two just for them to see and to understand what you are actually doing and what are they paying you for if the client wants to see the entire process and all bigger wireframes, you can do that too. Or if you have a scanner, which is the easiest way I found over the years, you can simply scan all those papers. You can put them in a zip file, for example, and then simply send that zip file via e-mail to your client or to your developers, teammates, whoever else. So once again, not everybody is going to demand this from you. But if they do, then you have all of these options to share a paper wireframes with them because they have every right to understand what you are working on this project and where you are at the moment. 10. Your Class Project: Your class project for this class is to create wireframes using the tips and techniques you'll learn from this class. Note you can draw anything you want. You can draw a wireframe of a mobile app, for example. Or you can draw on piece of paper, the website, your favorite website, or your imaginary website. Or just to keep things simple, you can just lay down some basic elements onto the piece of paper. The whole point behind this is, I want to see your process. I want to see what you guys can create. And I just wanted to see some of the tips and techniques are shared with you implemented into the class projects. So I'm really excited to see what you guys can come up with. I'm giving you the full freedom. You can create whatever you want. Just make sure to snap a picture of it, for example, and then to upload it to the class projects. Once again, I'm really looking forward to seeing what you guys can create. 11. Conclusion: So there we go. You have reached the end of this class. I really hope you enjoyed this class and I really hope you pick up a few things here and there about paper wireframes, how important they are in the UX design process, but in the design process overall. Because once again, they're really this cheap and easy, simple way that everybody can understand it. Everybody can create in order to get to product or a design which is going to convert well, because once again, it's all about sharing ideas. It's all about putting ideas down on a piece of paper. It's all about creating that perfect layout. Once again, remember, never start in your software because no matter how fast that software is, once again, I'm using Adobe XD, which is lightening fast, but it's never going to be as fast as just me taking a piece of paper and just drawing some basic shapes on it, exploring possible layouts before I actually move into Adobe XD and actually commit to that layout. Just remember, all of the links I mentioned are going to be in a PDF so you can check that to quickly access them and remember, start using paper wireframes if you're not already because they are truly going to save your layouts, they are truly going to improve your speed because it's much faster to change something on a piece of paper then it is in software. Thank you so much for watching this class and I really hope you found some value in it. And I really hope that you're going to implement some tips and techniques you'll learn from this class in your actual Voc floor. And I truly hope that some of these tips and techniques are going to improve your productivity, improve your speed, and always to allow you to charge more for your design skills than you did before. So thank you once again for watching and I hope to see you in some of my other classes. They gear.