[MUSIC]. 0:00 Well hey everybody I'm Nick Pettit, @nickrp on twitter. 0:04 And I am a web design teacher here at Treehouse, which of course is the 0:09 best way to learn about web design, 0:13 web development, mobile business, and so much more. 0:15 You can check us out at TeamTreehouse.com which, I have up right 0:19 here, so when you hit teamtreehouse.com this is what'll look like. 0:24 You can click on the free trial button to try it out 14 days 0:30 for free, and once you log in this is what it will look like. 0:35 You have dashboards so you can keep track of your learning. 0:40 You can head over to our Tracks, which 0:43 are guided paths that teach you everything you need 0:46 to know about a particular topic such as iOS, 0:50 web design, Rails, PHP, Android and so much more. 0:54 Or you can browse individual courses in our library and 0:58 you can watch live broadcasts, like this one right now. 1:03 So, it's pretty cool, definitely be sure to check that out. 1:08 Today I would like to talk to you about how I rapidly prototype websites. 1:13 There's a bunch of different ways to do this, and there's really no right way. 1:20 Everyone does it a little bit different. 1:24 So, you should definitely take what I say with a 1:26 grain of salt and work it into your own workflow. 1:28 However, I feel like the things that I do aren't totally unique, but they're a 1:32 little bit different than some of the more traditional ways of mocking up websites. 1:37 This can be useful if you're working on small to 1:43 medium size projects, or if you just wanna create, you 1:46 know, a one off webpage where you wanna get something 1:49 out really quick, but you still want it to look nice. 1:53 traditionally, a lot of web designers will do one of two things. 1:58 They'll either start making a website in a program like Photoshop or 2:03 Illustrator, and they'll create these pixel-perfect mockups, that 2:09 can then be transferred onto the web by slicing up 2:15 the images, or basically transforming it into HTML and CSS. 2:19 And creating a website that way. 2:25 I think that is a pretty cumbersome way to do things. 2:27 Another way that a lot of web designers and devs will work, 2:32 is they will create a static HTML and CSS mock up and then hand 2:37 that over to developers to turn into dynamic code whether 2:42 that's in Rails or PHP or some other back end language. 2:47 And I also think that that is a little bit overly complicated. 2:52 And there's much faster ways where you can go 2:58 from design to something that people are actually using. 3:01 So I say prototype because you can either work very iteratively 3:06 where you create you know a, a small set of design and 3:11 features, and then work your way up to something more complex. 3:16 Or you can create one prototype after another. 3:23 So you create a prototype, and then start 3:27 again and throw out what you had previously. 3:30 It's like I said, there's a bunch of different 3:33 ways to work and there's really no correct way. 3:35 It should always be whatever works best for you. 3:37 So I wrote two blog posts that you may 3:41 want to check out that are related to this. 3:45 One is called, How I Rapidly Prototype Websites. 3:48 And this covers a lot of what I will be talking about today, 3:52 only in text form, so you can check that out if you'd like. 3:55 I'm sure Chris Zabriskie over here will put 4:00 that into chat, if you'd like to see that. 4:03 And then there's another blog post that's related to what 4:07 I was just talking about, called PSD to HTML is dead. 4:12 And it's got quite a big response I didn't 4:17 really expect people to react as intensely as they did. 4:20 There was a lot of people on both sides 4:26 of the argument saying well obviously PSD to HTML is 4:28 dead and then there were other people saying well, no 4:31 this is most definitely how you should be making websites. 4:36 Etcetera and everything in between. 4:40 But that's another good article to read, just to learn 4:43 a little bit more detail about why I think, that 4:47 creating PSDs and, or Photoshop documents and turning them into 4:51 HTML is maybe not the most efficient way to work. 4:56 At least for me. 5:01 So, those are two really good blog posts to check out. 5:03 So, instead of creating a Photoshop document or creating static 5:06 HTML in CSS and transforming that into the final product. 5:11 What I like to do is start with pen and paper. 5:16 I will close my laptop and I think about what are all the things that I want to 5:20 see on a page, or even on the entire 5:26 website if I'm starting with something a little larger. 5:29 And I'll list them all out. 5:35 I'll say, here's maybe the major sections of 5:37 the site, that I think I'm going to need. 5:40 Or alternatively I'll say here's all of the major features that I 5:43 would like the site or this web app to be able to perform. 5:47 And then I can break them out into different sections. 5:52 It just depends on the project. 5:55 so, make sure to keep that in mind. 5:57 There's no right way to work. 6:00 So after listing everything out, I'll think about maybe how the features 6:03 relate to one another, see if I can remove any of those features. 6:07 Because every feature you add is going to add work at 6:12 every angle, you're going to have to design it, code it, you're 6:15 going to have to support it later on, you may have 6:19 to fix things when it breaks, you're gonna have to modify them. 6:22 So every little thing you add is going to 6:26 inflate the size of the project, so when listing 6:29 out features like that you should always think about, 6:32 what would be the consequences of not doing something. 6:36 So try to eliminate as much as possible and when you think you have it down to its 6:40 basic component parts, try to even combine features if it makes sense to do so. 6:45 You always wanna make sure that each feature is very clear and 6:51 each page on a web site is very clear in its purpose. 6:55 But sometimes you can add a little bit to one feature or a little bit 6:59 to one page that actually makes another 7:04 page or another feature completely irrelevant or redundant. 7:07 So once you've really narrowed it down. 7:12 That's when you can kind of start drawing shapes and 7:16 you can draw all those out on pen and paper. 7:20 Sometimes I will actually, use a mockup 7:23 tool, such as Omnigraffle or Balsamiq Mockups. 7:28 And I'll show you how I do that it Balsamiq Mockups in just a moment. 7:33 But sometimes I will use a tool if, maybe 7:36 I need to share these drawings with other people. 7:39 Whether those are stakeholders or clients or other 7:42 people on a team that I'm working with. 7:45 And, that just keeps it in a digital format that's really easily sharable. 7:47 So let's actually take a look at, Balsamiq Mockups right now. 7:54 This is, Balsamiq Mockups. 8:00 It's a desktop tool for mocking up websites and iPhone apps. 8:02 You can also yeah, like drag out an iPhone just like that. 8:07 And you can put in like a, a keyboard down at the, the bottom here. 8:12 And maybe an alert box. 8:18 So it allows you to really quickly mock up interfaces. 8:21 Just like that. 8:26 So I'm gonna delete all this stuff. 8:27 You can do the same thing of course, for 8:29 websites, so you can drag out a browser window. 8:32 And you can resize this however you'd like. 8:35 And then you can put things inside of it. 8:38 One thing that I personally really like 8:42 about Balsamiq Mockups versus a tool like OmniGraffle, 8:45 or even an illustration tool like Illustrator, 8:49 is that they have these pre built components. 8:53 And they also have this really nice default hand drawn style. 8:56 So everything is, for the most part, in black and white. 9:01 And all the lines for each one of these shapes are kind of squiggly. 9:04 I'm not sure if you can perfectly see that on video but these lines are not perfect. 9:09 And that helps to communicate that this is just a mockup. 9:15 It's not something that's meant to be 9:19 finalized, and it's not, you know, it's not 9:22 that the app is actually going to be black and white with these lines like this. 9:25 It helps to communicate that this is more so a nice drawing, basically. 9:30 So, like I said, you can just drag out components and 9:36 drag in buttons, and kind of customize them however you like. 9:40 It's really pretty easy to work with, and that's why I like using Balsamiq Mockups. 9:45 So, let's say for instance, that we were creating some sort of to do list app, 9:51 and we wanted to make sure that we were designing mobile first in mind. 9:58 We wanted to build something that's going to be great on phones but 10:05 then can also scale up to a tablet or a desktop layout if need be. 10:10 But we want to think mobile first because it's a to do list and we know that 10:15 people are gonna want, or that people are going to want to use this on the go. 10:20 So I'll drag out an iPhone here and lets see 10:25 if we can find some sort of check, check boxes. 10:30 There we go. 10:35 That was actually pretty lucky. 10:35 And you just click right there and there it is. 10:36 So we can drag that in there. 10:39 We'll customize these in just a moment. 10:42 Lets look for some text. 10:45 And here we go. 10:49 So we can call this My Todo List. 10:50 And just put that up there at the top. 10:56 And then maybe we can add a few buttons to allow people to add and remove items. 11:01 So let's see if there are some buttons here that would make sense. 11:08 Maybe I can add a button here that says, Add. 11:14 So we'll put that there and of course we'd wanna 11:22 think a lot more about how we're actually designing this. 11:25 But you get the idea. 11:30 One thing that I also do when I'm not working super quickly 11:31 like this, is that I will try to design from the inside out. 11:35 So for example, I would worry about what this to 11:41 do list is really going to look like and function like. 11:44 And then I would move outward from there and say, okay here are the pieces 11:48 of functionality that I need to actually 11:53 modify that to-do list, like this Add button. 11:56 And then moving further out I would sort of 12:00 frame the entire app and say, okay maybe there's a 12:03 title here and maybe there's some navigation that allows me 12:07 to quickly go from one to do list to another. 12:11 And so on. 12:15 So, I will try to, start towards the middle and work my way outwards. 12:17 And doing that allows you to really focus on the core functionality of the app, and 12:26 it makes it a lot easier to figure 12:31 out what that chrome around the functionality should be. 12:33 Because a lot of times it's easy to design, you know, 12:38 a really nice looking header, or some nice buttons and then you 12:42 get to the middle of the app and you realize that 12:46 maybe those things aren't what you need for these bits of functionality. 12:50 So let's just quickly customize this Todo List. 12:56 Let's see, if I have an x, it's a check mark. 13:00 So, we'll say this is a grocery list. 13:04 And we'll say bread. 13:08 Milk. 13:11 And eggs. 13:13 It's a pretty short, grocery list. 13:13 There we go, and I can stretch this out, 13:18 maybe style it in a number of different ways. 13:24 In fact, maybe I would actually want this to be more of 13:31 like a table view in iOS where you have different table cells. 13:35 And, you can scroll through the list that way. 13:40 So maybe I can make this text a little bit larger. 13:44 And resize that, so you can see everything. 13:50 And I can center it pretty easily just like that. 13:55 And I'll say this is a, Grocery list. 13:58 We'll say groceries. 14:02 And we can resize that as well. 14:04 There we go. 14:09 And I can do other things here. 14:09 Maybe I don't want an add button. 14:11 Think I can, yup, drag in an icon here. 14:15 And I think if I double-click on that, yep, I can see some icons. 14:20 And maybe there's some sort of add button here. 14:26 Yeah, this looks good. 14:31 There we go. 14:33 So we'll remove that. 14:34 And I'll say that's how you add stuff to the to-do list. 14:38 I can make that larger, or smaller. 14:41 And you can sort of start to build out an interface, just like this. 14:47 It's pretty simple to use, and it helps you communicate ideas very quickly. 14:52 So from here, what do you do? 15:00 Well, let's say, maybe you started out with pen and paper mockups like this. 15:01 And then you moved on to something like Balsamiq 15:07 Mockups where you took those pen and paper mockups, 15:09 maybe clean them up a little bit, rethought them 15:12 and gave yourself another chance to do another iteration. 15:15 And then you have them in a digital format where you can share them. 15:18 Where do you go from there? 15:23 Well, like I said, I try not to include Photoshop in my process 15:24 unless, I actually need images that are photographs somewhere on the site. 15:30 Because mocking up an, a website in Photoshop 15:36 tends to kind of lock you in Photoshop's 15:40 tools, which are really meant for editing images 15:43 of photo's, not necessarily for mocking up app. 15:46 A lot of people will use similar tools 15:51 like like illustrator which can be a little 15:53 bit better, because they're actually drawing tools that 15:56 are maybe meant for designing things like that. 16:00 And that can be good, that could be an alternative 16:03 to maybe this sort of digital mock-up step like Balsamiq Mockups. 16:06 But, unless you're working on a really big team, or you need 16:11 really solid mockups that you can share with stakeholders before 16:16 you actually start coding something that's fairly complex. 16:21 You should always try to skip it if you can. 16:27 Now, at Treehouse, for example, we 16:31 will create, mockups in Photoshop and Illustrator. 16:33 Just so that we can easily communicate what the final result is going to be. 16:38 But if you have something small to medium and you don't 16:43 really need a super complex, super detailed mock up to explain everything. 16:46 Then you can probably skip that step. 16:53 So in that vein we're going to skip Photoshop 16:56 and instead actually move on to html and CSS. 17:00 Now one thing I should add here is that because we are skipping Photoshop. 17:04 You may want to add some sort of color data into your digital mock 17:11 up and that's okay, if you want to maybe highlight things or figure out 17:15 what your color scheme is going to be and maybe color a couple of 17:20 things in, Balsamiq Mockups allows you to do that and it's pretty easy to do. 17:24 But instead, I'd like to jump over to another website 17:30 here, [SOUND] which is the site for Zurb Foundation. 17:36 Now Foundation, is a front end framework that includes html, css, and javascript. 17:42 And if you're not familiar with the idea of a front end framework, it's basically 17:51 just a set of HTML, CSS, JavaScript that helps you get started building a website. 17:58 And typically a framework will include things like a typography reset, a 18:04 grid and a bunch of grid classes that you can use to really easily create a layout. 18:10 And lots of other cools stuff, button stylings, etcetera. 18:18 If you're familiar with Bootstrap, this is very similar to to that. 18:21 You can use either one. 18:29 In fact you don't have to use Bootstrap or 18:31 Foundation, you could use really any front end framework. 18:33 But I think the important thing here is to use a front end framework that has 18:37 a grid system because that's really what's going 18:42 to enable you to rapidly prototype a layout. 18:46 So let's jump into Foundation documentation here. 18:49 And let's go to the grid just so you can see what I'm talking about. 18:55 You can create some HTML elements here with the foundation grid styling. 19:01 So let me zoom in just so you can see that a little bit better. 19:10 So basically you would create a row class just like this, 19:15 and then in each row you would have different sets of columns. 19:19 Now I'm not going to go into foundation too specifically here you can look all 19:25 of this up in documentation or of course you can learn about it on TreeHouse. 19:29 But that's basically how the grid system in foundation works. 19:35 So you create these different sets of rows and 19:39 inside of the rows you fill up 12 columns. 19:43 So you'll notice that each set of these numbers adds up to 12. 19:46 So what this is saying right here is that small 19:51 sizes, there should be three different groups and the first one 19:53 should take up two columns, the second one should take 19:58 up four and the last will take up the remaining six. 20:01 At larger sizes it will be four, four and four so, each column will be evenly sized. 20:05 If we scroll down here, you can see that's 20:11 what that this looks like, as rendered HTML, so here 20:13 are those four columns, but if I resize it, 20:16 you'll see that those snap to that, what was it? 20:20 Two, yeah, two, four, and six. 20:24 And that's right there really the reason why I like 20:30 working foundation up front is because it's a responsive framework. 20:34 I really like the way that they do responsive design. 20:40 It's a mobile first frame work so in our particular case here, where maybe 20:43 we are designing a mobile web app that will, will then transfer to desktop. 20:48 Or you're just doing mobile first responsive web design in general. 20:55 This is a really smart way to work. 20:59 And we jump over here. 21:01 I've another page open where foundation is 21:04 self described as a rapid prototyping tool. 21:08 They say mockups don't tell a story, build a prototype in no time. 21:12 And they again, site the grid as something that's 21:17 really easy for creating these super fast prototypes. 21:22 And, I have a couple of examples here that you can look at, so. 21:29 Let's see if I can bring one of these up. 21:33 So for example, you can create a super quick website layout just like this. 21:37 Just by using foundation and not even writing any of your own styling. 21:45 And, you might be noticing some of these images here. 21:50 Let me inspect this element so you can see where this is coming from. 21:54 Let me copy this url. 22:03 Let's see. 22:05 I think I need to edit the HTML here to actually get it. 22:08 There we go. 22:12 [SOUND] So Foundation is using a website for these 22:13 quick prototypes called placehold.it. 22:19 And if we head over to Placehold.it, you'll see that you can 22:24 create these images just by sending some URL parameters. 22:30 So, here is an example, you can say placehold.it 22:36 and then /350x150 and it would create an image. 22:40 That looks just like this, you can also adjust the format. 22:46 You can add text. 22:51 You can change the color, size, and so on. 22:52 So this is another great tool when your building. 22:57 Let's see if I can get that back. 23:02 Oops. 23:04 When your building those quick prototypes, that allows you 23:05 to sort of fill in the blanks so to speak. 23:10 And add in, places that images should go. 23:12 So you can create these placeholders and create rapid grids or layouts that way. 23:17 So, that's pretty much it I basically just to recap, will 23:24 start out on pen and paper listing out all of the 23:29 features, listing out all of the pages, and sort of breaking 23:32 things up until I really know what I want to build. 23:36 Then I will move on to drawing out things on pen and paper, 23:40 just sort of blocking out the shapes in large areas of the layout. 23:44 Then I'll clean that up as a digital mock-up. 23:50 And a tool like Balsamiq Mockups or maybe even Illustrator 23:53 depending on what sort of detail I think I need. 23:56 And then I will try to skip Photoshop and move straight on to mocking things 24:00 up with HTML and CSS using your front end framework like, Foundation. 24:06 So that's pretty much my whole rapid prototyping process, and 24:11 if we have any questions now, which I'm sure we do. 24:16 >> We do. 24:20 >> We can hear from Chris Zabriskie, and I try to answer them for you. 24:21 >> [LAUGH] Yes. 24:25 At the question desk. 24:25 [COUGH], excuse me, [UNKNOWN] wants to know 24:27 if you think that prototyping websites is important 24:30 for any size website, including very small maybe, 24:33 mom and pop store kind of, client projects. 24:37 Or if just wire frames along for 24:41 something smaller would be something you'd recommend? 24:42 >> Definitely, so yes. 24:45 I think prototyping is really important for 24:47 almost any website, no matter how small. 24:51 I have my website up here, which is at nickpettit.com. 24:56 This is my own personal website. 25:01 Super duper simple, and it's just a really simple responsive site. 25:03 basically, when it's small it looks like that. 25:08 And I still made mock ups for this, even though it's just one page. 25:11 There's nothing here to navigate too. 25:16 But I think it's definitely an important step because 25:19 taking that little bit of time, even if it's just like ten minutes, to draw 25:24 something out on paper or a list out what you actually want 25:29 the site to be, will give you such a much more clear vision. 25:32 As to what you actually need to do, what the work involved really is. 25:37 Because it, if you don't do that small bit of planning, it's really 25:42 easy to fall into the trap of just following your habits that you've formed 25:46 over the past couple of projects and just sort of saying, well you know, 25:51 we probably need an about page, because people will want to know about us. 25:56 And we need a contact page cuz they need to contact us. 26:01 And then we need, you know, this other thing in the footer. 26:04 Maybe you don't need all that. 26:08 Maybe you can just accomplish the exact same 26:10 goal with just one page or just two pages. 26:13 Or maybe something completely different. 26:17 It's really important to do just some quick paper 26:20 mock ups because it could prevent you from basically just wasting a lot of time. 26:26 So. 26:32 >> Cool. 26:33 You knew it was coming. 26:33 The foundation versus bootstrap question. 26:36 But there's a very large discussion happening. 26:39 The people preferring bootstrap to foundation and back and forth. 26:41 Obviously foundation and bootstrap is sort of a 26:44 matter of personal taste more than anything else. 26:47 But in terms of prototyping you obviously went straight to foundation. 26:49 Do you prefer foundation for prototyping to bootstrap? 26:52 >> I've use both and honestly you can just kind of flip a coin. 26:56 I am pretty indifferent. 27:01 I have been using Foundation lately, but I've 27:04 also used Bootstrap plenty in the past as well. 27:08 I think, for me personally, it really just comes 27:12 down to what kind of mood I'm in that day. 27:16 But I think from a larger perspective, it's almost just personal 27:19 preference, maybe what other people are comfortable with on the project. 27:23 Because one thing to keep in mind is that when you're building 27:28 these rapid prototypes, they could very easily turn into the actual site. 27:33 There's no reason that you need to just completely throw 27:38 away that prototype you just built, if you can just sort 27:41 of fill in the blanks, and put in the text and 27:44 the images and different pieces of functionality that you might need. 27:47 So, I would just talk to maybe other stakeholders on the project, or 27:52 other people that are involved, and just see what they're most comfortable with. 27:57 Or, if you're the only person on the 28:01 project and you're just building it all by yourself. 28:03 Try 'em both and see which one you like the 28:05 best, I mean, it's, it's really, personal preference at this point. 28:08 I think they're both very similar, with just some very slight differences. 28:14 >> Definitely, people are going back and forth about it. 28:20 Joseph wants to know what the essentials are to great website design prototypes. 28:23 So, obviously it's going to vary from project to project, but 28:28 when you're talking about in general a design prototype for a website, 28:31 what are some of the key things you need to include, you 28:34 want to make sure that you're including with everything that you're doing? 28:37 What kind of information are you trying to get across? 28:41 >> Sure, well at each step when you go 28:43 from paper to digital mockup to HTML and CSS. 28:46 You're obviously including an increasing amount of detail. 28:50 So at that first sort of pen and paper stage, I 28:54 will try to just block out the major portions of the layout. 28:58 And that could be something as simple, like, okay, I know I'm gonna 29:03 have a header here, a sidebar here and this is my main content area. 29:08 And maybe there's some things inside that main content area. 29:13 so, it will be super rough, very broad and 29:18 by just sort of drawing out those shapes very 29:21 quickly, you can rearrange things and say, well what 29:25 if the sidebar was actually where the navigation lives. 29:29 Or what if we had no navigation at all and 29:33 it was just sort of this scrolling one page site. 29:36 You can very quickly draw out a lot of stuff. 29:40 And throw it away because you didn't spend that much time on it. 29:45 That's why I like starting with pen and paper. 29:49 Once I move to a digital mockup, I kind of am a little bit more settled on the 29:51 broad shape of things, and I know where the 29:56 different major pieces of the site are going to go. 29:59 And I will start to get a little bit more detailed and say, okay, 30:02 I know the navigation is going to be at the top of the website. 30:07 Here are the four or five different navigation items, and it's gonna be a 30:12 horizontal list or maybe it will be 30:18 a drop-down menu, like a little vertical list. 30:20 And that's the point where I'll start to kind 30:25 of get into some of those medium level details. 30:28 And when I actually get into the HTML and CSS that I finally do have to 30:33 settle and make a decision and say, okay, the navigation really is gonna go here. 30:39 It's gonna be a horizontal list and it's gonna be at the top, right in this spot. 30:45 And it's gonna be exactly this size. 30:49 And I need to fill it in with these images or these different pieces of text. 30:51 So that's a really good question, but yeah 30:57 each step I will increase the level of detail. 31:00 I don't flush it all out on pen and paper and then just create a mockup or you know, 31:03 a HTML, CSS prototype for the heck of it, its its, each step has a purpose. 31:10 >> [UNKNOWN] 31:17 would like to know if there are any free or open 31:20 source tools that are similar to Balsamiq that you would recommend. 31:23 Obviously Balsamiq is a paid product. 31:26 Is there anything you've used that's free or open source or at least 31:28 cheaper that you do recommend because you seem to really prefer Balsamiq though. 31:31 >> I do. 31:36 That's just because I've been using Balsamiq for years and years. 31:36 Like, for a long time 31:40 terms of free tools. 31:44 You know, I'm so set in my ways with Balsamiq, I honestly don't know. 31:45 Which is kinda bad because maybe there is a tool out there 31:51 that I am not aware of that would suit my needs slightly better. 31:53 But I'm sure people in the chat 31:57 are probably more knowledgeable about this than me. 32:02 I'm not really sure. 32:05 I haven't, I, I've seen a couple of things but nothing that 32:06 quite matches the ease of use and convenience of Balsamiq, where they 32:10 have these pre-built components you can just kind of drop in really 32:15 easily that are meant for web design, or meant for mobile mock ups. 32:19 >> We have some recommendations in the chat for pencil. 32:25 Tool called pencil. 32:29 >> I will have to check that out. 32:30 >> And let's see, [UNKNOWN] and I wanted to know if you have used sketch at all. 32:32 And if you have does that make you more inclined to 32:38 create more high fidelity mock ups with a tool like sketch? 32:40 Do I use sketch? 32:45 Not really. 32:47 I mean, I, I have tried out sketch a 32:49 little bit and I'm still on the fence about it. 32:53 I may start to work that into my own work flow a little bit more. 32:57 I know there's some people that just swear by it, they just love using Sketch. 33:00 I think, again, that's one of those things where it's personal preference. 33:05 It's whatever you feel most efficient with. 33:10 I've been using Balsamiq Mockups for years, so I'm very efficient with that. 33:13 And I know where everything is. 33:18 but, if you feel like you're totally new to this and you want 33:21 to give a bunch of different tools a try, then, yeah, try out sketch. 33:26 I mean, that could definitely lead to higher fidelity mock-ups. 33:29 I mean, it does have a lot more detail 33:35 obviously then Balsamiq Mockup so how's that for a non-answer? 33:37 >> [LAUGH] That's a good, that's a very good non-answer. 33:42 I appreciate it. 33:45 And that's our last question. 33:46 >> Oh, okay. 33:47 Well thanks everybody so much for tuning in. 33:48 If you wanna learn more about us you can check us out 33:53 at teamtreehouse.com which of course is the best way to learn web design. 33:55 Web development, mobile business and so much more. 33:59 I'm Nick Pettit, @nickrp on Twitter. 34:03 And we will see you real soon. 34:06