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