Solution7:48 with Anwar Montasir
Here's one solution for a digital wireframe in Adobe XD for the primary screen of a sketching application.
Welcome back. 0:00 Were you able to complete a wireframe? 0:01 If not, no worries. I'll take you through my solution now. 0:03 To create my wireframe, 0:07 I'll start with a new document in Adobe XD using the iPhone X canvas size. 0:09 I'll rename my artboard New Drawing. 0:15 To start my top navigation, I'm creating 0:20 a circular button with a diameter of 44 pixels. 0:25 You'll want to use caution when going smaller than 44 pixels as you could 0:31 end up creating interface elements that are hard to tap with a finger. 0:35 I'm using a Font Awesome icon called folder within the circle. 0:44 I'll choose Copy Unicode Glyph 0:50 And make sure I set my typeface to Font Awesome Free. 0:57 I'll also label the buttons underneath 1:08 as I'm not confident they'll be understood without labels. 1:11 Like any design decision, this would be a good one to test on users. 1:15 For choosing a typeface, I'm going with Helvetica Light. 1:25 For wireframes it's best to choose a sans-serif typeface 1:32 without a strong personality. 1:36 The idea is to keep the feedback you receive focused on the concept, 1:41 the layout, and the navigation, not your choice of typography. 1:47 I'll make my completed button a component, and duplicate to create my share button. 1:52 Choosing a share icon from Font Awesome is a bit challenging 2:04 as there isn't a universally recognized share icon. 2:09 I'm worried this circular arrow could get confused with my undo function. 2:14 So I'll choose the icon labeled share-alt. 2:21 I can use Font Awesome icons called undo-alt and 2:36 redo-alt to create my final two buttons, undo and redo. 2:41 Now for my drawing options. 3:20 I've positioned these at the bottom of the screen since the user will need them 3:23 more frequently, and they'll be a little more spacious than my top buttons. 3:28 I'll draw a rectangle 96 by 60 pixels. 3:35 Lighten the border color a bit. 3:52 And create a tool icon using the pencil-alt icon from Font Awesome. 3:58 Once I convert this button into a component, 4:44 I can duplicate to create a button for choosing a line style. 4:48 For my remaining three icons, I'm not sure Font Awesome will have anything relevant. 5:04 I'll draw a curved line for line style using the pen tool. 5:12 For value, a rectangle will 5:26 do, as this is 5:28 meant to look like a color picker you might see in any design application. 5:34 Although, since this is a black and white sketch app, 5:43 the user can only choose shades of gray. 5:47 For hardness, I'd like to choose a radial gradient to suggest a softer edge. 5:51 I'll draw a circle. 6:12 And under Fill, I'll switch from Solid Color to Radial Gradient. 6:18 I'll put a darker gray, all 7's, in the center, 6:25 and a lighter gray, like all C's, at the edge. 6:32 I'll also click in the center of the gradient bar. 6:41 There we go. 6:47 And change the color to the same dark gray, 777777. 6:48 So my circle looks a bit darker in the center. 6:56 I'll also get rid of that stroke. 7:01 That looks a little better. 7:05 And that's it. 7:09 I could create additional artboards to demonstrate what happens when 7:11 these drawing options get interacted with. 7:16 Though I'd want to make sure I sketched out my ideas first. 7:19 If your wireframes look nothing like mine, that's perfectly normal. 7:25 You might have come up with a great solution for 7:29 your sketching app that I didn't even think of. 7:31 The important thing is to keep on practicing and to use lower-fidelity 7:34 approaches, like sketching and wireframing, to explore ideas and 7:39 generate feedback before working on a high resolution design. 7:43
You need to sign up for Treehouse in order to download course files.Sign up