D4 m symbian^3 ui & fresh theme

3,612 views
3,496 views

Published on

The Symbian^3 UI with a focus on the Fresh theme, presented at Design for Mobile in Chicago, September 2010

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,612
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
55
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

D4 m symbian^3 ui & fresh theme

  1. 1. The Symbian UI September, 2010 Scott Weiss scottweiss@symbian.org
  2. 2. 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. Copyright
Symbian
Founda4on
2010
 2

  3. 3. How We Got Started 2009 Nokia acquires Symbian Ltd. and the Symbian Foundation is announced Late 90’s 2010 EPOC32 OS Symbian makes the was renamed Symbian platform Symbian OS open source, ahead 1989 of schedule First EPOC16 1998 devices ship Symbian Ltd. was founded by Late 80’s Ericsson, Motorola, Psion develops Nokia and Psion to EPOC for Mid 90’s create Symbian OS portable devices The OS was referred to as EPOC16 to distinguish it from Psion’s EPOC32 OS Copyright
Symbian
Founda4on
2010
 3

  4. 4. Symbian Devices Sold Today 2010 360 Million 2009 Phones Shipped 2008 300 Million Phones Shipped 250 Million Phones Shipped 200 Million Phones Shipped 2006 100 Million Phones Shipped Copyright
Symbian
Founda4on
2010
 4

  5. 5. Symbian Key Stats Symbian’s current share of the global smartphone market stands at approximately 44%*
 Symbian continues to outsell the iPhone, its nearest rival, by 2:1 and Android by 4:1
 In Q1 2010, 24 million devices where shipped, which is equivalent to 260,000 a day * According to Gartner Copyright
Symbian
Founda4on
2010
 5

  6. 6. 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 Copyright
Symbian
Founda4on
2010
 6

  7. 7. Symbian^1 On Device Copyright
Symbian
Founda4on
2010
 7

  8. 8. Symbian^3 On Device Copyright
Symbian
Founda4on
2010
 8

  9. 9. Symbian UI Unique Selling Points •  User
experience
vs.
price
point
 –  Some
Symbian
devices
are
below
the
$100
retail
 point
 •  Ability
to
theme
 •  Mul4ple
run4mes
with
a
common
UI
 Copyright
Symbian
Founda4on
2010
 9

  10. 10. Symbian^3 UI Architecture Application Stack Qt Theme Support Avkon UI Controls UI Control Rendering Graphics Rendering Symbian OS Graphics Acceleration Copyright
Symbian
Founda4on
2010
 10

  11. 11. 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 Copyright
Symbian
Founda4on
2010
 11

  12. 12. Themeing the Symbian UI •  What
we
started
with
 •  What
can
be
themed
 •  Design
process
 •  Ini4al
designs
 •  Final
design
principles
 •  Screen
shots
 Copyright
Symbian
Founda4on
2010
 12

  13. 13. Symbian^2: Default Theme Copyright
Symbian
Founda4on
2010
 13

  14. 14. What can be themed? Colour Groups Menu Text Highlight Highlighted Menu Text Assets Icons: ~3,000 Wallpaper: 1 Chrome Softkeys Panels Progress Indicator Copyright
Symbian
Founda4on
2010
 14

  15. 15. 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. Copyright
Symbian
Founda4on
2010
 15

  16. 16. 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 Copyright
Symbian
Founda4on
2010
 16

  17. 17. 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 Copyright
Symbian
Founda4on
2010
 17

  18. 18. 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. 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. 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. Search Messaging Settings Copyright
Symbian
Founda4on
2010
 18

  19. 19. 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 2.1 Idle Screen 2.2 Grid View 2.3 List View Copyright
Symbian
Founda4on
2010
 19

  20. 20. 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 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. Softkeys and overlays The semi-transparent gradient enables reuse of buttons and overlays by blending with many background and colour combinations. Search Messaging Settings Copyright
Symbian
Founda4on
2010
 20

  21. 21. 3. Glass Theme A clean, modern design incorporating semi-transparent elements to enable extensive re-use and flexibility. 3.1 Idle Screen 3.2 Grid View 3.3 List View Copyright
Symbian
Founda4on
2010
 21

  22. 22. 3. Glass Theme Variant: ʻPhotoʼ A clean, modern design incorporating semi-transparent elements to enable extensive re-use and flexibility. NLY 3.1c Idle Screen SAM PLE O 3.2c Grid View 3.3c List View Copyright
Symbian
Founda4on
2010
 22

  23. 23. Copyright
Symbian
Founda4on
2010
 23

  24. 24. Copyright
Symbian
Founda4on
2010
 24

  25. 25. Copyright
Symbian
Founda4on
2010
 25

  26. 26. Copyright
Symbian
Founda4on
2010
 26

  27. 27. Copyright
Symbian
Founda4on
2010
 27

  28. 28. Symbian^3: Default Theme http://developer.symbian.org/wiki/index.php/File:Fresh_beta_2-11.sis Copyright
Symbian
Founda4on
2010
 28

  29. 29. With home page wallpapers… Copyright
Symbian
Founda4on
2010
 29

  30. 30. Thank you. Scott Weiss scottweiss@symbian.org

×