1 00:00:00,320 --> 00:00:04,480 Now that you have at least eight small wire frames, review them. 2 00:00:04,480 --> 00:00:06,930 Get out a different color pen or highlighter and 3 00:00:06,930 --> 00:00:09,270 mark the wire frames you like the most. 4 00:00:09,270 --> 00:00:11,880 You may like pieces of each wire frame, and for 5 00:00:11,880 --> 00:00:15,700 the next iteration you want to combine those concepts into one wire frame. 6 00:00:17,190 --> 00:00:20,480 I like the top navigation that doesn't include a bar. 7 00:00:20,480 --> 00:00:24,480 It declutters the UI and opens up the space more to show more of the map. 8 00:00:25,660 --> 00:00:29,176 It's important for users to be able to clearly see the map so 9 00:00:29,176 --> 00:00:31,580 they can see the available cars nearby. 10 00:00:31,580 --> 00:00:36,032 I like the prominence of the floating destination search bar, but since future 11 00:00:36,032 --> 00:00:40,485 screens in this user flow will have the main actions at the bottom of the screen, 12 00:00:40,485 --> 00:00:45,520 I think it makes sense to anchor the search bar to the bottom of the screen. 13 00:00:45,520 --> 00:00:49,690 Having this part of the UI at the bottom makes it easy for users to type into. 14 00:00:51,090 --> 00:00:53,010 What are your favorite parts? 15 00:00:53,010 --> 00:00:55,480 Take some time to mark up your own sketches, or 16 00:00:55,480 --> 00:00:57,260 even mine from the project files. 17 00:00:58,760 --> 00:01:00,570 Now that you have these concepts, 18 00:01:00,570 --> 00:01:03,970 you can draw larger wire frames that iterate on your favorite ideas. 19 00:01:03,970 --> 00:01:08,423 When drawing these larger wire frames, keep in mind that these are still 20 00:01:08,423 --> 00:01:12,379 wire frames and do not need to be perfect or get into the details. 21 00:01:12,379 --> 00:01:16,925 The goal of this stage is to come up a solution that meets the project goals, 22 00:01:16,925 --> 00:01:21,773 provides the best user experience for your users, not the best visual design. 23 00:01:21,773 --> 00:01:25,689 Now that you know the basics I wanna show you a few handy tools. 24 00:01:25,689 --> 00:01:31,030 These are completely optional, and not necessary to create great wire frames. 25 00:01:31,030 --> 00:01:35,140 But I want you to know about them, because you might find them to be helpful. 26 00:01:36,260 --> 00:01:40,440 If you want help making straight lines, you can use grid or dot paper. 27 00:01:40,440 --> 00:01:45,930 You can find it online, at an art supply store, or an office supply store. 28 00:01:45,930 --> 00:01:48,760 Alternatively, you can use a ruler to make straight lines. 29 00:01:49,770 --> 00:01:53,190 Here are a few wire frames I drew on dot paper for a previous project. 30 00:01:54,820 --> 00:01:58,500 Another paper upgrade is printable stencils of devices, 31 00:01:58,500 --> 00:02:02,460 which visualize how the design will look within the viewport. 32 00:02:02,460 --> 00:02:05,870 This is helpful if you wanna draw the elements with the proportions of 33 00:02:05,870 --> 00:02:08,400 the device sizes in mind. 34 00:02:08,400 --> 00:02:12,180 It'll help you visualize how the UI will feel within the constraints of the screen. 35 00:02:13,270 --> 00:02:15,940 If you're struggling with drawing icons or 36 00:02:15,940 --> 00:02:20,064 if you simply want to speed up the process, you can use a UI Stencil. 37 00:02:20,064 --> 00:02:25,292 UI Stencils is an online store that sells a variety of stencils with icons sized for 38 00:02:25,292 --> 00:02:30,010 a variety of mediums, such as iPhones, Android phones, and websites. 39 00:02:31,020 --> 00:02:35,040 You can simply lay the stencil on the paper and fill in the icons with your pen. 40 00:02:36,130 --> 00:02:39,158 You can draw on the templates you've printed, 41 00:02:39,158 --> 00:02:42,804 or make the device outlines yourself using the stencil. 42 00:02:42,804 --> 00:02:45,710 I put links to these tools in the teacher's notes, so 43 00:02:45,710 --> 00:02:47,849 check that out if you're interested.