Mobile Design Primer

The mobile roaming revolution is in full swing. Designers, it’s time to get your work moving

If you can design a button in Photoshop, Illustrator or Flash, know how to lay out a web page and understand the principles of user interaction, then you’re equipped with enough skills for designing great mobile interfaces and widgets.

A mobile theme defines the phone’s user experience with customised wallpapers, application icons and colour schemes. The creation of one of these interfaces may sound like the realm of the developer rather than the designer, but that’s far from the truth. Tools such as Carbide.ui and Flash Lite make it easy for you start designing for mobile, because they take care of most of the code for you.

So if you fancy being one of the first designers to be known for creating rich, vibrant and usable interfaces and apps, here is the key information you need to get started.

The tools and information you need to get started

need to get started Adobe’s Creative Suite 4 contains all the tools you’ll need for creating stunning mobile interfaces. Anything you can create in Photoshop, Flash or Dreamweaver for desktop or web can be deployed on a mobile screen. Carbide.ui is a bespoke software solution for creating mobile interface themes. This easy-to-use WYSIWYG application means you can concentrate on the design of the interface without needing to produce reams of complex code.

Carbide.ui enables you to create graphic themes for S60 and Series 40 devices, as well as audio themes for S60. Making a theme is easy. Backgrounds and icons can be created in familiar CS4 bitmap and vector graphics tools such as Photoshop or Illustrator. This intuitive approach streamlines workflow. Carbide.ui also has tools for packaging and deploying your new theme for device testing courtesy of Nokia PC suite, while CS4 users can test in Adobe’s Device Central. Content and video produced with Adobe’s Flash authoring software can be used on mobile devices to offer a rich web experience via Flash Lite. Flash Lite enables you to create everything from simple animated screensavers to fully functioning applications in Flash, and then package them for mobile deployment.

The ins and outs of runtimes and platforms

The S60 platform is a mobile device software platform that runs on the Symbian OS. Carbide.ui is the perfect tool for creating S60 interfaces for those who want a code-free workflow. The major update of the fifth edition is its support for the higher-resolution 640x360px touch screens.

The Series 40 software platform is used on Nokia’s range of mid-tier mobile devices. The world’s most widely used mobile device platform, it’s used on hundreds of millions of devices. The amount of colours and overall resolution of a Series 40 device are more limited than that of the S60. Theme elements are much smaller than its S60 counterparts. There are also limitations to what changes you can make to the UI. For example, the navigation graphics, volume level bars and icon colours are some of the elements that cannot be customised.

HTML content for mobile is easily handled in Dreamweaver by creating a mini CSS style sheet (see page 32 for a walk-through). With most mobile devices, vertical scrolling is not an issue, although horizontal scrolling should be avoided. Ensure your layouts are scalable so they will adapt to different screen resolutions, and avoid fixed widths.

The size and shape of mobile design

Screen resolutions vary enormously across mobile devices. In Carbide.ui, Series 40 devices range from 240x320 pixels to 128x160 pixels and 320x480 pixels. S60 devices have screen resolutions up to 640x360 pixels. This resolution is reserved for the high-resolution S60 touch screens which we’ll be using for our Carbide.ui tutorial, starting on page 13. These resolutions are also used when creating web content with Dreamweaver. Simply set your Dreamweaver workspace to match the device pixel dimensions.

CS4 is great for making templates for various device resolutions. Carbide.ui works by letting you Right-click on an icon or background from an existing theme to edit it in a CS4 application or swap it for your own, personally created element.

You can create your own Photoshop template for your chosen resolution by using the Print Screen option to copy each of the existing device interface screens from Carbide.ui’s interface and compile them into a layered PSD. This way you can sketch your new interface elements over these guides to give you a precise idea of how elements fit together and where fixed interface text is to be shown.

Testing and deploying your designs

Testing doesn’t come any more thorough than testing on an emulator or the mobile device itself. But that’s not always the easiest means of testing, especially when you’re still refining your design. If you’re working in Flash Lite, Device Central offers a library of devices to choose from. Each device has a profile that contains info on resolutions and supported media types. It’s an extensive library of what each individual device can support. These can be screensavers, wallpapers and the stand-alone Flash player, meaning you can create a specific application or design for an entire series of handsets. New profiles are being added all the time, and for anyone wanting to develop for mobile it’s important that the latest profiles are downloaded from the Adobe site and kept up to date.

Deploying your mobile interface theme is easy within Carbide. ui. You can package and deploy the theme and be testing it within minutes. Should there be a problem, the theme will need to be modified, repackaged and redeployed back to the device.

Rate This