Download - Symbian UI Update September 2010
-
8/8/2019 Symbian UI Update September 2010
1/27
The Symbian UI
September, 2010
Scott Weiss
-
8/8/2019 Symbian UI Update September 2010
2/27
Talk Outline
TimelinefrompreSFtonow
Symbian^3UIArchitecture
Symbian^4UIArchitecture
UIPa>ernsforS^4
HomescreenBringup
ThemeingS^3(technology&operaEons)
Symbian^3DefaultTheme
2CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
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
3CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
4/27
Symbian^3 UI Architecture
Avkon
Symbian OS
Application Stack
Theme Support
UI Controls
UI Control Rendering
Graphics Rendering
Graphics Acceleration
Qt
4CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
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
5CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
6/27
S^4 UI Patterns
NokiacontributedtheS^4UIPa>ernsmid2010
TheUIPa>ernswerebuiltaswebbased
documentaEon
Symbianisfinalisingthebrandtreatmentofthesite
AccesswillbecontrolledunEltheSymbianUIis
stable
6CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
7/27
7CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
8/27
S^4 UI Bring-up
CodeiscominginfromNokia
regularlyandisstabilising
Symbian'sDeliveryteamis
makingsteadyprogress
8CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
9/27
Themeing the Symbian UI
Whatwestartedwith
Whatcanbethemed
Designprocess
IniEaldesigns
Finaldesignprinciples
Screenshots
9
CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
10/27
Symbian^2: Default Theme
10CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
11/27
Colour Groups
Chrome
Assets
What can be themed?
Icons: ~3,000 Wallpaper: 1
Softkeys Panels Progress Indicator
HighlightMenu Text HighlightedMenu Text
11CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
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
12CopyrightSymbianFoundaEon2010
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.
-
8/8/2019 Symbian UI Update September 2010
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.
13CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
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.
14CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
15/27
2. Neon ThemeA light-hearted tech design inspired by original Hitchhikers Guide to the Galaxy motion graphics by Rob Lord.
Search Messaging Settings
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.
15CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
16/27
2. Neon Theme Variant MilliwaysA light-hearted tech design inspired by original Hitchhikers Guide to the Galaxy motion graphics by Rob Lord.
2.1 Idle Screen 2.2 Grid View 2.3 List View
icons
16CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
17/27
3. Glass ThemeA clean, modern design incorporating semi-transparent elements to enable extensive re-use and flexibility.
Search Messaging Settings
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.
17CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
18/27
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.
18CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
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
19CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
20/27
20CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
21/27
21CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
22/27
22CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
23/27
23CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
24/27
24CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
25/27
Symbian^3: Default Theme
http://developer.symbian.org/wiki/index.php/File:Fresh_beta_2-11.sis
25CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
26/27
With home page wallpapers
26CopyrightSymbianFoundaEon2010
-
8/8/2019 Symbian UI Update September 2010
27/27
Thank you.
Scott Weiss