[MUSIC]

Now that you know to draw wireframes on paper,

let's explore how to create wireframes on a computer.

Balsamiq is a tool built specifically for wireframing.

It contains UI elements and

devices that can easily be inserted as building blocks for a wireframe.

You can either use Balsamiq Cloud in the browser, or

download the Balsamiq desktop app.

Cloud is available free for 30 days.

And in the Teacher's Notes, I put instructions for

how to extend it to a 60 day trial.

If you prefer to use the desktop app, look in the Teacher's Notes for

a one year license key.

But keep in mind that some features I demo in the cloud version

aren't available on the desktop app.

Alrighty, go ahead and get set up with Balsamiq so you can follow along with me.

Go ahead and open Basalmiq Cloud in a browser.

The URL is balsalmiq.cloud.

The initial screen will differ, based on your account activity.

So click the smiley face icon to navigate to the Spaces screen.

A space is a collection of projects.

If you haven't created one yet, go ahead and click the + icon,

enter a name, And click Create My Space.

I already have a Space so I'm gonna exit this window and

open My Space called Course Demo.

Next I'll show you how to import the project file.

In the project files attached to this video,

I've included my Balsamiq file so you can follow along.

After you download the example file, from the project screen,

click the Import button in the top left corner.

Navigate to where you downloaded the project file, and select it, click Open.

Now you're able to see the project, click to open it.

Feel free to take a peek at this file to get a sense for

how wireframes look in Balsamiq.

Great, now let's create a wireframe from scratch.

Click to the Spaces screen.

For me, my space is called Course Demo.

So I'll just click that in the top nav.

Click the plus icon to create a new project.

Let's get familiar with the UI.

Right now we're mainly looking at the blank canvas.

This white area's where elements can be placed.

On the left is the navigator panel.

This is where you can toggle between the different wireframes.

At the top is the UI library which is where UI elements can be dragged onto

the canvas.

At the top is a toolbar which shows the sections of elements in the UI library.

A couple of handy panels can appear on the right.

The info icon shows the inspector panel.

This is where you can add notes and alternate versions.

When the inspector panel is visible and

you also have an element selected, you'll be able to edit its properties there.

The icon that looks like a document controls the project info panel.

In this panel, you can change the overall project settings.

Now, just to get acquainted with the tool, let's pretend we're making an iPhone app.

I like listening to podcast.

So I'm gonna put together a basic screen that shows a podcast episode.

FIrst, you'll want to start out by choosing the container.

Click Containers, and drag an iPhone to the screen.

The UI library contains a bunch of drag and drop UI elements.

The common section is a great place to see the most frequently used elements.

At the top, I wanna include a navigation bar.

Instead of scrolling through the UI library, I like to use

quick add which basically allows us to search the library by keyword.

We'll need a back arrow in the navigation.

You can click into the Quick Add search bar or you can use a keyboard shortcut.

Just type a forward slash on your keyboard, and

your cursor will appear in the Quick Add search bar.

Type angle, and choose the left one.

Place it where you want it, typically in the top left of the screen.

It's a little big.

So I'm gonna go over here to the info panel and I'm gonna make it smaller.

I'm gonna make it medium sized.

Now drag a line of text to this screen.

This will represent the title of the podcast.

Now I want an image of the podcast at the top.

Drag image onto the canvas.

Resize it by clicking one of the corners and dragging it to the preferred size.

I'm gonna make this one sized to fit full width at the top of the screen.

Now I'm gonna add a line of text.

This will represent a headline.

Under that I'm gonna add a block of text which might have

a description of the podcast episode.

I'm gonna make it a little wider so that way it spans across the device more.

Finally, let's add a button so users can play the episode.

Drag button onto the canvas.

Double click it to change the button text.

And then click enter when you're done.

Great, I'm gonna make it a little bigger so it's easier to click on.

And I also wanna add an icon.

On the right here, there's an icon section.

Search for play, I wanna add a play button.

Great, I'm gonna make it a little wider, so

that way it looks a little bit more balanced.

And I think the icon's a little too big here in proportion to the text.

So let's make the icon extra small.

Great, now we have a basic wireframe.

Just so that you can see more of my canvas, I'm going to hide

the UI library by going to View and then unchecking UI Library.

If you don't like the stytle of the wireframe, you have options.

In the top right of Balsamiq, click the project info icon.

Now you'll see a panel of Project Information on the right.

For skin, choose wireframe.

As you can see, this is more of a technical rendering.

I'm gonna stick with the wireframe skin, since I like how neat it looks.

When you choose a skin, you can do so based on your personal preference

or you can strategically choose the sketch style

to communicate to stakeholders this is your loose brainstorm type sketch.

And then switch to the wireframe skin

when it's time to present a more finalized version to outside clients.

On the panel, you can also adjust the font.

I'm gonna switch to the Lato font.

You can also change the font size and colors, but

I'm gonna stick with the defaults.

We're going to move on to another wireframe now, but

before leaving this one, let's give it a descriptive name.

Click the down arrow on the thumbnail and choose Rename.

I'm gonna call it Podcast App Episode Details and

click Rename.

Now that you're more familiar with Balsamiq, let's get back to our ride

sharing app project for a fictional company called Ride.