F O R U M N O K I A

Creating Themes For Series 40 And S60

Devices: Visual Guide
Version 2.0; March 9, 2006

Themes
 Forum.Nokia.com

Copyright © 2006 Nokia Corporation. All rights reserved.

Nokia and Nokia Connecting People are registered trademarks of Nokia Corporation. Java and all Java-based
marks are trademarks or registered trademarks of Sun Microsystems, Inc. Other product and company names
mentioned herein may be trademarks or trade names of their respective owners.

Disclaimer
The information in this document is provided “as is,” with no warranties whatsoever, including any warranty of
merchantability, fitness for any particular purpose, or any warranty otherwise arising out of any proposal,
specification, or sample. Furthermore, information provided in this document is preliminary, and may be changed
substantially prior to final release. This document is provided for informational purposes only.
Nokia Corporation disclaims all liability, including liability for infringement of any proprietary rights, relating to
implementation of information presented in this document. Nokia Corporation does not warrant or represent
that such use will not infringe such rights.
Nokia Corporation retains the right to make changes to this specification at any time, without notice.

License
A license is hereby granted to download and print a copy of this specification for personal use only. No other
license to any other intellectual property rights is granted herein.

Creating Themes For Series 40 And S60 Devices: Visual Guide 2

 Forum.Nokia.com

Contents

1 Introduction................................................................................................................................................ 6
2 A Theme Is a Piece of Art — so Get Creative!...................................................................................... 7
3 Even Though It Is Art, Keep It Usable ................................................................................................... 8
4 S60 Themes ................................................................................................................................................. 9
4.1 Setup.............................................................................................................................................................9
4.2 Creating a Style for Your Theme....................................................................................................... 10
4.2.1 Idle background .................................................................................................................. 10
4.2.2 Active background..............................................................................................................11
4.2.3 Background for different applications, pop-ups, and fields ................................. 12
4.2.4 Active standby...................................................................................................................... 13
4.2.5 Scalable UI ............................................................................................................................. 13
4.2.6 Different resolutions..........................................................................................................14
4.2.7 Mini display ........................................................................................................................... 15
4.3 Colors......................................................................................................................................................... 15
4.3.1 One hue .................................................................................................................................. 16
4.3.2 Analog hues .......................................................................................................................... 16
4.3.3 Complementary colors ......................................................................................................17
4.3.4 Triad relationship ............................................................................................................... 17
4.4 Keep Consistency and Contrast in Mind ......................................................................................... 17
4.4.1 Clear focus indication is a must! .................................................................................... 19
4.5 Icons .......................................................................................................................................................... 19
4.6 Creating a Finished Look for Your Theme ..................................................................................... 21
4.7 Test Your Masterpiece.......................................................................................................................... 21
4.7.1 Get Symbian Signed ........................................................................................................... 22
4.7.2 File size and versions.........................................................................................................22
5 Series 40 Themes — Completely New Possibilities ........................................................................23
5.1 Multiple Backgrounds for the Series 40 Theme .......................................................................... 24
5.2 Active Standby in Series 40 ................................................................................................................ 24
5.3 Mini Display ............................................................................................................................................ 26
5.4 Testing Series 40 Themes................................................................................................................... 26
6 Nokia 7710 Multimedia Smartphone .................................................................................................28
7 Sound’s Right? ..........................................................................................................................................30
8 Recycling Is Clever ...................................................................................................................................31
9 Guidelines for Creating a User-Friendly Theme ...............................................................................33
10 Conclusions................................................................................................................................................34
Appendix A S60 Themes Sketching Template for Photoshop .........................................................35

Creating Themes For Series 40 And S60 Devices: Visual Guide 3

 Forum.Nokia.com

11 References .................................................................................................................................................36
12 Further Reading .......................................................................................................................................36
Evaluate This Resource ..................................................................................................................................37

Creating Themes For Series 40 And S60 Devices: Visual Guide 4

 Forum.Nokia.com

Change History

March 1, 2005 V1.0 Initial document release

March 9, 2006 V1.1 Updated to cover the features of the newest Series 40 and S60
Theme Studios.
March 9, 2006 V2.0 Version number change only, to reflect the extensive nature of
the changes.

Creating Themes For Series 40 And S60 Devices: Visual Guide 5

 Forum.Nokia.com

1 Introduction
Themes are a quite new but already established business area — sometimes they are compared to
the success of SMS. What really makes Themes so interesting is the fact that it is easy to customize an
entire mobile device relatively easily, without really compromising creativity. You do not need to
know anything about programming or other technical issues — you can concentrate on what you are
best at — creating a Theme that really rocks.

Personalization is a very powerful way of self-expression. By personalizing the things we possess or

use, such as our homes, cars, and mobile phones, we tell the others something about ourselves.
Personalization has become even more popular in the digital era: small changes in the user interface
of most digital products and services are often just a few clicks away.

Most people that use a mobile device have it with them all the time, so it is a very good channel of
self-expression — especially now that people are getting used to personalizing their mobile devices.
The type of device you have, the accessories that you have attached to it, and the looks of the
interface all send constantly messages out to the world: This is me!

The success of mobile device Themes only proves this: easy mobile device personalization has become
extremely popular all around the world.

With the present tools that are provided for customizing the S60 and Series 40 devices’ UI, it is
possible to change almost every little detail in the UI. Now it is possible to create a Theme with which
you can express your ideas and visions better than ever before. Still, this is not enough: to fulfill its
original purpose, a Theme must also be used by someone. This document helps you to create a Theme
that its users can take full advantage of.

Since the publication of the previous version of this document many things have happened on the
Themes front: New versions of both S60 and Series 40 Theme Studios have been released and lots of
new devices that enable new ways of customization have been published. These things, among many
others, are addressed in this document. Most of the material for this guide has been gathered from
real-life experiences of talented Theme designers.

If you are a graphic designer, an art director, or otherwise visually oriented and interested in Theme
creation, this document is for you.

Creating Themes For Series 40 And S60 Devices: Visual Guide 6

 Forum.Nokia.com

2 A Theme Is a Piece of Art — so Get Creative!

A good Theme should be useful, usable, unique, and, above all, desirable. Definitely it does not hurt if
it is fun, too. At their best, Themes are a clever combination of art, vital information, and good
usability. Themes are a way to express one’s individuality. Your Theme will be successful if it has
something unique and personal. It is like good clothing: it is nice to wear, nice to have, keeps you
warm, and tells something about the person who wears it.

Figure 1: A good example of an artistic and unique Theme (courtesy of Mango Design)

A good Theme does not necessarily require days of work. Even with the smallest changes you can
create a Theme that suits your current mood or the season. Recycling your old material and using
templates can save you a lot of time.

In this document we introduce the processes and techniques of making a great Theme used by the
leading Theme designers in the world. We have interviewed Theme designers around the globe and
gathered information about their insights and work processes. Some of their masterpieces are shown
in this document. Part of the information is also based on our observations while having tested a
great deal of Themes already in the market. All the examples are based on real-life Themes.

This document introduces also to the newest challenges in creating Themes. Many new devices have
come out since 2005 when the previous version of this document was published. They have features,
such as active standby, scalable UI, and multiple displays, that certainly affect Theme creation. New
Theme Studios have also been released for both the S60 and Series 40 platform.

At the end of the document we have summarized guidelines for creating good Themes for both S60
and Series 40 devices. Print the page and stick it on your wall to help you to create even better
Themes!

Creating Themes For Series 40 And S60 Devices: Visual Guide 7

 Forum.Nokia.com

3 Even Though It Is Art, Keep It Usable

To be successful, your Theme has to be used by someone, hopefully a whole bunch of people. Creating
user-friendly Themes is actually quite straightforward if you just keep the following things in your
mind:
• Style: A Theme is more than a background image — a Theme should have a unifying idea with a
consistent style and balanced color palette.
• Contrast: Mobile devices are small and the text and icons on them are even smaller — a good
contrast should be provided throughout the Theme, so that the icons, texts, and the focus and
scrolling indicators are easy to interpret.

Creating Themes is all about designing and revising. Even the best sketches need revising and require
hard-disciplined work to make them really good. As Hemingway put it, “I write 99 pages of crap for
every one page of masterpiece.” So follow your intuition but remember copyright issues — use only
material for which you possess all copyrights.

Figure 2 illustrates the high-level process that helps you to design a Theme that is also convenient to
use. In this document we’ll go through each phase of the process and point out things that you need
to take into account to ensure a great user experience for your Theme.

Figure 2: The design process for creating user-friendly themes

Creating Themes For Series 40 And S60 Devices: Visual Guide 8

 Forum.Nokia.com

4 S60 Themes
The Nokia S60 Theme Studio for Symbian OS enables a complete makeover of Nokia S60 devices’ UI.
The new, third version of the Theme Studio allows you to create Themes for devices that have a better
resolution and a scalable UI (such as the N- and E-series devices).

When you can change almost everything in your device’s UI, where should you start and how should
you proceed? And, moreover, how should you take these new features into account?

In this chapter we go through the process of creating a visually interesting and usable Theme.

4.1 Setup

Before you can let your creativity run wild, you need to do some practical arrangements. First of all,
you need a rather powerful Windows computer to be able to run the Nokia S60 Theme Studio
smoothly. Your computer must have at least a 1.5 GHz processor, 512 MB of RAM (1024 MB
recommended), 200 MB disk space, and a display that supports at least 16-bit colors and a resolution
of 1280 x 1024 pixels.

Unfortunately none of the Theme Studios is compatible with Mac. But don’t worry if you are a Mac
user — you can create all the visuals on your Mac and transfer them later on to the Theme Studio. We
have created a special .psd file for Mac users to get a smooth start in Theme creation. Read more
about this in Appendix A, “S60 Themes Sketching Template for Photoshop.”

You can download the Nokia S60 Theme Studio for Symbian OS from the Forum Nokia Web site [1].
Installing it is as straightforward as installing any application nowadays, so that should be not a
problem. In addition to the Theme Studio you will need a bitmap editor, such as Adobe Photoshop®,
and a vector graphics editor, such as Adobe Illustrator® .

If you are not familiar with the S60 Theme Studio, it is highly recommended that you read the User’s
Guide first [2]. Trust us, doing this will save you from a lot of unnecessary work.

Figure 3: Starting to create a Theme with the Nokia S60 Theme Studio for Symbian OS

Creating Themes For Series 40 And S60 Devices: Visual Guide 9

 Forum.Nokia.com

4.2 Creating a Style for Your Theme

It is easiest to start with the background image. The background is the heart of your Theme and the
rest of the Theme should be aligned with the background, so don’t mind spending time on trying out
different versions and ideas.

For many end users the background is equal to the Theme and most of the Themes are purchased
based on the attractiveness of the background image, so it is worthwhile to invest some time in
creating a catchy image for the idle screen. There are two kinds of backgrounds in a Theme: the idle
background and the active background.

4.2.1 Idle background

The idle background is displayed when the device is in idle mode and it can be practically anything
you like or think the users of your Theme would like. Just do not fall too much in love with your
background image: There will be things on the idle background that have to be readable, such as the
date and the time.

It is best that you design the idle background so that it naturally supports the readability of these
areas (see the Prefer examples in Figure 4). The other, not so good option is to set a background to
the overlapping elements to ensure readability (see the Avoid example in the lower part of Figure 4).
The worst case is to create such an impressive background with go-together elements that nothing
can be read on the idle screen (see the Avoid example in the upper part of Figure 4).

Creating Themes For Series 40 And S60 Devices: Visual Guide 10

 Forum.Nokia.com

Figure 4: Two good backgrounds (courtesy of Kipl) and two bad backgrounds

4.2.2 Active background

Designing the active background is a bit more challenging from the usability point of view than the
idle background. The active background is the background of most native phone applications, such as
the Calendar, the Applications menu, and Messages. So if you found it challenging to adjust your idle
background to the different overlapping pieces of vital information, here you will find even more
challenge.

The easiest way to make a functional active background is to use a properly faded version of the
actual background. Also an image that shares the atmosphere of the idle background is an excellent
choice. Just using the idle background as it is will most probably lead to a bad and useless design. You
can see this in Figure 5.

Creating Themes For Series 40 And S60 Devices: Visual Guide 11

 Forum.Nokia.com

Figure 5: The background image needs to be faded quite a lot to make it work as the background for different
applications

4.2.3 Background for different applications, pop-ups, and fields

Sometimes it is just easier to define a solid or almost solid background for applications. Even a faded
version of the idle background does not work in the most complicated applications, but a more
dramatic change is needed as seen in Figure 6.

Figure 6: The Calendar view can become very easily unreadable. Event indicators (for example, small triangles in
the month view or the alarm icon in the day view) should be easily recognized, even with a colorful background.

The user will like your Theme even if the background image is not visible everywhere. The different
pop-ups are better when provided with a clear, solid background instead of even a faded picture. In
Figure 7 you can see how difficult it is to read the text of the pop-up if the background is not solid.

Creating Themes For Series 40 And S60 Devices: Visual Guide 12

 Forum.Nokia.com

Figure 7: A simple background for pop-ups is better than a too impressive one

4.2.4 Active standby

The newer S60 devices that have the active standby functionality — such as the Nokia 6680 and Nokia
N-series smartphones — make background creation a little more challenging. The active idle area
covers a big part of your stunning background image and worse — if you have, for example,
upcoming calendar entries, almost the whole idle screen is filled with black text and icons. In this case,
the same rules as for older S60 devices do obviously not apply, as you can see in Figure 8. A good idea
that is used in many preinstalled Nokia Themes of these devices is to use the active background also
as the actual background. This, of course, limits your creativity, but is surely better from the usability
point of view.

Figure 8: A simple idle background is better for devices with active standby mode

4.2.5 Scalable UI

Some devices, such as the Nokia E70 smartphone, have the possibility to flip the screen the other way
round. When the keyboard is opened, the screen orientation is changed from horizontal to landscape.
This has obviously major effects on your Theme, as it is being flipped with the screen. Sometimes
flipping the screen opens the camera or the video recorder, like in the Nokia N90 smartphone. In this

Creating Themes For Series 40 And S60 Devices: Visual Guide 13

 Forum.Nokia.com

case the biggest part of the screen is covered with the camera image and there will only be a narrow
strip of your Theme visible at the top and at the bottom of the screen.

Unfortunately it is not possible to design a scalable Theme with the current versions of the Theme
Studio. The best way to be prepared for the rotations and the different resolutions of displays is to
create the whole Theme using vector graphics.

If you use bitmap graphics, the results can be really surprising because the images are being scaled
and cut to fit the new dimensions.

For more information about Scalable UIs on Nokia devices, see Introduction To The S60 Scalable UI [4].

Example 1: A simple Theme in portrait and landscape mode. The bitmap is being flipped and stretched to fit the
flipped area.

4.2.6 Different resolutions

S60 3rd Edition devices have a better resolution than devices compatible with the older S60 Editions.
The new resolution is 352 x 416 pixels and when the display is flipped, of course, the other way round.
For the older devices the resolution is 240 x 320 pixels.

Creating Themes For Series 40 And S60 Devices: Visual Guide 14

 Forum.Nokia.com

Figure 9: A Theme in the new and the old resolution

4.2.7 Mini display

Some devices, such as the Nokia N90 and Nokia N71 smartphones, have a small screen called mini
display on the cover. This screen cannot be modified or previewed with Theme Studio at the moment;
the screen will be automatically filled with the background image provided by your Theme. Also the
status bars and the clock of your “native” Theme will be used. Even though you cannot directly modify
the UI of the mini display yet, remember to check it anyway before publishing your Theme.

4.3 Colors

The rule of thumb when choosing colors for your Theme is to keep it simple. More than three different
main colors is certainly too much.

The background is a good starting point for the color palette that you are going to use in the Theme.
It is easy to choose 1-3 colors from the background and use them in the backgrounds of different
applications, pop-ups, and alerts. If your background image is very plain, you can use also
complementary colors in your color palette.

It is also possible to change the color of dynamic text in the S60 Theme Studio 3.0 for Symbian OS. So,
if the device you are designing for supports that feature, you do not have to care about adjusting the
background color to suit black text.

There are many ways to choose colors. Some prefer using just pure intuition, some want to use a
certain picture as the starting point. It is also possible to take a little more theoretical approach — in
this section we tell you how to select 1 to 3 colors that build up a harmonic color palette by using
some of the basic rules of color theory. The foundation of color theory is the color wheel that we have
illustrated in Figure 10. All the examples (11-14) are provided by Airmotion.

Creating Themes For Series 40 And S60 Devices: Visual Guide 15

 Forum.Nokia.com

Figure 10: Color wheel

4.3.1 One hue

To create a harmonic Theme, it is easiest to select one hue and use the different values of it. This is a
very easy way to make a harmonic Theme and it can give strong emotions like “cold,” “warm,”
“neutral,” and so on.

Figure 11: A Theme with a restricted color palette consisting primarily of one hue

4.3.2 Analog hues

Also colors that are close to each other in the color wheel build up a harmonic combination.

Figure 12: A Theme using multiple warm colors from orange to brown

Creating Themes For Series 40 And S60 Devices: Visual Guide 16

 Forum.Nokia.com

4.3.3 Complementary colors

To bring a little action to your Theme, but not on the expense of the balance, it is easiest to use
complementary colors. Complementary colors are colors that are opposite to each other on the color
wheel.

Figure 13: A Theme using complementary colors, yellow and violet.

4.3.4 Triad relationship

Colors that form an equilateral triangle on the color wheel are said to be in a triad relationship to each
other. Also using these colors you can create a Theme that certainly does not lack color but can still be
enjoyed by the users due to its harmony.

Figure 14: A Theme using three colors that form a triad relationship (yellow, red, and blue).

As much as we would like to give you straight rules for choosing the best colors for your Theme, it is
almost impossible with all the different device displays. No matter how carefully you designed the
color palette of your Theme, there will always be minor differences in colors between different device
models.

One important point is also that the display of mobile devices is dominated by blue tones. This can be
seen, for example, in gradients: blue gradients look smooth, whereas red and yellow ones do not.

The Internet is full of various pages of color theory. Just enter “Color Theory” to your search engine
and you will find lots of good material to help you in finding the best possible combination. You can
also take a look at the classical color theory book “Elements of Color” by Johannes Itten [3].

4.4 Keep Consistency and Contrast in Mind

Now that you have fixed the backgrounds and the colors for your Theme, the rest should be just
executing your idea throughout the rest of the elements. Consistency is a good thing for usability, but
alone it is not enough. The key issue in creating usable Themes is the contrast. With every single
element you design, you need to check that it has enough contrast with its background.

Creating Themes For Series 40 And S60 Devices: Visual Guide 17

 Forum.Nokia.com

Contrast can be defined in many ways; in this document we define contrast as the difference of
luminosity of two colors. Black text on a white background offers an ideal contrast. If you do not want
to use black and white, remember that the background color should have a maximum of 20 percent of
the intensity of the element that is presented on it.

There are lots of overlapping elements in a Theme and a good contrast must be provided in all
directions. An example of this is shown in Figure 15.

Testing the Theme is, again, the best way to check if the contrast is good enough. It is best if you can
give the Theme to a few people and ask them to use a device having your Theme installed on it for a
while.

Figure 15: Left: Good contrast in all directions. Middle: Good contrast between the icons, the labels, and the
orange background, but bad contrast between the background and the highlighted icon. Right: Bad contrast in all
directions.

Drop shadows and reflections are a good way to provide better contrast for icons and menu items
(see Figure 16) — subtly used drop shadows provide a professional look. Remember that some
devices do not support transparent masks so the results may not look as you might expect.

Figure 16: Drop shadow increases the contrast between the icon and the background

There are many different icons that must stand out while using the device, including “new message,”
“keypad locked,” and “Bluetooth active.” Remember to test your Theme so that a user can see these
signs in every possible situation.

Creating Themes For Series 40 And S60 Devices: Visual Guide 18

 Forum.Nokia.com

4.4.1 Clear focus indication is a must!

Showing the user where he or she is, is one of the most important things in a user interface. The
importance of the location is even more important in mobile user interfaces which can be used in
almost any imaginable situation: the user must see at one glance what his or her options are. You
have to ensure that the focus indicator has enough good contrast with the background and that the
focused area can be easily recognized and read. Also remember that content that is not focused must
be visible: Using the device should not be like using a flashlight in the night and trying to find
something important.

Highlight is needed when scrolling through different menus, lists, tabs, and dialogs (see Figure 17).
There should be clear states for the “active” and “passive” modes wherever possible. For the example
on the left, the indication is clear and you can see that there are more tabs to the right. The example
on the right demonstrates that it can be very hard to see in what tab you are. Also, there is not
enough contrast between the arrow and the background, so the user will not immediately know
(since he or she cannot see) if there are more tabs.

Figure 17: Indication of focus is important: concentrate on highlighting. The icons, the clock, the signal, and the
battery.

An arrow that indicates scrolling is very important — make it easy to see. It is a good practice to
choose one way to indicate focus in lists, grids, scrolling indicators, and even selected tabs (see Figure
18).

Figure 18: The arrow is important in older S60 devices, whereas newer ones do not use arrow indication

After you have decided the style of your Theme, and fixed the background and color issues, it is time
to design the next elements; the icons, the clock, the signal, and the battery status.

4.5 Icons

Creating icons is very time-consuming: creating a full icon set can last even weeks. There are over 200
different icons, of which an average user will only see a fraction. If you do not have time to do even
the most common icons, it is probably better to use the default icon sets that are provided by the
Theme Studio. Another way to save time when creating icons is to download free icon sets, for
example, from Theme-related discussion forums. Nowadays there are also reasonably priced,
Creating Themes For Series 40 And S60 Devices: Visual Guide 19
 Forum.Nokia.com

professional-quality royalty-free icons that you can use and modify to give your Themes a
personalized feeling with a reasonable schedule. What you should avoid is a mixture of your own
icons and the default icons of the device. It will look as if you were in a hurry when creating the
Theme — which is never a good thing. See Figure 19.

Figure 19: If you decide to change the default icons, change them all

Icons can be artistic but still informative as illustrated in the example on the left from Mango Design
(see Figure 20). It is advisable to make the icon symbolize its actual metaphor. If you use icons like
those in the example on the right, the user may get easily frustrated. The user should learn the icons
as quickly as possible. If you are addressing a global market, you need to keep cultural considerations
of icons and graphics in mind as well. Pay special attention to human figures, numbers, symbols, and
hand gestures, because the meaning of these can vary widely. For example, in the United Kingdom
and United States number 13 is considered unlucky, but in Greece it is considered to be lucky.

Figure 20: Unique and still descriptive icons and icons that do not have anything to do with the application they
represent

Basic icons used in Nokia devices have typically gone through extensive international acceptance and
understandability testing. Nokia icons look familiar to users who have previously owned Nokia
devices, so it is not necessarily a bad idea to have icons that resemble the Nokia ones. You can use
them as metaphorical templates. If the device has hardkeys (like the Applications key) with icons, try
to use those icons in your Theme as well.

Creating Themes For Series 40 And S60 Devices: Visual Guide 20

 Forum.Nokia.com

4.6 Creating a Finished Look for Your Theme

Whereas icons are laborious to create, you can easily add a little more character to your Theme by
creating a suitable clock, signal, and status bars.

With these and especially with the clock and the battery status you have to be considerate. Making a
cool clock and status bars should not happen on the expense of the interpretability of time and
battery status: these are things that the user must see and understand right away when looking at
the idle screen. Nevertheless, this does not mean that you have to create a dull clock or basic black
bars — just look at Figure 21 to get convinced.

Figure 21: Examples of interesting clocks and status bars that are easy to interpret

As seen in Figure 22, there is no easy way to know what the maximum and/or minimum or the
current status of, for example, battery charge is. You really don’t want your users to lose their battery
power without warning.

Figure 22: On the right is an example of unusable battery/network indicators

4.7 Test Your Masterpiece

A good Theme will become excellent with proper user testing. Use your co-workers, friends, and
random passers-by to obtain overall opinions and impressions. Ask two or three friends to use your
Theme for a few days and to write down their opinions. It is always better to get feedback prior to
release than afterwards.

Most Themes are designed in good office lighting conditions with good monitors. In real life, however,
Themes are used, for example, while riding a bike in bright sunlight, or in the foggy streets of London.
So do not rely on what you see on your screen of the Theme Studio application — use real devices as
much as possible. There will be many differences since screen resolutions and colors are different on
the mobile device than on the monitor. Here are some main issues that you will notice:
• A difference in the tone of colors varying between different device models.
• Gradients will show differently. Mobile devices have more blue tones than other tones, so blue
gradients look good and, for example, red gradients do not.
• If you design with a tool that enables transparent highlights but the device you test the Theme
on does not, the result may not look as good as you might expect.

You had better get started already with the background you have created and test the Theme as often
as you can. Testing is time-consuming, so testing each little bitmap is naturally not worth it, but
testing bigger entities, such as the highlight and the icons, is a good compromise.

Creating Themes For Series 40 And S60 Devices: Visual Guide 21

 Forum.Nokia.com

4.7.1 Get Symbian Signed

The S60 Theme Studio asks for the Symbian Signed key to be able to proceed by making a .sis file
of your Theme. Getting a Symbian Signed key is naturally not worthwhile in the testing phase due to
the costs of the key, so creating your own private key is worth the effort. For creating a private key for
testing purposes (only), do as follows:
• Open Command Prompt.
• Select target directory. It is normally cd C:\Program
Files\Series_60_Theme_Studio\S60_TS_3_0\bin
• Create a key with the following line (replace MyCompany with your company’s information):
makekeys -v -cert -len 2048 -dname "CN=MyComp OU=Themes OR=MyCompany
CO=FI EM=feedback@mycompany.com" MyCompany.key MyCompany.cer
• After the password is queried, answer No.
• For creating a random number, type about hundred characters or move the mouse in the screen.
• When you are creating the .sis file, open the Advanced dialog and place your keys there. The
keys are in the same directory where you created them.
• You can find more information in on page 91 of the Artist's Guide [2].

After having created the key, you can make a .sis file of your Theme, transfer it to a device, and test
it.

When you are ready to publish the Theme, it is naturally advisable to have your .sis file verified and
signed using Symbian Signed. You can read more about it at the Symbian Signed Web site at
http://www.symbiansigned.com/ [6].

4.7.2 File size and versions

File size is an important issue as well. The MMS size limit for the older devices is only 100 KB but the
latest S60 devices accept 300 KB. In practice, keep the file size around 200 or 250 KB.

Remember also that the old .sis files are not suitable for S60 3rd Edition and onwards.

Creating Themes For Series 40 And S60 Devices: Visual Guide 22

 Forum.Nokia.com

5 Series 40 Themes — Completely New Possibilities

In December 2005, a new version (v2) of the Series 40 Theme Studio was released, corresponding to a
new version of the Series 40 Theme format supported by newer Series 40 devices. While the previous
version of the Series 40 Theme Studio allowed you to change a few elements of the Series 40 UI, the
new version makes the creation of Series 40 Themes much more versatile and interesting. It allows
you to change a wide variety of elements, including the wallpaper, the screensaver, various
backgrounds, highlight images, menu icons, and specific colors. See how different the new and old
Series 40 Themes look like in Figure 23.

Figure 23: New (v2) and old (v1.2) Series 40 Theme

Figure 24: The new S40 Theme Studio

Creating Themes For Series 40 And S60 Devices: Visual Guide 23

 Forum.Nokia.com

Still, Series 40 Themes are considerably more restricted than S60 Themes. The resolution of the Series
40 devices’ display and the amount of colors that the display is able to reproduce are more limited
than in S60 devices. Also, the number of customizable Theme elements is much smaller in a Series 40
Theme than it is in a S60 Theme. For example, you cannot change the battery, signal, and volume level
bars, the slider and the navigation graphics, nor the clocks, tab icons, or the icon colors. For more
information about the features of Series 40 devices, see Nokia Series 40 Theme Studio Handset
Guidelines [5].

However, this means that it will be much easier for you to create a Theme for a Series 40 device than
for a S60 device. You will probably also get a good return on your investment of design time — Series
40 devices are targeted at young people who are currently the biggest customer group of Themes.

The same basic rules of Theme design that were discussed with S60 Themes also apply to Series 40
Themes. Everything must be readable and understandable at the first glance. When navigating
through a list, the highlighted image must present a clear contrast with both the background and the
text. Also remember to keep the style of your Theme catchy but consistent. Look at the examples in
the following sections for ways to improve your Series 40 Theme.

Figure 25: Remember to keep the active background image also in S40 Themes simple. As you can see, it is much
easier to read the text against the Theme background on the left side than against the one on the right side.

5.1 Multiple Backgrounds for the Series 40 Theme

With the Series 40 Theme Studio v2 you can set multiple backgrounds to your Theme. The Theme
Studio allows you to change different backgrounds to all different menu views (the grid, the list, and
the tabs view). When the main menu is displayed in the tabs view, the background can be set
differently depending on which main menu icon is currently selected. In addition to this, you can have
a different background for each calendar month.

The more options you have, the more careful you have to be. Changing all the different backgrounds
at first is probably not the best solution. Start with slight changes and test your Theme in between.

5.2 Active Standby in Series 40

The active standby in Series 40 devices differs from the one in S60 devices. For the designer, the Series
40 active standby is easier to customize. The active standby (or “Active Idle” as it is called in the Series
40 Theme Studio v2) in Series 40 devices has two modes: passive and active. When the active standby
is in passive mode, it is only a row of icons at the top of the display. When the user activates the

Creating Themes For Series 40 And S60 Devices: Visual Guide 24

 Forum.Nokia.com

active standby (by pressing one of the navigation keys), a pop-up display containing more detailed
information is being shown over the background image (see Figure 26).

Figure 26: Active standby in passive (left) and active (right) modes

The pop-up display and the row of icons always have a background, so you do not need to worry so
much about changing the idle background because of the active standby as in S60 Themes. You
cannot change the text color, it is always white. You have to ensure that the active standby has
enough contrast between the idle background and with the white text on it. Even though you’d like to
use the same color (here orange) also in the active standby background, it might be easier to choose
another color (here blue, the contrary color of orange) to get an even better contrast. Figure 27 shows
what happens if the contrast is not good enough.

Creating Themes For Series 40 And S60 Devices: Visual Guide 25

 Forum.Nokia.com

Figure 27: The active standby in Series 40 with good (upper row) and bad (lower row) contrast

5.3 Mini Display

Another set of elements that the Series 40 Theme Studio allows you to customize is the mini display
(the outer secondary display) on devices that have two screens (for example, fold phones). The tool
allows you to customize wallpaper, screensaver, background, and various state-change screens
(startup, shutdown, open, close) with full-screen images. Also, all Theme colors can be customized
separately for a mini display from their main-screen values.

This ability to separately customize the mini display allows you to approach the design of the outer
screen differently from the inner (main) screen, if you wish.

5.4 Testing Series 40 Themes

As with the S60 Themes, testing your Theme is very important. Testing your Series 40 Theme is
especially important because the displays of most Series 40 devices have a more limited color palette
Creating Themes For Series 40 And S60 Devices: Visual Guide 26
 Forum.Nokia.com

than the average computer screen. The colors that you design into your Theme on the Series 40
Theme Studio running on a Windows machine may look very different once it is loaded onto a phone
screen. Generally, you can use the same testing recommendations as for S60 Themes described earlier
in this document. However, testing Series 40 Themes is much easier than testing S60 Themes: in
Series 40 devices, the Themes are not encrypted, so you do not have to worry about managing a
Symbian Signed key when loading Themes onto the device. You can just click “Save” in the Theme
Studio, transfer the .ntf file to your device, and the Theme is ready to be applied.

Creating Themes For Series 40 And S60 Devices: Visual Guide 27

 Forum.Nokia.com

6 Nokia 7710 Multimedia Smartphone

While S60 devices offer you opportunities you previously didn’t have, it gets even better with the
Nokia 7710 multimedia smartphone. Along with all the new possibilities in the Nokia 7710
smartphone, including a wide screen that is one of the best screens seen on mobile devices, better
reproduction of colors, and usage of the touch screen (with pen and finger), comes much more work
for the Theme artist — you must think of usability and consistency even more while designing
Themes for the Nokia 7710 smartphone. Text input and most choices in the Nokia 7710 UI are done
with a pen or finger, so there is a new element while creating Themes: You must provide good visual
elements for the buttons that can be pressed.

Figure 28: The desk view of the Nokia 7710 smartphone differs a lot from those of Series 40 and S60 devices.
Notice the new icons, the way to show scrolling, and positioning of the main menu (upper left). Usage of pen (or
finger) must be considered carefully.

Figure 29: You can create graphics for the buttons of the Nokia 7710 smartphone as well. The user must know
which graphic element represents a button that can be pressed and which element is currently highlighted.

Creating Themes For Series 40 And S60 Devices: Visual Guide 28

 Forum.Nokia.com

Figure 30: Notice the software buttons on the right. Everything can be controlled with a pen (touch screen) and
most elements can be accessed with the hardware cursor as well.

Creating Themes For Series 40 And S60 Devices: Visual Guide 29

 Forum.Nokia.com

7 Sound’s Right?
Don’t forget sound. You can make your mobile device play like a real band. You can modify ring tones
and message alerts. The ring tone is arguably the most noticeable part of the interface of a mobile
device, since the user hears it whenever a call comes in. It is a good idea to make sounds match your
Theme’s overall feel and atmosphere. For example, if you decide to create a Theme around a “Forest”
subject, take your recording machine and go outside to make some recordings. Once again, remember
copyright issues — even a short sample of someone else’s recording is subject to copyright laws. The
supported sound formats are AAC, AAC+, cAAC+, AMR, WB-AMR, MIDI, SP-MIDI, MP3, and MP4.

See document Ring Tone Guidelines For Nokia Devices [7] for guidelines on ring tones.

Creating Themes For Series 40 And S60 Devices: Visual Guide 30

 Forum.Nokia.com

8 Recycling Is Clever
Making a Theme from scratch with all icons and other elements is quite time-consuming. It can take
weeks, even months, to create an excellent Theme. So it is a good idea to make a few basic Themes
and then vary them as much as possible with easier modifications, such as changing the main
background and basic colors — and even mix components of your basic Themes together. This way
you can make another Theme in a couple of days, even in hours, if you change only the background
and start screen.

Figure 31: After you have created one or more basic Themes, you can easily make variations in a short time
(courtesy of Mango Design).

Figure 32: Themes that have been created using the same templates (courtesy of Webliskot)

Figure 33 shows another example of versatile usage of one basic icon set that has easily been
manipulated by using different colors and filters/styles in a graphics editor, such as Adobe Photoshop
® or Jasc Paint Shop™ Pro® (courtesy of Mango Design).

Creating Themes For Series 40 And S60 Devices: Visual Guide 31

 Forum.Nokia.com

Figure 33: Icon sets can be easily modified

Creating Themes For Series 40 And S60 Devices: Visual Guide 32

 Forum.Nokia.com

9 Guidelines for Creating a User-Friendly Theme

Creating Themes For Series 40 And S60 Devices: Visual Guide 33

 Forum.Nokia.com

10 Conclusions
Remember that the best way to learn how to create an effective Theme is actually pretty simple: just
create it. Listen to user feedback and improve the parts that are confusing or hard to read. After that,
create another. Repeat this.

It is learning-by-doing business at its best, and it is lots of fun. There are many Web sites and forums
that are devoted to Theme creation and discussion. Look what others have done and go beyond that.

Creating Themes For Series 40 And S60 Devices: Visual Guide 34

 Forum.Nokia.com

Appendix A S60 Themes Sketching Template for Photoshop

Currently there is no Nokia Theme editor available for Mac users. Also it has been noticed that even
though Theme editors are really versatile programs, it is sometimes good to have a more familiar way
for the creative mind to start working. This is why we present a new downloadable template, the S60
Themes Sketching Template [8], for Photoshop and all other programs compatible with .psd. Starting
to create Themes could not be easier than with this file — just open it with Photoshop and start
creating. After you are satisfied with your creation, find a friend or colleague with a PC and build the
actual Theme. This method could be compared to other similar workflows that art designers do daily
— someone uses his or her creativity to make fundamental designs and another one concentrates on
technical issues and actualizing creations. This .psd file is NOT a complete way to make a Theme, it
will just give you a hint of what is feasible and what kind of designs could be implemented.

The benefits of this file are:

• Start creation immediately — there is no need to use time to learn a new program or to find
different screen resolutions and components, it is all there.
• All basic “idle screen” elements are in place to test how your design works while you create.
• Most typical scenarios are as different layers on the .psd file to test your work.
• You can also test the “active idle” screen, which is not possible with the current version of Theme
Studio.
• You can easily learn all layout rules for Nokia Themes by doing.

From this file you can find many different documented layers that you can turn on and off. It is pretty
self-explanatory.

Creating Themes For Series 40 And S60 Devices: Visual Guide 35

 Forum.Nokia.com

11 References
[1] Nokia S60 Theme Studio, available at http://www.forum.nokia.com/tools
[2] Artist's Guide for S60 Theme Studio 3.0 for Symbian OS, available at http://www.forum.nokia.com
[3] Itten, Johannes, The Elements of Color. Wiley, 1970.
[4] Introduction To The S60 Scalable UI, available at http://www.forum.nokia.com
[5] Nokia Series 40 Theme Studio Handset Guidelines, available at http://www.forum.nokia.com
[6] Symbian Signed, available at http://www.symbiansigned.com
[7] Ring Tone Guidelines For Nokia Devices, available at http://www.forum.nokia.com
[8] S60 Themes Sketching Template, available at http://www.forum.nokia.com

12 Further Reading
Series 40 And Series 60 Themes White Paper, available at http://www.forum.nokia.com/themes

Creating Themes For Series 40 And S60 Devices: Visual Guide 36

 Forum.Nokia.com

Evaluate This Resource

Please spare a moment to help us improve documentation quality and recognize the resources you
find most valuable, by rating this resource.

Creating Themes For Series 40 And S60 Devices: Visual Guide 37