Low Fidelity Wireframes

[?mellow guitar music?] 0:00 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 0:03 UX WIreframing - Low Fidelity Wireframes with Nick Pettit 0:07 In the previous video, we took a look at a few ways to create mockups. 0:13 Now let's focus in on low fidelity wireframes. 0:17 Low-fi wireframes, mockups, or prototypes 0:21 are typically done very quickly. 0:25 They're often referred to as "wireframes" 0:27 because sylistically, they usually make heavy use of line and not much else. 0:30 This doesn't mean that your mockup has to look like this. 0:37 For example, you could fill in and shade all of your shapes instead. 0:40 There's no specific way to create low-fi wireframes. 0:45 You can use software tools or you can just use pen and paper. 0:48 The tools all behave differently, and you should use the one 0:52 that allows you to work the fastest. 0:56 Low-fi mockups are all about speed. 0:59 They allow you to iterate on an idea rapidly 1:01 and try out all sorts of different directions. 1:04 As an exercise, it's a good idea to create as many different mockups as possible 1:07 while you're still in the early stages. 1:12 Don't be afraid to explore, because it's only going to be more difficult 1:15 to change things later on. 1:18 The great thing about low-fi mockups 1:21 is that they keep your ideas malleable. 1:23 Sometimes when working with high fidelity, pixel-perfect tools, 1:26 it can kill your creativity, because you might feel stuck, 1:30 like you don't have the freedom to change something 1:33 once you've spent so much time creating it. 1:36 Another interesting quality of low-fi mockups 1:39 is that they allow people to fill in the details themselves. 1:42 This is very useful when conducting early usability tests 1:45 with basic interactive mockups or paper mockups. 1:49 You can let people look at a product 1:53 and see how it's supposed to function, 1:55 rather than looking at the fine design details. 1:57 Remember, abstraction is a sliding scale, 2:00 and you should use that to your advantage, 2:03 so before we move on, let's review really quick. 2:06 Low-fi mockups allow for cheap exploration. 2:09 They let you try out a bunch of different ideas 2:13 with little consequence. 2:15 Low-fi mockups keep you from getting stuck. 2:17 A high-fi mockup takes a lot of time and you can end up feeling 2:20 like you have to stick with what you've got. 2:24 Low-fi mockups also allow users to fill in the gaps 2:27 This is good when you want them to focus on usability 2:31 and not visual design. 2:34 Now, low-fi wireframes communicate some information 2:37 and sidestep other information entirely. 2:40 It's important to understand what types of information 2:43 low-fi wireframes convey, 2:46 so that when a wireframe gets passed around your company, 2:48 there's no confusion about what's being portrayed. 2:52 As I mentioned earlier, low-fi wireframes are called "wireframes" 2:55 because they often make heavy use of line. 2:59 The truth is, though, these wireframes often don't communicate use of line 3:03 very effectively at all, because typically, 3:07 they're all very hard lines. 3:10 On a real website, this is almost never the case. 3:13 There are all sorts of different qualities of line, 3:16 different colors, contrast, broken lines, implied lines, 3:19 hard lines, soft lines, and so on. 3:23 What a low-fi wireframe does communicate 3:26 is space, balance, scale, composition, and--to a lesser degree--shape. 3:29 When you look at a low-fi mockup, 3:36 it's really easy to see how the spacing is going to feel on the final website. 3:38 You just have to look at the relative distances of the lines to one another. 3:44 You can also see the composition and balance of the design as a whole. 3:49 It's really easy to tell if one side is going to end up feeling too heavy or too light. 3:54 Of course, this can all change, 4:00 once things like color and contrast come into the picture, 4:02 but lots of fundamental flaws can be fixed very early on with a quick wireframe. 4:05 Finally, you can also get a rough idea of the scale of different things on the page. 4:11 Sometimes when you go full-resolution, you might look at an element 4:16 and think, "Wow, that looks really huge." 4:20 Or maybe you'll feel the opposite and think, 4:22 "That element isn't as prominent as I thought it would be." 4:24 However, a wireframe can help you create a logical flow to your layout, 4:27 which is very helpful. 4:32 Now, there are some downsides to low-fi mockups, 4:34 but I'd like to highlight just 2. 4:37 As I pointed out earlier, they can create some unintentional ambiguity. 4:40 Two people might agree that a wireframe is great, 4:44 when really they have 2 different ideas in their heads. 4:47 Secondly, a wireframe isn't always the best thing to present 4:50 to stakeholders or investors. 4:54 If they're very familiar with the process of creating websites, 4:56 they should know how to interpret it. 4:59 But many stakeholders might look at a wireframe 5:02 and think it looks unprofessional or unfinished, 5:05 especially if they're unfamiliar with software projects. 5:08 Don't let this stop you from creating wireframes 5:12 and presenting them to coworkers 5:14 and partners on the project that you're working on, 5:16 but just be aware of it. 5:18 As you've just seen, low fidelity wireframes 5:20 have advantages and disadvantages. 5:23 In the next video, we'll compare these with high fidelity mockups. 5:26 [?mellow guitar music?] 5:29 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 5:32

You need to sign up for Treehouse in order to set up Workspace

Sign up