[Creating Website Mockups with Nick Pettit] [Wireframes and Photoshop Mockups]

[Nick Pettit - @nickrp] Hey everybody, I'm Nick Pettit.

My Twitter handle is @nickrp, and I am a web design teacher here at Treehouse,

which of course is the best way to learn web design, web development,

mobile, business, and so much more.

You can check us out at TeamTreehouse.com,

which I have right here up on my screen.

We have a brand new site design today. It's pretty awesome, so be sure to check that out.

We have a brand new homepage here that looks absolutely lovely.

I'm really happy with the work that the dev and the design teams did on this.

It's super awesome.

If you click over here on the library and you're actually logged in to Treehouse,

you can see that it looks pretty different from the way it used to look before.

Actually, I'm not going to go home because I'm not logged in.

But on the library here you can filter by topic,

you can filter by content type,

and we have all sorts of new stuff in there.

So be sure to check that out if you haven't done so already.

Today we are going to be doing a little bit of wireframing.

Actually, we're going to be doing mockups, with wireframing being one type of mockup

that we're going to take a look at.

We're going to do wireframes, high-fidelity mockups in Photoshop,

and we're also going to mock up a couple of things in code,

and to do that I'm going to be using Bootstrap, which we've talked about on a previous edition of this livestream.

I'm going to hop into this app here called Balsamiq Mockups.

It is a paid app, but I believe they have a free trial

or you can try it out for 7 or 14 days or something like that.

But check it out. You can also just use pen and paper.

In fact, that's what I actually prefer to do.

But just for the purposes of this livestream today I'm going to use Balsamiq Mockups

so that you can see what I'm doing.

Usually when I'm creating a website I would list out some goals for the site,

some elements that I might want to see on the various pages,

and then I'd maybe break those up into different pages, into a site map

depending on the complexity of the site.

But we're not going to do that.

We're just going to pretend that we're building a website

that's going to be for a to-do list app.

A to-do list is kind of the classic example of a website that you make

or a web app that you make when you're introducing new concepts,

but we're actually going to be making a marketing site for a to-do list.

This could go horribly wrong. We'll see how it works out.

I haven't prepped for this at all, so we're going to just see where it goes.

When I design stuff, I like to design from the inside out

and I like to worry about the chrome and the navigation and the headers and all that stuff later.

First I know that I need some kind of big title here.

I'm just going to drag something out in Balsamiq Mockups.

I'm going to say The Only To-Do List App You'll Ever Need.

We'll put that text there.

I think that's a pretty good size. Let's see if I can break this down to the next line here.

Can I do that or do I actually need to have paragraph text?

I think I need to have paragraph text, so let me do that instead.

Okay. Cool.

I'm going to adjust the font size here

so that it looks more like a headline, something that you would really want to pay attention to.

I'm going to make that even bigger.

There we go.

Cool stuff.

Over here we might want to have some kind of image or maybe a video

of what this to-do list app will actually look like.

I actually would prefer to put a video here,

but for the purposes of our example,

we're just going to go ahead and maybe put a screenshot of the app.

Let's say that this is a mobile app.

So it's a mobile app for your phone, and we're going to have this iPhone menu here.

We don't actually have an example of what this to-do list app looks like,

but we'll just kind of mock this up.

This is what a checkmark looks like, and we have a label.

So we'll say My To-Dos. There we go.

Let's just copy a couple checkmarks to see what this ends up looking like.

Okay. That's not too bad.

We'll go ahead and put that in here.

This is just a wireframe, so it's going to be pretty simple.

We don't need a whole lot of detail here.

We just kind of need to get the point across

and basically lay out the major shapes that are going to be on the page.

Over here I'll have this large iPhone or this screenshot of the app.

I wonder if I can rotate this. It doesn't quite look like it. That's okay.

And over here we have our headline.

Just below that I think I want to put some additional text or maybe a call to action button

that says where you can get this app.

Let's do that call to action button first because I think that's more important.

We'll say Find it in the App Store.

Or maybe Visit the App Store.

We'll increase the font size on that a little bit.

How about Find us in the App Store? No. That's still too much text for a button.

Yeah. I'm just going to say Visit the App Store. That's good enough. Okay.

I'm going to increase the size of this button.

You'll notice when I'm doing this wireframe I'm not using any color.

That's very intentional because when you are creating wireframes

you just want to lay out the shapes on the page.

You want to get the composition right.

And that's what we're really focusing on here.

When we jump into Photoshop, we'll maybe do a little bit more of a high-fidelity mockup here

that's based on this layout.

Okay. I think this actually looks good for just a big attention-grabbing headline.

There's a screenshot of the app. You can kind of see what it looks like.

There's a pretty bold statement here, both literally and figuratively.

And then there's a call to action button.

Below that, further down the page, I would probably want a little bit more information

about maybe the features of the app.

So they're starting to get sold on this app, they scroll down the page,

they want to learn more information.

In fact, we do something pretty similar on the Treehouse homepage.

If we scroll down here, there's a big call to action button

and then there's more information about the features.

This is a very common way to do things.

I'm going to do something similar, not quite as robust as this,

but we'll just lay out maybe 3 features of this to-do list app.

Let's see. Can I find that under Media? Yeah.

There's these nice little pre-made icons in Balsamiq Mockups.

I love using these. It just has a bunch of really simple icons for really simple stuff.

What would the features of this app be?

Well, there's a checkmark. That's probably good enough at least to just take up space in the composition.

Oops. That's too small. Sorry. I'm adjusting the size here.

Okay. So we'll put that checkmark there.

That actually is too small. I'd like that to be a little larger. There we go.

I'll make some room down here.

There's our checkmark, and I'm going to duplicate that.

You'll notice Balsamiq has these nice little guides that are kind of like smart guides in Illustrator

if you're familiar with Illustrator at all.

These little guides come up and can help you align stuff more easily.

That's really nice when you're trying to build a mockup very quickly.

So there's a checkmark. Maybe there's something about dates in this to-do list app, so we'll put a clock.

And then let's duplicate that one more time.

And let's see here. Maybe you can share your to-dos with other people.

So maybe we can put some sort of a sharing icon here.

There's a picture of a person. There's a picture of multiple people.

I just don't like that icon in particular, so we'll go ahead and use this one here.

I'm going to select all these and make sure it's centered in this layout.

And then we're going to add some text below each one.

I want to add maybe a headline. Oops. There's my text.

Let's see. There's a subtitle.

We'll say Get Stuff Done.

Actually, we'll say Get 'Er Done. There we go.

And then under here we'll say Make Dates.

And then Share Stuff.

Again, we're just laying out the major elements on the page.

We don't have to get the copywriting perfect at this point.

That's something that you can tweak up until the last minute,

and it's very cheap to change.

What's expensive to change is the layout of the page and the major page elements.

So you want to make sure that you get those right up front in this wireframing stage

where it's really easy to change those larger elements.

Let's add a bit of paragraph text here.

Normally at this point I would type out a little bit more about each one of these features—

I'm actually going to move these apart a little bit more—

but I'm not going to do that today just in the interest of time.

I'm just going to use what's called some Lorem Ipsum text.

Let's just type Lorem Ipsum.

There's all sorts of Lorem Ipsum generators out there on the Internet.

You can use whatever one you want.

They all pretty much work the same.

I'm just going to copy some Lorem Ipsum text,

and this is just placeholder text.

It doesn't actually mean anything, and that's the intention of it.

You don't want it to be read, you just want it to take up space in the composition.

That's a little much for the Lorem Ipsum text.

Let me align this a little better.

Let's see. There we go.

That's a little more text than we need, so let's just cut this down.

That's still a little bit too much.

Okay. There we go. I think that's good.

I think I'm going to align that center. Yeah. That looks good.

I'm going to duplicate this a few times so that we have text under each one of these,

and I'm just going to add a little bit of variation to each one.

Let's see.

I'll just swap a few things here.

Okay.

There we go.

That will give us some sort of an idea of what different bodies of text might look like there.

I'm actually going to delete a little bit more here.

Cool.

So there we have our basic page.

I'm going to zoom out so we can see what's going on here.

There's a few more things design-wise that I might want to do.

I might want to cut this off.

I'm just using a little text element here.

I might want to cut off this iPhone and bring these elements up.

That's the kind of detail that I might add in Photoshop, though.

Let me bring those elements to the front. There we go.

Cool. That doesn't look too bad.

A real good test, and I love that Balsamiq Mockups has this,

to see whether or not this looks like a real website—

that's a technical term, by the way. No, it's not. Just kidding.

A good test is to add a browser window and just see if you can place all these elements

inside of a mock browser window and see if it still looks good.

Let's move these down. There we go.

I'll bring this in, crop this up.

Okay.

I think that looks good. I think we have our mockup here.

I'll just zoom back in.

Can I get a little more screen real estate? No, not quite. I'll zoom out so we can see it.

I'm pretty happy with that mockup.

There's obviously more that we could do with this.

We probably would need to put some sort of navigation up at the top here.

We might need to put in a logo. Let's go ahead and add some placeholder text there just so we know.

We'll say, To-Do App, and that would be the title of the to-do app.

We'll make that a little bit smaller.

But I think that's good.

At this point we have the composition, we know where all the major page elements are going to go,

and if we feel really confident about this vision for our website

we could just jump straight into code.

In fact, that is a perfectly legitimate route to take.

You don't always have to do a high-fidelity mockup in Photoshop,

and you don't have to know exactly what your website is going to look like before you start coding.

It helps in some instances, whereas in other instances it can just be kind of a waste of time.

If you really have a clear vision for the site and you make your quick wireframe

and you think, "Wow, I know exactly how I'm going to do that in Bootstrap,"

then go ahead and go for it.

The thing that you want to keep in mind with high-fidelity mockups

is that you only want to use them when you need to fill in really key details

that might affect other parts of the site.

For example, if you're working with a pre-established brand

and you're building them a brand new website

and you have to stick to a particular color palette,

then maybe you have a couple of elements that are laid out next to one another

that once they're put in color might not have the same contrast

that you envisioned in your mind's eye.

That can be a real problem to the point where you actually have to change the composition of the website.

And at that point you would have to go back to your wireframes and say,

"Okay, what can we change in this composition to make these colors work together?"

And that's just one very specific example.

But let's go ahead and jump into Photoshop.

We'll talk a little bit more about that stuff.

I'm going to save this out as a new mockup.

I'll save this to my desktop with the very uncreative title, mockup.

I'm also going to save a PNG image, and that was saved to my desktop. Cool.

I'll open that up.

Oops. Let's see here.

There we go. Photoshop is being a little slow for some reason.

There we go. Cool.

So there's the mockup for my site.

We've got a little extra white space here, I think because those paragraphs were a bit too tall.

I'm just going to keep this in here for my own reference.

I'm not going to use this for any other reason.

I'm just going to keep it on the side here so that I know what I'm working towards.

Let's create a new mockup.

I'm going to create this at 2800x1800

because that is the resolution of the Retina display that I'm using.

It might be at a slightly different resolution because it is plugged in so that you guys can see it,

but we'll just go with that. It shouldn't affect the outcome.

I'm going to draw out a few guides.

One thing I should point out at this point is that you can definitely do this type of thing

in another program, like Illustrator, for example.

I need to actually change a preference here.

I think it's showing me inches when I want to actually see—

Oh, no. It's showing me points. That's weird.

I'd much rather see pixels. There we go. Okay. Awesome.

Anyway, you could go ahead and do this in Illustrator

if that's a program that you feel more comfortable in.

But I just enjoy using Photoshop. I've been using it for years and I'm a little bit more efficient there.

First we need an image of an iPhone.

Let's grab that imagery up front.

I'm going to go to Apple.com.

I think if I just type press, let's see. Hey, there's some apple presses on Amazon. That's lovely.

PR Info.

If I go to Product Images, I should be able to grab an image

that's fairly high resolution of the new iPhone.

I'll download the gold iPhone because we know that one is the best.

It's downloading in a zip.

There we go. I have my image of my iPhone.

I'm going to drag that into Photoshop.

There we go. And I'll just crop off what I need here.

Cool. I'm going to trim this so I can trim out the—

Oops. That's the back of the iPhone. Excuse me. There we go.

I'm going to trim this. Cool.

Now I can just drag this into my document.

All right.

I'm going to convert this to a Smart Object in case I need to actually edit it later on.

I'll just keep it right there for now.

Okay. I'm going to save this document before I get too much further, again using the very creative title mockup.psd.

Now I want to start adding in some of this text.

I'll type in—gosh, what did I say here?

The Only To-Do List App You'll Ever Need. Okay.

Let's try that again.

The Only To-Do List App You'll Ever Need.

As you may have noticed, that text is very, very tiny.

Let's go ahead and fix that.

I want this text to be much larger. There we go.

Actually, I want it even larger than that.

Let's do 200 points and see how big that is. That's a little huge. Maybe 150.

120? Or maybe 100. Yeah. That's a little better. Okay.

I had the line break at the words You'll Ever Need. Okay.

All right.

There's our text.

One of the major elements here is this block down at the bottom

where the phone is getting cut off.

So I'm going to add that in now just so I can place some of the other elements appropriately.

To do that, I'm just going to create a shape using the Rectangle tool.

I'll just do something like that.

This is where you can start making those more detailed decisions about color.

Presumably there would be some sort of color scheme for this app.

Maybe that's already decided; maybe this is the phase that you're deciding it.

You would want to spend a lot of time on your colors,

but for now I'm just going to pick this nice blue color.

I think that will look good.

What is this that keeps coming up?

I just hit Command-H to hide my guides.

Oh, okay. It's asking if I want to hide extras or guides.

Okay. There we go. This is a new user account, so there's a couple things that are still fresh here.

All right. So I have our iPhone. Let's do the responsible thing and label our layers here.

I'm going to call this Overlay.

Let's adjust this a little bit so that the right things are showing.

I want this to be in the correct place.

I want some white space at the top just to kind of give this page a little bit more of a dramatic look.

One thing I didn't do that I should have done at the beginning

is draw out some guides on the left and right sides

so I kind of know the bounds of the page.

I'm going to do that at 1280 here.

Let's see if I can do that.

There's probably a lot of people yelling at me about how to place guides more accurately.

I know. There we go. Okay. Cool.

Let's place a guide there and place a guide there.

Okie-dokie.

We'll zoom back out.

Just to give you an idea of the resolution that we're working at here,

this is actually full res, so this is a fairly high-resolution document that I'm working with.

And again, that's for Retina displays

just so that I can get an idea of what the site should look like at full res.

After adding those guides, I can see that these page elements are still a little bit large.

For this image on the right, we could get away with it actually being cut off of this safe area here.

Maybe we only want to show a small part of the to-do interface.

But I'm actually going to adjust the size of that there.

Let's see. Show my transform controls.

I actually don't think this should be cut off.

There we go.

And now looking at this, this text is actually too large.

So we need to make that smaller.

It looks like we might have been better off at the beginning there. Okay.

Cool.

We have a lot of white space at the top, so let's bring all of these elements up.

That's good.

I'm going to hide my guides just so I can see what the composition looks like without those.

I think that's looking nice.

I like where this is going.

I'm going to take these things away from the edges of the page.

All right. Cool.

Now we need to add this button.

Let's throw that in there.

To do that, I'm going to use my Shape tool.

I'm trying to decide if I want this to be a rectangle

or if I actually want this to be a rounded rectangle.

I think I'm going to go with rounded

and just have very slight corners there.

Actually, before I do that, I should type out the text that's going to be inside there.

Let's first say, Visit the App Store.

I want to make that smaller, so maybe about there. That's good.

And now I can confidently draw that shape around it.

I'll use the space bar just to adjust the positioning of it.

Okay.

I've rearranged the layers here, but you can't see the text because it's the same color as the button.

So we need to make a couple of adjustments.

I want this text to be white so that it's higher contrast than some of the other page elements.

And then I'm going to make this rectangle maybe a nice bright saturated color.

We could go with that same blue that we have down here,

or we could go with just maybe some other color that makes this stand out,

maybe like a nice green color that's at a similar level of saturation.

Let's go ahead and do that.

I think that looks good.

I want to make this look like more of a button,

so I'm going to add a slight drop shadow to this.

Let's do that. Let's see.

Where did my drop shadows go? I haven't used drop shadows in so long.

Ah! There we are. Okay.

That drop shadow looks pretty ugly, so let's make it look better.

I want this to be a normal blend mode,

and I want the opacity to be 100%.

I'm going to grab this same color and I'm just going to bring down the color a little bit there.

Cool.

I think that looks nice.

Let's look at our guides again just to see where everything is at.

I still think we have too much white space at the top now.

So let's move everything up.

Okay.

Cool. That's what our composition is looking like right now.

That overlay could stand to come up a little more too.

Okay.

Now we're ready to design those features,

these 3 things that go down at the bottom, just below the iPhone and the call to action button.

We want a checkmark, a clock, and a person.

Let's just see if Photoshop has those actually built in.

Normally you'd want to design your own iconography here,

but in the interest of time we are going to take a couple little shortcuts.

Let's see what shapes we have.

Well, we've got a checkmark.

It looks like I don't have a whole lot of other shapes here,

so we may have to actually get a little creative.

That's okay. I'll use this checkmark here.

I want to color this white so it stands out against that blue background.

Then I'm going to design the rest of this element,

and then we'll copy that 2 times and make the rest of them.

Let's add the text. The text I think we said Get 'Er Done. Yeah. Okay.

Get 'Er Done. All right.

We're going to get stuff done with this to-do app.

Cool. I'm going to increase the font size of that a bit and then we'll add some paragraph text down here.

And again, we're just going to use Lorem Ipsum text, and for that I'm going to go to Balsamiq Mockups

and just copy the exact text that I had.

This needs to be paragraph text, so I think that's in Layer, Text. Is it?

Oh boy.

There's a Convert to Paragraph Text somewhere here. Ah! In Type. Okay.

Now we can drag this out and actually adjust the bounds of this paragraph.

That looks okay.

We'll continue adjusting this. We need to decrease the font size certainly.

Okay.

I think that's starting to come together.

Once again this paragraph is a little bit too tall.

So let's decrease the size of that there.

We need all of these elements to be lined up—this icon here, this title, and this paragraph text.

So to do that, I'm just going to select all these elements,

come up at the top here and say Align Horizontal Centers.

And then I can go ahead and group those elements.

I'll call this Feature 1.

We'll put that over here on the left side.

And then I'm going to duplicate each one of these.

And oh, hey, look at that. We're already running into a little bit of a problem.

Our paragraphs are too wide.

That's why when you have elements like this that are very similar

you want to just create the first one because then you can modify it and duplicate it.

Because once you've created all 3 of them, you have to make those changes to all 3 elements.

In this case all we need to do is just decrease the width of that paragraph a little bit.

If we were doing this in CSS, we'd actually be increasing the padding.

I think that font size is still a little too large,

so I'm going to bump it down a bit more.

There we go.

Let's do 26. Cool.

Okay.

Now we can duplicate this.

Actually, one more thing I wanted to do here was move this down just a little bit.

Does that look good? Yeah, it looks fine.

Let's move that there.

And let's move that here.

Once again we can select all these elements and space them appropriately.

We'll come up here and say Distribute Horizontal Centers

and that will evenly distribute each one of these,

and then we can, with all of them selected, just move it to the center line.

And so now everything is centered.

Now we just need to adjust the things that are different.

On these other 2 we said Make Dates and Share Stuff.

So we'll change this text here to Make Dates and Share Stuff.

And actually, I wanted that text to be centered,

so we need to select each one of those and center it.

That's going to throw things off.

See? This is exactly why you want to just create a first one and then duplicate it.

And that's okay. I can fix this pretty quick.

So let's do that, do that, and do that.

And now we just need to make sure that these are all lined up accordingly. Okay.

There we go. That's the one I wanted.

And then that one.

And then this last one.

It actually looks like they're already all lined up, but it just makes me feel better doing that.

Okay.

Let's label all these and adjust the things that are different.

This is Feature 2. Move that down.

And this is Feature 3. We'll move that down.

Yep, that's Feature 3.

Feature 3 is supposed to be Share Stuff.

Like I said, in the interest of time we're just going to pick one of these icons and go with it.

Normally you'd want to design your own custom iconography here

or use something that's kosher and okay to use in terms of copyright.

I'm going to adjust the text on that one. Oops. I actually deleted the wrong one there.

There we go.

Okay.

One thing that I should point out while I'm doing this

is how much longer it actually takes to do something in Photoshop

than it does to do something in a wireframe.

You'll notice that I'm kind of struggling with the software here a little bit more

than I would if I were just doing this as a very simple wireframe.

It's more expensive to make changes the higher fidelity you go.

So the detail here is greater, and that means that there's going to be more things to customize,

more things that I need to make sure are colored correctly,

more things that I need to line up and all that good stuff.

So there we have a nice high-fidelity mockup.

Again, there's a couple more things that I'd want to do to this

if this were really going to go into production.

I'd actually want to have a real screenshot of the app, not just the home screen of an iPhone,

and I'd want to have my own iconography.

And at this stage of design I would probably spend a little bit more time on the copywriting.

I'd want to make sure that I got the copywriting not perfect

but closer to what I would actually want it to be.

I'm trying to keep this workshop around an hour, and we're 40 minutes in.

I've spent around 20 minutes or 10 minutes on my wireframe

and then the second third on this Photoshop document,

and now I am going to jump into some code.

We're probably not going to get quite as far as we did with Photoshop,

but we'll see what we can do.

I'm going to save this mockup.

Just for the sake of comparison, let's look at these 2 side by side

and just kind of see where we ended up.

That's not too bad.

Hopefully this gives you an idea of what it can look like

when you're making the leap from a wireframe to a higher-fidelity mockup.

A lot of things are going to change.

The spacing on certain elements might change a little bit, and that's perfectly okay.

As long as you're not completely redesigning in a high-fidelity mockup, you should be okay.

So let's jump into the code.

I'm going to go to Bootstrap.

If you're not familiar with Bootstrap, it's basically just a front-end framework

that's a collection of CSS and JavaScript with all sorts of useful components

that can help you make your website faster.

There's a couple of different ways to install it.

You can download it or you can use their CDN, or content delivery network,

to just load it in off of someone else's servers.

So that's lovely.

I'm going to go ahead and do that.

In order to do that, though, I'm actually going to start out with one of their examples here.

This example isn't terribly far off from what I want to try to accomplish.

We don't need the carousel element here, but let me just click on this

so you can kind of get an idea.

They have these 3 columns laid out, and that's pretty similar to what I want to do.

They also have this cut-off here, which is also not too far away from what I want to get done.

I'm going to start out with this example here.

Let me just view the source on this.

I'm going to grab all the source code and then I'm going to open up Sublime Text2,

which is a text editor, and I'm just going to start a new document.

I'll save this to my desktop once again.

You shouldn't save everything to your desktop.

You should have a real dev folder.

But I'm just doing that for the sake of time today.

I'm going to open this up in the browser, but when I do,

a lot of things are going to be broken.

It's not loading up any of the CSS and JavaScript.

That's because we need to load it off of a CDN.

So let's go ahead and grab those CDN links.

This is for the CSS, so I'm going to get that first.

It looks like the CSS is right here.

I need to add an http:// here because I'm not actually going to load this

the way it's having it load in there.

There we go. Cool.

I'm not going to use any of this stuff, again, for the sake of time.

We don't need the custom styles for the carousel because we're not going to use it.

In fact, let's just get rid of that carousel completely right now.

Here's the carousel. It looks like that's where it starts anyway.

Let's see. Can I collapse this? Hey, there we go. Okay.

We're just going to get rid of that carousel completely.

I'm going to put a div there.

I'm just going to say HEADER GOES HERE

and that's where we're going to put our iPhone and stuff like that.

And then we have the rest of that marketing copy.

So all of those features look like they come in later on.

And then down here we have a couple of other CDN links that we need to copy in.

So we're going to copy Bootstrap, and we also need to get jQuery.

I wonder if— No, jQuery wouldn't be hosted off of that CDN.

Let me go to HTML5 Boilerplate and let me just grab the link that they're using for jQuery.

I can never remember it.

Let's see here.

jQuery. Where is it? There it is. Okay.

This is being hosted by Google, so it should be pretty reliable.

Same thing there.

I don't think we need this JavaScript file.

It's going to 404 right now, but let's just refresh and see where we're at.

Okay. Cool. This is pretty much what I thought this was going to look like.

We don't need all of these features down here because we're not going to use them.

So let me go ahead and remove that.

Let's see. END THE FEATURETTES. Cool. Here's the START THE FEATURETTES.

Let's delete that.

So far, so good.

We're not going to bother with this footer for now,

and we also don't need this header, or this navigation, I should say.

Let's see how far we get with that.

All right. Not too bad.

Now we need to put in our styling.

I'm moving fairly quickly here, so I do apologize if this is a little bit confusing.

We did a workshop on Bootstrap pretty recently,

so you may want to dig in to Treehouse and look up that workshop

if you're not familiar with Bootstrap at all because we talk about it quite a lot there.

We need to do a couple of things here.

Let me just switch back to Photoshop and kind of figure out what we need.

This marketing copy says The Only To-Do List App You'll Ever Need.

I'm going to just copy that and paste it into this div here,

and this is going to be a container in Bootstrap.

I'm going to create a first-level headline that says The Only To-Do List App You'll Ever Need

and put a little line break there. Cool. There we go.

And I want to create a button.

Bootstrap has some really great buttons already pre-made,

so let me jump into their CSS here and let me just grab this default button.

Let me see where that gets us.

Okay. It looks like we have a button here, just as you'd expect.

I actually don't need those buttons below each one of those bits of marketing copy,

so I'm going to remove those right now before I forget.

Let's refresh the page and see what that looks like. Cool.

You'll notice we have some broken images here. We'll fix those in just a moment.

Let's try to make this button look like our button in Photoshop.

I'm going to grab the colors that we used. Oops.

I'm going to select my Eyedropper tool. Oh. I didn't want to do that. That's weird.

I've never seen it do that before.

There is our hexadecimal value for this particular color. That's wonderful.

I'm going to switch over here.

This is just kind of a quick mockup.

Normally I would do this in a separate stylesheet,

but I'm just going to open up a style element here and just prototype this quickly.

The class here is button, but we want to add our own class.

We're going to call this call to action button.

And we'll select that.

We want to change the background of that to that green color.

Let's see. That would be background. Oops. I don't have that copied anymore.

Okay. There we go.

Cool.

Let's see if that got us there. Great.

The color on that button should be white.

I don't want any kind of border on it.

The roundness actually looks good, so the rounded corners or the border radii looks just fine.

I'd like the font to be bold.

And then I want to add that drop shadow, so I'm going to say box-shadow.

And for the x offset we'll say 0 pixels; for the y offset we'll say about 3 pixels.

I think that's about how large it was in our mockup.

The blur radius is going to be 0.

We want this to be a nice sharp shadow, so we don't want it to be blurred at all.

And then we need to set the color.

Let me grab this color, that slightly darker green color,

and we'll put that there.

Let's see what that looks like. Hey, look at that.

It's starting to get pretty close here.

I also want to change the hover state on that.

It's a minor detail. Hover.

Let's see. What do I want the hover state for that to look like?

I'm not really sure. We're going to omit that in this example.

We'll just style that exactly the same. Yeah, that's fine.

And then the font size is still a little smaller,

so we'll increase that to 1.2 ems—actually 1.5. Cool.

And then we need to change the actual text. It says Visit the App Store.

I'd actually like to remove that bolding there.

I just wanted to increase the font size. Oops. Refresh.

Cool. All right. It looks good.

That's close enough to what we were trying to accomplish.

Now we need to add in this iPhone over here.

I think the font size on this h1 is actually a little small, if you can believe that.

I know it looks huge, but I want it to be a little larger even.

So let's put a class on here that says "headline."

And we'll say font-size: 2 ems. See how large that is.

Nope. I guess it was already larger than that.

That's a little too big. 3.5 maybe?

That's not bad.

I think 3.2 might get us there. Okay.

Let me just remove that and see if that made it larger than it was.

Yeah, it did. Okay.

I want to put a little bit of margin on the bottom, maybe like 20 pixels,

just to give it some separation from that button.

Let's do 30. There we go.

Okay.

I'm going to change this to a header element because that's essentially what it is.

And on this header I'm going to add some space.

We'll say margin-bottom: 100 pixels.

Yeah. There we go.

Actually, I want this to be padding because—

Well, hmm.

How would that work? Because I'm thinking about how we're going to add this background image.

All right. It looks fine.

Now let's jump into our Photoshop mockup.

This is where a high-fidelity mockup is really, really useful

because I can just grab this background image here

and just drop it straight into my site,

and that's going to save me a lot of time

because if I hadn't created this high-fidelity mockup,

I would have needed to create this imagery anyway.

That's pretty nice.

I'm just selecting this image, and I'm going to hide some of the layers that I don't need.

In this case that would be all that stuff there.

I can actually get a little bit more optimized here.

There's more image optimization I could be doing here.

But we're not going to crop this in perfectly.

We'll just get it good enough.

Okay.

And now I'm going to crop that out and I'm going to save it for Web

and let's see how bad a 24-bit PNG would be.

A little bit large for my taste.

That file size is a bit high, but that's okay.

This is a marketing splash page. We want this to look super awesome.

So we're going to go ahead and go with that.

I'm going to save this as iphone.png and I'm just going to put it on my desktop

because that's where my index.html file is.

Let's set that as the background.

We want the background to be pure white,

but we also want this image here.

So let's say url, and it's going to be 'iphone.png,'

and we're going to set it bottom right,

and we don't want it to repeat.

That should get us there, I think.

Wow! That's super huge.

Let's say background-size 50% because remember, these are Retina-sized images

and we don't need them that large.

Oops. That doesn't look good.

There we go.

Let me try making this even smaller here. Maybe I did my math wrong.

If that's the case, I apologize.

Yeah, because you know what?

Let me back out of this here a little bit, do a few undos. Oops.

We actually need this to be the same height in the browser.

That's a height of 632 pixels.

Let's just try setting an explicit height on our header.

Let me go in here and just see how tall this is.

640x589. Sure.

We'll say 589.

So height: 589 pixels.

And I think some Retina weirdness will occur here. Yeah.

So we actually want it to be half that size.

So 589 divided by 2. We'll round up and say 295.

So height should be 295 and then the background size is 50%.

Hmm. That's still not doing what I'm expecting it to do there.

Oh, because it's 50% of the full width. Okay.

We will cheat a little bit. We won't worry about that today.

We'll just say that. Can I get that smaller? Yes, I can.

That's too small.

40. There we go.

Okay.

I could position this a little bit more.

If I did something like this, it should position it from the left side. Oops.

Man! I'm having trouble with positioning today.

Okay.

I'm just going to guesstimate here.

That's fine. This is just a prototype. There we go.

And now we need to move this text over here on the left down a little bit.

I'm going to put some padding up at the top.

Oh, you know what? That might have been the problem with the positioning is that I had the padding there too.

Let's say padding on the top and bottom will be 100 pixels and left and right will be none.

I'll subtract 100 from the height and that should get us there.

We're getting pretty close here.

I'm actually going to leave it right there because I want to leave some time for Q&A.

We're just at exactly an hour.

But if I were to continue and be a little bit more precise with my pixel measurements,

you can kind of see how this would come together in the browser fairly quickly

using just a little bit of code.

You can create websites pretty fast with Bootstrap.

Or at the very least you can prototype them.

Wow. We have a whole bunch of questions in chat.

That is wonderful. That's what I like to see. I love answering questions from you guys.

The first question I have here is from Kevin and Kevin asks,

"How would you have done things differently if you rapid prototyped in the browser

instead of how you rapid prototyped today if you practice it—" Okay.

If I were to rapidly prototype in the browser, I would have to have a pretty clear vision

of what it is that I'm trying to accomplish, and that's usually pretty rare.

If you do think that you have an absolutely clear vision of what you want your page to look like,

then you should still at least spend 5 or 10 minutes just doing a quick sketch on paper

just to make sure that it checks out

because oftentimes what will happen is you'll end up discovering things

that you really didn't think were going to be problems

but they end up becoming major issues.

They end up becoming issues to the point where you actually need to adjust the composition completely.

The thing there is that you just always want to remember

your mind is going to idealize things quite a lot,

and as soon as you commit things to paper and make them real,

that's when you start to see the problems that you didn't even know were there.

So I do often rapidly prototype things in the browser

but not without doing some sort of quick thumbnail sketch first

just so I at least know where I'm going.

I do skip Photoshop a lot.

If it's not going to be this really nice, polished marketing page or something like that,

I will just jump straight into Bootstrap

or whatever front-end framework I'm using that day and go for it.

Next question says, "Before doing your actual mockup,

where do you find inspiration for your design?"

"Do you have any process you normally follow?"

"Do you recommend doing mockups even if you're using Webflow or Macaw?"

Okay, so there's like 3 questions there.

Inspiration for design. Oh my gosh.

I mean, that's such a huge question.

My inspiration just comes from all over the place.

I look at a lot of art, I watch a ton of movies, I play a ton of video games.

It comes from everywhere.

So that's a more difficult question to answer

because even if I could talk about that for an entire hour,

I still don't know if I'd be able to give you a very clear answer.

Inspiration is a very fuzzy thing, and it can come from anywhere.

So I think the thing there is just to always keep your eyes open.

Do I have any process that I normally follow? Yeah.

Like I said, I'll normally do a couple of quick wireframes,

and that's the most exciting part of the project

because that's where your ideas start to become real

and you see what they would actually look like and feel like,

and you can start to visualize them a little bit better than you can in your mind.

I will spend a lot of time wireframing unless I have a really clear idea of what I'm doing.

Then I'll just do one quick wireframe and jump right into it.

But after that I will oftentimes just jump straight into the browser.

I won't even do a Photoshop mockup.

You can do these steps in any order that you want.

This is not some sort of de facto process that I'm teaching you that everybody else does.

This is just what I like to do.

If you feel more comfortable getting into Bootstrap,

maybe doing a rapid prototype and then going into wireframes

and going into Photoshop, you could totally do that.

You can omit any of these steps.

I mean, it's really up to you.

It's whatever you feel most comfortable with

and whatever you're going to be most efficient with.

Do I recommend doing mockups even if using Macaw or Webflow? Yeah, I think so.

I would still do some sort of wireframe, at least personally.

If you feel comfortable not doing that, then, like I said, that's totally up to you.

Next question says, "What Photoshop shortcut are you using to move the layers around?"

"That's a neat trick." Oh my gosh.

I've been using Photoshop for so long I don't know if I can even verbalize

what I'm doing when I'm moving layers around.

I think it's just muscle memory at this point for me.

I think it's Command-Shift-Bracket will move things around.

Is that doing stuff? Yeah. That's doing something.

But I don't think that's quite what you're referring to.

There's so many Photoshop shortcuts.

We do have a really great Photoshop course on Treehouse.

So if you're a Treehouse member, then you should definitely be sure to check that out.

We talk about all sorts of shortcuts in that.

Next question says, "Why were you working in a large Photoshop document

instead of a canvas sized to the exact size of the browser?"

I was actually working in this pretty large Photoshop document,

but that's for Retina displays.

So this display that I'm working on is 2800x1800, I think.

I'm 90% sure on that.

It's a fairly high-resolution display,

so technically it is actually the exact size of the browser window.

There's a big difference between actual pixels and what are called virtual pixels.

So really, it's a little bit complex to explain,

but if I drag out the width here of 1280,

that's a little closer to what would actually end up in the browser.

But yeah, I'm just using that large canvas because of Retina display

so I can save out these 2x images and use them appropriately,

which I did not do today because I had that positioning stuff going on.

But normally, yeah, I would make sure that I fix that if given more time.

Next question says, "Does the Aesthetic Foundations course at Treehouse

cover color saturation like you discussed earlier?"

We actually have a brand new course at Treehouse called Design Foundations

that you should check out.

Aesthetic Foundations is really good, but Design Foundations is kind of the next version of that

and you should definitely check that out.

We talk about all sorts of stuff.

I'm not sure if it gets into color saturation specifically,

but I'm pretty sure it does.

Chris Zabriskie is nodding his head at me here, so yes.

Next question says, "Would you call yourself a designer or a developer?"

I self-identify as a web designer,

but that doesn't mean I don't know how to do any kind of development.

I've written plenty of JavaScript, I've made plenty of Rails apps on my own,

I've done lots of PHP coding.

That's actually where I got my start in web stuff.

I wanted to do web design, but I didn't have anybody at the time

that I knew that I could work with.

This was before I had met anybody else in the web industry.

So out of necessity, I learned PHP because I wanted to make cool websites

and I knew that I needed some sort of back end

to communicate with the database and all that sort of stuff.

So I'm a little bit of both, but I feel like I self-identify more as a designer personally.

Next question says, "Do you normally use a MacBook when working on projects,

or do you recommend a multi-monitor setup for designers and devs?"

I don't think that really matters a whole lot.

It's whatever you're most efficient with, whatever you feel most comfortable with.

I actually don't use a multi-monitor setup.

I used to for many, many years,

but I just really like these new Retina displays Apple has been putting out

or these higher-resolution displays,

and I've been working almost exclusively on that without hooking up to an external monitor at all.

That's just personal preference, though, and it shouldn't really affect your design work a whole lot.

Next question says, "Should you use pixels as a unit of measurement

when choosing a font size in CSS?"

That is such a good question.

It used to be the case that, yeah, a lot of people would use pixels,

which are what are called a fixed unit of measurement,

to set their font sizes.

But nowadays best practice is to use a unit called ems, which is E-M.

You saw that in my code a little bit there.

I set a font size of 3.2 ems or 1.5 ems.

As opposed to a fixed unit of measurement, that is a relative unit of measurement.

So this is actually setting it based on a base size of 1 em.

An em, it's kind of a funky unit of measurement to explain.

There might be a more specific definition, but it has something to do with the height of the letter M,

so that's why it's called ems.

E-M doesn't actually stand for anything, at least I don't think.

Maybe someone can correct me on that.

But yeah, that's a much better way to set your font sizes.

You don't want to use pixels, at least unless you have a really specific reason as to why you're doing that.

You almost always want to set a relative font size

because it's way easier to maintain and it's way easier to adjust your base size

and adjust all of your font sizes relatively to one another.

The last question in the chat today is, "How is Jim doing?"

If you're not familiar, Jim is another one of our teachers at Treehouse.

He's actually recently switched over to the development team,

so he's not doing any teaching of his own these days;

he's actually working on the Treehouse app

and a couple of other cool things that we have in store.

But Jim's doing great. He's doing awesome.

He just came back I think it was from Oslo, if I'm not mistaken.

He took a pretty extended trip there.

I think he was doing a talk out there and then took a little bit of a vacation there.

He's grown this awesome red beard. It's pretty amazing.

But yeah, Jim is doing great. I'm glad somebody asked that.

Well, that's all we have time for today.

If I didn't get to your question, I'm really, really sorry.

If you do have questions for me that I didn't get to,

you can tweet to me. I am @nickrp on Twitter.

Again, my name is Nick Pettit and I'm a web design teacher here at Treehouse,

which of course is the best way to learn web design, web development, and so much more.

You can check us out at TeamTreehouse.com.

We do these livestreams every week on Tuesdays at 2 p.m. Eastern time,

so be sure to tune in at the same time, same place next week.

And I'll see you real soon. Thanks for watching.