Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this live Workshop, Nick creates a mockup for the website of a fictional to-do list app. He starts out with wireframes using Balsamiq, then moves on to Photoshop and creates a high fidelity mockup. Finally, Nick shows how to prototype the mockup in HTML and CSS.
Links
[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
You need to sign up for Treehouse in order to download course files.
Sign up