Start a free Courses trial
to watch this video
In this video, you'll learn about some of the thinking behind low fidelity wireframes. You'll also learn their strengths and weaknesses.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?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 download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up