February 14, 2009 from abduzeedo's blog
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.
