Creating Wireframe and Photoshop Mockups

[Creating Website Mockups with Nick Pettit] [Wireframes and Photoshop Mockups] 0:00 [Nick Pettit - @nickrp] Hey everybody, I'm Nick Pettit. 0:04 My Twitter handle is @nickrp, and I am a web design teacher here at Treehouse, 0:06 which of course is the best way to learn web design, web development, 0:12 mobile, business, and so much more. 0:16 You can check us out at TeamTreehouse.com, 0:19 which I have right here up on my screen. 0:22 We have a brand new site design today. It's pretty awesome, so be sure to check that out. 0:26 We have a brand new homepage here that looks absolutely lovely. 0:32 I'm really happy with the work that the dev and the design teams did on this. 0:37 It's super awesome. 0:43 If you click over here on the library and you're actually logged in to Treehouse, 0:45 you can see that it looks pretty different from the way it used to look before. 0:51 Actually, I'm not going to go home because I'm not logged in. 0:56 But on the library here you can filter by topic, 1:00 you can filter by content type, 1:04 and we have all sorts of new stuff in there. 1:07 So be sure to check that out if you haven't done so already. 1:10 Today we are going to be doing a little bit of wireframing. 1:15 Actually, we're going to be doing mockups, with wireframing being one type of mockup 1:20 that we're going to take a look at. 1:25 We're going to do wireframes, high-fidelity mockups in Photoshop, 1:27 and we're also going to mock up a couple of things in code, 1:32 and to do that I'm going to be using Bootstrap, which we've talked about on a previous edition of this livestream. 1:35 I'm going to hop into this app here called Balsamiq Mockups. 1:43 It is a paid app, but I believe they have a free trial 1:50 or you can try it out for 7 or 14 days or something like that. 1:54 But check it out. You can also just use pen and paper. 2:00 In fact, that's what I actually prefer to do. 2:04 But just for the purposes of this livestream today I'm going to use Balsamiq Mockups 2:08 so that you can see what I'm doing. 2:14 Usually when I'm creating a website I would list out some goals for the site, 2:17 some elements that I might want to see on the various pages, 2:23 and then I'd maybe break those up into different pages, into a site map 2:29 depending on the complexity of the site. 2:34 But we're not going to do that. 2:37 We're just going to pretend that we're building a website 2:39 that's going to be for a to-do list app. 2:42 A to-do list is kind of the classic example of a website that you make 2:47 or a web app that you make when you're introducing new concepts, 2:54 but we're actually going to be making a marketing site for a to-do list. 2:58 This could go horribly wrong. We'll see how it works out. 3:03 I haven't prepped for this at all, so we're going to just see where it goes. 3:07 When I design stuff, I like to design from the inside out 3:14 and I like to worry about the chrome and the navigation and the headers and all that stuff later. 3:19 First I know that I need some kind of big title here. 3:28 I'm just going to drag something out in Balsamiq Mockups. 3:34 I'm going to say The Only To-Do List App You'll Ever Need. 3:39 We'll put that text there. 3:52 I think that's a pretty good size. Let's see if I can break this down to the next line here. 3:56 Can I do that or do I actually need to have paragraph text? 4:03 I think I need to have paragraph text, so let me do that instead. 4:07 Okay. Cool. 4:14 I'm going to adjust the font size here 4:17 so that it looks more like a headline, something that you would really want to pay attention to. 4:21 I'm going to make that even bigger. 4:31 There we go. 4:34 Cool stuff. 4:37 Over here we might want to have some kind of image or maybe a video 4:41 of what this to-do list app will actually look like. 4:46 I actually would prefer to put a video here, 4:51 but for the purposes of our example, 4:56 we're just going to go ahead and maybe put a screenshot of the app. 5:00 Let's say that this is a mobile app. 5:07 So it's a mobile app for your phone, and we're going to have this iPhone menu here. 5:11 We don't actually have an example of what this to-do list app looks like, 5:22 but we'll just kind of mock this up. 5:29 This is what a checkmark looks like, and we have a label. 5:33 So we'll say My To-Dos. There we go. 5:43 Let's just copy a couple checkmarks to see what this ends up looking like. 5:51 Okay. That's not too bad. 5:58 We'll go ahead and put that in here. 6:05 This is just a wireframe, so it's going to be pretty simple. 6:08 We don't need a whole lot of detail here. 6:12 We just kind of need to get the point across 6:16 and basically lay out the major shapes that are going to be on the page. 6:19 Over here I'll have this large iPhone or this screenshot of the app. 6:25 I wonder if I can rotate this. It doesn't quite look like it. That's okay. 6:34 And over here we have our headline. 6:39 Just below that I think I want to put some additional text or maybe a call to action button 6:44 that says where you can get this app. 6:51 Let's do that call to action button first because I think that's more important. 6:55 We'll say Find it in the App Store. 7:00 Or maybe Visit the App Store. 7:11 We'll increase the font size on that a little bit. 7:19 How about Find us in the App Store? No. That's still too much text for a button. 7:24 Yeah. I'm just going to say Visit the App Store. That's good enough. Okay. 7:37 I'm going to increase the size of this button. 7:42 You'll notice when I'm doing this wireframe I'm not using any color. 7:43 That's very intentional because when you are creating wireframes 7:47 you just want to lay out the shapes on the page. 7:51 You want to get the composition right. 7:55 And that's what we're really focusing on here. 7:57 When we jump into Photoshop, we'll maybe do a little bit more of a high-fidelity mockup here 7:59 that's based on this layout. 8:07 Okay. I think this actually looks good for just a big attention-grabbing headline. 8:09 There's a screenshot of the app. You can kind of see what it looks like. 8:19 There's a pretty bold statement here, both literally and figuratively. 8:23 And then there's a call to action button. 8:29 Below that, further down the page, I would probably want a little bit more information 8:33 about maybe the features of the app. 8:38 So they're starting to get sold on this app, they scroll down the page, 8:41 they want to learn more information. 8:46 In fact, we do something pretty similar on the Treehouse homepage. 8:48 If we scroll down here, there's a big call to action button 8:52 and then there's more information about the features. 8:56 This is a very common way to do things. 9:01 I'm going to do something similar, not quite as robust as this, 9:04 but we'll just lay out maybe 3 features of this to-do list app. 9:09 Let's see. Can I find that under Media? Yeah. 9:16 There's these nice little pre-made icons in Balsamiq Mockups. 9:22 I love using these. It just has a bunch of really simple icons for really simple stuff. 9:27 What would the features of this app be? 9:36 Well, there's a checkmark. That's probably good enough at least to just take up space in the composition. 9:40 Oops. That's too small. Sorry. I'm adjusting the size here. 9:47 Okay. So we'll put that checkmark there. 9:52 That actually is too small. I'd like that to be a little larger. There we go. 9:55 I'll make some room down here. 10:00 There's our checkmark, and I'm going to duplicate that. 10:03 You'll notice Balsamiq has these nice little guides that are kind of like smart guides in Illustrator 10:08 if you're familiar with Illustrator at all. 10:15 These little guides come up and can help you align stuff more easily. 10:17 That's really nice when you're trying to build a mockup very quickly. 10:21 So there's a checkmark. Maybe there's something about dates in this to-do list app, so we'll put a clock. 10:25 And then let's duplicate that one more time. 10:35 And let's see here. Maybe you can share your to-dos with other people. 10:39 So maybe we can put some sort of a sharing icon here. 10:48 There's a picture of a person. There's a picture of multiple people. 10:55 I just don't like that icon in particular, so we'll go ahead and use this one here. 11:01 I'm going to select all these and make sure it's centered in this layout. 11:07 And then we're going to add some text below each one. 11:14 I want to add maybe a headline. Oops. There's my text. 11:19 Let's see. There's a subtitle. 11:25 We'll say Get Stuff Done. 11:33 Actually, we'll say Get 'Er Done. There we go. 11:42 And then under here we'll say Make Dates. 11:48 And then Share Stuff. 11:57 Again, we're just laying out the major elements on the page. 12:06 We don't have to get the copywriting perfect at this point. 12:09 That's something that you can tweak up until the last minute, 12:13 and it's very cheap to change. 12:15 What's expensive to change is the layout of the page and the major page elements. 12:18 So you want to make sure that you get those right up front in this wireframing stage 12:24 where it's really easy to change those larger elements. 12:32 Let's add a bit of paragraph text here. 12:35 Normally at this point I would type out a little bit more about each one of these features— 12:43 I'm actually going to move these apart a little bit more— 12:49 but I'm not going to do that today just in the interest of time. 12:53 I'm just going to use what's called some Lorem Ipsum text. 12:58 Let's just type Lorem Ipsum. 13:03 There's all sorts of Lorem Ipsum generators out there on the Internet. 13:07 You can use whatever one you want. 13:12 They all pretty much work the same. 13:15 I'm just going to copy some Lorem Ipsum text, 13:19 and this is just placeholder text. 13:22 It doesn't actually mean anything, and that's the intention of it. 13:25 You don't want it to be read, you just want it to take up space in the composition. 13:29 That's a little much for the Lorem Ipsum text. 13:36 Let me align this a little better. 13:41 Let's see. There we go. 13:44 That's a little more text than we need, so let's just cut this down. 13:46 That's still a little bit too much. 13:53 Okay. There we go. I think that's good. 13:59 I think I'm going to align that center. Yeah. That looks good. 14:01 I'm going to duplicate this a few times so that we have text under each one of these, 14:05 and I'm just going to add a little bit of variation to each one. 14:13 Let's see. 14:21 I'll just swap a few things here. 14:25 Okay. 14:36 There we go. 14:38 That will give us some sort of an idea of what different bodies of text might look like there. 14:39 I'm actually going to delete a little bit more here. 14:45 Cool. 14:49 So there we have our basic page. 14:52 I'm going to zoom out so we can see what's going on here. 14:55 There's a few more things design-wise that I might want to do. 15:00 I might want to cut this off. 15:04 I'm just using a little text element here. 15:08 I might want to cut off this iPhone and bring these elements up. 15:12 That's the kind of detail that I might add in Photoshop, though. 15:20 Let me bring those elements to the front. There we go. 15:25 Cool. That doesn't look too bad. 15:34 A real good test, and I love that Balsamiq Mockups has this, 15:36 to see whether or not this looks like a real website— 15:42 that's a technical term, by the way. No, it's not. Just kidding. 15:46 A good test is to add a browser window and just see if you can place all these elements 15:50 inside of a mock browser window and see if it still looks good. 15:59 Let's move these down. There we go. 16:05 I'll bring this in, crop this up. 16:10 Okay. 16:19 I think that looks good. I think we have our mockup here. 16:21 I'll just zoom back in. 16:27 Can I get a little more screen real estate? No, not quite. I'll zoom out so we can see it. 16:30 I'm pretty happy with that mockup. 16:37 There's obviously more that we could do with this. 16:40 We probably would need to put some sort of navigation up at the top here. 16:43 We might need to put in a logo. Let's go ahead and add some placeholder text there just so we know. 16:49 We'll say, To-Do App, and that would be the title of the to-do app. 17:00 We'll make that a little bit smaller. 17:06 But I think that's good. 17:11 At this point we have the composition, we know where all the major page elements are going to go, 17:13 and if we feel really confident about this vision for our website 17:21 we could just jump straight into code. 17:27 In fact, that is a perfectly legitimate route to take. 17:32 You don't always have to do a high-fidelity mockup in Photoshop, 17:37 and you don't have to know exactly what your website is going to look like before you start coding. 17:40 It helps in some instances, whereas in other instances it can just be kind of a waste of time. 17:46 If you really have a clear vision for the site and you make your quick wireframe 17:52 and you think, "Wow, I know exactly how I'm going to do that in Bootstrap," 17:57 then go ahead and go for it. 18:02 The thing that you want to keep in mind with high-fidelity mockups 18:06 is that you only want to use them when you need to fill in really key details 18:11 that might affect other parts of the site. 18:18 For example, if you're working with a pre-established brand 18:21 and you're building them a brand new website 18:26 and you have to stick to a particular color palette, 18:29 then maybe you have a couple of elements that are laid out next to one another 18:32 that once they're put in color might not have the same contrast 18:37 that you envisioned in your mind's eye. 18:42 That can be a real problem to the point where you actually have to change the composition of the website. 18:45 And at that point you would have to go back to your wireframes and say, 18:51 "Okay, what can we change in this composition to make these colors work together?" 18:54 And that's just one very specific example. 19:00 But let's go ahead and jump into Photoshop. 19:03 We'll talk a little bit more about that stuff. 19:06 I'm going to save this out as a new mockup. 19:09 I'll save this to my desktop with the very uncreative title, mockup. 19:12 I'm also going to save a PNG image, and that was saved to my desktop. Cool. 19:18 I'll open that up. 19:27 Oops. Let's see here. 19:30 There we go. Photoshop is being a little slow for some reason. 19:37 There we go. Cool. 19:42 So there's the mockup for my site. 19:44 We've got a little extra white space here, I think because those paragraphs were a bit too tall. 19:47 I'm just going to keep this in here for my own reference. 19:53 I'm not going to use this for any other reason. 19:57 I'm just going to keep it on the side here so that I know what I'm working towards. 20:02 Let's create a new mockup. 20:08 I'm going to create this at 2800x1800 20:13 because that is the resolution of the Retina display that I'm using. 20:25 It might be at a slightly different resolution because it is plugged in so that you guys can see it, 20:31 but we'll just go with that. It shouldn't affect the outcome. 20:37 I'm going to draw out a few guides. 20:41 One thing I should point out at this point is that you can definitely do this type of thing 20:47 in another program, like Illustrator, for example. 20:54 I need to actually change a preference here. 20:59 I think it's showing me inches when I want to actually see— 21:03 Oh, no. It's showing me points. That's weird. 21:11 I'd much rather see pixels. There we go. Okay. Awesome. 21:15 Anyway, you could go ahead and do this in Illustrator 21:21 if that's a program that you feel more comfortable in. 21:25 But I just enjoy using Photoshop. I've been using it for years and I'm a little bit more efficient there. 21:28 First we need an image of an iPhone. 21:36 Let's grab that imagery up front. 21:40 I'm going to go to Apple.com. 21:44 I think if I just type press, let's see. Hey, there's some apple presses on Amazon. That's lovely. 21:48 PR Info. 21:55 If I go to Product Images, I should be able to grab an image 21:57 that's fairly high resolution of the new iPhone. 22:01 I'll download the gold iPhone because we know that one is the best. 22:05 It's downloading in a zip. 22:11 There we go. I have my image of my iPhone. 22:16 I'm going to drag that into Photoshop. 22:18 There we go. And I'll just crop off what I need here. 22:23 Cool. I'm going to trim this so I can trim out the— 22:30 Oops. That's the back of the iPhone. Excuse me. There we go. 22:36 I'm going to trim this. Cool. 22:41 Now I can just drag this into my document. 22:46 All right. 22:56 I'm going to convert this to a Smart Object in case I need to actually edit it later on. 22:57 I'll just keep it right there for now. 23:08 Okay. I'm going to save this document before I get too much further, again using the very creative title mockup.psd. 23:13 Now I want to start adding in some of this text. 23:24 I'll type in—gosh, what did I say here? 23:28 The Only To-Do List App You'll Ever Need. Okay. 23:33 Let's try that again. 23:36 The Only To-Do List App You'll Ever Need. 23:39 As you may have noticed, that text is very, very tiny. 23:48 Let's go ahead and fix that. 23:51 I want this text to be much larger. There we go. 23:55 Actually, I want it even larger than that. 24:03 Let's do 200 points and see how big that is. That's a little huge. Maybe 150. 24:08 120? Or maybe 100. Yeah. That's a little better. Okay. 24:13 I had the line break at the words You'll Ever Need. Okay. 24:24 All right. 24:30 There's our text. 24:33 One of the major elements here is this block down at the bottom 24:35 where the phone is getting cut off. 24:42 So I'm going to add that in now just so I can place some of the other elements appropriately. 24:45 To do that, I'm just going to create a shape using the Rectangle tool. 24:50 I'll just do something like that. 25:00 This is where you can start making those more detailed decisions about color. 25:04 Presumably there would be some sort of color scheme for this app. 25:11 Maybe that's already decided; maybe this is the phase that you're deciding it. 25:18 You would want to spend a lot of time on your colors, 25:24 but for now I'm just going to pick this nice blue color. 25:28 I think that will look good. 25:34 What is this that keeps coming up? 25:36 I just hit Command-H to hide my guides. 25:39 Oh, okay. It's asking if I want to hide extras or guides. 25:43 Okay. There we go. This is a new user account, so there's a couple things that are still fresh here. 25:46 All right. So I have our iPhone. Let's do the responsible thing and label our layers here. 25:52 I'm going to call this Overlay. 26:03 Let's adjust this a little bit so that the right things are showing. 26:06 I want this to be in the correct place. 26:14 I want some white space at the top just to kind of give this page a little bit more of a dramatic look. 26:18 One thing I didn't do that I should have done at the beginning 26:25 is draw out some guides on the left and right sides 26:30 so I kind of know the bounds of the page. 26:35 I'm going to do that at 1280 here. 26:38 Let's see if I can do that. 26:43 There's probably a lot of people yelling at me about how to place guides more accurately. 26:48 I know. There we go. Okay. Cool. 26:54 Let's place a guide there and place a guide there. 26:59 Okie-dokie. 27:06 We'll zoom back out. 27:10 Just to give you an idea of the resolution that we're working at here, 27:13 this is actually full res, so this is a fairly high-resolution document that I'm working with. 27:16 And again, that's for Retina displays 27:24 just so that I can get an idea of what the site should look like at full res. 27:28 After adding those guides, I can see that these page elements are still a little bit large. 27:32 For this image on the right, we could get away with it actually being cut off of this safe area here. 27:37 Maybe we only want to show a small part of the to-do interface. 27:47 But I'm actually going to adjust the size of that there. 27:52 Let's see. Show my transform controls. 27:58 I actually don't think this should be cut off. 28:01 There we go. 28:05 And now looking at this, this text is actually too large. 28:10 So we need to make that smaller. 28:13 It looks like we might have been better off at the beginning there. Okay. 28:17 Cool. 28:23 We have a lot of white space at the top, so let's bring all of these elements up. 28:27 That's good. 28:34 I'm going to hide my guides just so I can see what the composition looks like without those. 28:36 I think that's looking nice. 28:41 I like where this is going. 28:45 I'm going to take these things away from the edges of the page. 28:47 All right. Cool. 28:55 Now we need to add this button. 28:57 Let's throw that in there. 29:01 To do that, I'm going to use my Shape tool. 29:06 I'm trying to decide if I want this to be a rectangle 29:12 or if I actually want this to be a rounded rectangle. 29:15 I think I'm going to go with rounded 29:19 and just have very slight corners there. 29:22 Actually, before I do that, I should type out the text that's going to be inside there. 29:27 Let's first say, Visit the App Store. 29:32 I want to make that smaller, so maybe about there. That's good. 29:42 And now I can confidently draw that shape around it. 29:53 I'll use the space bar just to adjust the positioning of it. 29:59 Okay. 30:06 I've rearranged the layers here, but you can't see the text because it's the same color as the button. 30:09 So we need to make a couple of adjustments. 30:15 I want this text to be white so that it's higher contrast than some of the other page elements. 30:19 And then I'm going to make this rectangle maybe a nice bright saturated color. 30:26 We could go with that same blue that we have down here, 30:37 or we could go with just maybe some other color that makes this stand out, 30:43 maybe like a nice green color that's at a similar level of saturation. 30:47 Let's go ahead and do that. 30:57 I think that looks good. 30:59 I want to make this look like more of a button, 31:03 so I'm going to add a slight drop shadow to this. 31:07 Let's do that. Let's see. 31:13 Where did my drop shadows go? I haven't used drop shadows in so long. 31:19 Ah! There we are. Okay. 31:22 That drop shadow looks pretty ugly, so let's make it look better. 31:27 I want this to be a normal blend mode, 31:34 and I want the opacity to be 100%. 31:37 I'm going to grab this same color and I'm just going to bring down the color a little bit there. 31:41 Cool. 31:49 I think that looks nice. 31:51 Let's look at our guides again just to see where everything is at. 31:54 I still think we have too much white space at the top now. 31:58 So let's move everything up. 32:01 Okay. 32:07 Cool. That's what our composition is looking like right now. 32:12 That overlay could stand to come up a little more too. 32:18 Okay. 32:25 Now we're ready to design those features, 32:31 these 3 things that go down at the bottom, just below the iPhone and the call to action button. 32:36 We want a checkmark, a clock, and a person. 32:43 Let's just see if Photoshop has those actually built in. 32:47 Normally you'd want to design your own iconography here, 32:52 but in the interest of time we are going to take a couple little shortcuts. 32:56 Let's see what shapes we have. 33:02 Well, we've got a checkmark. 33:05 It looks like I don't have a whole lot of other shapes here, 33:08 so we may have to actually get a little creative. 33:11 That's okay. I'll use this checkmark here. 33:16 I want to color this white so it stands out against that blue background. 33:21 Then I'm going to design the rest of this element, 33:34 and then we'll copy that 2 times and make the rest of them. 33:38 Let's add the text. The text I think we said Get 'Er Done. Yeah. Okay. 33:43 Get 'Er Done. All right. 33:54 We're going to get stuff done with this to-do app. 34:00 Cool. I'm going to increase the font size of that a bit and then we'll add some paragraph text down here. 34:02 And again, we're just going to use Lorem Ipsum text, and for that I'm going to go to Balsamiq Mockups 34:12 and just copy the exact text that I had. 34:17 This needs to be paragraph text, so I think that's in Layer, Text. Is it? 34:21 Oh boy. 34:30 There's a Convert to Paragraph Text somewhere here. Ah! In Type. Okay. 34:32 Now we can drag this out and actually adjust the bounds of this paragraph. 34:42 That looks okay. 34:53 We'll continue adjusting this. We need to decrease the font size certainly. 34:56 Okay. 35:02 I think that's starting to come together. 35:07 Once again this paragraph is a little bit too tall. 35:12 So let's decrease the size of that there. 35:16 We need all of these elements to be lined up—this icon here, this title, and this paragraph text. 35:23 So to do that, I'm just going to select all these elements, 35:33 come up at the top here and say Align Horizontal Centers. 35:35 And then I can go ahead and group those elements. 35:40 I'll call this Feature 1. 35:42 We'll put that over here on the left side. 35:48 And then I'm going to duplicate each one of these. 35:53 And oh, hey, look at that. We're already running into a little bit of a problem. 35:58 Our paragraphs are too wide. 36:03 That's why when you have elements like this that are very similar 36:05 you want to just create the first one because then you can modify it and duplicate it. 36:12 Because once you've created all 3 of them, you have to make those changes to all 3 elements. 36:17 In this case all we need to do is just decrease the width of that paragraph a little bit. 36:23 If we were doing this in CSS, we'd actually be increasing the padding. 36:29 I think that font size is still a little too large, 36:35 so I'm going to bump it down a bit more. 36:37 There we go. 36:43 Let's do 26. Cool. 36:46 Okay. 36:49 Now we can duplicate this. 36:54 Actually, one more thing I wanted to do here was move this down just a little bit. 36:59 Does that look good? Yeah, it looks fine. 37:05 Let's move that there. 37:12 And let's move that here. 37:14 Once again we can select all these elements and space them appropriately. 37:18 We'll come up here and say Distribute Horizontal Centers 37:25 and that will evenly distribute each one of these, 37:29 and then we can, with all of them selected, just move it to the center line. 37:31 And so now everything is centered. 37:35 Now we just need to adjust the things that are different. 37:39 On these other 2 we said Make Dates and Share Stuff. 37:43 So we'll change this text here to Make Dates and Share Stuff. 37:49 And actually, I wanted that text to be centered, 37:56 so we need to select each one of those and center it. 38:00 That's going to throw things off. 38:06 See? This is exactly why you want to just create a first one and then duplicate it. 38:08 And that's okay. I can fix this pretty quick. 38:13 So let's do that, do that, and do that. 38:18 And now we just need to make sure that these are all lined up accordingly. Okay. 38:28 There we go. That's the one I wanted. 38:37 And then that one. 38:41 And then this last one. 38:43 It actually looks like they're already all lined up, but it just makes me feel better doing that. 38:45 Okay. 38:49 Let's label all these and adjust the things that are different. 38:51 This is Feature 2. Move that down. 38:54 And this is Feature 3. We'll move that down. 39:00 Yep, that's Feature 3. 39:04 Feature 3 is supposed to be Share Stuff. 39:08 Like I said, in the interest of time we're just going to pick one of these icons and go with it. 39:16 Normally you'd want to design your own custom iconography here 39:22 or use something that's kosher and okay to use in terms of copyright. 39:27 I'm going to adjust the text on that one. Oops. I actually deleted the wrong one there. 39:36 There we go. 39:46 Okay. 39:50 One thing that I should point out while I'm doing this 39:52 is how much longer it actually takes to do something in Photoshop 39:57 than it does to do something in a wireframe. 40:01 You'll notice that I'm kind of struggling with the software here a little bit more 40:04 than I would if I were just doing this as a very simple wireframe. 40:08 It's more expensive to make changes the higher fidelity you go. 40:14 So the detail here is greater, and that means that there's going to be more things to customize, 40:19 more things that I need to make sure are colored correctly, 40:25 more things that I need to line up and all that good stuff. 40:29 So there we have a nice high-fidelity mockup. 40:36 Again, there's a couple more things that I'd want to do to this 40:40 if this were really going to go into production. 40:44 I'd actually want to have a real screenshot of the app, not just the home screen of an iPhone, 40:47 and I'd want to have my own iconography. 40:53 And at this stage of design I would probably spend a little bit more time on the copywriting. 40:56 I'd want to make sure that I got the copywriting not perfect 41:03 but closer to what I would actually want it to be. 41:08 I'm trying to keep this workshop around an hour, and we're 40 minutes in. 41:12 I've spent around 20 minutes or 10 minutes on my wireframe 41:21 and then the second third on this Photoshop document, 41:25 and now I am going to jump into some code. 41:30 We're probably not going to get quite as far as we did with Photoshop, 41:34 but we'll see what we can do. 41:40 I'm going to save this mockup. 41:42 Just for the sake of comparison, let's look at these 2 side by side 41:45 and just kind of see where we ended up. 41:52 That's not too bad. 41:55 Hopefully this gives you an idea of what it can look like 41:57 when you're making the leap from a wireframe to a higher-fidelity mockup. 42:02 A lot of things are going to change. 42:06 The spacing on certain elements might change a little bit, and that's perfectly okay. 42:08 As long as you're not completely redesigning in a high-fidelity mockup, you should be okay. 42:13 So let's jump into the code. 42:19 I'm going to go to Bootstrap. 42:21 If you're not familiar with Bootstrap, it's basically just a front-end framework 42:26 that's a collection of CSS and JavaScript with all sorts of useful components 42:31 that can help you make your website faster. 42:36 There's a couple of different ways to install it. 42:39 You can download it or you can use their CDN, or content delivery network, 42:41 to just load it in off of someone else's servers. 42:47 So that's lovely. 42:51 I'm going to go ahead and do that. 42:53 In order to do that, though, I'm actually going to start out with one of their examples here. 42:55 This example isn't terribly far off from what I want to try to accomplish. 43:02 We don't need the carousel element here, but let me just click on this 43:08 so you can kind of get an idea. 43:11 They have these 3 columns laid out, and that's pretty similar to what I want to do. 43:13 They also have this cut-off here, which is also not too far away from what I want to get done. 43:21 I'm going to start out with this example here. 43:29 Let me just view the source on this. 43:34 I'm going to grab all the source code and then I'm going to open up Sublime Text2, 43:39 which is a text editor, and I'm just going to start a new document. 43:48 I'll save this to my desktop once again. 43:55 You shouldn't save everything to your desktop. 43:58 You should have a real dev folder. 44:01 But I'm just doing that for the sake of time today. 44:02 I'm going to open this up in the browser, but when I do, 44:08 a lot of things are going to be broken. 44:11 It's not loading up any of the CSS and JavaScript. 44:15 That's because we need to load it off of a CDN. 44:17 So let's go ahead and grab those CDN links. 44:21 This is for the CSS, so I'm going to get that first. 44:29 It looks like the CSS is right here. 44:36 I need to add an http:// here because I'm not actually going to load this 44:41 the way it's having it load in there. 44:47 There we go. Cool. 44:50 I'm not going to use any of this stuff, again, for the sake of time. 44:56 We don't need the custom styles for the carousel because we're not going to use it. 45:01 In fact, let's just get rid of that carousel completely right now. 45:08 Here's the carousel. It looks like that's where it starts anyway. 45:14 Let's see. Can I collapse this? Hey, there we go. Okay. 45:18 We're just going to get rid of that carousel completely. 45:25 I'm going to put a div there. 45:28 I'm just going to say HEADER GOES HERE 45:30 and that's where we're going to put our iPhone and stuff like that. 45:36 And then we have the rest of that marketing copy. 45:40 So all of those features look like they come in later on. 45:50 And then down here we have a couple of other CDN links that we need to copy in. 45:56 So we're going to copy Bootstrap, and we also need to get jQuery. 46:01 I wonder if— No, jQuery wouldn't be hosted off of that CDN. 46:17 Let me go to HTML5 Boilerplate and let me just grab the link that they're using for jQuery. 46:23 I can never remember it. 46:33 Let's see here. 46:34 jQuery. Where is it? There it is. Okay. 46:40 This is being hosted by Google, so it should be pretty reliable. 46:45 Same thing there. 46:54 I don't think we need this JavaScript file. 46:58 It's going to 404 right now, but let's just refresh and see where we're at. 47:01 Okay. Cool. This is pretty much what I thought this was going to look like. 47:06 We don't need all of these features down here because we're not going to use them. 47:09 So let me go ahead and remove that. 47:15 Let's see. END THE FEATURETTES. Cool. Here's the START THE FEATURETTES. 47:18 Let's delete that. 47:24 So far, so good. 47:26 We're not going to bother with this footer for now, 47:27 and we also don't need this header, or this navigation, I should say. 47:30 Let's see how far we get with that. 47:37 All right. Not too bad. 47:43 Now we need to put in our styling. 47:50 I'm moving fairly quickly here, so I do apologize if this is a little bit confusing. 47:55 We did a workshop on Bootstrap pretty recently, 48:02 so you may want to dig in to Treehouse and look up that workshop 48:05 if you're not familiar with Bootstrap at all because we talk about it quite a lot there. 48:12 We need to do a couple of things here. 48:22 Let me just switch back to Photoshop and kind of figure out what we need. 48:24 This marketing copy says The Only To-Do List App You'll Ever Need. 48:31 I'm going to just copy that and paste it into this div here, 48:36 and this is going to be a container in Bootstrap. 48:45 I'm going to create a first-level headline that says The Only To-Do List App You'll Ever Need 48:50 and put a little line break there. Cool. There we go. 48:57 And I want to create a button. 49:01 Bootstrap has some really great buttons already pre-made, 49:03 so let me jump into their CSS here and let me just grab this default button. 49:06 Let me see where that gets us. 49:20 Okay. It looks like we have a button here, just as you'd expect. 49:23 I actually don't need those buttons below each one of those bits of marketing copy, 49:28 so I'm going to remove those right now before I forget. 49:33 Let's refresh the page and see what that looks like. Cool. 49:37 You'll notice we have some broken images here. We'll fix those in just a moment. 49:40 Let's try to make this button look like our button in Photoshop. 49:48 I'm going to grab the colors that we used. Oops. 49:52 I'm going to select my Eyedropper tool. Oh. I didn't want to do that. That's weird. 49:58 I've never seen it do that before. 50:05 There is our hexadecimal value for this particular color. That's wonderful. 50:09 I'm going to switch over here. 50:17 This is just kind of a quick mockup. 50:20 Normally I would do this in a separate stylesheet, 50:23 but I'm just going to open up a style element here and just prototype this quickly. 50:25 The class here is button, but we want to add our own class. 50:38 We're going to call this call to action button. 50:43 And we'll select that. 50:48 We want to change the background of that to that green color. 50:55 Let's see. That would be background. Oops. I don't have that copied anymore. 51:01 Okay. There we go. 51:07 Cool. 51:12 Let's see if that got us there. Great. 51:13 The color on that button should be white. 51:16 I don't want any kind of border on it. 51:23 The roundness actually looks good, so the rounded corners or the border radii looks just fine. 51:26 I'd like the font to be bold. 51:36 And then I want to add that drop shadow, so I'm going to say box-shadow. 51:39 And for the x offset we'll say 0 pixels; for the y offset we'll say about 3 pixels. 51:46 I think that's about how large it was in our mockup. 51:54 The blur radius is going to be 0. 51:58 We want this to be a nice sharp shadow, so we don't want it to be blurred at all. 52:01 And then we need to set the color. 52:06 Let me grab this color, that slightly darker green color, 52:09 and we'll put that there. 52:14 Let's see what that looks like. Hey, look at that. 52:16 It's starting to get pretty close here. 52:19 I also want to change the hover state on that. 52:21 It's a minor detail. Hover. 52:24 Let's see. What do I want the hover state for that to look like? 52:29 I'm not really sure. We're going to omit that in this example. 52:34 We'll just style that exactly the same. Yeah, that's fine. 52:38 And then the font size is still a little smaller, 52:45 so we'll increase that to 1.2 ems—actually 1.5. Cool. 52:47 And then we need to change the actual text. It says Visit the App Store. 52:55 I'd actually like to remove that bolding there. 53:02 I just wanted to increase the font size. Oops. Refresh. 53:05 Cool. All right. It looks good. 53:09 That's close enough to what we were trying to accomplish. 53:12 Now we need to add in this iPhone over here. 53:18 I think the font size on this h1 is actually a little small, if you can believe that. 53:25 I know it looks huge, but I want it to be a little larger even. 53:30 So let's put a class on here that says "headline." 53:35 And we'll say font-size: 2 ems. See how large that is. 53:45 Nope. I guess it was already larger than that. 53:52 That's a little too big. 3.5 maybe? 53:56 That's not bad. 54:01 I think 3.2 might get us there. Okay. 54:02 Let me just remove that and see if that made it larger than it was. 54:06 Yeah, it did. Okay. 54:10 I want to put a little bit of margin on the bottom, maybe like 20 pixels, 54:12 just to give it some separation from that button. 54:18 Let's do 30. There we go. 54:21 Okay. 54:24 I'm going to change this to a header element because that's essentially what it is. 54:28 And on this header I'm going to add some space. 54:33 We'll say margin-bottom: 100 pixels. 54:43 Yeah. There we go. 54:48 Actually, I want this to be padding because— 54:51 Well, hmm. 54:53 How would that work? Because I'm thinking about how we're going to add this background image. 54:56 All right. It looks fine. 55:00 Now let's jump into our Photoshop mockup. 55:03 This is where a high-fidelity mockup is really, really useful 55:07 because I can just grab this background image here 55:11 and just drop it straight into my site, 55:15 and that's going to save me a lot of time 55:18 because if I hadn't created this high-fidelity mockup, 55:20 I would have needed to create this imagery anyway. 55:23 That's pretty nice. 55:27 I'm just selecting this image, and I'm going to hide some of the layers that I don't need. 55:29 In this case that would be all that stuff there. 55:39 I can actually get a little bit more optimized here. 55:46 There's more image optimization I could be doing here. 55:50 But we're not going to crop this in perfectly. 55:57 We'll just get it good enough. 55:59 Okay. 56:02 And now I'm going to crop that out and I'm going to save it for Web 56:04 and let's see how bad a 24-bit PNG would be. 56:12 A little bit large for my taste. 56:16 That file size is a bit high, but that's okay. 56:20 This is a marketing splash page. We want this to look super awesome. 56:23 So we're going to go ahead and go with that. 56:28 I'm going to save this as iphone.png and I'm just going to put it on my desktop 56:32 because that's where my index.html file is. 56:40 Let's set that as the background. 56:44 We want the background to be pure white, 56:54 but we also want this image here. 56:56 So let's say url, and it's going to be 'iphone.png,' 56:59 and we're going to set it bottom right, 57:05 and we don't want it to repeat. 57:13 That should get us there, I think. 57:17 Wow! That's super huge. 57:20 Let's say background-size 50% because remember, these are Retina-sized images 57:22 and we don't need them that large. 57:29 Oops. That doesn't look good. 57:32 There we go. 57:35 Let me try making this even smaller here. Maybe I did my math wrong. 57:36 If that's the case, I apologize. 57:40 Yeah, because you know what? 57:44 Let me back out of this here a little bit, do a few undos. Oops. 57:49 We actually need this to be the same height in the browser. 57:59 That's a height of 632 pixels. 58:04 Let's just try setting an explicit height on our header. 58:07 Let me go in here and just see how tall this is. 58:12 640x589. Sure. 58:18 We'll say 589. 58:23 So height: 589 pixels. 58:26 And I think some Retina weirdness will occur here. Yeah. 58:30 So we actually want it to be half that size. 58:36 So 589 divided by 2. We'll round up and say 295. 58:38 So height should be 295 and then the background size is 50%. 58:45 Hmm. That's still not doing what I'm expecting it to do there. 58:53 Oh, because it's 50% of the full width. Okay. 58:59 We will cheat a little bit. We won't worry about that today. 59:04 We'll just say that. Can I get that smaller? Yes, I can. 59:14 That's too small. 59:22 40. There we go. 59:24 Okay. 59:27 I could position this a little bit more. 59:28 If I did something like this, it should position it from the left side. Oops. 59:32 Man! I'm having trouble with positioning today. 59:41 Okay. 59:45 I'm just going to guesstimate here. 59:49 That's fine. This is just a prototype. There we go. 59:51 And now we need to move this text over here on the left down a little bit. 59:55 I'm going to put some padding up at the top. 1:00:01 Oh, you know what? That might have been the problem with the positioning is that I had the padding there too. 1:00:09 Let's say padding on the top and bottom will be 100 pixels and left and right will be none. 1:00:15 I'll subtract 100 from the height and that should get us there. 1:00:21 We're getting pretty close here. 1:00:34 I'm actually going to leave it right there because I want to leave some time for Q&A. 1:00:36 We're just at exactly an hour. 1:00:41 But if I were to continue and be a little bit more precise with my pixel measurements, 1:00:44 you can kind of see how this would come together in the browser fairly quickly 1:00:50 using just a little bit of code. 1:00:55 You can create websites pretty fast with Bootstrap. 1:00:58 Or at the very least you can prototype them. 1:01:02 Wow. We have a whole bunch of questions in chat. 1:01:05 That is wonderful. That's what I like to see. I love answering questions from you guys. 1:01:10 The first question I have here is from Kevin and Kevin asks, 1:01:15 "How would you have done things differently if you rapid prototyped in the browser 1:01:20 instead of how you rapid prototyped today if you practice it—" Okay. 1:01:25 If I were to rapidly prototype in the browser, I would have to have a pretty clear vision 1:01:34 of what it is that I'm trying to accomplish, and that's usually pretty rare. 1:01:40 If you do think that you have an absolutely clear vision of what you want your page to look like, 1:01:46 then you should still at least spend 5 or 10 minutes just doing a quick sketch on paper 1:01:52 just to make sure that it checks out 1:02:00 because oftentimes what will happen is you'll end up discovering things 1:02:04 that you really didn't think were going to be problems 1:02:08 but they end up becoming major issues. 1:02:11 They end up becoming issues to the point where you actually need to adjust the composition completely. 1:02:15 The thing there is that you just always want to remember 1:02:24 your mind is going to idealize things quite a lot, 1:02:26 and as soon as you commit things to paper and make them real, 1:02:30 that's when you start to see the problems that you didn't even know were there. 1:02:33 So I do often rapidly prototype things in the browser 1:02:38 but not without doing some sort of quick thumbnail sketch first 1:02:45 just so I at least know where I'm going. 1:02:48 I do skip Photoshop a lot. 1:02:51 If it's not going to be this really nice, polished marketing page or something like that, 1:02:53 I will just jump straight into Bootstrap 1:02:57 or whatever front-end framework I'm using that day and go for it. 1:03:01 Next question says, "Before doing your actual mockup, 1:03:09 where do you find inspiration for your design?" 1:03:14 "Do you have any process you normally follow?" 1:03:17 "Do you recommend doing mockups even if you're using Webflow or Macaw?" 1:03:19 Okay, so there's like 3 questions there. 1:03:25 Inspiration for design. Oh my gosh. 1:03:29 I mean, that's such a huge question. 1:03:32 My inspiration just comes from all over the place. 1:03:36 I look at a lot of art, I watch a ton of movies, I play a ton of video games. 1:03:39 It comes from everywhere. 1:03:46 So that's a more difficult question to answer 1:03:50 because even if I could talk about that for an entire hour, 1:03:54 I still don't know if I'd be able to give you a very clear answer. 1:03:58 Inspiration is a very fuzzy thing, and it can come from anywhere. 1:04:01 So I think the thing there is just to always keep your eyes open. 1:04:06 Do I have any process that I normally follow? Yeah. 1:04:10 Like I said, I'll normally do a couple of quick wireframes, 1:04:16 and that's the most exciting part of the project 1:04:20 because that's where your ideas start to become real 1:04:24 and you see what they would actually look like and feel like, 1:04:28 and you can start to visualize them a little bit better than you can in your mind. 1:04:31 I will spend a lot of time wireframing unless I have a really clear idea of what I'm doing. 1:04:35 Then I'll just do one quick wireframe and jump right into it. 1:04:42 But after that I will oftentimes just jump straight into the browser. 1:04:45 I won't even do a Photoshop mockup. 1:04:55 You can do these steps in any order that you want. 1:04:57 This is not some sort of de facto process that I'm teaching you that everybody else does. 1:05:01 This is just what I like to do. 1:05:08 If you feel more comfortable getting into Bootstrap, 1:05:12 maybe doing a rapid prototype and then going into wireframes 1:05:15 and going into Photoshop, you could totally do that. 1:05:21 You can omit any of these steps. 1:05:24 I mean, it's really up to you. 1:05:26 It's whatever you feel most comfortable with 1:05:29 and whatever you're going to be most efficient with. 1:05:31 Do I recommend doing mockups even if using Macaw or Webflow? Yeah, I think so. 1:05:34 I would still do some sort of wireframe, at least personally. 1:05:41 If you feel comfortable not doing that, then, like I said, that's totally up to you. 1:05:48 Next question says, "What Photoshop shortcut are you using to move the layers around?" 1:05:55 "That's a neat trick." Oh my gosh. 1:06:01 I've been using Photoshop for so long I don't know if I can even verbalize 1:06:03 what I'm doing when I'm moving layers around. 1:06:08 I think it's just muscle memory at this point for me. 1:06:11 I think it's Command-Shift-Bracket will move things around. 1:06:14 Is that doing stuff? Yeah. That's doing something. 1:06:19 But I don't think that's quite what you're referring to. 1:06:23 There's so many Photoshop shortcuts. 1:06:29 We do have a really great Photoshop course on Treehouse. 1:06:31 So if you're a Treehouse member, then you should definitely be sure to check that out. 1:06:35 We talk about all sorts of shortcuts in that. 1:06:40 Next question says, "Why were you working in a large Photoshop document 1:06:43 instead of a canvas sized to the exact size of the browser?" 1:06:47 I was actually working in this pretty large Photoshop document, 1:06:54 but that's for Retina displays. 1:07:01 So this display that I'm working on is 2800x1800, I think. 1:07:03 I'm 90% sure on that. 1:07:11 It's a fairly high-resolution display, 1:07:15 so technically it is actually the exact size of the browser window. 1:07:17 There's a big difference between actual pixels and what are called virtual pixels. 1:07:23 So really, it's a little bit complex to explain, 1:07:29 but if I drag out the width here of 1280, 1:07:34 that's a little closer to what would actually end up in the browser. 1:07:39 But yeah, I'm just using that large canvas because of Retina display 1:07:45 so I can save out these 2x images and use them appropriately, 1:07:50 which I did not do today because I had that positioning stuff going on. 1:07:55 But normally, yeah, I would make sure that I fix that if given more time. 1:08:00 Next question says, "Does the Aesthetic Foundations course at Treehouse 1:08:07 cover color saturation like you discussed earlier?" 1:08:13 We actually have a brand new course at Treehouse called Design Foundations 1:08:18 that you should check out. 1:08:23 Aesthetic Foundations is really good, but Design Foundations is kind of the next version of that 1:08:25 and you should definitely check that out. 1:08:31 We talk about all sorts of stuff. 1:08:33 I'm not sure if it gets into color saturation specifically, 1:08:37 but I'm pretty sure it does. 1:08:41 Chris Zabriskie is nodding his head at me here, so yes. 1:08:44 Next question says, "Would you call yourself a designer or a developer?" 1:08:48 I self-identify as a web designer, 1:08:54 but that doesn't mean I don't know how to do any kind of development. 1:08:59 I've written plenty of JavaScript, I've made plenty of Rails apps on my own, 1:09:03 I've done lots of PHP coding. 1:09:08 That's actually where I got my start in web stuff. 1:09:11 I wanted to do web design, but I didn't have anybody at the time 1:09:15 that I knew that I could work with. 1:09:21 This was before I had met anybody else in the web industry. 1:09:24 So out of necessity, I learned PHP because I wanted to make cool websites 1:09:28 and I knew that I needed some sort of back end 1:09:33 to communicate with the database and all that sort of stuff. 1:09:38 So I'm a little bit of both, but I feel like I self-identify more as a designer personally. 1:09:41 Next question says, "Do you normally use a MacBook when working on projects, 1:09:54 or do you recommend a multi-monitor setup for designers and devs?" 1:09:58 I don't think that really matters a whole lot. 1:10:02 It's whatever you're most efficient with, whatever you feel most comfortable with. 1:10:06 I actually don't use a multi-monitor setup. 1:10:13 I used to for many, many years, 1:10:17 but I just really like these new Retina displays Apple has been putting out 1:10:20 or these higher-resolution displays, 1:10:26 and I've been working almost exclusively on that without hooking up to an external monitor at all. 1:10:28 That's just personal preference, though, and it shouldn't really affect your design work a whole lot. 1:10:34 Next question says, "Should you use pixels as a unit of measurement 1:10:41 when choosing a font size in CSS?" 1:10:46 That is such a good question. 1:10:49 It used to be the case that, yeah, a lot of people would use pixels, 1:10:51 which are what are called a fixed unit of measurement, 1:10:55 to set their font sizes. 1:10:59 But nowadays best practice is to use a unit called ems, which is E-M. 1:11:01 You saw that in my code a little bit there. 1:11:09 I set a font size of 3.2 ems or 1.5 ems. 1:11:12 As opposed to a fixed unit of measurement, that is a relative unit of measurement. 1:11:16 So this is actually setting it based on a base size of 1 em. 1:11:23 An em, it's kind of a funky unit of measurement to explain. 1:11:31 There might be a more specific definition, but it has something to do with the height of the letter M, 1:11:37 so that's why it's called ems. 1:11:44 E-M doesn't actually stand for anything, at least I don't think. 1:11:47 Maybe someone can correct me on that. 1:11:51 But yeah, that's a much better way to set your font sizes. 1:11:54 You don't want to use pixels, at least unless you have a really specific reason as to why you're doing that. 1:11:59 You almost always want to set a relative font size 1:12:05 because it's way easier to maintain and it's way easier to adjust your base size 1:12:08 and adjust all of your font sizes relatively to one another. 1:12:15 The last question in the chat today is, "How is Jim doing?" 1:12:21 If you're not familiar, Jim is another one of our teachers at Treehouse. 1:12:27 He's actually recently switched over to the development team, 1:12:33 so he's not doing any teaching of his own these days; 1:12:37 he's actually working on the Treehouse app 1:12:40 and a couple of other cool things that we have in store. 1:12:43 But Jim's doing great. He's doing awesome. 1:12:47 He just came back I think it was from Oslo, if I'm not mistaken. 1:12:52 He took a pretty extended trip there. 1:12:58 I think he was doing a talk out there and then took a little bit of a vacation there. 1:13:01 He's grown this awesome red beard. It's pretty amazing. 1:13:06 But yeah, Jim is doing great. I'm glad somebody asked that. 1:13:11 Well, that's all we have time for today. 1:13:17 If I didn't get to your question, I'm really, really sorry. 1:13:19 If you do have questions for me that I didn't get to, 1:13:22 you can tweet to me. I am @nickrp on Twitter. 1:13:26 Again, my name is Nick Pettit and I'm a web design teacher here at Treehouse, 1:13:31 which of course is the best way to learn web design, web development, and so much more. 1:13:35 You can check us out at TeamTreehouse.com. 1:13:40 We do these livestreams every week on Tuesdays at 2 p.m. Eastern time, 1:13:44 so be sure to tune in at the same time, same place next week. 1:13:49 And I'll see you real soon. Thanks for watching. 1:13:54