Now that you know what wireframes are, it's time to start drawing. We'll introduce the elements that make up wireframes and explain how to draw a wireframe step by step. Later, you'll create your own wireframe. I bet some of you are really excited to put pen to paper; I know I am! But if you're feeling a bit nervous, that's okay too. The good news is, you don't need to be an artist to be a successful UX designer. I certainly don't consider myself an artist. In fact, you don't need to have any experience with drawing in order to succeed in this course. Drawing is a learned skill, which means the more you practice, the better you'll get. For some people, doodling shapes, lines, and stick figures come naturally. For others, drawing takes more practice. The important thing to keep in mind is that in UX design, drawing is not about creating art to hang on a wall. Instead, a good wireframe is all about organizing and communicating information clearly to your colleagues who will implement your design. You just have to get started and put your ideas on paper. You can do this. One more thing. There are many different ways to draw a wireframe. Some designers prefer messy, hand-drawn wireframes. Others may use rulers and are super meticulous about the way their wireframes look. Do what feels best for you. Let's start with the basics of drawing wireframes. Your wireframes will be made up of elements. Elements are building blocks for creating a design. Most of the time, you'll use these elements to draw wireframes: Lines, shapes like squares and circles, and text. Take a look at this example of a wireframe. It might look complicated at first, but all I used are lines, basic shapes, and text. Now that you know how to draw each of these elements individually, let's put them together. Think about an app you visited recently or pull an app up on your phone right now. You'll notice that even the final product is made up of lines, shapes, and text. Imagine I want to draw a wireframe that shows an app within a mobile phone. Let me show you an example using these three elements. First, create the frame for the phone. This can be a simple rectangle. Make sure it's large enough to draw inside of. Next, I'll add a bar at the top. This bar is where we display information and actions relating to the current screen. This rectangular bar spans almost the entire width of the app at the top. Below the top bar are three dividers. Dividers are thin lines that group content in lists and layouts. Now I'll add some details into each of these two areas. I'll start in the top bar and draw a navigation menu icon. That's the icon on the top left with three horizontal lines. The navigation menu icon should be inside the top bar. Next, I'll add the avatar, which is a big circle with an icon of a person's head and stick figure body. I'll add the avatar in the top right corner inside the top bar. Then I'll add a circle within each rectangle that was created by the dividers. I'll draw the circles on the left side of the rectangles. I'm trying to keep all the circles the same size, but it's okay if it's a little messy. I want these circles to indicate images, so I'm going to draw an X in each of these circles. Next, add a circle with a plus sign in it in the bottom right of the frame. Finally, draw horizontal lines to indicate text to the right of each circle. In this example, the line should only be in the middle of the rectangle, not drawn from end to end. Just like that, I have a wireframe. Guess what? It's a wireframe for the Gmail app. Keep in mind, this is just one example of a wireframe so you can start to visualize this process. The elements you draw in wireframes will vary across different apps and across different screens in an app. To make sure that your wireframes are simple and understandable, we have industry standards. Industry standards are common ways to indicate page elements. In the case of wireframes, there are few industry standards you should be aware of. You might have noticed these in the wireframe I just drew. The first is text, which should be represented by horizontal lines. Second is images, photos, illustrations, and icons, which are represented by a circle and an X overlapping each circle. Third, calls to action are often represented by rectangles or circles. A good example of a call to action is a submit button on a form, or the circle to compose a new email in our example. You know the basics of drawing wireframes and industry standards, and you've seen me draw a wireframe live. It's time for you to get to work. Grab a piece of paper and pen or pencil and meet me in the next video. You're going to draw your first wireframe.