Preview
Video Player
00:00
00:00
Prototyping with Wireframes
3:20A wireframe is a simple version of the final product. Similar to how buildings are made using a simple blueprint drawing, websites are typically first designed with simple black and white lines that help frame where each piece of content should go.
We're finally ready to create
the first wireframe of our design.
0:00
A wireframe is a simple
version of the final product.
0:04
Similar to how buildings are made
using a simple blueprint drawing,
0:08
websites are typically first
designed with simple black and
0:13
white lines that help frame where
each piece of content should go.
0:17
And, they do sort of look like wires.
0:22
There are lots of ways you
can create wireframes.
0:25
You could use pen and paper or, a program
like Sketch, or Photoshop or Illustrator.
0:28
Personally, I like to use
a program called Balsamiq Mockups.
0:35
It has lots of common things you'd
find in a phone app or a website.
0:39
And it gives everything
a nice hand drawn look so
0:44
that when you present your
wireframes to other people,
0:48
it's clear that it's not
intended to be the final product.
0:51
I'm going to hop on my computer and
I encourage you to follow along.
0:55
Again, you don't have to use
Balsamiq Mockups or even a computer, but
0:59
that's what I'm going
to use to demonstrate.
1:04
If you want to follow on paper or
in another tool that's fine too.
1:06
Point your web browser to balsamiq.com.
1:11
That's balsalmiq with a q at the end.
1:16
Then choose download from
the top level navigation menu.
1:19
And then click to download
balsamiq mockups.
1:27
The process will be slightly different
if you're on a Mac or a PC, but
1:32
the app will work the same.
1:37
Once the installation is complete,
take a moment to look at the interface.
1:40
Along the top are several common items
you might find on a website like
1:45
buttons, check boxes and
other common interface elements.
1:51
In the middle of the screen is
a large grid where we can drag
1:57
these items and resize them, and
arrange them however we'd like.
2:02
In the spirit of designing from the inside
out, let's start with a button.
2:08
We'll change the text on this
button to say Pre-Order Now.
2:16
Then let's make this button
a little larger just by dragging on
2:24
the handles here,
because it's an important call to action.
2:29
And then on the right side we have
some properties that we can adjust for
2:35
the currently selected item.
2:40
Let's scroll down here and
increase the font size.
2:43
Let's try something like 18.
2:48
I think that looks good.
2:51
And there are a few other things that
we'll add, but that's enough for
2:56
us to get started.
3:01
We'll need a lot more than just a button,
but if you'd like, take some time to play
3:03
around with Balsamiq Mockups or
whatever mockup tool you decided to use.
3:08
In the next video,
3:12
we'll design the mobile version of our
site before moving on to larger screens.
3:13