MeeGo wiki - User contributions [en]

MeeGo Netbook and GTK

2011-10-11T19:21:05Z

Nedrichards:

== How to integrate your GTK application on MeeGo Netbook ==

This is useful if you're following the [[Netbook_Design_Guide|netbook design guide]].

=== The Window ===

==== Decoration ====

Remove the window decoration:

GtkWidget *window = gtk_window_new ();
gtk_window_set_decorated (GTK_WINDOW (window), FALSE);

==== Window Size ====

Find the size of the screen and then set your preferred window size to it:

gtk_window_resize (GTK_WINDOW (window),
max_screen_width,
max_screen_height);
gtk_window_maximize (GTK_WINDOW (window));

=== The Toolbar ===

Use a standard GtkToolbar along the top of the screen. Name this "MeeGoToolbar":

GtkWidget *toolbar = gtk_toolbar_new ();
gtk_widget_set_name (GTK_WIDGET (toolbar), "MeeGoToolbar");

==== The Close Button ====

Use a button in the far right hand corner of the toolbar for closing the window. Name this "MeeGoCloseButton":

GtkWidget *close_button, *image;
close_button = gtk_button_new ();
gtk_widget_set_name (close_button, "MeeGoCloseButton");

Use "window-close-hover" as the icon name:

image = gtk_image_new_from_icon_name ("window-close-hover",
GTK_ICON_SIZE_DIALOG);
gtk_container_add (GTK_CONTAINER (close_button), image);

==== The Settings Button ====

If your application has a settings area, add a GtkButton called "MeeGoSettingsButton":

GtkWidget *close_button, *image;
close_button = gtk_button_new ();
gtk_widget_set_name (close_button, "MeeGoSettingsButton");

Use "preferences-other-hover" as the icon name:

image = gtk_image_new_from_icon_name ("preferences-other-hover",
GTK_ICON_SIZE_DIALOG);
gtk_container_add (GTK_CONTAINER (close_button), image);

Netbook Design Guide

2011-10-11T19:20:28Z

Nedrichards:

MeeGo netbook is similar to, but different from, other desktop Linux operating systems. It is designed specifically for 10" or smaller screens, with Atom chips and Intel 3D graphics. Because of this tight focus it is possible to create a more pleasing experience for its users. However, this also means that existing Linux applications need some modification if they want to be at their best in this environment. The following design principles were used by the MeeGo design team themselves and should help you out in creating awesome netbook experiences.

== Constraints ==
MeeGo Netbook is designed for small portable devices with 7-10" screens, keyboards and small trackpads as the pointing devices. The smallest screen resolution expected is 1024x600. Pervasive connectivity, using ethernet, wifi and possibly 3G or WiMAX, a front facing camera, storage expansion (via either USB or SD type memory cards and an external monitor port are expected to be available.

== Interaction architecture ==

Netbook users want to get multiple things done at the same time, but the small screen makes it difficult to do any of them justice if they're put together. Netbook applications should expect to fill the whole of the screen on their zone (in small screen mode). With the panels and zones interface allowing fluid and quick task changing and background operation.

These applications are self contained experiences and all popups should be constrained and contained within the applications window. Spawning new windows can, if not handled correctly lead to inadvertent opening of new zones or in getting a dialogue 'stuck' underneath another window causing frustration.

=== Panels ===

Since this means the application is quite likely not to be visible at any time you may wish to implement a Panel to allow the user quick access to your key features, directly from the toolbar. The media player uses a panel to show a different view of the user's state, more appropriate for quickly pausing or modifying their play queue so they can switch back to what they really wanted to do.

The important thing with a panel is, if it's going to take more than a couple of clicks, that you should open your host application. Panels are not a good place to do complex tasks and they should reset their state to the 'default' upon each invocation.

Panel quick points:
* Quick tastes of interaction
* Just one screen, ideally page not scroll
* Get to what you want to use a lot, as quickly as you can
* Not a place to stay.

===Anatomy of an app ===
MeeGo Netbook applications are made up of three main elements with distinct purposes. Use them well and your application will flow and zing.

==== Toolbar ====
Every application has a toolbar. This is where users will look first for functionality. Thanks to the less than ideal trackpads on netbooks this is quite chunky in size, but it also encompasses the functionality of a menu bar in traditional applications. The toolbar will always contain a close button, however the user can also close your application by using the zones panel.

We find that direct use of buttons in the toolbar is very effective, however if you have a collection of less important and related choices then you may collect them together into a dropdown.

Toolbar quick points:
* Use it to act on the context.
* No menus
* This is also your window decoration

==== Sidebar ====
An application may have a sidebar, but it is not required. Sidebars are used when you want to change the context of the main content view. This is not progressing through a single view, where you might want to use breadcrumbs (which would go in the toolbar) but can either be entirely new data or a new filter on existing data such as Album vs Artist view in a media player.

Sidebar quick points:
* Use it to change the context.
* Lists work well, but you can put other types of control here if you like.

==== Content pane ====
As far as your users are concerned, this is your application and is the area we want to control the least. Go wild.

Just remember that your users have a widescreen display and that you're taking all of it up. We have found that grid views work well to get the required information density.

Content pane quick points:
* Where the action is.
* We like grid views.

=== Notifications ===
Since Zones means that your application cannot be guaranteed to be in front of the user at all times and the toolbar is usually hidden until the user asks for it, active notifications are important to master. You may send a notification to the user at any time when your application is not focused. Only one notification will be shown at a time and it will be expired after 7 seconds. If two or more notifications are scheduled to be shown they will go into a stack and be shown in order. The user may dismiss all notifications at any time. Alongside the dismiss button you may display a single positive action of your own. For example, if a new instant message arrives the user can choose to dismiss the message or actively switch contexts to the conversation and answer it.

Applications should be careful not to spam the user with unnecessary or out of date notifications. For example, if a notification is sent that we have lost connection to the internet then it should be immediately removed from the stack if the connection is restored. Similarly, if a new email arrives a notification may be shown, but if another new email arrives then the notification should be cancelled and a new one sent with the current state "Two new emails".

=== Don't be modal ===
MeeGo is all about speed and responsiveness. Searches should ideally occur as the user types and blocking modal popups are discouraged for communicating with the user, in favour of contextual information bars.

Similarly, transitions and animations should be as short as is possible to convey the information required or cover up pauses or gaps in the interaction and ideally they should pre-emptable by user action.

=== Big screen mode ===
When on a big screen, not a netbook the system will change to work more effectively. Since the context of use has changed on a larger screen, many of the comments above no longer apply. Applications should not always open to be the size of the screen (unless their design requires it), they can open in their 'natural size'. Also, opening a new application will not automatically open a new zone (although users can still use the zones panel to manage them). Furthermore, the toolbar will be visible at all times.

Currently big screen mode is activated when the primary display is >11".

=== Projectors ===
The user may attach a projector or TV to the device at any time. When this happens the primary display will automatically be switched to the new screen and the resolution will be changed to match. Your application should automatically reflect this.

=== Where next? ===
If you want to actually do something about this check out this handy page on how to [[MeeGo_Netbook_and_GTK|adapt your GTK+ application for netbook]].

[[Category:Application-developer]]

Netbook Design Guide

2010-08-06T18:09:16Z

Nedrichards: add a lot more information

MeeGo netbook is similar to, but different from, other desktop Linux operating systems. It is designed specifically for 10" or smaller screens, with Atom chips and Intel 3D graphics. Because of this tight focus it is possible to create a more pleasing experience for its users. However, this also means that existing Linux applications need some modification if they want to be at their best in this environment. The following design principles were used by the MeeGo design team themselves and should help you out in creating awesome netbook experiences.

== Constraints ==
MeeGo Netbook is designed for small portable devices with 7-10" screens, keyboards and small trackpads as the pointing devices. The smallest screen resolution expected is 1024x600. Pervasive connectivity, using ethernet, wifi and possibly 3G or WiMAX, a front facing camera, storage expansion (via either USB or SD type memory cards and an external monitor port are expected to be available.

= Interaction architecture =

Netbook users want to get multiple things done at the same time, but the small screen makes it difficult to do any of them justice if they're put together. Netbook applications should expect to fill the whole of the screen on their zone (in small screen mode). With the panels and zones interface allowing fluid and quick task changing and background operation.

These applications are self contained experiences and all popups should be constrained and contained within the applications window. Spawning new windows can, if not handled correctly lead to inadvertent opening of new zones or in getting a dialogue 'stuck' underneath another window causing frustration.

== Panels ==

Since this means the application is quite likely not to be visible at any time you may wish to implement a Panel to allow the user quick access to your key features, directly from the toolbar. The media player uses a panel to show a different view of the user's state, more appropriate for quickly pausing or modifying their play queue so they can switch back to what they really wanted to do.

The important thing with a panel is, if it's going to take more than a couple of clicks, that you should open your host application. Panels are not a good place to do complex tasks and they should reset their state to the 'default' upon each invocation.

Panel quick points:
* Quick tastes of interaction
* Just one screen, ideally page not scroll
* Get to what you want to use a lot, as quickly as you can
* Not a place to stay.

==Anatomy of an app ==
MeeGo Netbook applications are made up of three main elements with distinct purposes. Use them well and your application will flow and zing.

=== Toolbar ===
Every application has a toolbar. This is where users will look first for functionality. Thanks to the less than ideal trackpads on netbooks this is quite chunky in size, but it also encompasses the functionality of a menu bar in traditional applications. The toolbar will always contain a close button, however the user can also close your application by using the zones panel.

We find that direct use of buttons in the toolbar is very effective, however if you have a collection of less important and related choices then you may collect them together into a dropdown.

Toolbar quick points:
* Use it to act on the context.
* No menus
* This is also your window decoration

=== Sidebar ===
An application may have a sidebar, but it is not required. Sidebars are used when you want to change the context of the main content view. This is not progressing through a single view, where you might want to use breadcrumbs (which would go in the toolbar) but can either be entirely new data or a new filter on existing data such as Album vs Artist view in a media player.

Sidebar quick points:
* Use it to change the context.
* Lists work well, but you can put other types of control here if you like.

=== Content pane ===
As far as your users are concerned, this is your application and is the area we want to control the least. Go wild.

Just remember that your users have a widescreen display and that you're taking all of it up. We have found that grid views work well to get the required information density.

Content pane quick points:
* Where the action is.
* We like grid views.

== Notifications ==
Since Zones means that your application cannot be guaranteed to be in front of the user at all times and the toolbar is usually hidden until the user asks for it, active notifications are important to master. You may send a notification to the user at any time when your application is not focused. Only one notification will be shown at a time and it will be expired after 7 seconds. If two or more notifications are scheduled to be shown they will go into a stack and be shown in order. The user may dismiss all notifications at any time. Alongside the dismiss button you may display a single positive action of your own. For example, if a new instant message arrives the user can choose to dismiss the message or actively switch contexts to the conversation and answer it.

Applications should be careful not to spam the user with unnecessary or out of date notifications. For example, if a notification is sent that we have lost connection to the internet then it should be immediately removed from the stack if the connection is restored. Similarly, if a new email arrives a notification may be shown, but if another new email arrives then the notification should be cancelled and a new one sent with the current state "Two new emails".

== Don't be modal ==
MeeGo is all about speed and responsiveness. Searches should ideally occur as the user types and blocking modal popups are discouraged for communicating with the user, in favour of contextual information bars.

Similarly, transitions and animations should be as short as is possible to convey the information required or cover up pauses or gaps in the interaction and ideally they should pre-emptable by user action.

== Big screen mode ==
When on a big screen, not a netbook the system will change to work more effectively. Since the context of use has changed on a larger screen, many of the comments above no longer apply. Applications should not always open to be the size of the screen (unless their design requires it), they can open in their 'natural size'. Also, opening a new application will not automatically open a new zone (although users can still use the zones panel to manage them). Furthermore, the toolbar will be visible at all times.

Currently big screen mode is activated when the primary display is >11".

== Projectors ==
The user may attach a projector or TV to the device at any time. When this happens the primary display will automatically be switched to the new screen and the resolution will be changed to match. Your application should automatically reflect this.

Netbook Design Guide

2010-08-06T14:18:15Z

Nedrichards: update with extra information. more to come.

Iconography

2010-06-21T11:08:03Z

Nedrichards:

= MeeGo Netbook Icon Style Guidelines=

This document was created to shed some light on creating icons for
MeeGo Netbook for graphic designers. The MeeGo netbook icons have a
unique glyph like style. It aims to be simple, light and easily
distinguishable.

== The Building Blocks==

[[File:building-blocks.png]]

Some practical points about the style to keep in mind:

* Try to use an even number of pixels of negative space, it's not absolutely required, but it will make the icon set look more consistent.

* Only use roundness when the actual objects in real life are round.

== 16x16 ==

[[File:16x16.png]]

These are used in lists, such as on the sidebar in the File manager.

The guidelines for the 16x16 are slightly different because
of space constraints, here are some tips to maintain crispyness:

* Straight stroke corners are allowed. This works well for paths on the inside of the icon.
* Use a slightly rounded rectangle instead of a circle if the radius is smaller than around 5px.
* You don't have to use an even number of pixels for the negative spaces

== 24x24 ==

[[File:24x24.png]]

This is the standard and most common size used across the UI. Start making your icons in this size. Some more detailed examples:

[[File:24x24-example-document.png]]

[[File:24x24-example-camera.png]]

== 48x48 ==

[[File:48x48.png]]

These are used in large icon views, like the file manager. They
are exactly the same as the 24x24 versions, just scaled up 200%.

== 100x100 ==

This is a special case of icon size, used by the Garage application installer. This is especially useful if you're creating an application and actually want a user to install it.

== Application Tiles ==

[[File:application-launchers.png]]

The 24x24 icons can be applied on the the application tiles to create
program launchers. To do this, scale the glyph icon by 133% and give it
a 2.5px white stroke. Now center the glyph icon on the tile.

For the smaller tile, you can just apply the 24x24 icon without modifying
its size

Done!

== Inkscape ==

Some settings you may want to set in Inkscape to make your life easier:

* Turn stroke width scaling off

* Use a 1px grid

* Turn node snapping on

* Use steps of 1px when moving objects around with the arrow keys

== Templates ==

Here you can download a zip file with all the examples from above plus
some handy templates with the right default settings.

[[File:Templates.zip]]

--[[User:Hbons|Hbons]] 10:49, 21 June 2010 (UTC)

MeeGo Style Guide

2010-06-21T11:05:35Z

Nedrichards:

= Other pages =
----
* [[Netbook Design Guide|How to design your application for a MeeGo netbook]]
* [[Iconography|How to design icons for MeeGo netbook]]

----
=Trademark Usage=
----
The MeeGo trademark usage is subject to the [https://www.linuxfoundation.org/sites/main/files/4647698_2.pdf Linux Foundation Trademark Policy and Guidelines].

----
=MeeGo Logotype=
----
The logomark may be used at any size down to 20mm as long as the print quality is of a high quality standard. Any misuse of the logotype will devalue the identity.

• Do not substitute another typeface for the specially drawn logotype.

• Do not stretch or squash the logotype in any way.

• Always scale proportionally.

• Do not put key line around logotype.

[[File:MeeGo-logotype-size.png]]

----
=MeeGo Colour Palette=
----
=='''Signature Color'''==

The MeeGo Logotype signature colour combination is Dark Grey and Purple. When placing the logotype on black or color backgrounds, use the light grey and white version. Never place the MeeGo logo on a visually cluttered or patterned background.

[[File:MeeGo-logo-sig-colour.png]]

'''Dark Grey:''' For print is PMS 425C. Our online hex color is #57585b.

'''Purple:''' For print is PMS 2607C. Our online hex color is #552987.

'''Light Grey:''' For print is PMS 421C. Our online hex color is #b5b7b4.

Downloads:
[[Media:meego-brand-artwork.zip]]
----
=='''Secondary Colour Palette'''==

The MeeGo colour palette contains bright, bold hues to keep the balance of optimisim and sophistication.

[[File:MeeGo-logo-colour-palette.png]]

'''Red:''' For print is PMS 7416C. Our online hex color is #eb5f54.

'''Magenta:''' For print is PMS 219C. Our online hex color is #eb2a8a.

'''Blue:''' For print is PMS 2985C. Our online hex color is #4fc3e6.

'''Yellow:''' For print is PMS 123C. Our online hex color is #ffc501.

'''Green:''' For print is PMS 346C. Our online hex color is #54b87b.

----
=MeeGo Exclusion Zone=
----
An exclusion zone is there to prevent the mark from being overcrowded. No other elements should be printed or appear within this exclusion zone.

The exclusion zone is created proportionally by measuring the x height of the ‘e’ of MeeGo.
[[File:MeeGo-logo-Exclusion.png]]

----
=MeeGo Typography=
----
The MeeGo type family is '''DIN'''. This typeface has been selected to work in conjunction with the logomark.

Please use the weights shown for text font and for headings.

If this typeface is not available, for example any internal word processing communications, then the typeface '''Helvectica''' may be used as a substitute.

[[File:MeeGo-typography.png]]
----
=Characters=
----
Can be used, reproduced, and modified freely in marketing communications. When using the MeeGo characters or any modification of them, proper attribution is required under the terms of the Creative Commons Attribution license. Like so: "Characters from the MeeGo Project - http://meego.com"
[[File:MeeGo-characters.png]]
----
[[User:Clairealex|Clairealex]] 12:49, 15 June 2010 (UTC)

Netbook Design Guide

2010-06-21T11:05:00Z

Nedrichards:

= Interaction architecture =

Netbook applications should expect to fill the whole of the screen on their zone (in small screen mode).

==Anatomy of an app ==

=== Toolbar ===
* Use it to act on the context.
* No menus
* This is also your window decoration

=== Sidebar ===
* Use it to change the context.

=== Content pane ===
* Where the action is.

They are self contained experiences and all popups should be constrained and contained within the applications window.

== Big screen mode ==
When on a big screen, not a netbook

== Panel ==
* Quick tastes of interaction
* Just one screen, ideally page not scroll
* Get to what you want to use a lot, as quickly as you can
* Not a place to stay.

Netbook Design Guide

2010-06-16T16:47:22Z

Nedrichards:

= Interaction architecture =

Netbook applications should expect to fill the whole of the screen on their zone (in small screen mode).

==Anatomy of an app ==

== Toolbar ===
* Use it to act on the context.
* No menus
* This is also your window decoration

=== Sidebar ===
* Use it to change the context.

=== Content pane ===
* Where the action is.

They are self contained experiences and all popups should be constrained and contained within the applications window.

== Big screen mode ==
When on a big screen, not a netbook

== Panel ==
* Quick tastes of interaction
* Just one screen, ideally page not scroll
* Get to what you want to use a lot, as quickly as you can
* Not a place to stay.

Netbook Design Guide

2010-06-15T17:49:04Z

Nedrichards: set up the page with some quick thoughts

== Interaction architecture ==

Netbook applications should expect to fill the whole of the screen on their zone (in small screen mode).

==Anatomy of an app ==

= Toolbar =
* Use it to act on the context.
* No menus
* This is also your window decoration

= Sidebar =
* Use it to change the context.

= Content pane =
* Where the action is.

They are self contained experiences and all popups should be constrained and contained within the applications window.

== Big screen mode ==
When on a big screen, not a netbook

== Panel ==
* Quick tastes of interaction
* Just one screen, ideally page not scroll
* Get to what you want to use a lot, as quickly as you can
* Not a place to stay.

MeeGo Style Guide

2010-06-15T17:12:42Z

Nedrichards: add a netbook design section

== Other pages ==

[[Netbook Design Guide|How to design your application for a MeeGo netbook]]

==MeeGo Logotype==

The logomark may be used at any size down to 20mm as long as the print quality is of a high quality standard. Any misuse of the logotype will devalue the identity.

• Do not substitute another typeface for the specially drawn logotype.

• Do not stretch or squash the logotype in any way.

• Always scale proportionally.

• Do not put key line around logotype.

[[File:MeeGo-logotype-size.png]]

----
==MeeGo Colour Palette==

'''Signature Color'''

The MeeGo Logotype signature colour combination is Dark Grey and Purple. When placing the logotype on black or color backgrounds, use the light grey and white version. Never place the MeeGo logo on a visually cluttered or patterned background.

[[File:MeeGo-logo-sig-colour.png]]

'''Dark Grey:''' For print is PMS 425C. Our online hex color is #57585b.

'''Purple:''' For print is PMS 2607C. Our online hex color is #552987.

'''Light Grey:''' For print is PMS 421C. Our online hex color is #b5b7b4.

Downloads:
[[meego-brand-artwork.zip]]
----
'''Secondary Colour Palette'''

The MeeGo colour palette contains bright, bold hues to keep the balance of optimisim and sophistication.

[[File:MeeGo-logo-colour-palette.png]]

'''Red:''' For print is PMS 7416C. Our online hex color is #eb5f54.

'''Magenta:''' For print is PMS 219C. Our online hex color is #eb2a8a.

'''Blue:''' For print is PMS 2985C. Our online hex color is #4fc3e6.

'''Yellow:''' For print is PMS 123C. Our online hex color is #ffc501.

'''Green:''' For print is PMS 346C. Our online hex color is #54b87b.

----
==MeeGo Exclusion Zone==

An exclusion zone is there to prevent the mark from being overcrowded. No other elements should be printed or appear within this exclusion zone.

The exclusion zone is created proportionally by measuring the x height of the ‘e’ of MeeGo.
[[File:MeeGo-logo-Exclusion.png]]

----
==MeeGo Typography==

The MeeGo type family is '''DIN'''. This typeface has been selected to work in conjunction with the logomark.

Please use the weights shown for text font and for headings.

If this typeface is not available, for example any internal word processing communications, then the typeface '''Helvectica''' may be used as a substitute.

[[File:MeeGo-typography.png]]
----
==Characters==

Can be used, reproduced, and modified freely in marketing communications. When using the MeeGo characters or any modification of them, proper attribution is required under the terms of the Creative Commons Attribution license. Like so: "Characters from the MeeGo Project - http://meego.com"
[[File:MeeGo-characters.png]]
----
[[User:Clairealex|Clairealex]] 12:49, 15 June 2010 (UTC)