So, what tools might you use to create your wireframes?
Of course there is pen and paper you can always use
that and sometimes I think it's a good idea to start there,
just get your thoughts out there do something nimbly with your hands.
It's nice to start design processes with your hands instead of the computer.
However, eventually I would suggest that wireframes should
end up in the computer if only that it allows you to
revise them more easily and oftentimes you go through multiple phases when working with
a client and presenting a first set of wireframes
will oftentimes lead to changes that need to be implemented,
and if you're working by hand,
you just have to start over, right?
Or you erase everything that's kind of smudgy,
so I like working on the computer for final wireframes.
So, Illustrator is another fine option for a tool to create wireframes.
It allows you to create boxes and texts and
lines and that's all we need for wireframes, right?
So, the example here is a wireframe I created in illustrator for
an architecture studio and what you're seeing here is the wireframe for the landing page.
Where Illustrator can get tricky is that it allows you to
do too much do you put down a piece of type you
actually have to choose the typeface and you
might get into this rabbit hole of hunting for
the best typeface for your wireframes where as I said
before it's not the time to make those decisions.
So, instead there are
some designated wireframe tools out there
and the one that I really like is called Balsamiq.
It's made with the sole purpose to allow you to create wireframes.
They have an app that you can download and install on your computer,
but they also have a cloud-based tool that works in your browser.
And the nice thing is that they actually give you
a 30-day free trial to try out their software,
so I would really encourage you to create your wireframes for this class in Balsamiq.
I think you'll find the software quite intuitive and easy to learn.
I'm just going to give you a quick tour so you will get
an idea of how the software works.
So, here I am logged into Balsamiq Cloud and you can have
multiple projects here and you see there's already one that I created,
which is for a previous lecture.
I created all the form UI elements that I showed in a previous lecture here in Balsamiq.
You'll see these patterns come with Balsamiq,
you don't have to create them on your own.
So if I wanted to add another checkbox item here, I can double-click.
There's a specific easy to learn syntax,
so if I wanted to add another checkbox item that isn't selected,
I can do that and there it is in my wireframe.
So, let me create a quick wireframe from scratch.
I can create a new wireframe that's completely blank and add a few elements and
I find the best way to work with Balsamiq is to use the "Quick Add" function.
You just type in what you need.
So, first thing I'll need is a browser window and I'll type in
browser and here in the list the UI element actually shows up.
I click on it and there it is.
All right, so, now I can make it bigger I can double-click on it.
There are some options.
My site mysite.com.
These two things now show up in
the browser window and since I don't want to inadvertently select this browser window,
I can lock it by right-clicking on it and saying lock.
All right, so, what else are we going to add here.
Maybe a logo for that I usually just use an icon and a label pattern.
There it is, some text underneath just an empty icon.
If I click on it, I can label it and I can also add some links.
So, there's a button bar pattern.
I can have a comma separated list here.
Let's just say About Us,
Our Products and Contact.
Then we'll add a title for the page title
and maybe this About Us page just has a video player and a caption.
So, you can search for video,
add a player here,
resize it however I want and then let's say there's
a caption to the left of it just describing what this video will show us.
If I search for block I'll get this pattern called a block of text.
Maybe we don't know what that caption will say,
we just know it'll say something, right?
So, instead of having to write it at this point,
I will just indicate, oh there's going to be some text there.
At this point, I should also show you that there's actually
two flavors of this wireframing skin that Balsamiq comes with.
If you go to the project info,
there is a skin option right here on the bottom and right now I'm using
the sketch skin which has quite a bit of a hand drawing feel to it,
but there's also more streamlined wireframe skin that looks a little bit cleaner.
So, it depends what you prefer.
So, let's quickly create a second wireframe for the Our Products page.
I can just go to the page here on the left and click on duplicate,
and then have a copy of the previous wireframes.
I can delete the elements I don't need.
This title becomes products.
Here when I click on the button bar,
I can change which link is actually active.
So, now our navigation reflects the page that we're on.
And here maybe we just have some thumbnail images.
So, image that's just a box with an X,
make that a certain size,
and I can hit Command D to duplicate it and now I have
four products that presumably when we click on them go to a detail page, right?
So, my second wireframe is already done in this very simple example anyway.
The last thing I'll show is you can use this tool also to make a clickable prototype.
Let's actually name our wireframes here.
So this is about,
this one is our products.
So, now when I click on the button bar on the About Us page, there are links.
Our Products link goes to the Our Products page and then on the Our Products page,
the About Us links to about then I can use Balsamiq to actually have a click-through.
So, I do that by going into the presentation modes with the link on the top right corner
full screen presentation and now I can click on About us go to the About us page,
click on Our Products or toggle back and forth.
And it seems like I'm navigating this website and you
can see how this can become fairly complex.
I've got to say, I don't use Balsamiq all that often in that way.
I usually just print things out or make
PDFs and send it to a client and then have a discussion about them.
But since this is Cloud-based,
you could actually send a link to a client have them navigate through your wireframes.
