Our upcoming product Snippets will be our sixth BlackBerry application, and our most ambition user-interface to date.

The custom user interface engine used in Snippets is capable of rendering on any modern BlackBerry device from the older Pearl models displaying at 240×260 pixels to the new Storm and Bold devices running upwards of 480×360 pixels.

To support the unique characteristics of the BlackBerry Storm and Storm2, the new Antair UI engine is also capable of dynamically switching from landscape rendering to portrait rendering, and has full touch-screen capabilities.

Let’s take a look at how we build up one of our custom screens in the new Snippets application. I’ll be using the BlackBerry Storm in landscape mode for presentation.

We begin with a blank screen and use a solid bitmap background as a foundation. For Snippets, we decided to go with a nice wood grain bitmap. The engine takes care of making sure that the background is fitted properly on the various screen sizes supported by the various BlackBerry devices.

Then, we use custom controls to create a beautiful title bar. Aside from displaying the application title and company name, the title bar is used to hold controls for various functions, including settings and support. It’s also semi-transparent, allowing for the wood texture of the background to show through.

Snippets is an auto-text/auto-complete application. We wanted to make the task of creating a new Snippet not only easy and intuitive, but also pleasant visually. So we built a ton of custom controls for the application. One such control is the Snippet editing control which looks like a real yellow notepad.

Then, we needed to add Snippet creation controls to the screen, along with a feature to allow you to enter a Quick Type sequence; the sequence of characters that will automatically insert your Snippet when you are creating a new e-mail or SMS message. But we didn’t want to break the feel of the yellow notepad. So we created a control panel that looks and feels like it belongs naturally in this scene – a ripped piece of paper held down by a paperclip.

Finally, we wanted to give the screen a little balance. We didn’t like the way to notepad ran off the bottom. We also needed a way to assign the new Snippet to a category. So we created a nice footer for the screen. Notice how the footer control is slightly transparent to allow a bit of the underlying yellow notepad to show through — another feature of the new Antair UI engine.

There you go. The design behind one of the screens for our upcoming Snippets application.

Cheers!