Balsamiq Wireframe Free

This list of free wireframe tools will help you find the best solution to create modern state of the art mockups, and website prototypes. Web designers dream. Balsamiq Mockups - Quick Guide - When it comes to software development, it is more than important to know how the actual software will look, way before the actual development starts. Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer. It really forces you to focus on structure and content, avoiding lengthy discussions about colors and details that should come later in the process. Balsamiq Wireframes (FREE TRIAL). Balsamiq Wireframes allows you to create, edit and share sketch-quality. Learn to Wireframe with Balsamiq Balsamiq.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial.

Balsamiq Wireframe Free Download

Balsamiq is a tool built specifically for wireframing. It contains UI elements and devices that can easily be inserted as building blocks for your wireframe.

Wireframing tool used in this stage:

  • Balsamiq Cloud: Visit Treehouse Perks for information on how to get a 90-day free trial.

Other Tools

  • Balsamiq Wireframes for Desktop: If you prefer to use the desktop version of Balsamiq, check your email for an exclusive extended trial offer.
  • Tools not used in this course: Omnigraffle, Axure, Go Mockingbird, and UXPin
Now that you know todraw wireframes on paper, 0:04
let's explore how to createwireframes on a computer. 0:07
Balsamiq is a tool built specifically forwireframing. 0:11
devices that can easily be insertedas building blocks for a wireframe. 0:16
You can either use Balsamiq Cloudin the browser, or 0:21
Cloud is available free for 30 days. 0:27
And in the Teacher's Notes,I put instructions for 0:30
If you prefer to use the desktop app,look in the Teacher's Notes for 0:35
But keep in mind that some featuresI demo in the cloud version 0:41
Alrighty, go ahead and get set up withBalsamiq so you can follow along with me. 0:47
Go ahead andopen Basalmiq Cloud in a browser. 0:52
The initial screen will differ,based on your account activity. 1:04
So click the smiley face icon tonavigate to the Spaces screen. 1:08
If you haven't created one yet,go ahead and click the + icon, 1:17
I already have a Space soI'm gonna exit this window and 1:31
Next I'll show you how toimport the project file. 1:38
I've included my Balsamiq file soyou can follow along. 1:45
After you download the example file,from the project screen, 1:48
click the Import buttonin the top left corner. 1:53
Navigate to where you downloaded theproject file, and select it, click Open. 1:56
Now you're able to see the project,click to open it. 2:05
Feel free to take a peek atthis file to get a sense for 2:11
Great, now let's createa wireframe from scratch. 2:20
For me, my space is called Course Demo. 2:26
Click the plus icon tocreate a new project. 2:33
Right now we're mainlylooking at the blank canvas. 2:41
This white area's whereelements can be placed. 2:46
This is where you can togglebetween the different wireframes. 2:52
At the top is the UI library which iswhere UI elements can be dragged onto 2:56
At the top is a toolbar which shows thesections of elements in the UI library. 3:03
A couple of handy panelscan appear on the right. 3:09
This is where you can add notes andalternate versions. 3:16
you also have an element selected, you'llbe able to edit its properties there. 3:24
The icon that looks like a documentcontrols the project info panel. 3:30
In this panel, you can changethe overall project settings. 3:34
Now, just to get acquainted with the tool,let's pretend we're making an iPhone app. 3:39
So I'm gonna put together a basicscreen that shows a podcast episode. 3:47
FIrst, you'll want to startout by choosing the container. 3:52
Click Containers, anddrag an iPhone to the screen. 3:55
The UI library contains a bunchof drag and drop UI elements. 4:00
The common section is a great place tosee the most frequently used elements. 4:06
At the top,I wanna include a navigation bar. 4:13
Instead of scrolling throughthe UI library, I like to use 4:17
quick add which basically allows usto search the library by keyword. 4:21
You can click into the Quick Add searchbar or you can use a keyboard shortcut. 4:29
Just type a forward slashon your keyboard, and 4:36
Balsamiq free online
your cursor will appear inthe Quick Add search bar. 4:39
Place it where you want it,typically in the top left of the screen. 4:51
So I'm gonna go over here to the infopanel and I'm gonna make it smaller. 4:57
Now drag a line of text to this screen. 5:06
This will representthe title of the podcast. 5:08
Now I want an image ofthe podcast at the top. 5:13
Resize it by clicking one of the cornersand dragging it to the preferred size. 5:19
I'm gonna make this one sized to fitfull width at the top of the screen. 5:24
This will represent a headline. 5:38
Under that I'm gonna add a blockof text which might have 5:45
I'm gonna make it a little wider sothat way it spans across the device more. 5:54
Finally, let's add a button sousers can play the episode. 5:59
Double click it to change the button text. 6:11
Great, I'm gonna make it a littlebigger so it's easier to click on. 6:22
On the right here,there's an icon section. 6:29

Balsamiq Wireframe Freeware

Great, I'm gonna make it a little wider,so 6:38
that way it looks a littlebit more balanced. 6:40
And I think the icon's a little toobig here in proportion to the text. 6:44
Great, now we have a basic wireframe. 6:52
Just so that you can see moreof my canvas, I'm going to hide 6:56
the UI library by going to View andthen unchecking UI Library. 7:01
If you don't like the stytle ofthe wireframe, you have options. 7:08
In the top right of Balsamiq,click the project info icon. 7:12
Now you'll see a panel ofProject Information on the right. 7:17
As you can see,this is more of a technical rendering. 7:25
I'm gonna stick with the wireframe skin,since I like how neat it looks. 7:28
When you choose a skin, you can do sobased on your personal preference 7:32
or you can strategicallychoose the sketch style 7:38
to communicate to stakeholders thisis your loose brainstorm type sketch. 7:43
when it's time to present a morefinalized version to outside clients. 7:51
I'm gonna switch to the Lato font. 8:00

Balsamiq Free Online

You can also change the font size andcolors, but 8:04
We're going to move on toanother wireframe now, but 8:10
before leaving this one,let's give it a descriptive name. 8:13
Click the down arrow on the thumbnail andchoose Rename. 8:17
I'm gonna call itPodcast App Episode Details and 8:23
Now that you're more familiar withBalsamiq, let's get back to our ride 8:34

Balsamiq Wireframe For Free

sharing app project fora fictional company called Ride. 8:39

You need to sign up for Treehouse in order to download course files.