From Forum Nokia Wiki

A smartphone is today used not only as a way to keep in touch through text and voice, but also as a personal information manager, an entertainment center, web browser, camera and camcorder and, recently a personal navigation device. There is a growing number of people who really use smartphones to their full extent. Such a versatile gadget also becomes very personal. People do wish to make their phones portray their own personality and want to use their own personalised ring tones, wallpapers and other possibilities to make the device look like ”me”.

On the other hand companies like network operators want to have their brand showing in the devices they sell to consumers or give as tools to their employees. Some other brand owners like bands, sport’s teams, movies, TV-series, games and of course corporations and businesses wish to give their supporters the possibility to show their commitment trough their mobile devices.

The means for giving a Nokia phone the personal touch is through User Interface Themes. Also referred to as skins, but we will use the term Theme in this article. The purpose of this article is to give you an idea of how to start creating a customised UI for a Nokia phone. The focus is on S60 smartphones, since the graphical theme offering is more extensive, but most of the information can be generally applied to all never Nokia models.

Contents 1 What can be customised 2 Tools of the trade 3 Keeping it simple 4 Visual vision 5 And now the real thing! 6 How to be creative within boundaries 7 Getting help 8 Links (The following links are also found inside the text, but copied here for your convenience)

What can be customised

The amount of UI items that you can customise depends on the platform and version of your device. If you are not sure which platform and version your phone is using, you can check it at forum.nokia.com/devices [1] just search for your phone and click it to see all details. Below is an overall list for Series 40 and S60 in general.

Series 40 theme elements	S60 theme elements
Font colours Application and general Backgrounds UI Area colors and/or images Main menu icons Highlight Images in lists, grids and tabs Sounds	Font and indicator colors Application and general Backgrounds Background images for UI areas Main menu icons Notification Icons Indicator Icons Highlight Images in lists, grids and tabs Popup frame graphics Tab Graphics Scroll bar graphics Animated note icons and wait graphics etc. Screensavers Ring tone and alarm tone

Tools of the trade

The tool for creating UI themes for S60 devices is Carbide.ui. There are also tools for creating themes for other Nokia mobile platforms. From version 3.2 onwards Carbide.ui can be used for both Series 40 and S60 devices. The theme tools are free and can be downloaded from Forum Nokia Themes page [2]. In addition, you need tools for creating the actual graphics. For mobile content the recommended way is to create vector graphics in svg-tiny format. SVG tiny is optimised for use in mobile devices with limitations in memory and screen size. You can also use bitmap images in all UI elements, but in this article we focus on SVG. More information about vector and bitmap images can be found in WikiPedia: [3]

There is a wide selection of tools for creating SVG graphics available, both commercial and free. Carbide.ui can be integrated with almost any tool, but most of the documentation referred to later talks mainly about Adobe Illustrator and PhotoShop. One of the free tools that is known to work well with Carbide.ui is InkScape. If you are already familiar with some SVG capable tools, please try them out first, since it’s always easier to use the tools you already know. When images are brought into Carbide.ui it takes care of the conversion to suitable file formats with both vector and bitmap images so the main thing to keep in mind when creating your art is to keep it as simple as possible.

Keeping it simple

As mentioned earlier, mobile devices have less resources and a smaller display than your PC so even though something looks great on you large computer screen it might not be all that awesome in your phone. The mobile device’s processor needs to perform calculations whenever an SVG image is drawn to the screen. The more complex the image, the more time it takes to draw. There is a very good guide pointing out how to achieve the best results called S60 Platform Vector Graphics Optimization. It is freely available from forum Nokia: [4]. You should download and read this to avoid problems later.

Visual vision

Of course you are the best judge in what you like to see, but if you are creating a theme for commercial distribution or you are intending to distribute it to other users as well. It is recommended that you familiarise yourself with some basic principles of User interface design and usability. A very good starting point for this is the Forum Nokia document Creating Themes for Series 40 and S60 Devices - Visual Guide [5]

After reading the document and creating your first theme, it’s a good idea to always install the theme into your device and use it for some time to find out if there are any serious usability problems. Most common issues are related to small contrast between text and background and ambiguous iconography, meaning that the picture does not immediately say what happens when you select it or the icons for different applications look too similar for the user to be able to distinguish between them.

Also an extensive use of colours can be distracting as well as the use of generally recognized colours, like red for warning/bad and green for environmental/OK, against there conventional meaning.

And now the real thing!

Once you are familiar with vector graphics and how to optimise them for mobile use and you have considered the different angles of Graphical User Interface design and usability, you are ready to start creating your own theme.

Since there are about a thousand different elements you can change in the S60 user interface and they can be customised in so many ways, Carbide.ui has developed into a world of it’s own with specific terminology to learn and a certain logic. The best way to learn this logic is to go trough a screencast called ”Getting started with Carbide.ui S60 Theme Edition”. This is a screen captured movie with narration that gently leads you into the many views and panes of Carbide.ui. You can find it in the Forum Nokia Themes site [6] or clicking directly here [7]

Once you know you way around Carbide.ui and have experimented with some simple theme elements, it’s time to take the final leap and create a fully customised UI for an S60 mobile device. Before you do that, it’s probably a good idea to go through the advanced screencast called ”Editing themes with Carbide.ui S60 Theme Edition”. It is also available for download on the Forum Nokia Themes site [8] or you can use this link: [9]

How to be creative within boundaries

Once you start using the tools and creating themes you might run into annoyances, where it seems that the tool does not allow you to do some of the things you would like to do. These are not limitations in the tool. Carbide.ui is created to let you customise all the User Interface elements that are customisable with a theme that can be installed to the phone. When you would like to, let’s say add your logo to the top left of the phone’s display and cannot find a specific Status Area Logo container to put it in, it only means that no such element exists. You can still add your logo there, you can add it to the analogue clock face, or you can make the digital clock font smaller and add the logo to the idle status area graphic. There are always ways for getting the wanted outcome or something close enough, when you are willing to make a few compromises and come up with creative solutions within the given limits.

Getting help

The tutorials and helps in the Carbide.ui tool are quite extensive, but if you run into problems that cannot be solved by going through them, you might find the answers you are looking for in the Themes discussion board [10]. If you cannot find a topic that gives you the answers you need, you can start your own topic and usually there is a keen professional who can answer your questions.

Links (The following links are also found inside the text, but copied here for your convenience)

Device specifications:	www.forum.nokia.com/devices/<device> e.g. http://www.forum.nokia.com/devices/N95
Inkscape:	http://www.incscape.org
WikiPedia page about vector graphics:	http://en.wikipedia.org/wiki/Vector_graphics
Optimising vector graphics:	Go
Themes home:	Go
Visual Guide:	Go
Download Carbide.ui:	Go
Getting started screencast:	Go
Advanced screencast:	Go
Design templates for PhotoShop:	Go
Design templates for Illustrator:	Go
Discussion board	Go

---

--Risalmin 17:21, 28 June 2007 (UTC)