Types of Wireframes

There are a few different types of wireframes. 0:00 First, I'll discuss a set that ranges in fidelity. 0:02 Fidelity, in this context, refers to the amount of detail in the wireframe. 0:06 There are low fidelity and high fidelity wireframes. 0:11 A low fidelity wireframe is a bare-bones drawing with minimal polish. 0:15 Its focus is on the layout and hierarchy of content. 0:19 It's typically loosely drawn and hints at the specific elements on the page. 0:23 For example, text may be represented by grayscale colored boxes, and 0:27 inputs are roughly approximated. 0:32 Start with a low fidelity sketch and then ease your way into a high fidelity sketch 0:35 as the drawing becomes more fleshed out. 0:40 Let's revisit the Treehouse homepage wireframe I showed you earlier. 0:43 This is an example of a low fidelity wireframe. 0:47 It's in grayscale and uses placeholders for images and text. 0:50 At this point, the content was still being defined, 0:54 and I was trying out different layouts. 0:56 It can also be hand-drawn. 1:00 Here's a set of wireframes I drew on paper for an Android app design. 1:02 A high fidelity wireframe is more polished and 1:06 displays more specific or realistic renderings of content. 1:09 However, it continues to be in grayscale as to not be confused with the mock-up. 1:13 If it were to be a misinterpreted as a mock-up, 1:19 the feedback from stakeholders would focus on the visual design 1:21 instead of general concepts, like page layout, hierarchy, and functionality. 1:25 An example of more realistic content is using actual copy instead of 1:30 placeholder text or gray boxes to represent words. 1:35 This helps to see how the real content works with the rest of the screen, and 1:38 also provides an opportunity to optimize the text links and line breaks. 1:43 For example, 1:47 you wouldn't want a headline to have a stray word on its own in a second line. 1:48 You'd want to either tighten it to fit on one line, or 1:53 lengthen it to fit intentionally on two lines. 1:56 Other type adjustments can be done at this stage as well, 2:00 such as choosing specific fonts. 2:03 Create high fidelity wireframes whenever you're more confident in your design and 2:05 wanna flesh out the details. 2:10 This also helps others see your vision without it being critiqued for 2:12 its visual merits in a full-blown mock-up. 2:15 As an example, here's another wireframe I made for the Treehouse homepage. 2:18 This is how the homepage wireframe looked as it transformed into a high fidelity 2:23 wireframe. 2:27 As you can see, it's still in grayscale and uses some placeholder content. 2:28 But it's more polished and uses some actual copy and images. 2:33 Wireframes also ranged in size and scope. 2:37 The default type of wireframe we'll be discussing in this course 2:40 will be full scale wireframes. 2:43 But it's important to know about thumbnail wireframes as well. 2:46 To facilitate quick iteration early on, you can start with thumbnail wireframes. 2:50 Smaller in scale, thumbnail wireframes allow you to 2:56 create a little sketch of the page without getting too involved with the details. 2:59 This would allow you to brainstorm different ideas quickly. 3:04 Let me show you an example. 3:08 Here's a page of thumbnail wireframes. 3:10 In this example, I was iterating on just the hero section of the marketing page. 3:13 Instead of fleshing out all the nuances of the page, these are quick, 3:17 small-scale sketches. 3:21 Drawing at this scale allows you to see the big picture, and get a feel for 3:23 the constant hierarchy and page layout. 3:27