Balsamiq Blog

iPhone Controls, New Icons and Much More!

by Peldi Guilizzoni. March 1st, 2009 under Mockups, Release Announcements — 12 Comments

Hello everyone! This week’s free upgrade is a big one. So big, in fact, that it took two weeks to finish.

Here’s what’s new:

A New Background!

The old spiral notebook background has served Mockups well in the last 9 months, but the time has come to say goodbye. Please join me in welcoming the new “Graph Paper” background!

It looks SO much better, wouldn’t you agree?

This new background is a happy side-effect result of hiring an outstanding web application designer for the hosted version of Mockups…more on this on a later update.

The new background is drawn programmatically so it grows forever without stretching and saves us 30Kb in final application size in the bargain.

Six New iPhone-Specific Controls!

Many of you have asked for them, and here they are! Six new control types: Alert Box, iPhone, iPhone Keyboard, iPhone Menu, iPhone Picker, ON/OFF Switch and the “Pointy Button / iPhone Button” control.

Their usage should be pretty self-explanatory, but here’s a few details:

• the iPhone case can be turned sideways, offers a choice of 5 different pre-set backgrounds and an option to toggle the little bar at the top.
  
• the Pointy Button can point left, right, or nowhere (which makes it a nice new little rounded button, useful for any kind of wireframe)
  
• the color picker has been enhanced with a whole new row of “iPhone colors” (the last row)
  
• the iPhone menu control does some pretty smart parsing of the text you input in it, so that you can create any kind of iPhone menu “at the speed of thought”. For instance, the text on the right creates the menu on the left in this picture:
  
• The Alert Box control is also pretty smart, allowing you to have Alerts with or without a title (just leave the first row blank), or one or two buttons (type “One Button” vs “Button 1, Button 2″ in the 3rd row)
• The iPhone Picker input method is exactly the same as the Data Grid, creating new columns on the fly if you need them. Just enter 5 rows of text and the 3rd one will be highlighted
• We added a bunch of iPhone / Mobile specific icons
  

These new controls, coupled with the existing ones and the new icons (see below), should allow you to design most iPhone applications. As always, you can bring in your own custom controls if you need them.

Here’s a few sample mockups I threw together quickly: bonus points if you recognize all three!

50 New Icons

Aside from the Mobile icons shown above, we have added a number of new icons you requested, bringing the total to over 150!

Here they are, shown in the new “XS” size:

To make room for all these icons I increased the size of the Icon Library, for less scrolling.

Tree Control Improvements

The Tree control got smarter and a lot more powerful, just look at the screenshot below for details:

Sliders, Progress Bar and Scrollbar Position

You can now set the position of the little “tick” on the slider controls, as well as the amount of progress in the Progress Bar and the position of the thumb in any Scroll Bar.

Here are a few examples:

And here are the 3 new property inspectors which let you manipulate the values:

Simple, right?

Text Size Everywhere!

At the request of some users, I have added support for text styles (bold/italic/underline and most importantly font size) to many control types, including Text Input, Text Area and even the Sticky Note control!

Better IME Input Support

I had no idea, but the “auto-commit text on Enter” feature was hampering Japanese users from typing correctly. Thanks to Patrick McKenzie of Bingo Card Creator fame for bringing this to my attention and helping me fix it quickly.

InspireUX Quotes on Load!

Last but not least, what is probably my favorite new feature of this update.

The new icons and control types have made Mockups be a little slower to load, so I changed the loading pop-up a bit:

Thanks to our collaboration with the awesome InspireUX.com, you can now use the loading time of the app to learn something new and get inspired for the work ahead!

The randomly selected quote is only shown in the web and plugin version of Mockups, and only if you don’t have the application cached in your browser.

I love this little feature, many thanks to Catriona Cornett of InspireUX for her help with it.

Bug Fixes!

Two long-standing bugs were squished this week, which is a huge relief:

• occasional unability to “Save As…” on linux – the fix for this is simply to update Adobe AIR to 1.5.1 on your linux box (yay Adobe for fixing bugs quickly!)
• UI Library occasionally showing up even after being hidden in Mockups for Desktop. I switched to using a different storage mechanism for these computer-specific settings, which appears to be much more reliable. The unfortunate side-effect is that after this upgrade you will have to re-set the application’s size, position and list of open files, as well as other little settings. You’ll just have to do this once, they’ll get remembered afterwards.

Here are some other bugs that got squished in this release:

• “Sketch It” checkbox works in the Image Attachment panel – thanks Adam!
• The Icon and Label control now lays itself out properly at XS icon size – thanks Michael!
• A Combo Box with no text no longer “collapses”
• A website bug: if you try to download Mockups for Desktop and don’t have the flash player installed, you’ll now see a nice little button link instead of an unhelpful “you must upgrade your flash player” message
• Also on the website: I updated the FAQs with more info on Comic Sans and Custom Controls, check them out!
• I also incorporated Google Checkout right into the shopping cart, so that you have an option to use it instead of Paypal if you wish (I can’t believe it took me this long to do this)

How do I upgrade?

It depends on your version, but in general you simply install the new build on top of the current one. Here’s how to get the builds:

• Mockups for Desktop: here
• Mockups for Confluence: here
• Mockups for JIRA: here
• Mockups for XWiki: here
• Web Demo: here

What’s next?

Stay tuned for major company news coming out in the next few days.

Other than that, I am going to focus on the hosted version of Mockups for a week or two. It’s coming along really nicely…in fact, I’m so excited about it I can barely sleep these days.

That said, If there’s a bug that’s annoying you we’re all ears!

Onward!

— 12 Comments

12 Responses to “iPhone Controls, New Icons and Much More!”

1. Steve McLeod Says:
   March 1st, 2009 at 1:28 am

   Peldi, that’s a bootload of excellent improvements. I’m impressed. And pleased, because I use Mockups so much, and I wanted some of these improvements!

   Steve

2. Tibor Says:
   March 1st, 2009 at 3:45 pm

   Hi, Looks very nice. Can’t wait for the hosted version !
   One suggestion; it would be great to give users the possibility to chose between different skins for graphics. Maybe you could launch a contest for the community so users can create a skin, that could be donwloadble ?

3. Conrad Says:
   March 2nd, 2009 at 4:08 am

   Looks brilliant! Can’t wait to try it out. Skins looks like a brilliant idea.

   I don’t know if you’ve gotten round to implementing, but is it possible for the end user to change the order of the controls in the tabs? For instance in previous builds in the common tab the ‘text input’ is waaaay over to the right, instad of being together with button, checkbox and combobox.

   Of if that’s not possible, at least move the text input closer to its friends

4. Ved Says:
   March 2nd, 2009 at 8:40 am

   Congrats! I’ll update as soon as get to my office later today!

5. Jonathan Nolen Says:
   March 2nd, 2009 at 11:21 am

   Wow, great release, Peldi! This _is_ a big one.

   Cheers,
   Jonathan

6. Sketchy and Wiggly Wireframes : Vectorform Says:
   March 25th, 2009 at 4:32 pm

   [...] Another great tool for quickly making sketch-like wireframes comes from a company called Balsamiq. They even have an awesome set of iPhone specific components. [...]

7. iPhone Mockup : faites des croquis pour applis iPhone | bbxdesign Says:
   March 28th, 2009 at 11:28 am

   [...] au web : une appli web pour faire des croquis d’interface. (D’ailleurs, Balsamiq inclut depuis peu des éléments [...]

8. Nits Says:
   September 2nd, 2009 at 11:37 am

   Nice cool icons my phone got new life looks different.

9. Dave G Says:
   September 6th, 2009 at 1:06 pm

   I’ve been tasked with mocking up a series of blackberry apps and am starting to have serious iphone envy! Any resources like this for blackberry?

10. Creating mockups for the iPhone « Photo Blog by Martin Says:
    November 15th, 2009 at 5:15 am

    [...] March 2009 (yes, I'm a bit late) they added support for the most common controls in the iPhone. The following [...]

11. Name not required Says:
    December 4th, 2009 at 11:02 am

    How do you install the “Six New iPhone-Specific Controls!”???

    Please make this easier to understand. Do you have to do an update, download them from somewhere or download a new version?!

    Also, your Submit message said:
    “Hmmm, your comment seems a bit spammy. We’re not real big on spam around here.

    Please go back and try again.”

    when I put Anonymous. Please fix that problem too. I don’t want to have to leave a name.

    Thanks

12. Peldi Guilizzoni Says:
    December 4th, 2009 at 12:32 pm

    Hello Name not Required. You just install the latest version and the iPhone controls are in there. Try it! http://www.balsamiq.com/products/mockups/desktop#download

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website