Symbian UI Update September 2010

The Symbian UI
September, 2010
Scott Weiss
scottweiss@symbian.org
Talk Outline
•  Timeline from pre‐SF to now 
•  Symbian^3 UI Architecture 
•  Symbian^4 UI Architecture 
•  UI Pa>erns for S^4  
•  Homescreen Bring‐up  
•  Themeing S^3 (technology & operaEons) 
•  Symbian^3 Default Theme 
Copyright Symbian FoundaEon 2010  2 
Symbian UI Timeline
2010
Symbian^4.0
Homescreen, system chrome, developer
taster, Symbian UI Patterns 2011
Symbian^4.x
All platform
applications
2009 2010
2008 Symbian^3
S60 5th Edition Single Tap enhancement brings UI
First all-touch Symbian UI forward. Gesture support throughout,
including multi-touch, capacitive
display support. Homescreen
enhancements: multiple pages,
enhanced widget selection
2007
S60 3rd Edition
Leading non-touch
smartphone UI
Symbian^3 UI Architecture
Application Stack
Qt
Theme Support
Avkon
UI Controls
UI Control Rendering
Graphics Rendering
Symbian OS
Graphics Acceleration
Symbian^4 UI Architecture
Application Stack
UI Extensions
for Mobile Theme Support
UI Controls (in both Qt & UIEMO)
Qt
UI Control Rendering
Graphics Rendering
Symbian OS
Graphics Acceleration
S^4 UI Patterns
•  Nokia contributed the S^4 UI Pa>erns mid‐2010 
•  The UI Pa>erns were built as web‐based 
documentaEon 
•  Symbian is ﬁnalising the brand treatment of the site 
•  Access will be controlled unEl  the Symbian UI is 
stable  
S^4 UI Bring-up
•  Code is coming in from Nokia 
regularly and is stabilising 
•  Symbian's Delivery team is 
making steady progress 
Themeing the Symbian UI
•  What we started with 
•  What can be themed 
•  Design process 
•  IniEal designs 
•  Final design principles 
•  Screen shots 
Copyright Symbian FoundaEon 2010 
9 
Symbian^2: Default Theme
What can be themed?
Colour Groups
Menu Text Highlight Highlighted

Menu Text
Assets
Icons: ~3,000 Wallpaper: 1
Chrome
Softkeys Panels Progress Indicator
1. Personas
Those people we kept in mind when designing the latest Symbian^3 concepts.
mobile industry
Looking for change Strictly professional Out for a little fun
Megan is a 29-year-old Kim is a 28-year-old designer Johnnie is a 35-year-old
hairdresser who lives in a small who lives in a small flat in kitchen designer. He looks
village outside Newcastle or London. She works at forward to his contract coming
Memphis. She has owned the Vodafone as part of a team up each year-and-a-half so he
same flip phone for three that designs the applications can buy a new, fun phone.
years, and is quite bored with and themes that will be This time he wants to try a
it. Her favourite show is the X installed across Vodafoneʼs touch phone, since his button-
Factor and she listens to product line. She absolutely based music phone feels a
Michael Bublé. Her favourite loves her iPhone and is really little dated. His favourite
movie is Marley & Me. She enjoying the opportunity to gadget is his green iPod Nano.
drives an electric blue Ford design for several Android His favourite TV show is House
Focus. based devices. 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.
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.
Softkeys and overlays

Simple and flat. Slightly rounded corners and partial transparency let
the background elements show though ever so slightly.
Search Messaging Settings
1. Paper Theme
A variation on the the existing Symbian brand theme incorporating cut-paper, flat colour and hand-drawn elements.
1.1 Idle Screen 1.2 Grid View 1.3 List View
2. Neon Theme
A light-hearted tech design inspired by original Hitchhikerʼs Guide to the Galaxy motion graphics by Rob Lord.
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.

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

The neon effect is reused, and combined with a partial black
transparent background to provide clear visual separation for other
design elements.
2. Neon Theme Variant ʻMilliwaysʼ
A light-hearted tech design inspired by original Hitchhikerʼs Guide to the Galaxy motion graphics by Rob Lord.
icons
3. Glass Theme
A clean, modern design incorporating semi-transparent elements to enable extensive re-use and flexibility.
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.

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.

The semi-transparent gradient enables reuse of buttons and overlays by
blending with many background and colour combinations.
3. Glass Theme
3. Glass Theme Variant: ʻPhotoʼ
N L Y
P L E O
3.1c Idle Screen
SAM 3.2c Grid View 3.3c List View
Symbian^3: Default Theme
http://developer.symbian.org/wiki/index.php/File:Fresh_beta_2-11.sis
With home page wallpapers…
Thank you.
Scott Weiss
scottweiss@symbian.org

Symbian UI Update September 2010

Uploaded by

Copyright:

Available Formats

You might also like

Symbian UI Update September 2010

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Symbian UI Update September 2010

Uploaded by

Copyright:

Available Formats

The Symbian UI

UI Controls (in both Qt & UIEMO)

Menu Text Highlight Highlighted

Icons: ~3,000 Wallpaper: 1

Softkeys Panels Progress Indicator

Building on the Symbian brand

Icons and design elements

Softkeys and overlays

Search Messaging Settings

1.1 Idle Screen 1.2 Grid View 1.3 List View

A playful combination of technology and design

Icons and design elements

Softkeys and overlays

Search Messaging Settings

2.1 Idle Screen 2.2 Grid View 2.3 List View

A conservative yet flexible design approach

Icons and design elements

Softkeys and overlays

Search Messaging Settings

3.1 Idle Screen 3.2 Grid View 3.3 List View

You might also like