Visual look-and-feel--Maemo5 Desktop widget UI Guidlines


Widgets should be designed to be as compact in size as possible, avoiding any excessive graphical elements that do not provide any meaningful information or controls. As a rule of thumb, the footprint of a widget should never exceed half of the Desktop space allocated for widgets, including a 24 px padding around the widget (132,352 pixels total). The largest default widgets, Location and RSS, are close to the maximum footprint of widgets, as seen in Figure below. Another widget, Tutorial, spans the entire Desktop, but remains limited in its height.

Figure : The Location widget is close to the maximum size of widgets

Margins and positioning

Layouts in Maemo 5 utilise a standardised set of margins. The supported margins for widgets are outlined in Table

Table : Standard margins for widgets

Default widgets share common margins and positioning rules. Elements within widgets are separated from each other by HILDON_MARGIN_HALF, and widgets are surrounded by HILDON_MARGIN_DEFAULT.

The surrounding area includes both the outer border of the widget, as well as a drop shadow. Some examples are presented in Figure s below

Figure : Examples of margin use in default widgets

Figure : Examples of visual widget construction

The positioning of graphical elements such as text labels, buttons, icons, and so on, should be in line with the rest of the Maemo 5 guidelines.

In Maemo 5, the overall graphical look-and-feel is designed with light-coloured text and icons on dark backgrounds. All of the default widgets follow this principle. Graphic themes also contain a reversed colour palette, which enables the use of dark text on light backgrounds.

Due to their compact size, default widgets generally use HomeSystemFont or SmallSystemFont as the font size, while DefaultTextColor is used as the default text colour. A standard sans-serif font is also available.
Text labels in widgets should be separated with at least HILDON_MARGIN_HALF from the edges of their respective container elements to make sure that long labels do not touch element borders. See Figure 9 for visualisations.

Figure below shows an example of the use of typography in widgets.

Figure : An example of the use of typography in widgets

No comments: