Tizen design guidelines

The Tizen
Design Guidelines
Introduction and Styles
© 2015 Tizen Project, a Linux Foundation Project. All Rights Reserved. Linux is a registered trademark of Linus Torvalds.
Tizen is a registered trademark of The Linux Foundation. * Other names and brands may be claimed as the property of others.
Except as noted, this content is licensed under Creative Commons Attribution 3.0. For details, see the Content License.

2
TheTizen Design Guidelines
Table of Contents
1. INTRODUCTION 3
VISIONS 3
“AIR” 3
1.2.1 The Origins of the “Air” Concept 3
1.2.2 Natural Elements in the Design Language 4
NEW INTIZEN 2.4 6
2. STYLES 8
DEVICE COMPATIBILITY 8
ICONOGRAPHY 9
2.2.1 App Icons 9
2.2.2 Interactive Icons 12
2.2.3 Custom Icons 14
TYPOGRAPHY 15
2.3.1 Breeze Sans 15
2.3.2 Typeface-related Guidelines 16
COLORS 18
2.4.1 Default System Colors 19
2.4.2 Text and Background Color 20
2.4.3 Color Structure 21
ANIMATIONS 23

3
1. Introduction
The guidelines we provide will show you how to design useful and aesthetically pleasing Tizen apps that users
will enjoy.
Let’s begin by sharing our vision for Tizen app design and the visual language we use. These concepts will help
you provide users with an enjoyableTizen experience.
Refer to New inTizen 2.4 for the new features.
Visions
Tizen is a platform built for the future. It was developed to foster openness, which is essential for creating a
rich user experience on mobile devices and the devices they connect to. Tizen nourishes users’ curiosity, allows
them to easily reach their goals, and lets them express their personality. Tizen is a platform designed to grow
with users, enriching their daily life.
Figure. Illustration
“Air”
“Air” is one of the inspirations behind the Tizen design. The concept was introduced to achieve the key
principles of openness, flow, curiosity, and focus. “Air” is a conceptual element that inspires an open, flexible,
and rich visual experience. Designs should be created to satisfy users with visually reinforced presentations.
1.2.1 The Origins of the “Air” Concept
“Air” interacts with “Ground,” “Atmosphere,” and “Wind,” to create different results.
“Ground” symbolizes the structure and layout of the Tizen design. “Atmosphere” is the subtle variations of the
“Air” principles, such as colors, themes, and overall design variations. “Wind” is created by the flow and
movement of “Air.” ForTizen, it symbolizes visually pleasing motion graphics designs.

4
1.2.2 Natural Elements in the Design Language
“GROUND”: Bold and Distinctive Layout Design
Figure A. Distinctive layout is created where air touches the ground
Min Kyu Park (LightHolic) for Tizen
In our design language, “Ground” is the first element “Air” touches. Solid structural designs powered by Tizen
provide distinctive divisions on which all the other design elements are placed. Across all applicable platforms,
such structural distinctiveness leads to glanceable and quickly recognizable designs.
The “Air” concept embraces the beauty of less and pursues minimalism in the layout. It aims to provide only
the essential content based on actual needs. Therefore, the “Air” concept may not reveal its full potential at
first look.
“ATMOSPHERE”: NaturalTones, Colors, and Moods
“Atmosphere” represents natural tones, colors, and moods present in the design. Inspired by the colorful
gradients found in nature, such as deep blue skies with a slight hint of white cloud, sunrises, sunsets, and the
Northern Lights, “Atmosphere” emphasizes the use of color gradients to achieve a natural, aesthetic design. A
well-implemented “Atmosphere” can vastly enhance user experience.

5
Figure B. Color inspirations from nature
Using light, “Atmosphere” aims to achieve natural transition of colors as they are found in the sky. With
carefully selected colors, “Atmosphere” creates natural, yet appealing color gradients.
We recommend contrasting color combinations in the background and foreground to ensure optimal
readability. The use of subtle gradient prevents high-contrast screens from becoming boring by adding
variations that keep the screen visually intriguing.
“WIND”: Animated Graphics from Nature
The “Wind” concept is based on animations providing users with feedback for each interaction, while
conveying meaningful information to help orient users. For example, page-turning effects visually suggest the
direction of navigation, and page-end effects inform users that they have reached the last page of the current
content. Uniform, harmonious animations on the screen allow for a pleasant visual experience while
maximizing the responsiveness of the design.

6
Figure C. The wind is the flow of the content.
Tizen screens have a multilayered structure. Each layer has its own directional flow, based on the uses and
features, for consistent screen transition. Difference in direction helps users clearly identify which layer, level,
or part of the design the interaction is taking place on.
Animation effects also include fade effects for transitions between layers and for opening and closing app
screens.
New inTizen 2.4
“Air”Visual Language
The visual style of Tizen has evolved one step further. “Air” is the key concept behind our open, flexible, and
rich visual experience. Typography, iconography, color, and motion are beautifully integrated to realize the
new “Air” concept.
Notifications
The active notification type was added to support immediate user action for time-sensitive events.
Design Patterns
We provide detailed guidelines for developers. Follow the guidelines to give users an enjoyable experience. It’s
very important for users to feel comfortable and familiar with your app from the very beginning.
Tizen UI components
Tizen provides various UI components, such as navigation components, presentation views, UI components,
and assist views. For Tizen 2.4, these UI components have been refined and fine-tuned to be more consistent
and organized. This helps developers design their apps more conveniently, and allows users to better

7
understand the user interface.
Also, controls, such as floating action button and light view, are newly introduced in Tizen 2.4 to help you
provide users with apps that are easier to use.

8
2. Styles
Device Compatibility
Tizen supports various mobile and wearable devices with different display sizes. For this, detailed style
guidelines are provided to help you create consistently designed apps across different hardware platforms.
Figure A. Different devices come in various screen sizes and resolutions.
From Small to Large, IncreaseYour Screen Real Estate
Consider the smaller screen layout when you start planning your design. Larger screens allow for more content.
While it does not make initial planning easier, larger screen sizes do provide more options. Options are limited
with smaller screens, so you must be more decisive when choosing which features you will include. Once you
decide on the key features or the number of icons to display on smaller devices, you can always enlarge and
rearrange content to use on larger screens, increase the number of the icons to display, or add more features
to provide more information taking advantage of the increased screen size.
Go Smart with the Layout Design
A flexible design is required to properly display your content on different screens. Use design techniques to
allow your design to fit any screen nicely. Also, design screen layouts based on the most restrictive device to
come up with a highly compatible screen layout.
Consistent Design Language for All
Just because your design should fit on different screens does not mean that the design must differ from one
screen to another. On the contrary, it is a good idea to keep the design consistent and uniform so that they
look alike regardless of the screen size. Keep the same UI components, color, look, and feel of the overall
design to let people know that it is the same app throughout devices.

9
Iconography
Tizen uses simple icon designs with subtle shadows. The following are guidelines for designing icons that
instantly deliver information at a glance.
Use Icon DesignsThat Are Easy to Understand
When you design icons, ensure that they are easily understood without any additional description. Where
applicable, use universal designs that are familiar to users. It’s a good idea to perform a usability test on the
icons after designing them.
Do Not Copy Real Life Objects, Iconize them
Use flat, simple designs to describe the main characteristics of an app. Design your icons to emphasize the
shapes of objects so that they can be easily recognized, and match the style with the app icons that are
displayed on the Home screen. Do not try to include realistic photos, detailed lines, or complicated shapes in
your icons.
Prepare Differently Sized Icons for OS and Device Compatibility
Different Tizen platforms require different icon sizes. For example, mobile devices with a WVGA display and
those with an HD display (Tizen SDK 2.4) require icons in different sizes. Circular type wearable devices also
require device-specific icon sizes.
2.2.1 App Icons
App icons are important because they visually represent your app on the Home screen. App icons must be
attractive enough to draw a user’s attention and they have to deliver meaningful information about your apps.

10
Figure A. Example of a Tizen app icon
Shape It in a Circle
Tizen’s system icons are displayed as circles. Although this requirement creates challenges in designing icons,
the shape allows for a uniformity that ties different icons together for a consistent look and feel.
Figure B. Original circle concept, initial sketch

11
Icon Colors and Background
Carefully choose the icon background color when designing an icon for your app. The background color greatly
affects the visibility of your icon. Since the icon will be used to distinguish your app, icons should be designed
for easy recognition. An icon with a carefully selected background color makes your icon design easy to notice,
no matter where you place it.
In Tizen 2.4, subtle glow effect is applied by default over the icon. The addition of the glow effect visually
enhances the icon designs and gives them a sense of dimension.
Figure C. Your icons should be visible against any background.

12
2.2.2 Interactive Icons
Interactive icons allow for instant actions, or provide additional information about the currently displayed
content. The same principles for designing app icons apply for the interactive icon design: use simple lines and
shapes. InTizen, there are two types of interactive icons.
Action Icons
On the screen, you can add an action bar and place Refresh, Back, Expand, or Close action icons on it.
Sometimes, text buttons, such as Cancel and Done, may be added if applicable.
Figure D. An example of floating action button
Here are the basic requirements of action icons:
 Style: Use pictographic icons that are simple and bold. Choose an appropriate line thickness for the
design.
 Color: Design the icons with foreground colors brighter than background colors. Use darker icons over
light-colored themes.
 Button status: Design icons for normal, pressed, and dim states.
In the Tizen Action Bar Icon Pack, you can find the action icon examples scaled for various screen sizes. This
package includes icons designed in Adobe® Photoshop® format, so that you can customize them for your own
designs.
TheTizen SDK also includes default action icons for turning on or off certain features and making selections.

13
Informative Icons
Unlike action icons, informative icons are not touchable. They help users understand the content by providing
self-explanatory visual information. In the examples below, the icons on the left of the call log categorize the
type of call records as missed and received.
Figure E. Call log icons categorize received, missed, and outgoing calls

14
2.2.3 Custom Icons
You can also design app icons to match your brand identity. When you do this, however, we recommend that
you follow the styles provided in Tizen 2.4 2D to maintain visual consistency with the system icons. Carefully
choose the colors, size, and location of the icon and make sure that the icon is visible at all times.
The following are the basic requirements for brand icons:
 Size: Sizes may vary. Choose a size that provides a good balance with the content on the screen.
 Style: Use simple pictographic icons that are easy to understand. Do not apply outline strokes or
shadows.
Recommended
 Color: Design icons with colors that are easily noticeable. Use dark colors over light backgrounds and
light colors over dark backgrounds to ensure optimal visibility.
Recommended

15
Typography
2.3.1 Breeze Sans
Choosing the right typeface is important because Tizen apps rely on content-driven designs. Typefaces that
are easy to read can improve the usability of the design by helping users better understand the content.
Breeze Sans, the main typeface for the Tizen SDK 2.4, is specifically designed for the Tizen UI. It provides
excellent readability on all screen sizes, including the WVGA and HD resolutions.
Breeze Sans typeface comes in light, medium, regular, and condensed variants, and each variant has thin, light,
regular, medium, bold, and Num-3L types.
Figure A. Breeze Sans

16
2.3.2 Typeface-related Guidelines
These are the guidelines for choosing and applying the typefaces when you design aTizen app:
Design High Contrast Screens for Better Legibility
Use light text on dark backgrounds and dark text on light backgrounds. If you choose a light color for the
background, use bold and strong colored text in the foreground. Do not adjust the text opacity. It will decrease
the contrast between the background and the text. On the other hand, use a dark background for light-colored
text. Always test the background and text colors to make sure the combination results in good contrast before
making a final decision.
Refer to Colors for detailed information about background and text colors.
Keep theText Colors Consistent
Use text colors that stand out for important actions, and apply them consistently throughout the entire
system.This will help users intuitively understand what the colors stand for.
Avoid Using MultipleTypefaces
Consistently use one font throughout your app. Displaying multiple typefaces in one system may result in
confusion. If you need to design an interesting, yet consistent screen, use fonts with different styles or weights
in the same font family instead.
For example, use bold type for the title and regular type for the body text. This allows for text-oriented designs
that are consistent and distinctive.
Recommended

17
Avoid Drastic Changes in Font Size
Do not juxtapose text with varying sizes. Create a font size chart and refer to it when choosing the font sizes.
Such practice helps you create more consistent and natural layout designs.
Figure D. Recommended font sizes for the mobile app designs
Consider Providing Accessibility Options for Users with Disabilities
Tizen provides accessibility settings to allow users to customize display settings. By allowing users to adjust
the font’s color and size options, you can create an app that is universally accessible to all users.

18
Colors
Colors play an important role in creating designs for a rich visual experience. Carefully selected colors add
rhythm and richness to the screen design and provide the entire system with visual consistency.
Tizen provides various color palettes to help you select colors to indicate different functions of on-screen
objects.
This section provides information about the new default theme color provided with the Tizen SDK 2.4 and
explains the system colors (functional colors) used to indicate different functions.
Figure A. The new Tizen themes use gradients as the background.
Tizen features background gradients for both mobile and wearable devices by default. The system
automatically transforms single-colored backgrounds into gradients by shifting hues and applying a slight
shimmer.
Tizen mobile and wearable devices have different background schemes. While mobile devices use blue
gradient schemes, wearable devices use darker background schemes based on the colors of the Aurora
Borealis.
Recommendations
If you choose to design your own theme gradient, be careful about the gradient directions and range of colors.
Avoid disorienting gradients (Figure B) and grayscale gradients (Figure C) to create a theme that is consistent
with the overallTizen visual experience.

19
Figure B. Disorienting gradient
Figure C. Grayscale gradient
2.4.1 Default System Colors
For basic action buttons, such as Go and Stop, Tizen 2.4 uses clear, distinct colors for focus and emphasis.
Transparency may be applied to text colors to add subtle nuances.
The following are guidelines for choosing colors for your app design.
Avoid Button Colors Already in Use for the System Icons
In the Tizen SDK, basic action buttons, such as Go and Stop are assigned with distinctive colors to accent
functions. If you design your app with button colors that are already in use with these icons, users may have
hard times recognizing the system icons.

20
Choose Unique Colors forYour App
You can design your own theme, and apply it to your app to differentiate it from others. Just remember to use
consistent color swatches that will enhance visual communication with users.
Keep Accessibility in Mind
It is important to remember that some users may have compromised vision, such as being near-sighted or
color blind. Find combinations of colors that are easily distinguishable to these users. For example, if you have
to use red and green colors together in one screen to indicate functions, adjust hue and contrast to make sure
that these colors are distinguishable to users with red-green color blindness.
2.4.2 Text and Background Color
On the Tizen platform, multiple layers are stacked together to produce the resulting screen colors. Since
simpler colors are used in stacks, there are only a few rules to follow. These rules ensure that the combinations
of colors are not unusual or unnatural.
Use Light-coloredText on the Default Background (Gradient)
On both the mobile and wearable devices, white text stands out on default theme colors, while black and gray
text do not. Gray text against a background gradient generally results in poor readability.
Figure D. White text on default theme colors
Avoid UsingTexts withVivid Colors
Text with vivid colors, such as yellow, blue, and green may cause confusion. The following examples show that
inconsistent use of vivid colors results in imbalances and distractions on the screen.

21
Recommended
2.4.3 Color Structure
Multiple Color Layers
The main theme background (gradient) is placed at the bottom layer. In specific sections of the screen,
multiple color layers are used to create visual depth. Text colors should be decided based on the resulting color
of the stacked layers. On wearable devices, the center portion of the dark gradient layer decides the overall
look and feel of the screen. App-specific colors or accent colors are placed over the center of the gradient layer.
Light-colored text is recommended for wearable devices, because they use dark background colors by default.
Tizen mobile devices use the same multilayered background structure. However, for mobile devices, the main
theme background (gradient) is placed at the bottom layer.

22
Figure G. Screen structure for Tizen mobile devices. Semi-transparent gradient stripes create subtle dividers for a list view.

23
Animations
The idea of on-screen animation effects in the Tizen UI was inspired by the behavior of wind. We aim to
reproduce the wind’s natural movements on the screen to provide a more organic and aesthetic experience for
users.
The Look and Feel of a Gentle Breeze
The concept of fluid animation design represents the look and feel of a gentle breeze. Objects glide across the
screen as if they were blown by a gentle breeze.
Figure A. Recommended

24
Figure B. Not Recommended

25
Consistent Flow
Animations on the screen should have a consistent direction. Disorienting animations create visual noise and
confuse users. Uniform animation effects that take place in a timely manner can maximize usability by
enhancing understanding of what is occurring on the screen.
Note Avoid overusing animations. Add animations to tasks only if they are related to the task and can
enhance users’ understanding of the task. Meaningless, irrelevant animations only add confusion.
Figure B-1. Recommended

26
Figure B-2. Not Recommended
When you design animations for different layers on the screen, provide them based on the actual movement
of the layer they belong to.

27
Figure C. Design your motions work in harmony.
If necessary, you can design animations with different styles on the same screen. However, if you design a
screen with multiple simultaneous animations, they should be consistent and uniform.
Subtle Dispersion
Animations that convey the idea of dispersion may be applied to user interfaces, such as buttons and icons.
When you design animations for buttons or icons, there are a few rules to follow to maximize the effect and
avoid confusion:
– Intrigue users by providing a hint that the UI is motion-ready.
– Keep the original shape of the UI to avoid confusion.
– Orient the animation from the center to the edge of the UI.
– Ensure that users clearly recognize the animation effect. To make the effect visible, design the initial
animation in a size no less than 80% of the UI size, and then allow it to grow to 100%.

28
Figure D-1. Recommended examples of “subtle dispersion.”
Figure D-2. Not recommended examples of “subtle dispersion.”

Tizen design guidelines

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Tizen design guidelines

Similar to Tizen design guidelines (20)

More from Saima Ashiq

More from Saima Ashiq (6)

Recently uploaded

Recently uploaded (20)

Tizen design guidelines