D4 m symbian^3 ui & fresh theme

The Symbian UI

September, 2010

Scott Weiss scottweiss@symbian.org

Who is Symbian?

Symbian is an independent, non-profit organization dedicated to driving innovation in the mobile space.

The company manages the open source Symbian platform, which has shipped in nearly 400 million smartphones around the world to-date.

2CopyrightSymbianFounda4on2010

How We Got Started

Late 80’s Psion develops

EPOC for portable devices

1989 First EPOC16 devices ship

Mid 90’s The OS was referred to as EPOC16 to distinguish it from Psion’s EPOC32 OS

Late 90’s EPOC32 OS was renamed Symbian OS

1998 Symbian Ltd. was founded by Ericsson, Motorola, Nokia and Psion to create Symbian OS

2009 Nokia acquires Symbian

Ltd. and the Symbian Foundation is announced

2010 Symbian makes the Symbian platform open source, ahead of schedule

3CopyrightSymbianFounda4on2010

Symbian Devices Sold

2006

2008

2009

2010

100 Million Phones Shipped

300 Million Phones Shipped

250 Million Phones Shipped

200 Million Phones Shipped

360 Million Phones Shipped

Today

4CopyrightSymbianFounda4on2010

Symbian Key Stats

Symbian’s current share of the global smartphone market stands at approximately 44%*

* According to Gartner

In Q1 2010, 24 million devices where shipped, which is equivalent to 260,000 a day

Symbian continues to outsell the iPhone, its nearest rival, by 2:1 and Android by 4:1

5CopyrightSymbianFounda4on2010

Symbian UI Timeline

2007 S60 3rd Edition Leading non-touch smartphone UI

2008 S60 5th Edition

First all-touch Symbian UI

2010 Symbian^3 Single Tap enhancement brings UI forward. Gesture support throughout, including multi-touch, capacitive display support. Homescreen enhancements: multiple pages, enhanced widget selection

2011 Symbian^4.x All platform applications

2010 Symbian^4.0

Homescreen, system chrome, developer taster, Symbian UI Patterns

2009

6CopyrightSymbianFounda4on2010

Symbian^1 On Device

7CopyrightSymbianFounda4on2010

Symbian^3 On Device

8CopyrightSymbianFounda4on2010

Symbian UI Unique Selling Points •  Userexperiencevs.pricepoint

– SomeSymbiandevicesarebelowthe$100retailpoint

•  Abilitytotheme

•  Mul4plerun4meswithacommonUI

9CopyrightSymbianFounda4on2010

Symbian^3 UI Architecture

Avkon

Symbian OS

Application Stack

Theme Support

UI Controls

UI Control Rendering

Graphics Rendering

Graphics Acceleration

Qt

10CopyrightSymbianFounda4on2010

Symbian^4 UI Architecture

Qt

UI Extensions for Mobile

Symbian OS

Application Stack

Theme Support

UI Controls (in both Qt & UIEMO)

UI Control Rendering

Graphics Rendering

Graphics Acceleration

11CopyrightSymbianFounda4on2010

Themeing the Symbian UI •  Whatwestartedwith•  Whatcanbethemed

•  Designprocess•  Ini4aldesigns•  Finaldesignprinciples•  Screenshots

12

CopyrightSymbianFounda4on2010

Symbian^2: Default Theme

13CopyrightSymbianFounda4on2010

Colour Groups

Chrome

Assets

What can be themed?

Icons: ~3,000 Wallpaper: 1

Softkeys Panels Progress Indicator

Highlight Menu Text Highlighted Menu Text

14CopyrightSymbianFounda4on2010

1. Personas Those people we kept in mind when designing the latest Symbian^3 concepts.

Looking for change Strictly professional Out for a little fun mobile industry

15CopyrightSymbianFounda4on2010

Megan is a 29-year-old hairdresser who lives in a small village outside Newcastle or Memphis. She has owned the same flip phone for three years, and is quite bored with it. Her favourite show is the X Factor and she listens to Michael Bublé. Her favourite movie is Marley & Me. She drives an electric blue Ford Focus.

Kim is a 28-year-old designer who lives in a small flat in London. She works at Vodafone as part of a team that designs the applications and themes that will be installed across Vodafoneʼs product line. She absolutely loves her iPhone and is really enjoying the opportunity to design for several Android based devices.

Johnnie is a 35-year-old kitchen designer. He looks forward to his contract coming up each year-and-a-half so he can buy a new, fun phone. This time he wants to try a touch phone, since his button-based music phone feels a little dated. His favourite gadget is his green iPod Nano. His favourite TV show is House and he listens to Smashing Pumpkins. He lives in either Glasgow or Atlanta.

1. Paper Theme A variation on the the existing Symbian brand theme incorporating cut-paper, flat colour and hand-drawn elements.

Building on the Symbian brand A variation on the the existing Symbian brand theme incorporating crumpled and cut paper, flat colour and hand-drawn elements.

Softkeys and overlays Simple and flat. Slightly rounded corners and partial transparency let the background elements show though ever so slightly.

Search Messaging Settings

Icons and design elements Closely following the Symbian brand. Yellow fills and simple black lines have been used to define the icons, while a cut paper outline and slight drop shadow create the illusion of depth.

16CopyrightSymbianFounda4on2010

1.1 Idle Screen 1.2 Grid View 1.3 List View

1. Paper Theme A variation on the the existing Symbian brand theme incorporating cut-paper, flat colour and hand-drawn elements.

17CopyrightSymbianFounda4on2010

2. Neon Theme A light-hearted tech design inspired by original Hitchhikerʼs Guide to the Galaxy motion graphics by Rob Lord.

Search Messaging Settings

Softkeys and overlays The neon effect is reused, and combined with a partial black transparent background to provide clear visual separation for other design elements.

Icons and design elements Simple, layered and semi-transparent line drawings create a neon look, and are complemented by the high-contrast dark galactic background.

A playful combination of technology and design Inspired by the original Hitchhikerʼs Guide to the Galaxy motion graphics by Rob Lord, this theme relies on simple, high-contrast elements to create a whimsical, sci-fi atmosphere.

18CopyrightSymbianFounda4on2010

2. Neon Theme Variant ʻMilliwaysʼ A light-hearted tech design inspired by original Hitchhikerʼs Guide to the Galaxy motion graphics by Rob Lord.

2.1 Idle Screen 2.2 Grid View 2.3 List View

icons

19CopyrightSymbianFounda4on2010

3. Glass Theme A clean, modern design incorporating semi-transparent elements to enable extensive re-use and flexibility.

Search Messaging Settings

Icons and design elements Icons have been kept deceptively simple in this design to allow for customisation through colour alone. Crisp drop and inset shadows provide a sense of depth on almost any background.

A conservative yet flexible design approach The persona of Kim informed the need for a design approach that provided the community a solid foundation theme from which to build upon; and contribute back to.

Softkeys and overlays The semi-transparent gradient enables reuse of buttons and overlays by blending with many background and colour combinations.

20CopyrightSymbianFounda4on2010

3. Glass Theme

3.1 Idle Screen 3.2 Grid View 3.3 List View

A clean, modern design incorporating semi-transparent elements to enable extensive re-use and flexibility.

21CopyrightSymbianFounda4on2010

3. Glass Theme Variant: ʻPhotoʼ

3.1c Idle Screen 3.2c Grid View 3.3c List View

A clean, modern design incorporating semi-transparent elements to enable extensive re-use and flexibility.

SAMPLE ONLY

22CopyrightSymbianFounda4on2010

23CopyrightSymbianFounda4on2010

24CopyrightSymbianFounda4on2010

25CopyrightSymbianFounda4on2010

26CopyrightSymbianFounda4on2010

27CopyrightSymbianFounda4on2010

Symbian^3: Default Theme

http://developer.symbian.org/wiki/index.php/File:Fresh_beta_2-11.sis

28CopyrightSymbianFounda4on2010

With home page wallpapers…

29CopyrightSymbianFounda4on2010

Thank you.

Scott Weiss scottweiss@symbian.org