Problem

[MUSIC] 0:00 Hi, my name is Anwar. 0:09 I'm a designer, a developer and a teacher at Treehouse. 0:11 For this practice session, you'll be creating a medium-fidelity wireframe for 0:15 the primary screen of a sketching application. 0:20 This app gives users the ability to make quick, shareable, black and 0:23 white sketches using their finger on a touchscreen. 0:28 Take a look at the project files, and you'll see personas, 0:32 empathy maps, 0:39 and user flows. 0:43 Before you start, you'll want to make sure you understand the goals and 0:46 frustrations of your users. 0:51 In this case, it looks like Traveler Traci prioritizes getting her ideas 0:54 down quickly, while Artist Anastasia values the ability 0:59 to refine her sketches and collaborate with other artists. 1:04 You'll also want to have a set of sketches to refer to. 1:10 Here is a series of eight sketches I completed in eight minutes 1:16 using a process called Crazy Eights. 1:20 My favorite ideas are the bottom navigation from the fifth sketch and 1:24 the top navigation from the sixth sketch. 1:29 A solution that allows plenty of area for sketching 1:33 but keeps the options most critical to Traveler Traci and 1:37 Artist Anastasia available at a tap. 1:41 I'll combine these two ideas in my wireframe. 1:45 In terms of what tools you'll need to complete this practice session, 1:51 some designers like to complete their wireframes as a carefully executed sketch. 1:55 This might make sense if your next stage is a paper prototype. 2:02 That is, you'd like to test users early in the design process 2:07 on paper before opening up any digital tools. 2:12 On the other hand, perhaps you're ready to work in a vector program such as Balsamiq, 2:17 Figma, Sketch, or Adobe XD. 2:25 In my case, I'm going to use Adobe XD and create a single mobile screen for 2:33 my sketching app using the best ideas from my sketch phase. 2:40 I want to give users options for choosing and adjusting drawing tool preferences, 2:46 saving and sharing files, and undoing and redoing previous steps. 2:53 Your wireframe should be grayscale, and should indicate navigation and 3:00 content placement using simple shapes like rectangles. 3:05 To label parts of the page and interface elements, I recommend choosing 3:11 a sans-serif typeface that will remain legible at even a small size. 3:16 Take your time, use the research in the Teacher's Notes to guide you and, 3:23 if you have them, your sketches. And have fun! 3:28