Last November I wrote a short tour of the UX principles of the Ubuntu operating systems for phones. In this article I will focus on specific UI elements, based on the official style guide provided by Canonical. Time to begin!
Typography & Text
Ubuntu Phone uses their own font, unsurprisingly called ‘Ubuntu’. It’s one of the most popular open fonts available and the chances are that you will stumble upon a new project or startup using the font from time to time. You can download the font here.
To keep in line with the style guide when using the Ubuntu font, you need to follow these rules:
- ‘Light weight’ is the primary weight for headers and body text.
- Use ‘Medium’ to emphasize one or two words or to highlight an action, such as a warning in an alert box.
- It’s recommended not to use italics in the UI, as according to Canonical, it looks ‘feeble’, and affects readability.
- You are encouraged to use ‘Medium’ weight instead of ‘Bold’.
There’s a specification covering text inputs which you can read in detail in the Ubuntu style guide, but I’ll summarize the main elements.
- There are several text input states, which is a common UX principle and almost identical to Android.
- Text Fields allow users to input a single line of text, with or without data validation. They can be specific for passwords or numeric values or non-editable with a disabled text area. Read the API Documentation for Text fields for more details.
- Text areas (Multi-line) automatically break to a new line for overflow text, creating more space for the user to write. Read more in its API Documentation.
Here’s a neat reference on the different sizes used for the text size, the default is ‘medium’.
That’s it on typography, you will have no problem getting used to the Ubuntu guidelines, as the UX doesn’t re-invent the wheel.
Colors
There are certain colors used for core functions in Ubuntu, you can grab them from this table.
You will stumble upon the ‘Aubergine’ color often in the style guide. It’s used to highlight nouns, such as a place or contact name. This makes the text stand out from the light gray background.
It’s important to use a light and neutral color for a background, so the content itself gets all the attention, not the background.
Read out the Color Palette guide for more details.
Iconography
Ubuntu has a unique approach to icons, which is especially interesting for those who are not fans of the flat design philosophy popular for the past few years.
The key element here is the Ubuntu Shape, which is a square with rounded corners, and the icon is automatically clipped according to it. After clipping, an inner shadow is applied to make the icon appear debossed in the UI. The useful rectangular area must be opaque, but the two 16-pixel high strips at the top and bottom of the canvas can be transparent.
Icons in Ubuntu also consist of a ‘Paper Texture’ (The bitmap belongs to a specific layer called ‘Texture’) and a vertical background gradient that is two colors of the same hue. The brighter of the two is at the top edge where a subtle paper texture is overlaid on it.
‘Folds’ are the defining features of the Suru icon theme. An application has one of three folds visible upon the background. Standard folds are vertical, horizontal or 45-degree oriented and run through the center of the icon. Their place and direction can vary to follow and highlight lines in the pictogram or the flat shapes. They can also be used as part of the story.
Something else remarkable in the iconography of Ubuntu is that icons are based on the same patterns as the font. The font is the centerpiece of the Ubuntu visual identity, its patterns can applied to the symbol to define their contours.
There are other small, yet significant details regarding icons, so head over to the style guide once again if you want to dive deeper.
Responsiveness
In a unique move, Ubuntu has adapted a framework that retains a uniformed experience with measurement units defined by the grid. The grid unit defines a visual rhythm in Ubuntu and should be used for all measurements including sizes of elements, spacing and margins etc. All measurements should use multiples of 1 GU (Grid Unit), for most laptops that is 8px, retina laptops 16px, and for most mobile phones and tablets, 18px. The grid layout works by dividing the screen real estate into grid units.
Note: Dp (density independent pixel) is also available in case you need a smaller unit than GU. 1dp typically translates to 1 pixel on most devices.
Once you understand how to use Grid Units, you can make yourself familiar with the design philosophy about responsiveness, specified in the style guide.
Ubuntufied?
With Firefox OS for mobile phones abandoned by Mozilla, enthusiasm and confidence for Canonical’s plans aren’t exactly high. But to me, the idea of being locked into a Google-Apple duopoly is frightening, so it’s always refreshing to see new contenders with the courage to try something new.
What do you think of Ubuntu’s design specs?
Elio QoshiElio is a open source designer and founder of Ura Design. He coordinates community initiatives at SitePoint as well. Further, as a board member at Open Labs Hackerspace, he promotes free software and open source locally and regionally. Elio founded the Open Design team at Mozilla and is a Creative Lead at Glucosio and Visual Designer at The Tor Project. He co-organizes OSCAL and gives talks as a Mozilla Tech Speaker at various conferences. When he doesn’t write for SitePoint, he scribbles his musings on his personal blog.
