The road to Glacier UI

Hello together!

The coding guys did an amazing job and almost all core apps are ported right now. Thus the coders are waiting now for us graphics guys to define, create or describe informations for component creation/styling. Knowing that Qwazix and Hurrian are busy at the moment, I had some thoughts about the way how we should start defining component styles. Take this with a grain of salt, as I don’t have any knowledge about UI work in QML. This is just a draft and I’ve chosen colors and sizes based on Hurrian’s Glacier UI mockup and Icefox browser concept and discussions on #nemomobile. So let’s start with the 3 main points we should adjust in my opinion.

  1. Default font
  2. Standards for colors and states (active, pressed, inactive)
  3. Standard sizes for elements

1. Default font will be Open Sans, as it was discussed in IRC, because of better support for cyrillic and greek characters and lots of weights. Qwazix already wrote about it a while ago: http://play.qwazix.com/grog/?p=318

Font sizes and weights will be described in each component.

2. I will give colors names here, so everyone knows in future what each color is refered to.

Text font color should be plain white (#ffffff) as long it’s antialiased
Background color should be plain black (#000000)
Sub Background should be dark grey (#171717) for tabs, etc.
Active blue state should be light blue (#0091e5) for accept dialogs
Default blue state should be medium blue (#005f96)
Active grey state should be light grey (#474747) for decline dialogs
Default grey state should be medium grey (#313131)
Highlights should be frost (#dcdcdc) like on tab or speechbubble highlights
Lines, arrows, etc. should be frost (#dcdcdc)

3. I think we should use most of the times percental based sizes to minimize effort for different theme resolutions. Also pixel graphics should be used as less as possible. When graphics are used, borderimage should be used to implement them if possible. Speaking of different resolutions, we should support for the moment 3 different sizes:

  • 854×480 (should scale not that bad to 840×480 and 960 × 640)
  • 720p
  • 1080p

We should set a minimal size for pressable elements like a button or an arrow. Also minimal spacing should be defined. On my work on Icefox browser concept I failed at this, as I noticed after it was published and I tried it first time on my N9. Those items there were too small and had too less spacing. I inspected Harmattan’s buttons to get an idea what they did there and I quite liked it. Smalles buttons are 50×50 there (although not always visible) with a spacing of 3 pixels in each direction. So two buttons have a distance of 6 pixels between them. I have redone the URL bar of Icefox with those measures in mind and this is how it turned out:

(without boundaries shown)browser-main-ui-reworked-urlbar


(with boundaries shown)
browser-main-ui-reworked-urlbar-boundaries
Those buttons may look big on the screenshots, but they are in fact almost exactly same size as harmattan’s browser (grob) buttons.

(example on grob with changed colors to match harmattan’s UI)
grob-example

Have you anything to add, comment or critic? Did I forget some fundamentory stuff? Please feel free to add your opinion.

Greets
Morpog

 

Comments are closed.