1 00:00:00,000 --> 00:00:04,964 [MUSIC] 2 00:00:04,964 --> 00:00:07,850 There are a few different ways to create wireframes. 3 00:00:07,850 --> 00:00:11,060 But let's start with the basics, pen and paper. 4 00:00:11,060 --> 00:00:16,470 It's simple, gets the job done and avoids the trap of perfecting the wireframe. 5 00:00:16,470 --> 00:00:20,710 The goal at this stage is to come up with a solution that meets the project goals, 6 00:00:20,710 --> 00:00:24,510 and provides the best user experience, not the best visual design. 7 00:00:25,640 --> 00:00:28,315 If you can draw basic shapes, you can wireframe. 8 00:00:29,490 --> 00:00:32,938 First, I'll give an overview of how to draw wireframes on paper. 9 00:00:32,938 --> 00:00:37,210 And then, we'll put the concepts into practice as you watch me draw wireframes 10 00:00:37,210 --> 00:00:39,920 for a mobile ridesharing app. 11 00:00:39,920 --> 00:00:44,790 Wireframes use symbols to represent different parts of the user interface. 12 00:00:44,790 --> 00:00:47,810 You may come up with your own variations of these symbols, but 13 00:00:47,810 --> 00:00:50,970 it's best practice to stick with symbols that others will recognize. 14 00:00:50,970 --> 00:00:53,010 Here are the common symbols. 15 00:00:54,242 --> 00:00:58,860 Every wireframe starts off with a rough approximation of the device constraints. 16 00:00:58,860 --> 00:01:02,830 Whether you're designing for mobile, tablet, HD desktop etc. 17 00:01:02,830 --> 00:01:06,710 it's safe to say you'll be designing for a rectangle. 18 00:01:06,710 --> 00:01:08,800 Primarily, in portrait view. 19 00:01:08,800 --> 00:01:11,900 So start with that and don't concern yourself with the scale at this point. 20 00:01:13,010 --> 00:01:16,510 Also, don't be super concerned with drawing straight lines. 21 00:01:16,510 --> 00:01:17,910 It's okay if they're off. 22 00:01:17,910 --> 00:01:18,900 This is handmade. 23 00:01:19,980 --> 00:01:23,090 I do have a couple of tips that make it easier though. 24 00:01:23,090 --> 00:01:26,700 First, when you're drawing a line, lock your wrist and 25 00:01:26,700 --> 00:01:29,220 move your whole arm away from your body. 26 00:01:29,220 --> 00:01:32,100 Your wrist naturally curves if you draw towards your body. 27 00:01:32,100 --> 00:01:36,140 So if your draw inward, you'll be fighting your own anatomy. 28 00:01:36,140 --> 00:01:41,110 Secondly, the faster you draw the line, the more likely it'll be straight. 29 00:01:41,110 --> 00:01:45,260 If you hesitate and slowly draw the line, it's more likely to look wiggly. 30 00:01:46,350 --> 00:01:49,380 The last tip is to not look at the tip of your pen. 31 00:01:49,380 --> 00:01:53,110 Instead, look at the point where you want the line to end. 32 00:01:53,110 --> 00:01:55,730 This takes hand to eye coordination. 33 00:01:55,730 --> 00:01:57,830 But with some practice, you'll get the hang of it. 34 00:01:59,520 --> 00:02:01,860 Sections are represented by rectangles. 35 00:02:03,390 --> 00:02:06,110 Images are represented by rectangles with an X. 36 00:02:07,180 --> 00:02:11,630 The rectangle is drawn at approximately the intended size of the image. 37 00:02:11,630 --> 00:02:13,000 If it's a circular image, 38 00:02:13,000 --> 00:02:16,110 such as a profile image, you can use a circle with an X. 39 00:02:17,190 --> 00:02:19,300 Icons are represented by small circles. 40 00:02:20,535 --> 00:02:23,620 Headlines are represented by a straight, thick, horizontal line. 41 00:02:24,730 --> 00:02:27,130 If you know the text you'll be using, you can write it in. 42 00:02:28,470 --> 00:02:31,590 But it's easier to draw a line in this quick iteration phase. 43 00:02:34,679 --> 00:02:38,205 Body copy is represented in a few different ways. 44 00:02:38,205 --> 00:02:40,760 Similar to headlines, you can write it in. 45 00:02:40,760 --> 00:02:43,380 But it's easier to use placeholders. 46 00:02:43,380 --> 00:02:47,650 You can draw a straight thin horizontal line or multiple lines. 47 00:02:47,650 --> 00:02:52,397 Alternatively, some people use a wavy horizontal line to more clearly separate 48 00:02:52,397 --> 00:03:00,420 it from headlines. Sometimes, you'll wanna draw a section of the screen. 49 00:03:00,420 --> 00:03:03,020 So, you wanna denote that the page continues. 50 00:03:03,020 --> 00:03:05,750 You can communicate this by drawing a zigzag line 51 00:03:05,750 --> 00:03:08,350 on the bottom of the section's rectangle. 52 00:03:08,350 --> 00:03:12,870 There are symbols for communicating interactions too, so if you're interested, 53 00:03:12,870 --> 00:03:15,050 check out the teacher's notes. 54 00:03:15,050 --> 00:03:17,740 This is all you need to know for the basic shapes. 55 00:03:18,870 --> 00:03:23,820 Now that you have an idea of the shapes you'll be drawing, gather the supplies. 56 00:03:23,820 --> 00:03:26,990 Let's start out with the basic supplies you're likely to have sitting 57 00:03:26,990 --> 00:03:28,650 around your home. 58 00:03:28,650 --> 00:03:32,410 Grab some basic white copy paper from a printer nearby, or 59 00:03:32,410 --> 00:03:34,630 get any scrap paper you can get your hands on. 60 00:03:36,040 --> 00:03:38,590 Then, find a writing instrument. 61 00:03:38,590 --> 00:03:41,720 Preferably, a pen or marker with black ink. 62 00:03:41,720 --> 00:03:43,710 If you have a pencil, that's okay too. 63 00:03:43,710 --> 00:03:48,580 I have a preference for pen, because I can get carried away with erasing, 64 00:03:48,580 --> 00:03:50,840 and making the drawing perfect. 65 00:03:50,840 --> 00:03:55,520 For you pencil lovers out there, I encourage minimizing the use of an eraser, 66 00:03:55,520 --> 00:03:57,950 and embracing the imperfections. 67 00:03:57,950 --> 00:04:01,480 If a line is truly distracting, feel free to erase it though. 68 00:04:02,610 --> 00:04:04,690 Another tip is to draw lightly and 69 00:04:04,690 --> 00:04:08,890 build up the darkness as you get more confident and deliberate with the shapes. 70 00:04:08,890 --> 00:04:11,530 That's it for the supplies, it's as simple as that. 71 00:04:12,590 --> 00:04:15,890 There are some extra tools you can buy to make the drawing easier. 72 00:04:15,890 --> 00:04:19,270 But let's stick to the basics for now and I'll show you those goodies later.