Easy Wireframes with Balsamiq - GiveawayListThumbs

Easy Wireframes with Balsamiq - Giveaway

February 14, 2009

When designing something there are always some basic steps we follow. They might differ from designer to designer, but one thing is most certain, there will be a sort of sketching/conceptual step, when the colors and details are not important but where we put together an idea of what the design will have in terms of elements and form.

With web design it’s no different. We need to create a rough wireframe of what the thing will look like, prior to building a wireframe in HTML showing behaviors. I usually do that on paper pretty fast, however as I’ve been working apart from my colleagues it was always very hard to send them those drawings. I had always to go to Fireworks or Illustrator to mock it up.

Even though it’s simple to achieve in FW or AI, I needed to create all UI elements like scroll bar, video players, etc. That’s where Balsamiq comes to help us.

Balsamiq is a very useful tool. Built in AIR it simply has a library of UI elements that you can drag to your canvas and create nice and simple wireframes pretty easily; and very quickly. It comes with a huge library of UI elements from Browser Window to Cover Flow element. It has pretty much everything you need to create a simple wireframe. You can export as a PNG or even as an XML file, allowing you to sent it to your coworkers so they can import and edit your prototype.

Using

Balsamiq Mockups feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

Balsamiq is really cool, the only thing that bothers me is the Comic Sans font, maybe they could use a different one. Also, We have a license for

Balsamiq to giveaway. To win just leave a comment. The winner will be announced next week.

Some Examples of Wireframes created with Balsamiq.

Wireframe created with Balsamiq

Wireframe created with Balsamiq

Wireframe created with Balsamiq

Wireframe created with Balsamiq

Wireframe created with Balsamiq

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

136 Comments

Auth3nticK02/14/2009

Wow, Balsamiq looks like a very nice utility. Thanks for the oppurtunity, and also for showing the community this utility; as im sure like myself, not many people have heard of it, but now they know.

Martiin02/14/2009

hi :)
i wanna win it :D
martin

ps: nice blog =P

Staicu Ionut Bogdan02/14/2009

Hmm... I used few times their demo and i liked. Maybe i will have some luck? :D

bbosiak02/14/2009

Well this program really works well. Had a chance to try it couple of times, but unfortunately I was unable to get license. Really worth trying though!

Monkeytail02/14/2009

This is my comment :)

Graphfruit02/14/2009

Thanks for showing us this cool program! I was actually looking for something similar as I'm in the same situation as you were.

srpsco02/14/2009

I was just checking these type of tools out thanks.

Roscoe02/14/2009

This is a comment!

RaiserjunioR02/14/2009

Balsamiq looks like a very nice utility and very simple. thanks for showing this cool thing

Rottn_Johnny0702/14/2009

What a great timesaver. I have to admit that I have not heard of this one before. Thanks for bringing it to our attention.

PhraiL02/14/2009

I've heard lots about this tool. Looks really awesome!

Kiran Patel02/14/2009

Looks kl, Would help me a lot when desiging websites as i'm just starting out to be web designer! :)

Radu02/14/2009

Wow, this could really speed up web developing. Yes, I agree about the Comic Sans. But hey, it does give it the mock-up feeling, right?

eU-aLeX02/14/2009

very usefull tool
now i don't have to buy the equipment

Guido02/14/2009

Simples e com um resultado muito legal!

Simon Steele02/14/2009

Never heard of this program looks cool

Brynjar02/14/2009

Balsamiq seems like a tool I have been looking for, for quite some time. I would love to be selected to win a copy.

Mike Skocko02/14/2009

Just downloaded and test-drove the trial version. A very inventive tool for ideating.

PixlNinja02/14/2009

Really made a buzz all over the web... I like to use this tools than just trying it... This will be very useful for Interface /user experience designers.

delorian02/14/2009

Looks like a neat little program for those who might need it. (:

frosteeice02/14/2009

Would love to try this out. Thanks for the contest!

MultiDesign02/14/2009

Nice Tool :)

Deletribe02/14/2009

Interesting! Haven't heard of this, but it does certainly seem promising. Ought to make client mockups -far- easier.

Alexis Mejias02/14/2009

this tool seems really cool. Thanks for the opportunity

Jason Calleiro02/14/2009

This seems awesome and would save me a ton of time when working with clients.

Jorge Junior02/14/2009

Adorei a ideia. Literalmente uma ferramenta mto útil.

This is da future! amen brotha?

Massimo02/14/2009

cool app!

Filipek02/14/2009

Impressive. Looks really handy.

der boschtel02/14/2009

never heard of it before – but i'll live it!!!

Josh02/14/2009

Sweet!!!

Seppe02/14/2009

This looks interesting. It could be a very handy utility to slip into the pre-production workflow. Thanks for bringing this to my attention, and for the chance to win it. ;)

Adrian8902/14/2009

Looks very nifty and a huge time saver. I'd ditch the Comic Sans though ;)

cartaborda02/14/2009

I need this for our UX and Interface design!

Karsh02/14/2009

Very cool! This would save me hours of building wireframes in Visio. :)

Toby02/14/2009

Wow, that looks pretty sweet. Want!

Toby02/14/2009

Wow, that looks really nice.

David Mead02/14/2009

Wow, looks like a really handy app, I hope I win.

Chad Maag02/14/2009

Sounds like a great tool.

Atlanta georgia real estate02/14/2009

Looks great! Thanks for the info!

Torey02/14/2009

Wow, what a useful tool! I can see where this would be really great. Tho, I agree about the comic sans. It kind of starts looking like a kindergarten class' version of a website. ;)

glnster02/14/2009

Wow! teh awesome! Would really help get ideas out of one's brain and onto screen effortlessly. :0)

mjason02/14/2009

Nice tools, very useful !

Dante02/14/2009

Wow, very nice app. Thanks for the opportunity.

saud02/14/2009

cool! I want one!

Peldi02/14/2009

Hi there, Peldi here from Balsamiq. Re: Comic Sans, it's a really long story...but anyways, you can swap it out with any other font on your system if you wish to do so, instructions here: http://www.balsamiq.com/products/mockups/help#air

Thanks for the nice review (and comments!), happy to provide the free giveaway license!

Sanik02/14/2009

nice. don't like comic font

JeremySkelly02/14/2009

You mean I could stop using Visio!? Seriously, cool product... Thanks for the chance to win it...

Yopladas02/14/2009

Cool stuff.

If I don't win, I'll just buy...

Kenneth02/14/2009

Time saved equals art made.

DCalDesign02/14/2009

Ohhh! Ohhh! pick me!!! That is pretty dang sweet! Thanks for the chance !
God bless.
David.
www.stopdropanddesign.com

Heldrik02/14/2009

Easy to use, fun and very useful. I love it!

iluvhatemail02/14/2009

looks very useful

Bobby02/15/2009

as a budding web designer i could definitely use this- can you consider me for this giveaway?

warmly,
bobby

Christelle02/15/2009

Looks cool!

Alfredo Matos02/15/2009

I bumped against this last week and quickly dismissed it. You're review however made take a second look, and it looks awesome. Very useful.

Erik02/15/2009

Fuckin Awsome oO''

Really useful.

Mysta02/15/2009

Wow, a lot of these tools have been passing through my feed reader as of late, and this one is by far the most useful I've seen. Kudos to Balsamiq!

Hugo02/15/2009

I've used balsamiq in the past. It is indeed a great tool. Thought about convincing my boss at work to buy a license for me.

Pneumatic02/15/2009

Looks promising as a rapid prototyping / wireframing tool.

Pablo Cordero02/15/2009

Great resource! Thanks for sharing and thanks for giving us the chance to give this away.

adiophile077802/15/2009

Awesome! Looks great, would be fun to experiment with

tiger02/15/2009

nice! and fun to use...

nana02/15/2009

I need this tool!!! Awesome!

Tom02/15/2009

it's very linear andvery fun to abuse in wallpapers..

i'll give it a try in photoshop orso...

Steve B02/15/2009

Excellent idea - this would be somewhere in between paper sketches and the Photoshop mock-up. Just what I need at the moment!

WilhelmR02/15/2009

Count me in! :)

John McSwain02/15/2009

I would like to win too! This seems like a great tool to have...

Stephen Allred02/15/2009

I've been thinking about buying Balsamiq, so it would be cool to win a copy.

Andreagam02/15/2009

I like the 'pencil-like' feel.
Nice would be to have an easy and effective tool for wireframing...

detruk02/15/2009

Wao...
It seems to be very funny and usefull furthermore ?!
I totally didn't know this service...
Great idea this giveway ... :)

Yoshikun02/15/2009

Hmm, seems to expensive for what it does.
Not sure it fills the gap between sketching on paper or photoshop.

Vince02/15/2009

Wow this looks quite cool, maybe abit expensive to buy if you have photoshop already but if its the sort of app you can use quickly with clients then its a winner for me!

Of course your designer would need to be willing to work in front of clients for this to be worth while

Great idea.

Muthuswamy02/15/2009

This looks cool.

I am a web developer. Mostly I don't get into designing, but these wire frames will come in handy to explain my ideas to my designer.

I feel that this can be even used for normal desktop apps.
Nice APP. Congrats to the developers.

lim02/15/2009

will love to has one

Renxokuken02/15/2009

Cool tool.. been looking for this kind for quite some time.,.

p/s: win win win ;)

Sonali Agrawal02/15/2009

Hoping to win this. This sounds like a cool app. This will definitely make us more economical and save papers.

Oli02/15/2009

It's a very interesting program... It would help me a lot right now! :)

pat.p02/15/2009

Cute tool!

beto machado02/15/2009

really nice app. i will use if i win, for sure.

i have collected my sugestions about planning and making mockups.

take a look at

delicious.com/robertomachado/planning and

delicious.com/robertomachado/2.0tools

veepee02/15/2009

another shot at winning!

Raj02/15/2009

Wow this is great! I could really use this software to quickly create mockups.

Luigy Lukatello02/15/2009

Wouw seems sooo interesting!! I NEED IT, I WANT IT! PLEASE GIVE IT TO ME :D Imagine what you can do with it...

Crewe02/15/2009

Sweet, definitely would speed up the design process.

Willian Sertório02/15/2009

Geez, it'd help me a lot while working!

Things like these came to stay.

Gerlof02/15/2009

Great post, great program.

Rodolfo02/15/2009

This is a great tool, thank you for the opportunity you're giving :)

Dra Studio02/15/2009

Neat idea. Keeps your mind off of the design and focused on the pre-production element of planning.

kingcole02/15/2009

really nice tool :0

Mage2602/15/2009

That looks awesome!

Chima02/15/2009

Seems like a cool program.

Ian02/15/2009

I find the presence of Comic Sans just to offensive to take this seriously. Shame.

Clinton Judy02/15/2009

I used the Balsamiq beta once, and would love to have the full product for doing product mockups. :-)

I would also love the option to switch off comic sans. Eh, really?

morozgrafix02/15/2009

Very interesting app. Trying it our right now...

Sunspots02/15/2009

Interesting idea, I wonder if it has what I need tho'
Might be easier to just draw that stuff on paper... Not to talk about how much cheaper it is.

Guilherme Mogames02/16/2009

I Also want it!

Very very usefull!

Count me in on this!

Cheers from Brazil!

LWS02/16/2009

I'm still happy with pencil ...but it is Photoshop who gives life\

GamerX500002/16/2009

Looking interesting. And useful.

sialBu02/16/2009

It looks like a great tool.

YAY for contests.

Shaps02/16/2009

Great Idea. Although would be nice if you could export with 'straight' lines too.

Juarez P. A. Filho02/16/2009

I think Balsamiq is cool. I don't use it because I found iPlotz. ^^

Thomasmburu02/16/2009

i discovered walcom tablet through this blog and now balsamiq? am really moving with speed. love it.

JABrouwer02/16/2009

Beast!!

purelocke02/16/2009

Thanks!

purelocke02/16/2009

Thanks for the great site and this great giveaway!

415s02/16/2009

Looks really nice. Just stumbled about http://iplotz.com/
It does the same job. But as webbased application.

Lamaz02/16/2009

Wow! A pretty useful App! thanks!

Alexei02/16/2009

looks funny!

t200802/16/2009

Simple & fun to use. I think their choice to use "handwritten" elements is great.

charlie02/16/2009

a comment

Ruthr02/16/2009

Wow! This would be so cool! I just went over to the site and all I can say is I want it. Please! Thank you.

scosca02/16/2009

I've been doing this sort of thing in Illustrator, but I'm always tempted to design too much too early. I love how you can even turn a placed image into a sketch. Nice.

R2D202/16/2009

give it to me!

Kevin Oh!02/16/2009

love the blog, love the contest.

Nate Braxton02/16/2009

Love the sketchy visuals, great for preventing clients from getting too caught up in the visuals and keeping them on the concept.

diegochavez02/16/2009

i need this software :)

javier02/16/2009

Wow, i would really like a copy. Thanks!

ricardo garcia02/16/2009

THAT SUCKS I NEVER WIN ANYTHING!!!!

goalexzandergo02/16/2009

this is definitely a comment, I'd like to have this.

wwinkler02/16/2009

Sound idea, make mine a wireframe...

Cata de Leon02/16/2009

Thanks!

Brad Durham02/16/2009

That is one nifty tool!

Griffo02/16/2009

Wow this is a cool product, I'll be getting one if I don't win one here. ;o)

Oscar02/16/2009

Awesome, i need it! ;) And congratulations for the blog!

sialBu02/17/2009

Have i entered this yet?

dustin02/17/2009

Tried out the demo, and seems to be a great tool!
thanks for the giveaway :)

benl02/17/2009

do want

R.A.M.Page02/17/2009

Very interesting and useful! :)

alera02/17/2009

Great App!
Whant to try it in its full capacity.

Bonito blog ;)
Cheers
Alex

Rafael Nascimento Sampaio02/17/2009

I Waanna so much this item, plz give to me, plz :.) plzzzzz!

Daniel Aspenbäck02/18/2009

That looks like a really useful tool, I have to try it.. :)

Per Wiklander02/18/2009

I can really see how this would help me in my work. I guess I'll have to make a wish for this for my birthday, which is today btw. ;-)

sateprikker02/18/2009

wow! nice app! very useful!

Daniel Roberts02/19/2009

Balsamiq is *amazing*... I've used it at work... it also integrated with Atlassian Confluence and JIRA... which is insanely helpful...

WANT!

Fahad Khalid02/25/2009

Thanks for the info. This is the first time I am hearing about a software like this

Mike H02/25/2009

Still in time for the compo? This mock-up software looks the business!

vacherub05/07/2009

I think that it's a nice app.

ah! this is my comment.. i want to win the license!!!!!

Post new comment

The content of this field is kept private and will not be shown publicly.