symbian ui update september 2010

8/8/2019 Symbian UI Update September 2010

1/27

The Symbian UI

September, 2010

Scott Weiss

[email protected]


2/27

Talk Outline

TimelinefrompreSFtonow

Symbian^3UIArchitecture

Symbian^4UIArchitecture

UIPa>ernsforS^4

HomescreenBringup

ThemeingS^3(technology&operaEons)

Symbian^3DefaultTheme

2CopyrightSymbianFoundaEon2010


3/27

Symbian UI Timeline

2007S60 3rd EditionLeading non-touchsmartphone UI

2008S60 5th EditionFirst all-touch Symbian UI

2010Symbian^3Single Tap enhancement brings UIforward. Gesture support throughout,including multi-touch, capacitive

display support. Homescreenenhancements: multiple pages,

enhanced widget selection

2011Symbian^4.xAll platformapplications

2010Symbian^4.0

Homescreen, system chrome, developertaster, Symbian UI Patterns

2009



4/27

Symbian^3 UI Architecture

Avkon

Symbian OS

Application Stack

Theme Support

UI Controls

UI Control Rendering

Graphics Rendering

Graphics Acceleration

Qt



5/27

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



6/27

S^4 UI Patterns

NokiacontributedtheS^4UIPa>ernsmid2010

TheUIPa>ernswerebuiltaswebbased

documentaEon

Symbianisfinalisingthebrandtreatmentofthesite

AccesswillbecontrolledunEltheSymbianUIis

stable



7/27



8/27

S^4 UI Bring-up

CodeiscominginfromNokia

regularlyandisstabilising

Symbian'sDeliveryteamis

makingsteadyprogress



9/27

Themeing the Symbian UI

Whatwestartedwith

Whatcanbethemed

Designprocess

IniEaldesigns

Finaldesignprinciples

Screenshots

9

CopyrightSymbianFoundaEon2010


10/27

Symbian^2: Default Theme



11/27

Colour Groups

Chrome

Assets

What can be themed?

Icons: ~3,000 Wallpaper: 1

Softkeys Panels Progress Indicator

HighlightMenu Text HighlightedMenu Text



12/27

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

Looking for change Strictly professional Out for a little funmobile industry


Megan is a 29-year-oldhairdresser who lives in a small

village outside Newcastle orMemphis. She has owned the

same flip phone for threeyears, and is quite bored withit. Her favourite show is the X

Factor and she listens toMichael Bubl. Her favourite

movie is Marley & Me. Shedrives an electric blue FordFocus.

Kim is a 28-year-old designerwho lives in a small flat in

London. She works atVodafone as part of a team

that designs the applicationsand themes that will beinstalled across Vodafones

product line. She absolutelyloves her iPhone and is really

enjoying the opportunity todesign for several Androidbased devices.

Johnnie is a 35-year-oldkitchen designer. He looks

forward to his contract comingup each year-and-a-half so he

can buy a new, fun phone.This time he wants to try atouch phone, since his button-

based music phone feels alittle dated. His favourite

gadget is his green iPod Nano.His favourite TV show is Houseand he listens to Smashing

Pumpkins. He lives in eitherGlasgow or Atlanta.


13/27

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

Building on the Symbian brandA variation on the the existing Symbian brand theme incorporatingcrumpled and cut paper, flat colour and hand-drawn elements.

Softkeys and overlaysSimple and flat. Slightly rounded corners and partial transparency let

the background elements show though ever so slightly.

Search Messaging Settings

Icons and design elementsClosely following the Symbian brand. Yellow fills and simple black lines

have been used to define the icons, while a cut paper outline and slightdrop shadow create the illusion of depth.



14/27

1.1 Idle Screen 1.2 Grid View 1.3 List View

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



15/27

2. Neon ThemeA light-hearted tech design inspired by original Hitchhikers Guide to the Galaxy motion graphics by Rob Lord.


Softkeys and overlaysThe neon effect is reused, and combined with a partial black

transparent background to provide clear visual separation for otherdesign elements.

Icons and design elementsSimple, 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 designInspired by the original Hitchhikers Guide to the Galaxy motiongraphics by Rob Lord, this theme relies on simple, high-contrast

elements to create a whimsical, sci-fi atmosphere.



16/27

2. Neon Theme Variant MilliwaysA light-hearted tech design inspired by original Hitchhikers Guide to the Galaxy motion graphics by Rob Lord.


icons



17/27

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


Icons and design elementsIcons have been kept deceptively simple in this design to allow forcustomisation 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 thatprovided the community a solid foundation theme from which to

build upon; and contribute back to.

Softkeys and overlaysThe semi-transparent gradient enables reuse of buttons and overlays by

blending with many background and colour combinations.



18/27

3. Glass Theme


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



19/27

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.

SAMPLEONL

Y



20/27



21/27



22/27



23/27



24/27



25/27

Symbian^3: Default Theme

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



26/27

With home page wallpapers



27/27

Thank you.

Scott Weiss

[email protected]

symbian ui update september 2010

Documents