[MUSIC].

Well hey everybody I'm Nick Pettit, @nickrp on twitter.

And I am a web design teacher here at Treehouse, which of course is the

best way to learn about web design,

web development, mobile business, and so much more.

You can check us out at TeamTreehouse.com which, I have up right

here, so when you hit teamtreehouse.com this is what'll look like.

You can click on the free trial button to try it out 14 days

for free, and once you log in this is what it will look like.

You have dashboards so you can keep track of your learning.

You can head over to our Tracks, which

are guided paths that teach you everything you need

to know about a particular topic such as iOS,

web design, Rails, PHP, Android and so much more.

Or you can browse individual courses in our library and

you can watch live broadcasts, like this one right now.

So, it's pretty cool, definitely be sure to check that out.

Today I would like to talk to you about how I rapidly prototype websites.

There's a bunch of different ways to do this, and there's really no right way.

Everyone does it a little bit different.

So, you should definitely take what I say with a

grain of salt and work it into your own workflow.

However, I feel like the things that I do aren't totally unique, but they're a

little bit different than some of the more traditional ways of mocking up websites.

This can be useful if you're working on small to

medium size projects, or if you just wanna create, you

know, a one off webpage where you wanna get something

out really quick, but you still want it to look nice.

traditionally, a lot of web designers will do one of two things.

They'll either start making a website in a program like Photoshop or

Illustrator, and they'll create these pixel-perfect mockups, that

can then be transferred onto the web by slicing up

the images, or basically transforming it into HTML and CSS.

And creating a website that way.

I think that is a pretty cumbersome way to do things.

Another way that a lot of web designers and devs will work,

is they will create a static HTML and CSS mock up and then hand

that over to developers to turn into dynamic code whether

that's in Rails or PHP or some other back end language.

And I also think that that is a little bit overly complicated.

And there's much faster ways where you can go

from design to something that people are actually using.

So I say prototype because you can either work very iteratively

where you create you know a, a small set of design and

features, and then work your way up to something more complex.

Or you can create one prototype after another.

So you create a prototype, and then start

again and throw out what you had previously.

It's like I said, there's a bunch of different

ways to work and there's really no correct way.

It should always be whatever works best for you.

So I wrote two blog posts that you may

want to check out that are related to this.

One is called, How I Rapidly Prototype Websites.

And this covers a lot of what I will be talking about today,

only in text form, so you can check that out if you'd like.

I'm sure Chris Zabriskie over here will put

that into chat, if you'd like to see that.

And then there's another blog post that's related to what

I was just talking about, called PSD to HTML is dead.

And it's got quite a big response I didn't

really expect people to react as intensely as they did.

There was a lot of people on both sides

of the argument saying well obviously PSD to HTML is

dead and then there were other people saying well, no

this is most definitely how you should be making websites.

Etcetera and everything in between.

But that's another good article to read, just to learn

a little bit more detail about why I think, that

creating PSDs and, or Photoshop documents and turning them into

HTML is maybe not the most efficient way to work.

At least for me.

So, those are two really good blog posts to check out.

So, instead of creating a Photoshop document or creating static

HTML in CSS and transforming that into the final product.

What I like to do is start with pen and paper.

I will close my laptop and I think about what are all the things that I want to

see on a page, or even on the entire

website if I'm starting with something a little larger.

And I'll list them all out.

I'll say, here's maybe the major sections of

the site, that I think I'm going to need.

Or alternatively I'll say here's all of the major features that I

would like the site or this web app to be able to perform.

And then I can break them out into different sections.

It just depends on the project.

so, make sure to keep that in mind.

There's no right way to work.

So after listing everything out, I'll think about maybe how the features

relate to one another, see if I can remove any of those features.

Because every feature you add is going to add work at

every angle, you're going to have to design it, code it, you're

going to have to support it later on, you may have

to fix things when it breaks, you're gonna have to modify them.

So every little thing you add is going to

inflate the size of the project, so when listing

out features like that you should always think about,

what would be the consequences of not doing something.

So try to eliminate as much as possible and when you think you have it down to its

basic component parts, try to even combine features if it makes sense to do so.

You always wanna make sure that each feature is very clear and

each page on a web site is very clear in its purpose.

But sometimes you can add a little bit to one feature or a little bit

to one page that actually makes another

page or another feature completely irrelevant or redundant.

So once you've really narrowed it down.

That's when you can kind of start drawing shapes and

you can draw all those out on pen and paper.

Sometimes I will actually, use a mockup

tool, such as Omnigraffle or Balsamiq Mockups.

And I'll show you how I do that it Balsamiq Mockups in just a moment.

But sometimes I will use a tool if, maybe

I need to share these drawings with other people.

Whether those are stakeholders or clients or other

people on a team that I'm working with.

And, that just keeps it in a digital format that's really easily sharable.

So let's actually take a look at, Balsamiq Mockups right now.

This is, Balsamiq Mockups.

It's a desktop tool for mocking up websites and iPhone apps.

You can also yeah, like drag out an iPhone just like that.

And you can put in like a, a keyboard down at the, the bottom here.

And maybe an alert box.

So it allows you to really quickly mock up interfaces.

Just like that.

So I'm gonna delete all this stuff.

You can do the same thing of course, for

websites, so you can drag out a browser window.

And you can resize this however you'd like.

And then you can put things inside of it.

One thing that I personally really like

about Balsamiq Mockups versus a tool like OmniGraffle,

or even an illustration tool like Illustrator,

is that they have these pre built components.

And they also have this really nice default hand drawn style.

So everything is, for the most part, in black and white.

And all the lines for each one of these shapes are kind of squiggly.

I'm not sure if you can perfectly see that on video but these lines are not perfect.

And that helps to communicate that this is just a mockup.

It's not something that's meant to be

finalized, and it's not, you know, it's not

that the app is actually going to be black and white with these lines like this.

It helps to communicate that this is more so a nice drawing, basically.

So, like I said, you can just drag out components and

drag in buttons, and kind of customize them however you like.

It's really pretty easy to work with, and that's why I like using Balsamiq Mockups.

So, let's say for instance, that we were creating some sort of to do list app,

and we wanted to make sure that we were designing mobile first in mind.

We wanted to build something that's going to be great on phones but

then can also scale up to a tablet or a desktop layout if need be.

But we want to think mobile first because it's a to do list and we know that

people are gonna want, or that people are going to want to use this on the go.

So I'll drag out an iPhone here and lets see

if we can find some sort of check, check boxes.

There we go.

That was actually pretty lucky.

And you just click right there and there it is.

So we can drag that in there.

We'll customize these in just a moment.

Lets look for some text.

And here we go.

So we can call this My Todo List.

And just put that up there at the top.

And then maybe we can add a few buttons to allow people to add and remove items.

So let's see if there are some buttons here that would make sense.

Maybe I can add a button here that says, Add.

So we'll put that there and of course we'd wanna

think a lot more about how we're actually designing this.

But you get the idea.

One thing that I also do when I'm not working super quickly

like this, is that I will try to design from the inside out.

So for example, I would worry about what this to

do list is really going to look like and function like.

And then I would move outward from there and say, okay here are the pieces

of functionality that I need to actually

modify that to-do list, like this Add button.

And then moving further out I would sort of

frame the entire app and say, okay maybe there's a

title here and maybe there's some navigation that allows me

to quickly go from one to do list to another.

And so on.

So, I will try to, start towards the middle and work my way outwards.

And doing that allows you to really focus on the core functionality of the app, and

it makes it a lot easier to figure

out what that chrome around the functionality should be.

Because a lot of times it's easy to design, you know,

a really nice looking header, or some nice buttons and then you

get to the middle of the app and you realize that

maybe those things aren't what you need for these bits of functionality.

So let's just quickly customize this Todo List.

Let's see, if I have an x, it's a check mark.

So, we'll say this is a grocery list.

And we'll say bread.

Milk.

And eggs.

It's a pretty short, grocery list.

There we go, and I can stretch this out,

maybe style it in a number of different ways.

In fact, maybe I would actually want this to be more of

like a table view in iOS where you have different table cells.

And, you can scroll through the list that way.

So maybe I can make this text a little bit larger.

And resize that, so you can see everything.

And I can center it pretty easily just like that.

And I'll say this is a, Grocery list.

We'll say groceries.

And we can resize that as well.

There we go.

And I can do other things here.

Maybe I don't want an add button.

Think I can, yup, drag in an icon here.

And I think if I double-click on that, yep, I can see some icons.

And maybe there's some sort of add button here.

Yeah, this looks good.

There we go.

So we'll remove that.

And I'll say that's how you add stuff to the to-do list.

I can make that larger, or smaller.

And you can sort of start to build out an interface, just like this.

It's pretty simple to use, and it helps you communicate ideas very quickly.

So from here, what do you do?

Well, let's say, maybe you started out with pen and paper mockups like this.

And then you moved on to something like Balsamiq

Mockups where you took those pen and paper mockups,

maybe clean them up a little bit, rethought them

and gave yourself another chance to do another iteration.

And then you have them in a digital format where you can share them.

Where do you go from there?

Well, like I said, I try not to include Photoshop in my process

unless, I actually need images that are photographs somewhere on the site.

Because mocking up an, a website in Photoshop

tends to kind of lock you in Photoshop's

tools, which are really meant for editing images

of photo's, not necessarily for mocking up app.

A lot of people will use similar tools

like like illustrator which can be a little

bit better, because they're actually drawing tools that

are maybe meant for designing things like that.

And that can be good, that could be an alternative

to maybe this sort of digital mock-up step like Balsamiq Mockups.

But, unless you're working on a really big team, or you need

really solid mockups that you can share with stakeholders before

you actually start coding something that's fairly complex.

You should always try to skip it if you can.

Now, at Treehouse, for example, we

will create, mockups in Photoshop and Illustrator.

Just so that we can easily communicate what the final result is going to be.

But if you have something small to medium and you don't

really need a super complex, super detailed mock up to explain everything.

Then you can probably skip that step.

So in that vein we're going to skip Photoshop

and instead actually move on to html and CSS.

Now one thing I should add here is that because we are skipping Photoshop.

You may want to add some sort of color data into your digital mock

up and that's okay, if you want to maybe highlight things or figure out

what your color scheme is going to be and maybe color a couple of

things in, Balsamiq Mockups allows you to do that and it's pretty easy to do.

But instead, I'd like to jump over to another website

here, [SOUND] which is the site for Zurb Foundation.

Now Foundation, is a front end framework that includes html, css, and javascript.

And if you're not familiar with the idea of a front end framework, it's basically

just a set of HTML, CSS, JavaScript that helps you get started building a website.

And typically a framework will include things like a typography reset, a

grid and a bunch of grid classes that you can use to really easily create a layout.

And lots of other cools stuff, button stylings, etcetera.

If you're familiar with Bootstrap, this is very similar to to that.

You can use either one.

In fact you don't have to use Bootstrap or

Foundation, you could use really any front end framework.

But I think the important thing here is to use a front end framework that has

a grid system because that's really what's going

to enable you to rapidly prototype a layout.

So let's jump into Foundation documentation here.

And let's go to the grid just so you can see what I'm talking about.

You can create some HTML elements here with the foundation grid styling.

So let me zoom in just so you can see that a little bit better.

So basically you would create a row class just like this,

and then in each row you would have different sets of columns.

Now I'm not going to go into foundation too specifically here you can look all

of this up in documentation or of course you can learn about it on TreeHouse.

But that's basically how the grid system in foundation works.

So you create these different sets of rows and

inside of the rows you fill up 12 columns.

So you'll notice that each set of these numbers adds up to 12.

So what this is saying right here is that small

sizes, there should be three different groups and the first one

should take up two columns, the second one should take

up four and the last will take up the remaining six.

At larger sizes it will be four, four and four so, each column will be evenly sized.

If we scroll down here, you can see that's

what that this looks like, as rendered HTML, so here

are those four columns, but if I resize it,

you'll see that those snap to that, what was it?

Two, yeah, two, four, and six.

And that's right there really the reason why I like

working foundation up front is because it's a responsive framework.

I really like the way that they do responsive design.

It's a mobile first frame work so in our particular case here, where maybe

we are designing a mobile web app that will, will then transfer to desktop.

Or you're just doing mobile first responsive web design in general.

This is a really smart way to work.

And we jump over here.

I've another page open where foundation is

self described as a rapid prototyping tool.

They say mockups don't tell a story, build a prototype in no time.

And they again, site the grid as something that's

really easy for creating these super fast prototypes.

And, I have a couple of examples here that you can look at, so.

Let's see if I can bring one of these up.

So for example, you can create a super quick website layout just like this.

Just by using foundation and not even writing any of your own styling.

And, you might be noticing some of these images here.

Let me inspect this element so you can see where this is coming from.

Let me copy this url.

Let's see.

I think I need to edit the HTML here to actually get it.

There we go.

[SOUND] So Foundation is using a website for these

quick prototypes called placehold.it.

And if we head over to Placehold.it, you'll see that you can

create these images just by sending some URL parameters.

So, here is an example, you can say placehold.it

and then /350x150 and it would create an image.

That looks just like this, you can also adjust the format.

You can add text.

You can change the color, size, and so on.

So this is another great tool when your building.

Let's see if I can get that back.

Oops.

When your building those quick prototypes, that allows you

to sort of fill in the blanks so to speak.

And add in, places that images should go.

So you can create these placeholders and create rapid grids or layouts that way.

So, that's pretty much it I basically just to recap, will

start out on pen and paper listing out all of the

features, listing out all of the pages, and sort of breaking

things up until I really know what I want to build.

Then I will move on to drawing out things on pen and paper,

just sort of blocking out the shapes in large areas of the layout.

Then I'll clean that up as a digital mock-up.

And a tool like Balsamiq Mockups or maybe even Illustrator

depending on what sort of detail I think I need.

And then I will try to skip Photoshop and move straight on to mocking things

up with HTML and CSS using your front end framework like, Foundation.

So that's pretty much my whole rapid prototyping process, and

if we have any questions now, which I'm sure we do.

>> We do.

>> We can hear from Chris Zabriskie, and I try to answer them for you.

>> [LAUGH] Yes.

At the question desk.

[COUGH], excuse me, [UNKNOWN] wants to know

if you think that prototyping websites is important

for any size website, including very small maybe,

mom and pop store kind of, client projects.

Or if just wire frames along for

something smaller would be something you'd recommend?

>> Definitely, so yes.

I think prototyping is really important for

almost any website, no matter how small.

I have my website up here, which is at nickpettit.com.

This is my own personal website.

Super duper simple, and it's just a really simple responsive site.

basically, when it's small it looks like that.

And I still made mock ups for this, even though it's just one page.

There's nothing here to navigate too.

But I think it's definitely an important step because

taking that little bit of time, even if it's just like ten minutes, to draw

something out on paper or a list out what you actually want

the site to be, will give you such a much more clear vision.

As to what you actually need to do, what the work involved really is.

Because it, if you don't do that small bit of planning, it's really

easy to fall into the trap of just following your habits that you've formed

over the past couple of projects and just sort of saying, well you know,

we probably need an about page, because people will want to know about us.

And we need a contact page cuz they need to contact us.

And then we need, you know, this other thing in the footer.

Maybe you don't need all that.

Maybe you can just accomplish the exact same

goal with just one page or just two pages.

Or maybe something completely different.

It's really important to do just some quick paper

mock ups because it could prevent you from basically just wasting a lot of time.

So.

>> Cool.

You knew it was coming.

The foundation versus bootstrap question.

But there's a very large discussion happening.

The people preferring bootstrap to foundation and back and forth.

Obviously foundation and bootstrap is sort of a

matter of personal taste more than anything else.

But in terms of prototyping you obviously went straight to foundation.

Do you prefer foundation for prototyping to bootstrap?

>> I've use both and honestly you can just kind of flip a coin.

I am pretty indifferent.

I have been using Foundation lately, but I've

also used Bootstrap plenty in the past as well.

I think, for me personally, it really just comes

down to what kind of mood I'm in that day.

But I think from a larger perspective, it's almost just personal

preference, maybe what other people are comfortable with on the project.

Because one thing to keep in mind is that when you're building

these rapid prototypes, they could very easily turn into the actual site.

There's no reason that you need to just completely throw

away that prototype you just built, if you can just sort

of fill in the blanks, and put in the text and

the images and different pieces of functionality that you might need.

So, I would just talk to maybe other stakeholders on the project, or

other people that are involved, and just see what they're most comfortable with.

Or, if you're the only person on the

project and you're just building it all by yourself.

Try 'em both and see which one you like the

best, I mean, it's, it's really, personal preference at this point.

I think they're both very similar, with just some very slight differences.

>> Definitely, people are going back and forth about it.

Joseph wants to know what the essentials are to great website design prototypes.

So, obviously it's going to vary from project to project, but

when you're talking about in general a design prototype for a website,

what are some of the key things you need to include, you

want to make sure that you're including with everything that you're doing?

What kind of information are you trying to get across?

>> Sure, well at each step when you go

from paper to digital mockup to HTML and CSS.

You're obviously including an increasing amount of detail.

So at that first sort of pen and paper stage, I

will try to just block out the major portions of the layout.

And that could be something as simple, like, okay, I know I'm gonna

have a header here, a sidebar here and this is my main content area.

And maybe there's some things inside that main content area.

so, it will be super rough, very broad and

by just sort of drawing out those shapes very

quickly, you can rearrange things and say, well what

if the sidebar was actually where the navigation lives.

Or what if we had no navigation at all and

it was just sort of this scrolling one page site.

You can very quickly draw out a lot of stuff.

And throw it away because you didn't spend that much time on it.

That's why I like starting with pen and paper.

Once I move to a digital mockup, I kind of am a little bit more settled on the

broad shape of things, and I know where the

different major pieces of the site are going to go.

And I will start to get a little bit more detailed and say, okay,

I know the navigation is going to be at the top of the website.

Here are the four or five different navigation items, and it's gonna be a

horizontal list or maybe it will be

a drop-down menu, like a little vertical list.

And that's the point where I'll start to kind

of get into some of those medium level details.

And when I actually get into the HTML and CSS that I finally do have to

settle and make a decision and say, okay, the navigation really is gonna go here.

It's gonna be a horizontal list and it's gonna be at the top, right in this spot.

And it's gonna be exactly this size.

And I need to fill it in with these images or these different pieces of text.

So that's a really good question, but yeah

each step I will increase the level of detail.

I don't flush it all out on pen and paper and then just create a mockup or you know,

a HTML, CSS prototype for the heck of it, its its, each step has a purpose.

>> [UNKNOWN]

would like to know if there are any free or open

source tools that are similar to Balsamiq that you would recommend.

Obviously Balsamiq is a paid product.

Is there anything you've used that's free or open source or at least

cheaper that you do recommend because you seem to really prefer Balsamiq though.

>> I do.

That's just because I've been using Balsamiq for years and years.

Like, for a long time

terms of free tools.

You know, I'm so set in my ways with Balsamiq, I honestly don't know.

Which is kinda bad because maybe there is a tool out there

that I am not aware of that would suit my needs slightly better.

But I'm sure people in the chat

are probably more knowledgeable about this than me.

I'm not really sure.

I haven't, I, I've seen a couple of things but nothing that

quite matches the ease of use and convenience of Balsamiq, where they

have these pre-built components you can just kind of drop in really

easily that are meant for web design, or meant for mobile mock ups.

>> We have some recommendations in the chat for pencil.

Tool called pencil.

>> I will have to check that out.

>> And let's see, [UNKNOWN] and I wanted to know if you have used sketch at all.

And if you have does that make you more inclined to

create more high fidelity mock ups with a tool like sketch?

Do I use sketch?

Not really.

I mean, I, I have tried out sketch a

little bit and I'm still on the fence about it.

I may start to work that into my own work flow a little bit more.

I know there's some people that just swear by it, they just love using Sketch.

I think, again, that's one of those things where it's personal preference.

It's whatever you feel most efficient with.

I've been using Balsamiq Mockups for years, so I'm very efficient with that.

And I know where everything is.

but, if you feel like you're totally new to this and you want

to give a bunch of different tools a try, then, yeah, try out sketch.

I mean, that could definitely lead to higher fidelity mock-ups.

I mean, it does have a lot more detail

obviously then Balsamiq Mockup so how's that for a non-answer?

>> [LAUGH] That's a good, that's a very good non-answer.

I appreciate it.

And that's our last question.

>> Oh, okay.

Well thanks everybody so much for tuning in.

If you wanna learn more about us you can check us out

at teamtreehouse.com which of course is the best way to learn web design.

Web development, mobile business and so much more.

I'm Nick Pettit, @nickrp on Twitter.

And we will see you real soon.