Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this live workshop, Treehouse web design teacher Nick Pettit will be demonstrating how to rapidly prototype websites using a combination of mockup tools and front-end frameworks.
[MUSIC].
0:00
Well hey everybody I'm Nick Pettit,
@nickrp on twitter.
0:04
And I am a web design teacher here at
Treehouse, which of course is the
0:09
best way to learn about web design,
0:13
web development, mobile business, and so
much more.
0:15
You can check us out at TeamTreehouse.com
which, I have up right
0:19
here, so when you hit teamtreehouse.com
this is what'll look like.
0:24
You can click on the free trial button to
try it out 14 days
0:30
for free, and once you log in this is what
it will look like.
0:35
You have dashboards so you can keep track
of your learning.
0:40
You can head over to our Tracks, which
0:43
are guided paths that teach you everything
you need
0:46
to know about a particular topic such as
iOS,
0:50
web design, Rails, PHP, Android and so
much more.
0:54
Or you can browse individual courses in
our library and
0:58
you can watch live broadcasts, like this
one right now.
1:03
So, it's pretty cool, definitely be sure
to check that out.
1:08
Today I would like to talk to you about
how I rapidly prototype websites.
1:13
There's a bunch of different ways to do
this, and there's really no right way.
1:20
Everyone does it a little bit different.
1:24
So, you should definitely take what I say
with a
1:26
grain of salt and work it into your own
workflow.
1:28
However, I feel like the things that I do
aren't totally unique, but they're a
1:32
little bit different than some of the more
traditional ways of mocking up websites.
1:37
This can be useful if you're working on
small to
1:43
medium size projects, or if you just wanna
create, you
1:46
know, a one off webpage where you wanna
get something
1:49
out really quick, but you still want it to
look nice.
1:53
traditionally, a lot of web designers will
do one of two things.
1:58
They'll either start making a website in a
program like Photoshop or
2:03
Illustrator, and they'll create these
pixel-perfect mockups, that
2:09
can then be transferred onto the web by
slicing up
2:15
the images, or basically transforming it
into HTML and CSS.
2:19
And creating a website that way.
2:25
I think that is a pretty cumbersome way to
do things.
2:27
Another way that a lot of web designers
and devs will work,
2:32
is they will create a static HTML and CSS
mock up and then hand
2:37
that over to developers to turn into
dynamic code whether
2:42
that's in Rails or PHP or some other back
end language.
2:47
And I also think that that is a little bit
overly complicated.
2:52
And there's much faster ways where you can
go
2:58
from design to something that people are
actually using.
3:01
So I say prototype because you can either
work very iteratively
3:06
where you create you know a, a small set
of design and
3:11
features, and then work your way up to
something more complex.
3:16
Or you can create one prototype after
another.
3:23
So you create a prototype, and then start
3:27
again and throw out what you had
previously.
3:30
It's like I said, there's a bunch of
different
3:33
ways to work and there's really no correct
way.
3:35
It should always be whatever works best
for you.
3:37
So I wrote two blog posts that you may
3:41
want to check out that are related to
this.
3:45
One is called, How I Rapidly Prototype
Websites.
3:48
And this covers a lot of what I will be
talking about today,
3:52
only in text form, so you can check that
out if you'd like.
3:55
I'm sure Chris Zabriskie over here will
put
4:00
that into chat, if you'd like to see that.
4:03
And then there's another blog post that's
related to what
4:07
I was just talking about, called PSD to
HTML is dead.
4:12
And it's got quite a big response I didn't
4:17
really expect people to react as intensely
as they did.
4:20
There was a lot of people on both sides
4:26
of the argument saying well obviously PSD
to HTML is
4:28
dead and then there were other people
saying well, no
4:31
this is most definitely how you should be
making websites.
4:36
Etcetera and everything in between.
4:40
But that's another good article to read,
just to learn
4:43
a little bit more detail about why I
think, that
4:47
creating PSDs and, or Photoshop documents
and turning them into
4:51
HTML is maybe not the most efficient way
to work.
4:56
At least for me.
5:01
So, those are two really good blog posts
to check out.
5:03
So, instead of creating a Photoshop
document or creating static
5:06
HTML in CSS and transforming that into the
final product.
5:11
What I like to do is start with pen and
paper.
5:16
I will close my laptop and I think about
what are all the things that I want to
5:20
see on a page, or even on the entire
5:26
website if I'm starting with something a
little larger.
5:29
And I'll list them all out.
5:35
I'll say, here's maybe the major sections
of
5:37
the site, that I think I'm going to need.
5:40
Or alternatively I'll say here's all of
the major features that I
5:43
would like the site or this web app to be
able to perform.
5:47
And then I can break them out into
different sections.
5:52
It just depends on the project.
5:55
so, make sure to keep that in mind.
5:57
There's no right way to work.
6:00
So after listing everything out, I'll
think about maybe how the features
6:03
relate to one another, see if I can remove
any of those features.
6:07
Because every feature you add is going to
add work at
6:12
every angle, you're going to have to
design it, code it, you're
6:15
going to have to support it later on, you
may have
6:19
to fix things when it breaks, you're gonna
have to modify them.
6:22
So every little thing you add is going to
6:26
inflate the size of the project, so when
listing
6:29
out features like that you should always
think about,
6:32
what would be the consequences of not
doing something.
6:36
So try to eliminate as much as possible
and when you think you have it down to its
6:40
basic component parts, try to even combine
features if it makes sense to do so.
6:45
You always wanna make sure that each
feature is very clear and
6:51
each page on a web site is very clear in
its purpose.
6:55
But sometimes you can add a little bit to
one feature or a little bit
6:59
to one page that actually makes another
7:04
page or another feature completely
irrelevant or redundant.
7:07
So once you've really narrowed it down.
7:12
That's when you can kind of start drawing
shapes and
7:16
you can draw all those out on pen and
paper.
7:20
Sometimes I will actually, use a mockup
7:23
tool, such as Omnigraffle or Balsamiq
Mockups.
7:28
And I'll show you how I do that it
Balsamiq Mockups in just a moment.
7:33
But sometimes I will use a tool if, maybe
7:36
I need to share these drawings with other
people.
7:39
Whether those are stakeholders or clients
or other
7:42
people on a team that I'm working with.
7:45
And, that just keeps it in a digital
format that's really easily sharable.
7:47
So let's actually take a look at, Balsamiq
Mockups right now.
7:54
This is, Balsamiq Mockups.
8:00
It's a desktop tool for mocking up
websites and iPhone apps.
8:02
You can also yeah, like drag out an iPhone
just like that.
8:07
And you can put in like a, a keyboard down
at the, the bottom here.
8:12
And maybe an alert box.
8:18
So it allows you to really quickly mock up
interfaces.
8:21
Just like that.
8:26
So I'm gonna delete all this stuff.
8:27
You can do the same thing of course, for
8:29
websites, so you can drag out a browser
window.
8:32
And you can resize this however you'd
like.
8:35
And then you can put things inside of it.
8:38
One thing that I personally really like
8:42
about Balsamiq Mockups versus a tool like
OmniGraffle,
8:45
or even an illustration tool like
Illustrator,
8:49
is that they have these pre built
components.
8:53
And they also have this really nice
default hand drawn style.
8:56
So everything is, for the most part, in
black and white.
9:01
And all the lines for each one of these
shapes are kind of squiggly.
9:04
I'm not sure if you can perfectly see that
on video but these lines are not perfect.
9:09
And that helps to communicate that this is
just a mockup.
9:15
It's not something that's meant to be
9:19
finalized, and it's not, you know, it's
not
9:22
that the app is actually going to be black
and white with these lines like this.
9:25
It helps to communicate that this is more
so a nice drawing, basically.
9:30
So, like I said, you can just drag out
components and
9:36
drag in buttons, and kind of customize
them however you like.
9:40
It's really pretty easy to work with, and
that's why I like using Balsamiq Mockups.
9:45
So, let's say for instance, that we were
creating some sort of to do list app,
9:51
and we wanted to make sure that we were
designing mobile first in mind.
9:58
We wanted to build something that's going
to be great on phones but
10:05
then can also scale up to a tablet or a
desktop layout if need be.
10:10
But we want to think mobile first because
it's a to do list and we know that
10:15
people are gonna want, or that people are
going to want to use this on the go.
10:20
So I'll drag out an iPhone here and lets
see
10:25
if we can find some sort of check, check
boxes.
10:30
There we go.
10:35
That was actually pretty lucky.
10:35
And you just click right there and there
it is.
10:36
So we can drag that in there.
10:39
We'll customize these in just a moment.
10:42
Lets look for some text.
10:45
And here we go.
10:49
So we can call this My Todo List.
10:50
And just put that up there at the top.
10:56
And then maybe we can add a few buttons to
allow people to add and remove items.
11:01
So let's see if there are some buttons
here that would make sense.
11:08
Maybe I can add a button here that says,
Add.
11:14
So we'll put that there and of course we'd
wanna
11:22
think a lot more about how we're actually
designing this.
11:25
But you get the idea.
11:30
One thing that I also do when I'm not
working super quickly
11:31
like this, is that I will try to design
from the inside out.
11:35
So for example, I would worry about what
this to
11:41
do list is really going to look like and
function like.
11:44
And then I would move outward from there
and say, okay here are the pieces
11:48
of functionality that I need to actually
11:53
modify that to-do list, like this Add
button.
11:56
And then moving further out I would sort
of
12:00
frame the entire app and say, okay maybe
there's a
12:03
title here and maybe there's some
navigation that allows me
12:07
to quickly go from one to do list to
another.
12:11
And so on.
12:15
So, I will try to, start towards the
middle and work my way outwards.
12:17
And doing that allows you to really focus
on the core functionality of the app, and
12:26
it makes it a lot easier to figure
12:31
out what that chrome around the
functionality should be.
12:33
Because a lot of times it's easy to
design, you know,
12:38
a really nice looking header, or some nice
buttons and then you
12:42
get to the middle of the app and you
realize that
12:46
maybe those things aren't what you need
for these bits of functionality.
12:50
So let's just quickly customize this Todo
List.
12:56
Let's see, if I have an x, it's a check
mark.
13:00
So, we'll say this is a grocery list.
13:04
And we'll say bread.
13:08
Milk.
13:11
And eggs.
13:13
It's a pretty short, grocery list.
13:13
There we go, and I can stretch this out,
13:18
maybe style it in a number of different
ways.
13:24
In fact, maybe I would actually want this
to be more of
13:31
like a table view in iOS where you have
different table cells.
13:35
And, you can scroll through the list that
way.
13:40
So maybe I can make this text a little bit
larger.
13:44
And resize that, so you can see
everything.
13:50
And I can center it pretty easily just
like that.
13:55
And I'll say this is a, Grocery list.
13:58
We'll say groceries.
14:02
And we can resize that as well.
14:04
There we go.
14:09
And I can do other things here.
14:09
Maybe I don't want an add button.
14:11
Think I can, yup, drag in an icon here.
14:15
And I think if I double-click on that,
yep, I can see some icons.
14:20
And maybe there's some sort of add button
here.
14:26
Yeah, this looks good.
14:31
There we go.
14:33
So we'll remove that.
14:34
And I'll say that's how you add stuff to
the to-do list.
14:38
I can make that larger, or smaller.
14:41
And you can sort of start to build out an
interface, just like this.
14:47
It's pretty simple to use, and it helps
you communicate ideas very quickly.
14:52
So from here, what do you do?
15:00
Well, let's say, maybe you started out
with pen and paper mockups like this.
15:01
And then you moved on to something like
Balsamiq
15:07
Mockups where you took those pen and paper
mockups,
15:09
maybe clean them up a little bit,
rethought them
15:12
and gave yourself another chance to do
another iteration.
15:15
And then you have them in a digital format
where you can share them.
15:18
Where do you go from there?
15:23
Well, like I said, I try not to include
Photoshop in my process
15:24
unless, I actually need images that are
photographs somewhere on the site.
15:30
Because mocking up an, a website in
Photoshop
15:36
tends to kind of lock you in Photoshop's
15:40
tools, which are really meant for editing
images
15:43
of photo's, not necessarily for mocking up
app.
15:46
A lot of people will use similar tools
15:51
like like illustrator which can be a
little
15:53
bit better, because they're actually
drawing tools that
15:56
are maybe meant for designing things like
that.
16:00
And that can be good, that could be an
alternative
16:03
to maybe this sort of digital mock-up step
like Balsamiq Mockups.
16:06
But, unless you're working on a really big
team, or you need
16:11
really solid mockups that you can share
with stakeholders before
16:16
you actually start coding something that's
fairly complex.
16:21
You should always try to skip it if you
can.
16:27
Now, at Treehouse, for example, we
16:31
will create, mockups in Photoshop and
Illustrator.
16:33
Just so that we can easily communicate
what the final result is going to be.
16:38
But if you have something small to medium
and you don't
16:43
really need a super complex, super
detailed mock up to explain everything.
16:46
Then you can probably skip that step.
16:53
So in that vein we're going to skip
Photoshop
16:56
and instead actually move on to html and
CSS.
17:00
Now one thing I should add here is that
because we are skipping Photoshop.
17:04
You may want to add some sort of color
data into your digital mock
17:11
up and that's okay, if you want to maybe
highlight things or figure out
17:15
what your color scheme is going to be and
maybe color a couple of
17:20
things in, Balsamiq Mockups allows you to
do that and it's pretty easy to do.
17:24
But instead, I'd like to jump over to
another website
17:30
here, [SOUND] which is the site for Zurb
Foundation.
17:36
Now Foundation, is a front end framework
that includes html, css, and javascript.
17:42
And if you're not familiar with the idea
of a front end framework, it's basically
17:51
just a set of HTML, CSS, JavaScript that
helps you get started building a website.
17:58
And typically a framework will include
things like a typography reset, a
18:04
grid and a bunch of grid classes that you
can use to really easily create a layout.
18:10
And lots of other cools stuff, button
stylings, etcetera.
18:18
If you're familiar with Bootstrap, this is
very similar to to that.
18:21
You can use either one.
18:29
In fact you don't have to use Bootstrap or
18:31
Foundation, you could use really any front
end framework.
18:33
But I think the important thing here is to
use a front end framework that has
18:37
a grid system because that's really what's
going
18:42
to enable you to rapidly prototype a
layout.
18:46
So let's jump into Foundation
documentation here.
18:49
And let's go to the grid just so you can
see what I'm talking about.
18:55
You can create some HTML elements here
with the foundation grid styling.
19:01
So let me zoom in just so you can see that
a little bit better.
19:10
So basically you would create a row class
just like this,
19:15
and then in each row you would have
different sets of columns.
19:19
Now I'm not going to go into foundation
too specifically here you can look all
19:25
of this up in documentation or of course
you can learn about it on TreeHouse.
19:29
But that's basically how the grid system
in foundation works.
19:35
So you create these different sets of rows
and
19:39
inside of the rows you fill up 12 columns.
19:43
So you'll notice that each set of these
numbers adds up to 12.
19:46
So what this is saying right here is that
small
19:51
sizes, there should be three different
groups and the first one
19:53
should take up two columns, the second one
should take
19:58
up four and the last will take up the
remaining six.
20:01
At larger sizes it will be four, four and
four so, each column will be evenly sized.
20:05
If we scroll down here, you can see that's
20:11
what that this looks like, as rendered
HTML, so here
20:13
are those four columns, but if I resize
it,
20:16
you'll see that those snap to that, what
was it?
20:20
Two, yeah, two, four, and six.
20:24
And that's right there really the reason
why I like
20:30
working foundation up front is because
it's a responsive framework.
20:34
I really like the way that they do
responsive design.
20:40
It's a mobile first frame work so in our
particular case here, where maybe
20:43
we are designing a mobile web app that
will, will then transfer to desktop.
20:48
Or you're just doing mobile first
responsive web design in general.
20:55
This is a really smart way to work.
20:59
And we jump over here.
21:01
I've another page open where foundation is
21:04
self described as a rapid prototyping
tool.
21:08
They say mockups don't tell a story, build
a prototype in no time.
21:12
And they again, site the grid as something
that's
21:17
really easy for creating these super fast
prototypes.
21:22
And, I have a couple of examples here that
you can look at, so.
21:29
Let's see if I can bring one of these up.
21:33
So for example, you can create a super
quick website layout just like this.
21:37
Just by using foundation and not even
writing any of your own styling.
21:45
And, you might be noticing some of these
images here.
21:50
Let me inspect this element so you can see
where this is coming from.
21:54
Let me copy this url.
22:03
Let's see.
22:05
I think I need to edit the HTML here to
actually get it.
22:08
There we go.
22:12
[SOUND] So Foundation is using a website
for these
22:13
quick prototypes called placehold.it.
22:19
And if we head over to Placehold.it,
you'll see that you can
22:24
create these images just by sending some
URL parameters.
22:30
So, here is an example, you can say
placehold.it
22:36
and then /350x150 and it would create an
image.
22:40
That looks just like this, you can also
adjust the format.
22:46
You can add text.
22:51
You can change the color, size, and so on.
22:52
So this is another great tool when your
building.
22:57
Let's see if I can get that back.
23:02
Oops.
23:04
When your building those quick prototypes,
that allows you
23:05
to sort of fill in the blanks so to speak.
23:10
And add in, places that images should go.
23:12
So you can create these placeholders and
create rapid grids or layouts that way.
23:17
So, that's pretty much it I basically just
to recap, will
23:24
start out on pen and paper listing out all
of the
23:29
features, listing out all of the pages,
and sort of breaking
23:32
things up until I really know what I want
to build.
23:36
Then I will move on to drawing out things
on pen and paper,
23:40
just sort of blocking out the shapes in
large areas of the layout.
23:44
Then I'll clean that up as a digital
mock-up.
23:50
And a tool like Balsamiq Mockups or maybe
even Illustrator
23:53
depending on what sort of detail I think I
need.
23:56
And then I will try to skip Photoshop and
move straight on to mocking things
24:00
up with HTML and CSS using your front end
framework like, Foundation.
24:06
So that's pretty much my whole rapid
prototyping process, and
24:11
if we have any questions now, which I'm
sure we do.
24:16
>> We do.
24:20
>> We can hear from Chris Zabriskie, and I
try to answer them for you.
24:21
>> [LAUGH] Yes.
24:25
At the question desk.
24:25
[COUGH], excuse me, [UNKNOWN] wants to
know
24:27
if you think that prototyping websites is
important
24:30
for any size website, including very small
maybe,
24:33
mom and pop store kind of, client
projects.
24:37
Or if just wire frames along for
24:41
something smaller would be something you'd
recommend?
24:42
>> Definitely, so yes.
24:45
I think prototyping is really important
for
24:47
almost any website, no matter how small.
24:51
I have my website up here, which is at
nickpettit.com.
24:56
This is my own personal website.
25:01
Super duper simple, and it's just a really
simple responsive site.
25:03
basically, when it's small it looks like
that.
25:08
And I still made mock ups for this, even
though it's just one page.
25:11
There's nothing here to navigate too.
25:16
But I think it's definitely an important
step because
25:19
taking that little bit of time, even if
it's just like ten minutes, to draw
25:24
something out on paper or a list out what
you actually want
25:29
the site to be, will give you such a much
more clear vision.
25:32
As to what you actually need to do, what
the work involved really is.
25:37
Because it, if you don't do that small bit
of planning, it's really
25:42
easy to fall into the trap of just
following your habits that you've formed
25:46
over the past couple of projects and just
sort of saying, well you know,
25:51
we probably need an about page, because
people will want to know about us.
25:56
And we need a contact page cuz they need
to contact us.
26:01
And then we need, you know, this other
thing in the footer.
26:04
Maybe you don't need all that.
26:08
Maybe you can just accomplish the exact
same
26:10
goal with just one page or just two pages.
26:13
Or maybe something completely different.
26:17
It's really important to do just some
quick paper
26:20
mock ups because it could prevent you from
basically just wasting a lot of time.
26:26
So.
26:32
>> Cool.
26:33
You knew it was coming.
26:33
The foundation versus bootstrap question.
26:36
But there's a very large discussion
happening.
26:39
The people preferring bootstrap to
foundation and back and forth.
26:41
Obviously foundation and bootstrap is sort
of a
26:44
matter of personal taste more than
anything else.
26:47
But in terms of prototyping you obviously
went straight to foundation.
26:49
Do you prefer foundation for prototyping
to bootstrap?
26:52
>> I've use both and honestly you can just
kind of flip a coin.
26:56
I am pretty indifferent.
27:01
I have been using Foundation lately, but
I've
27:04
also used Bootstrap plenty in the past as
well.
27:08
I think, for me personally, it really just
comes
27:12
down to what kind of mood I'm in that day.
27:16
But I think from a larger perspective,
it's almost just personal
27:19
preference, maybe what other people are
comfortable with on the project.
27:23
Because one thing to keep in mind is that
when you're building
27:28
these rapid prototypes, they could very
easily turn into the actual site.
27:33
There's no reason that you need to just
completely throw
27:38
away that prototype you just built, if you
can just sort
27:41
of fill in the blanks, and put in the text
and
27:44
the images and different pieces of
functionality that you might need.
27:47
So, I would just talk to maybe other
stakeholders on the project, or
27:52
other people that are involved, and just
see what they're most comfortable with.
27:57
Or, if you're the only person on the
28:01
project and you're just building it all by
yourself.
28:03
Try 'em both and see which one you like
the
28:05
best, I mean, it's, it's really, personal
preference at this point.
28:08
I think they're both very similar, with
just some very slight differences.
28:14
>> Definitely, people are going back and
forth about it.
28:20
Joseph wants to know what the essentials
are to great website design prototypes.
28:23
So, obviously it's going to vary from
project to project, but
28:28
when you're talking about in general a
design prototype for a website,
28:31
what are some of the key things you need
to include, you
28:34
want to make sure that you're including
with everything that you're doing?
28:37
What kind of information are you trying to
get across?
28:41
>> Sure, well at each step when you go
28:43
from paper to digital mockup to HTML and
CSS.
28:46
You're obviously including an increasing
amount of detail.
28:50
So at that first sort of pen and paper
stage, I
28:54
will try to just block out the major
portions of the layout.
28:58
And that could be something as simple,
like, okay, I know I'm gonna
29:03
have a header here, a sidebar here and
this is my main content area.
29:08
And maybe there's some things inside that
main content area.
29:13
so, it will be super rough, very broad and
29:18
by just sort of drawing out those shapes
very
29:21
quickly, you can rearrange things and say,
well what
29:25
if the sidebar was actually where the
navigation lives.
29:29
Or what if we had no navigation at all and
29:33
it was just sort of this scrolling one
page site.
29:36
You can very quickly draw out a lot of
stuff.
29:40
And throw it away because you didn't spend
that much time on it.
29:45
That's why I like starting with pen and
paper.
29:49
Once I move to a digital mockup, I kind of
am a little bit more settled on the
29:51
broad shape of things, and I know where
the
29:56
different major pieces of the site are
going to go.
29:59
And I will start to get a little bit more
detailed and say, okay,
30:02
I know the navigation is going to be at
the top of the website.
30:07
Here are the four or five different
navigation items, and it's gonna be a
30:12
horizontal list or maybe it will be
30:18
a drop-down menu, like a little vertical
list.
30:20
And that's the point where I'll start to
kind
30:25
of get into some of those medium level
details.
30:28
And when I actually get into the HTML and
CSS that I finally do have to
30:33
settle and make a decision and say, okay,
the navigation really is gonna go here.
30:39
It's gonna be a horizontal list and it's
gonna be at the top, right in this spot.
30:45
And it's gonna be exactly this size.
30:49
And I need to fill it in with these images
or these different pieces of text.
30:51
So that's a really good question, but yeah
30:57
each step I will increase the level of
detail.
31:00
I don't flush it all out on pen and paper
and then just create a mockup or you know,
31:03
a HTML, CSS prototype for the heck of it,
its its, each step has a purpose.
31:10
>> [UNKNOWN]
31:17
would like to know if there are any free
or open
31:20
source tools that are similar to Balsamiq
that you would recommend.
31:23
Obviously Balsamiq is a paid product.
31:26
Is there anything you've used that's free
or open source or at least
31:28
cheaper that you do recommend because you
seem to really prefer Balsamiq though.
31:31
>> I do.
31:36
That's just because I've been using
Balsamiq for years and years.
31:36
Like, for a long time
31:40
terms of free tools.
31:44
You know, I'm so set in my ways with
Balsamiq, I honestly don't know.
31:45
Which is kinda bad because maybe there is
a tool out there
31:51
that I am not aware of that would suit my
needs slightly better.
31:53
But I'm sure people in the chat
31:57
are probably more knowledgeable about this
than me.
32:02
I'm not really sure.
32:05
I haven't, I, I've seen a couple of things
but nothing that
32:06
quite matches the ease of use and
convenience of Balsamiq, where they
32:10
have these pre-built components you can
just kind of drop in really
32:15
easily that are meant for web design, or
meant for mobile mock ups.
32:19
>> We have some recommendations in the
chat for pencil.
32:25
Tool called pencil.
32:29
>> I will have to check that out.
32:30
>> And let's see, [UNKNOWN] and I wanted
to know if you have used sketch at all.
32:32
And if you have does that make you more
inclined to
32:38
create more high fidelity mock ups with a
tool like sketch?
32:40
Do I use sketch?
32:45
Not really.
32:47
I mean, I, I have tried out sketch a
32:49
little bit and I'm still on the fence
about it.
32:53
I may start to work that into my own work
flow a little bit more.
32:57
I know there's some people that just swear
by it, they just love using Sketch.
33:00
I think, again, that's one of those things
where it's personal preference.
33:05
It's whatever you feel most efficient
with.
33:10
I've been using Balsamiq Mockups for
years, so I'm very efficient with that.
33:13
And I know where everything is.
33:18
but, if you feel like you're totally new
to this and you want
33:21
to give a bunch of different tools a try,
then, yeah, try out sketch.
33:26
I mean, that could definitely lead to
higher fidelity mock-ups.
33:29
I mean, it does have a lot more detail
33:35
obviously then Balsamiq Mockup so how's
that for a non-answer?
33:37
>> [LAUGH] That's a good, that's a very
good non-answer.
33:42
I appreciate it.
33:45
And that's our last question.
33:46
>> Oh, okay.
33:47
Well thanks everybody so much for tuning
in.
33:48
If you wanna learn more about us you can
check us out
33:53
at teamtreehouse.com which of course is
the best way to learn web design.
33:55
Web development, mobile business and so
much more.
33:59
I'm Nick Pettit, @nickrp on Twitter.
34:03
And we will see you real soon.
34:06
You need to sign up for Treehouse in order to download course files.
Sign up