Balsamiq Blog

Weekly Release: Bug Fixes and Better Scaling

by Peldi Guilizzoni. April 28th, 2009 under Release Announcements — 2 Comments

Hi there, apologies for not posting about the weekly release last week. We actually did do a bug-fix release but didn’t have time to post about it. So here’s what changed since our last update:

• fixed a number of bugs in the linking feature: the most important was that sometimes links wouldn’t work in grouped controls or if the mockups had big images in it (thanks Laslzo and Michael for reporting these!). We also added a scroll-bar to the Link Inspector for when you have lots of bmml files to link to:
  
  The pull-down will also say “[broken]” if the control links to a file that’s no longer there.
• We added the same scrollbar to the Image Inspector as well:
  
• fixed an issue with the height of an empty Text Input control (thanks Mark!)
• fixed an issue with controls going to a negative position in some cases.
• double-clicking on text will no longer select the newline character (it’s the small things that make the difference!)
• the ButtonBar control now resizes properly based on the text font size, so that you can use it in iPhone mockups now
• images and charts now scale a lot better. Here’s a before/after screenshot:
  
  This change took 5 minutes, I can’t believe I didn’t do it earlier. Oh well…
• Added color and opacity support to Horizontal and Vertical Rule controls (thanks Justin V. for the request)

How do I update?

As usual, this is a free update. Here are the links:

• Mockups for Desktop: here (you might hit this one-time error if you haven’t updated in a while)
• Mockups for Confluence: here
• Mockups for JIRA: here
• Mockups for XWiki: here
• Web Demo: here

We continue to be focused on the Mockups Web App…it’s a lot of work but we’re very excited about it. We now have a staging and a production server, and are working on the last few “must have” features before we can go alpha.

Onward!

— 2 Comments

 

 

 

Show Me Your Wireframes! (my response to Andy Budd)

by Peldi Guilizzoni. April 24th, 2009 under Mockups — 12 Comments

Hi there. I’m not sure if my comment over at Andy Budd’s blog got trapped in a spam filter or what, but since it was pretty long and had a request at the end I figured I’d post it here.

You might want to read Andy’s post first.

Andy! First of all thank you for moving the discussion over to your blog, Twitter was definitely not up to the job.

I also want to thank you for your feedback on Mockups, it’s exactly what I need in order to make it better.

Let me try to address some of your points.

First off, Comic Sans. I don’t like it either. I spent many hours trying to replace it with another font (see this for the full threads), and right now I offer users of the Desktop version a way to switch it with any other font of their choosing, but if you read those posts you’ll hopefully agree with me that I have no other viable option at the moment. Flash Player 10 includes much better font embedding capabilities so I plan to switch to a different font when enough people have it installed for me to require it, hopefully by the end of the year. That said, I believe that in the same way that details have no place in a wireframe, the font choice shouldn’t really matter in them as well.

Next, the Mockups skin (which is BTW based on my wife’s hand-drawings). We have three goals, which I think you’ll agree with: remove detail, encourage feedback and encourage iterations.

To remove details we use thick lines because that way you won’t have room for too much detail (see this for instance).

To encourage feedback we use hand-drawn elements which were intended to look “rough”, not stylized or like Big Bird drew them. Maybe it’s because I don’t have a trained eye, but when using Mockups I don’t get distracted by the look of the elements…which parts of it exactly grab your attention so much? If anyone reading this can send me some annotated screenshots I’d love to see them!

The point here is to offer a look that no-one is afraid to criticize. Mockups is almost as fast as paper and pencil (I’ve been told it’s faster for some tasks), and is designed for all those times in which you cannot sit in the same room and use pencil and paper (like in the case of your client doing some initial brainstorming on their own, for instance). Wireframes created with Mockups should also feel like “they are incredibly quick to produce and destroy.” I will be sending you a license for Mockups for Desktop for you to try, hopefully you’ll agree that at least they are fast to produce.

As for the stylized look, I actually don’t mind that the app has a little character. I think it’s part of the reason so many people think that Mockups is fun to use (see here), and I think it serves a purpose: if the app is fun people will spend more time on their wireframes and hopefully iterate and produce better results. Also, Mockups was mostly designed for non-technical users, people who don’t already use Omnigraffle, Axure or other tools.

I think the issue is that while I designed mockups mostly for brainstorming, some people use it for project documentation as well. For that, I agree that a cleaner, more streamlined skin might be needed. Unfortunately I cannot seem to find a proper skin that IA / UX experts all agree to be “IT”, the best one (Konigi’s excellent Omnigraffle stencils are the closest thing I know about). I would love to see some of your wireframes, or anybody else’s for that matter. They are really hard to find on the web.

So if anyone here is proud of their wireframes and is willing to share, please oh please email me at peldi@balsamiq.com, I promise not to share them.

I have to run out but once again thanks for this post, I am enjoying this discussion and everyone’s comments.

Peldi

— 12 Comments

 

 

 

Gary Vaynerchuk on Passion

by Peldi Guilizzoni. April 17th, 2009 under Branding / Marketing, Company / Business — 4 Comments

Be humble, work HARD, hussle, be patient and passionate about what you do. Be so good they can’t ignore you, actually genuinely CARE about your customers, be transparent, take the long view…A-men!

I want a “GaryVee speaks For Me” t-shirt

(via Todd Warfel)

— 4 Comments

 

 

 

Mockups 1.6 Release: Linking Mockups, and More!

by Peldi Guilizzoni. April 15th, 2009 under Mockups, Release Announcements — 20 Comments

Lots to share, but here’s the main announcement:

You can now link Mockups together!

Simple as that.

At the moment the feature only works in Mockups for Desktop, but with your help I plan on bringing it to the Confluence, JIRA and XWiki plugins versions as well in the near future (more on this later).

Feature Overview

Linking two mockups together is now as easy as choosing a file name from a pull-down menu. Simply click on a control that supports linking (most do), and you’ll see a new “Link” pull-down in the floating property inspector

The list is pre-populated with the names of all the BMML files found in the same folder as the file you’re editing. As long as you keep all the related mockups in the same folder (I have one per project I’m working on, and I keep them in DropBox), this should be all you need. BTW, it’s a best practice to also keep all images related to a project in an “images” folder next to BMML files.

For controls that can have multiple targets, you’ll see something like this instead:

Once a control links to another other mockup it show a little arrow icon at their bottom-right corner, like this:

To ‘activate’ the links you simply enter the newly renamed the “Full Screen Presentation” mode (formerly “Full Screen View”, CTR+F).

Controls with links will have a little blue overlay on them as well as the link icon and mousing over them will show a big hand pointer with the name of the target file for this link, like so:

Simply click on a link to load up the referenced mockup file. Voila’, there’s all there is to it!

Actually, there’s one more thing: you can use the left and right arrow keys to go back and forth between the mockups you have visited in your run-through.

Here’s a quick screencast (38 seconds, no audio) of linking up three existing mockups and running through the resulting prototype:

Also in this release

• Mockups for Confluence, JIRA and XWiki: New “Save and Continue” feature. It creates a new minor version (no version comment and no email updates are sent out) and lets you continue editing.
• Added Space Out Horizontally and Space Out Vertically alignment tools:
• Added some keyboard shortcuts for aligning elements, CTRL+ALT+1 for left, CTRL+ALT+SHIFT+2 for center, CTRL+ALT+3 for right, CTRL+ALT+4 for top, CTRL+ALT+5 for middle, CTRL+ALT+6 for bottom. Why the SHIFT in the center align? Because CTRL+ALT+2 is already “Unlock all” – thanks Yittesen and Jason Smith for the request!
• Changed the file type description for BMML to “Balsamiq Mockups Markup Language”, shorter and more to the point. Thanks to Kanwal Kipple for pointing this out.
• Added the ability to color the scratch-out control, so that you can create beautiful art like this one:
  
• Made a BIG optimization in the code that runs when you switch from one mockup to another, and when moving objects around the screen. It should be noticeably faster. Also, we will continue to make these performance optimizations in the future, so stick with us!
• Added back the 10-pixel padding at the bottom and right edges of the mockup so that you can grab the edges easily. This was an injection from when I removed the border around the exported images, my apologies.
• In Mockups for XWiki, I changed a few strings and improved the installation experience overall – it now tells you when you need to create the BalsamiqMockupsEditors group etc.
• Fixed a bug with the property inspector showing up above the selection at the right side of the screen.
• Fixed a bug with “True” and “False” strings not keeping capitalization when the mockup was saved.
• The Text Input control now properly gets smaller if you select a font size smaller than 13.
• Made the iPhone menu resize horizontally so that you can use it in landscape mode as well.

How do I update?

As usual, this is a free update. Here are the links:

• Mockups for Desktop: here (you might hit this one-time error if you haven’t updated in a while)
• Mockups for Confluence: here
• Mockups for JIRA: here
• Mockups for XWiki: here
• Web Demo: here

What’s next on the TODO list?

Our main focus continues to be the Mockups web application, which is coming along REALLY nicely (tell us a little bit about yourself if you’d like to be on the private beta).

Other than that, we want to take care of the “Failed to Save” dialog box and of the “Check for updates” features soon. We also have a couple of surprise announcements coming up, so stay tuned here or on Twitter.

Side Note about the Linking Feature: What took So Long?

You may be wondering why it took us so long to develop this feature. The first requests for it date as far back as 9 months ago…which is an enormity considering Mockups is only 10 months old and that I take pride in quick turnaround…and that the actual coding of the feature took less than 8 hours.

There are a couple of reasons why I have waited this long. First of all, I wanted the app to be in ‘good shape’ before adding a big feature like this one, so adding essential features like the Image Import and others came first.

Second of all, look at this image:

It’s a picture of a page from Bill Buxton’s Sketching User Experiences book that a customer emailed me months ago. I have it hanging in our office and I 100% agree with its spirit.

Until today Mockups was designed to only do sketches. Linking mockups together allows you to move from sketches to prototypes (albeit rudimentary ones), and in my opinion has the potential to change the nature of the application completely, so I want to thread very carefully…it’s a slippery slope. Now that you have linking I have no doubt that you will be asking for a host of other features that a good prototyping application should have, like the ability to bundle mockups into projects, the ability to export all the linked mockups into an HTML / PDF “runnable” prototype, better templating/master pages support, the ability to create sitemaps…I’m not against any of this, but I don’t want to forget that Mockups is a simple little application and I want it to stay that way. It should get the job done (FAST), stay out of your way, be inexpensive and fun to use.

So forgive us if those other features don’t come right away…it’s not easy to design them in a way that doesn’t compromise the overall usability and ‘feel’ of the application. I will start some GetSatisfaction topics about them so that we can design them together.

Also, prototyping tools usually cost in the $400/user range, which IMHO is a fair price for what you get. So I might consider releasing some of these features in a “Pro” version of Mockups, keeping the current version as easy and inexpensive as it is today. Again, it’s a slippery slope…a different market segment means different competitors…I need to think about it carefully.

The last and most recent reason for delaying the release of this feature is that there is a chance it might unleash some significant growth in customers. Since being able to provide legendary customer service is my #1 priority, I wanted to make sure we as a company are set up to provide it. For a while I was all alone, but now there are 3 of us who can answer email, tweets, etc. Still…Mariah, Marco and myself can only answer so many questions each day while moving the product forward at the same time. We are pretty happy with how we are doing right now, but realize we could do better and will need to be able to scale our efforts more once this feature is released. I’m working on it and hope to be able to share some exciting news on this topic soon.

Thank Yous

This feature wouldn’t be possible without the extensive help (and nudging) of all the people who contributed to the “Help me design the linking feature” and related threads: darchik, Adam B., Adam Wride, Akimbo, arv43, Benned Frazier, Bhavin Turakhia, Brian Gilbert, Clyde C. Logue, Derek, Eugene Mirotin, frankodwyer, Henry Olson, Jason Smith, Jennifer Hudson, Jim Jarret, Johan, johnaustin, Jonathan Strauss, Jorge, kdhoffman, kvb, László Bővíz, Leon Barnard, LockSmithDon, Michael Bourque, Michael Hackney, modius, MrLucky, Nic, Nigel Pegg, Noel Gomez, Patrick Angeles, Pete, PeteM, pswulius, Rahndir, ramses, Riel Roussopoulos, Robert Dempsey, Robert Myers, Rory Clarke, ryanbetts, sfmatthews, Shailesh, smoyer, Stephen Scaringi, thinkdata, Thom, Todd Anglin, Travis Jensen, turnkey…this feature is for you.

I know I did not implement every one of your ideas, but be sure that they all influenced the current design and please consider today’s release as a step forward, it’s definitely not an end. We’ll get to it all, we just have to be careful! I hope you’ll continue to share your great ideas going forward.

I’ll update this post with links to a few GS threads about the next steps soon.

Onward! Happy prototyping!

Peldi

— 20 Comments

 

 

 

Like a kid in a Candy Store

by Peldi Guilizzoni. April 15th, 2009 under Company / Business — 7 Comments

— 7 Comments

 

 

 

My First Month at Balsamiq Studios

by Marco Botton. April 11th, 2009 under Company / Business — 3 Comments

Hi everyone, I’d like to share with all of you my impressions of the first month as Balsamiq employee. It was an exciting, productive, revolutionary, life-changing month. In one word: wonderful!

The workstations

There are now three places where I work: the office, my home, and my father’s office.

The “office” is a room in Peldi and Mariah’s apartment. This little room contains all the equipments of Balsamiq: two IKEA desks for Peldi and myself, four big whiteboards, a printer-fax-copier, two bookshelves full of books, and a stereo system that plays mostly portuguese translations of David Bowie songs.

My desks hosts a PowerBook G4 12″ and a good wide LCD DELL 20″ as external display. Both are my own, if you care, and both will be replaced soon by new hardware. Yet, I’m very satisfied with the amount of work that the little PowerBook can still do after five years of life. It’s true love between the PB and I!

Peldi’s desk hosts a 17” MacBook Pro with a 23” Cinema Display. Even with the huge viewing area, he sometimes complains that the space is not enough! He is right: if you have to write code, once you get a second display you won’t ever go back: tons of pixels FTW!

One more item you can find on Peldi’s desk is Balsamiq’s cash register: it is an old Mac mini G4 that plays a loud ca-ching! sound every time someone buys a license of Mockups. Though a bit distracting, it’s a great motivator during boring or complex tasks and it reminds us that we work for some real people out there!

Occasionally I work at home. It happens in the morning, when I’m alone, or after dinner, when my wife Maddalena is tired and goes to sleep just after our baby daughter Caterina. Working at home is fantastic. You have all your stuff, your family (sleeping!), your music… it’s very comfortable – but unfortunately there is no second display…yet.

When Peldi is away, like in these days before Easter, I work at a desk in my father’s office. He is happy to see me quite often (I am too, papi!) and I have a place where to work in peace. Second monitor? An old 20″ Sony CRT.

This may sound as a minor thing, but it is truly a big quality of life improvement. Now I bike every day, free from the traffic! As a consequence I’m re-discovering how beautiful Bologna is, I recommend a visit if you ever come in Italy.

The Job

My job title is “Tuttofare”, or do-it-all in italian. In this first month I did mostly development, but even as pure developer, I still have to be a real tuttofare. Bug fixing and coding a few new features in Mockups, writing build scripts and installing a Subversion repository, learning CSS, JavaScript and Grails, programming Flex components for web pages, and all in just one month! The good news is that it is exactly what I want to do, so bring it on!

Another characteristic of this job is that we are fully exposed on the Internet. What we do – if we do it well – is under constant attention by a lot of people…customers, blog readers, Twitter followers, enthusiasts of our company, competitors…

At my former job (a big company) there was no reason for the customers to see the faces of the Research and Development team’s members. The results of my job made happy some people that I never met, so I felt like a spectator of what was happening on the outside, and it was absolutely normal. My professional World was around my desk.

Now things are totally different. My role requires openness and transparency. The product we sell includes our faces: people trust in Balsamiq if they trust in us. It’s a big challenge, both professional and on a human level.

I have to admit that being pushed in front of thousands people excited about the outstanding work done by Peldi is not the most ordinary situation that a quite experienced C/C++ software developer can manage , so I was a bit scared on my first day. But the welcome was so warm that I forgot suddenly the insecurities and enjoyed the new adventure.

Peldi

What are my impressions of Peldi? You already know “how we met“, so I’ll keep it short.

You know Peldi from what he writes on this blog. Now let me tell who he really is. He is… exactly like Mockups! Creative, fast, effective, direct to the point: the product mirrors its creator perfectly.

I’m very happy to be part of Balsamiq, I couldn’t fit better anywhere!

Ciao!
Marco

— 3 Comments

 

 

 

Video: 14 Web App Tips from Ryan Carson

by Peldi Guilizzoni. April 6th, 2009 under Branding / Marketing, Mockups — 5 Comments

Hi all. I just finished watching this excellent video of Ryan Carson’s FOWA Dublin 2009 talk:

I was incredibly surprised to hear Balsamiq mentioned at around minute 14: thank you so much for the kind words Ryan, we are really glad Mockups is helping you and can’t wait to see Truvay!

Ok, time to go put those tips in practice for the Mockups web app!

— 5 Comments