👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

iPhone Controls, New Icons and Much More!

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?

newbg

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!

iphonedemo
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.
    pi_iphone
  • the Pointy Button can point left, right, or nowhere (which makes it a nice new little rounded button, useful for any kind of wireframe)
    pi_iphonebutton
  • the color picker has been enhanced with a whole new row of "iPhone colors" (the last row)
    iphonecolors
  • 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:
    iphonemenu
  • 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
    mobileicons

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:

150icons

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:
newtreeicons

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:

sliders

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

pi_value pi_progress pi_scrollbar

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:

inspireuxonload

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!

Peldi for the Balsamiq Team

Leave a Comment

Comments (19)

  1. Hello Jesse and thanks for the comment.

    The only keyboard control built in to the UI Library in Mockups 3 for Desktop was the `iOS Keyboard` control and that control is definitely still there in Balsamiq Wireframes for Desktop.

    We do have an iOS numeric keyboard control at Wireframes To Go: https://wireframestogo.com/7e58-iOS-Numeric-Keyboard/

    If you still have questions or need more help, drop us a line at support@balsamiq.com and we’ll be happy to help.

    Alasdair Manson
  2. Did you remove the numeric keyboard in Balsamiq 4? Why? 🙁

    Jesse Wilson
  3. Hi there,

    Firstly let me say I love Balsamiq, so quick and easy to build mockups for clients, that really work.

    I recently found your entry on using PDF viewer which will be a big help when trying to demo the mockups on an IOS device.

    http://blogs.balsamiq.com/product/2012/10/31/linkviewer/

    But can I make a few requests for future enhancements ?

    a) Can you add iPad Icons, so we can show ipad dimensions.
    b) Can you build gestures into the handling, i.e. you can click now, but how about pinch / swipe ?
    c) Can you investigate how to replicate rotate between portrait and landscape.

    Many thanks

    Mark

  4. Pingback: Balsamiq Mockups ile Hızlı ve Etkili Tasarımlar | Teknovasyon Marketing

  5. Pingback: CSMACNZ's Blog » Post Topic » Mockups and Sketches – Overview

  6. Pingback: Prototypování pro mobilní zařízení na Pixelbay

  7. link broken in line “Mockups for Desktop: here”

    [Peldi: sorry, the link is http://balsamiq.com/download]

  8. 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

    Name not required
  9. 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

    Peldi Guilizzoni
  10. Pingback: Creating mockups for the iPhone « Photo Blog by Martin

  11. 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? 🙂

  12. Nice cool icons my phone got new life looks different.

  13. Pingback: iPhone Mockup : faites des croquis pour applis iPhone | bbxdesign

  14. Pingback: Sketchy and Wiggly Wireframes : Vectorform

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

    Cheers,
    Jonathan

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

  17. 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

  18. 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 ?

  19. 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