Start a free Courses trial
to watch this video
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.
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 - 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up