Balsamiq Blog

Napkee Launches!

by Peldi Guilizzoni. August 5th, 2009 under Mockups Extensions — 5 Comments

An Italian engineer living abroad, happily employed by a large tech company, spots a new revolutionary technology rapidly gaining traction and decides to drop everything in order to “get in on it” by improving it.

No, I’m not talking about my decision to start Balsamiq to build Web Office plugins, but rather Enrico Berti’s decision to quit his job to start Napkee Labs, a new micro-ISV launching today.

Napkee nicely complements Balsamiq Mockups by providing a way to turn your wireframes to either HTML/CSS/JS, a Rich Internet Application that runs in your browser or even a Desktop application.

This is a very hard problem to solve in an elegant and user-friendly way, as there are a lot of moving pieces to deal with. In fact, it’s even too hard for us to want to solve ourselves! I have been advising Enrico for the last few months, and I see in him the right combination of talent, passion and determination needed to succeed.

I have asked him to write a little guest post here to introduce himself and Napkee to you. Enjoy!

Everything began last March when I wrote an email to Peldi saying that I wanted to do something more for Balsamiq other than being another evangelist. The idea of creating an exporter for Mockups was born after a couple of hours and I started to write code the exact same evening. At the beginning it was not called Napkee and it had a really creative name: Mockups Exporters. It also looked great…

That big smile was – and still is – the effect that this project has on me. Time passed relentlessly and I spent almost every single minute of my free time on creating something that could be useful to a lot of people working in the UX field.

Fortunately today Napkee looks way better and it allows you to export to interactive HTML+JS+CSS or Flex prototypes in a matter of clicks.

Check it out on www.napkee.com!

The journey from that email to my micro-ISV seems quite long but I feel and hope that it’s just the beginning of a bigger and longer one!
I’m pretty much excited, and you?

Enrico

— 5 Comments

 

 

 

Convert Mockups to HTML+Image Maps Prototypes

by Peldi Guilizzoni. July 23rd, 2009 under Mockups Extensions — 6 Comments

Hi there. We at Balsamiq are terribly excited about the wonderful community-contributed tools and Mockups extensions that are being developed these days. To introduce the latest one we have asked its main developer, Vitorio Miliano, to write a short post for this blog – our first ever guest post!

Hi, I’m Vitorio Miliano, and I’m guest blogging here on the Balsamiq Blog to show you a little script I worked up that lets you turn Balsamiq Mockups wireframes into clickable HTML image maps.

I’m a Senior User Experience Consultant for a company called Optaros, and annotated wireframes are a significant deliverable of our design process. We’ve previously used OmniGraffle, Photoshop or straight HTML for these, but some teams have been using Balsamiq Mockups on projects since the beginning of the year, and it’s been working out really well.

It was working well enough that I wanted to be able to do more of the things we can do with HTML wireframes:

• I wanted to be able to use the mockups for user testing. (The first time I wanted to do this, presentation mode didn’t have the option to turn off the big cursor and hints yet.)
• I wanted to be able to distribute the mockups in a clickable series.
• I wanted to be able to demonstrate complicated interactions, like hover changes and preserving state across multiple wireframes.

This script is the start of those things. It generates an HTML file from each BMML+PNG you provide, giving you an image map with each object from the wireframe defined in it, along with boilerplate JavaScript (using jQuery) for reacting to the click and hover events for each area on the image. There are two samples on the page: the first shows the default output, using the jQuery “maphilight” plugin to see each area of the wireframe defined in the image map; the second shows changing the image on hover, and responding to a click.

Right now, that’s about all it gives you, but I’m using it here at Optaros and will be continuing to update it. Questions are already coming up. Should I be generating binaries instead of requiring Python? Should it automatically hook up the links you’ve already defined in the wireframe? What’s the right way to handle grouped or locked items?

We just finished a rich prototype in HTML for a film studio, and I’ll be replicating that in Balsamiq as a test case for more complicated effects, but I’m just one person in one design group. I’d really like to know what you think. I’d love to hear about how you’re using Balsamiq, and what you’ve wished you could do with the wireframe once it’s built, ways you’ve wanted to show them off, interactions you’ve wanted to demonstrate. Send me your BMML files and we’ll talk about it. Bug reports and patches are helpful, too (the script is open source, MIT licensed), and there’s a TODO.txt included, in case you want to poke at the code.

I hope you find this useful. My email address is vito underscore bmml at perilith dot com, and I look forward to hearing from you!

Thanks,
Vitorio Miliano

Thank you Vitorio for providing this extension! We think it will be useful to lots of Mockups users and that some of them will want to contribute to it!

— 6 Comments

 

 

 

SWT->BMML: an Interesting New Mockups Extension

by Peldi Guilizzoni. May 13th, 2009 under Mockups Extensions — 4 Comments

Hi there. I wanted to share with you an interesting new little project by Max Rydahl Andersen, a core developer at JBoss (@maxandersen on Twittter).

In short, it’s a way to transform an existing dialog built in SWT (the widget framework used in Eclipse based projects such as Flex Builder) into a BMML representation, ready to be imported into Balsamiq Mockups.

Check out this short video demonstration:

Here’s Max blog post about the project: Instant Mockup for Eclipse SWT Applications

What I like about this tool is that while a lot of people have been asking for exporters from BMML to various programming languages*, this is the first time I see someone importing from an existing UI into Mockups, and makes a lot of sense!

In the real world, being able to start from a blank slate is a luxury, most often than not you’ll be iterating on an existing UI in order to improve it. Having a quick way to import a GUI to Mockups is a huge time-saver.

Anyone up for building an HTML+CSS -> BMML importer? It would be so cool to be able to specify a URL and have a BMML representation of that page returned. Mockups such as this one would take 2 seconds to build! I realize that HTML+CSS is a huge beast, but hey that’s what they’ll pay you for right? If you’re interested, I have documented the BMML format here (yay for open formats!).

Thank you so much Max for starting this project and I’m looking forward to seeing it grow! The code is all on github so if you’re a SWT developer I encourage you to dive in and help out, you’ll all benefit from Max’s awesome week-end project!

Peldi

*I know some of you have already started working on this, and I can’t wait to be able to share about your progress!

— 4 Comments