Introduction5:07 with Nick Pettit
In this video, you'll get an introduction to wireframing. You'll learn about some of the differences between low fidelity wireframes and high fidelity mockups.
[?mellow guitar music?] 0:00 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 0:03 UX Wireframing - Introduction with Nick Pettit 0:07 In this chapter, we're going to explore a few ways of creating mockups of web pages 0:13 without actually diving into HTML and CSS. 0:17 Let's get started. 0:21 When you first started creating websites, you may have wondered 0:22 how a site makes the leap from being an idea 0:25 to being concrete HTML and CSS that you can interact with. 0:28 As you've probably learned by now, it's a very intractable problem 0:33 with no optimal solution. 0:37 However, there are several guidelines that could help us stay on track. 0:39 Within the web design community, there's often a lot of debate 0:43 around whether or not you should go with Low Fidelity Wireframes, 0:47 High Fidelity Mockups, or just dive straight into HTML and CSS 0:52 and skip the whole prototyping process altogether. 0:57 Low-Fi Wireframes basically give you an idea of where things are on the page, 1:00 how big they are, and a very rough idea of what they should look like. 1:05 Most of the information is about relationships, size, and space. 1:10 Wireframes can be created using pen and paper, 1:15 but there are also several software solutions that can help you. 1:19 Hi-Fi mockups, on the other hand, are very specific. 1:24 There are fine details, oftentimes going all the way down to the pixel level. 1:28 The information here not only describes how big everything is 1:34 and where it should go, but it also shows you 1:39 exactly what the final site should look like. 1:42 Mockups like this are often done in an advanced image editor, 1:45 like Photoshop or Fireworks. 1:49 We'll talk more about the advantages and disadvantages 1:52 of Hi-Fi versus Low-Fi Mockups in upcoming videos. 1:55 We'll also talk about some of the Wireframing tools that are available. 1:59 For now, it's just important that you understand that you have a few options here. 2:03 So should you create some simple Wireframes on paper? 2:09 Or should you try to go full-scale 2:13 and design every pixel down to the last detail? 2:16 There's no right or wrong answer here, 2:19 but there are plenty of strong opinions on the matter. 2:21 Ryan Singer, the Lead Designer at 37signals, once said, 2:24 "Next time you want to illustrate a flow or concept with a diagramming tool, 2:29 throw away the source file as soon as you export the PNG or PDF. 2:34 If you're afraid to throw the source file away, you spent too much time on it." 2:40 37signals also has many blog posts 2:45 and even an iPad app that reflects this mentality. 2:48 They believe in Low-Fidelity Mockups because 2:52 they allow you to iterate on a design quickly 2:55 and create a real website much faster. 2:58 At the other end of the spectrum, you have pixel perfectionists. 3:02 Many, many designers enjoy the process of mocking up a website so much, 3:07 that creating the mockups becomes a project in itself. 3:12 If you look at a site like dribbble or forest, 3:15 you can see plenty of designers making highly polished designs 3:19 before diving into code. 3:23 So then, which should you choose? 3:25 Each has its pros and cons, but in my opinion, 3:27 I think it all depends on what you prefer 3:30 and what the project demands. 3:33 If you're comfortable with an idea morphing and changing 3:35 all throughout the project and letting it emerge on its own, 3:38 then Low-Fi Mockups are probably the way to go. 3:42 There's lots of agility and you can iterate on a design 3:45 many times over to explore the possibility space. 3:49 On the other hand, if you need rigid blueprints 3:53 that you can slice up and turn directly into code, 3:56 a Hi-Fi Mockup is the way to go. 3:58 Like I said previously, it's not easy to make the jump 4:01 from idea to finished website, 4:05 so you need to decide for yourself how clearly 4:07 you need to visualize the idea. 4:11 The project has requirements, but you probably have some preferences, too. 4:13 Regardless of the process used to create Hi-Fi and Low-Fi Mockups, 4:18 the end result simply differs in the level of abstraction. 4:22 If you can see a website clear as day in your head, 4:27 you may just want to make a rough mockup 4:30 to remind yourself of your plan. 4:33 If you really need to see what a website looks like 4:35 in full detail before you feel comfortable 4:38 committing time to coding, then go for it. 4:40 Yet another approach might be to start out with some rough sketches 4:43 and work your way up to the finalized assets. 4:48 As you've probably gathered, there's no right or wrong way to create mockups. 4:51 In the next video, we'll take a closer look 4:57 at Low Fidelity Wireframes. 4:59 [?mellow guitar music?] 5:01 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 5:04
You need to sign up for Treehouse in order to download course files.Sign up