Canonical Voices

Posts tagged with 'notes'

Inayaili de León Persson

Latest from the web team — December 2013

This month we’ve been working hard trying to wrap up as much as we can before the holidays and planning for 2014.

In the last few weeks we’ve worked on:

  • Ubuntu Resources: updating the site based on feedback we received from users — keep those comments coming!
  • Canonical website: getting the site ready for launch, which will happen early next month
  • Juju GUI: adding animations to the GUI
  • Landscape: providing designs for an upcoming visual update
  • Juju Labs: designing and updating the labs section of

And we’re currently working on:

  • Ubuntu Resources: adding topic-based subscriptions and filters in search results
  • Ubuntu 14.04 release: believe it or not, we’re already starting to look into how we’ll be updating for this LTS
  • updating our partner pages in the new year and adding new Ubuntu installation videos to the site
  • Canonical website: now testing the new website on various mobile devices
  • Juju GUI: refining the bundle and browse experience and interactions
  • Fenchurch: moving towards continuous integration of Juju service with Canonical’s IS team

We have also had a very fun Canonical End of Year party!

Canonical status board
A photo of our status board of the upcoming and updated

Have you got any questions or suggestions for us? Would you like to hear about any of these projects and tasks in more detail? Let us know your thoughts in the comments.

Read more
Christina Li

App Design Clinic #6

We have been running the app design clinic every two weeks to answer any questions from community designers and developers on the apps they are working on!

For this session we talked about the community submitted convergence designs for file manager and clock app (thanks everyone!) as well as answering some questions from our Canonical engineers submitted apps, such as:
- If your app has two equal actions- how do you provide entry points?
- What if I want to show more content, but page stack is not appropriate?
- Where should ‘About’ & ‘Settings’ go? (Not in the tabs, please)

If you missed it, or want to watch it again, here it is:

Please send your questions and screenshots to by 1pm UTC on a Tuesdays to be included in the following Wednesday clinic.

Watch this space for our next App Design Clinic time.

Read more
Katie Taylor

App Design Clinic #5

Over the last few months we have been running the App Design Clinic and we want to thank you for all your submissions, contribution and feedback!
The Design Clinic happens every two weeks and the last one co-incided with vUDS, so we included more information on general app design as well as answering quesitons.

Here’s what happened:

- A summary of topics from previous App Design Clinics
- A run-down of where to find the necessary things and resources to design an app
- And finally, how you can contribute and participate in the clinic

The next one happens tomorrow, 4th of December. Please send your questions and screenshots to by 1pm UTC on a Tuesdays to be included in the following Wednesday clinic.

Read more
Christina Li

On 19-21 November we had our vUDS where we got to discuss and share with the community some of the design work we’ve been doing recently.

Our topics ranged from our design blog to convergence designs to Juju GUI cloud to icon designs!

If you missed any of our sessions, don’t worry. They are all below for you to check them out!

Design Blog

Love our blog? How can we make it better? What topics would you like to see?

Responsive Design

Hear about our thoughts on converging our patterns, components and designs from phone to tablet to desktop.

App Design Clinic

Every two weeks, we gather to talk about app designs and patterns. If you are developing an app or have any questions on apps, let us know!

Designing a responsive website and web guide

We talked about the process of designing a responsive website and shared the current web style guide we have been using for the main site.

Research on Windows and Android usability

Juju GUI design evolution

User research has informed the way Juju GUI has changed over the last year. Here is the evolution of Juju GUI.

Designing icons for Ubutnu

We have been designing icons for Ubuntu Phone and Tablet and Desktop. Check them out!

Let us know what you think, or suggestions on what you want to see next from the Design team at the next vUDS!

Read more
Inayaili de León Persson

Latest from the web team — November 2013

Even though Ubuntu 13.10’s release is behind us, we always find ways to keep busy. Here are the highlights of the past four weeks.

In the last few weeks we’ve worked on:

And we’re currently working on:

  • Ubuntu Resources: we’re iterating on the current alpha release, improving the design and adding new features
  • Canonical website: we’re currently exploring design directions and finalising the content for the site
  • Juju GUI: we’re refining the bundle experience and interactions for the 14.04 release
  • Fenchurch: we’ve been improving deployment scripts and asset deployment
  • Live chat trial: we’ve been helping the sales team to test a live chat feature on

We also welcomed a new member of the team: Felipe is the new Lead User Experience. And we’ve learned about Karl’s cage fighting past.

Welcome lunchTeam lunch to welcome Felipe and Karl

Have you got any questions or suggestions for us? Would you like to hear about any of these projects and tasks in more detail? Let us know your thoughts in the comments.

Read more
Christina Li

November Brown Bag lunch

Some of us in the Design team have been gathering on a monthly basis to have lunch together and share things we find interesting to us.

Today, I’d like to share with you the Brown Bag lunch we had this week.

Vesa shared with us his interest in photography and showed us some of the shots he took over time.

9690256316_8c4040a4bb_bWestminster at night by Vesa (flickr)

I came across an inspiring research done by Helen Hamlyn Centre for Design at the Royal College of Art in London. The research focused on facilitating older people using mobile phones, rather than designing a simpler phone for them to use.

And, our challenge of the month was to build the tallest paper tower! Each team had 20 pieces of paper and 6 minutes, with 2 rules:

1. You can only use paper to build your tower
2.You can tear or fold the pieces of paper.

Well, I’m happy to report that Rachel, Vesa and Olga proudly won this challenge with their paper tower!

photo (2)

How would you build your tower in 6 minutes?

Read more
Jouni Helminen

App Design Clinic #4

App design Clinic #4 focuses on icons, with questions from Stuart Langridge including:

  • guidance on creating app icons (stylistically and in terms of file format and resolution)
  • tips on how to use action icons

The presentation deck link will be shared on the blog once it’s been checked by our icon designer, and we hope to have an icons guideline with downloadable templates and full API docs online within a month.

The next clinic is held in conjunction with vUDS. Let’s make it a great one,  please send any designs and/or questions to

Read more
Spencer Bygraves

A week in San Francisco

I recently attended my first cloud sprint meeting held in San Francisco, and it turned out to be a great experience. It’s been 10 years since I last visited, so as well as working hard, it was nice to have the opportunity to see the city again.

Whilst there we worked on the UX and visual design for two of our cloud products, which we’ll be able to share with you soon. It was also a great opportunity to spend time with colleagues from around the world, working together during the day and having a few beers in the evening.

In terms of design, we are working to extend the cloud visual language that is being established through the Juju GUI, with a view to having a consistent suite of cloud products.

A post with some cloud designs will follow soon. For now, here’s some pictures from our week in San Francisco.

Watch this space!


SF-01Discussing Juju and collaborative coding


SF-02San Francisco



Read more
Peter Mahnke

So I am stretching the metaphor a bit, but I think it accurately explains my experience of the recent cloud sprint in San Francisco.

The week starts with some presentations and talks about where we are now and where we want to be from a company, marketplace and product perspective.  This lasts about two hours, then all 115 of us are set free to figure out what we can do to help best achieve these visions. Things are more organised than at an unconference , there are tracks and rooms and sessions planned, but it is all very fluid.  Each day reveals itself and  the week gathers its own momentum.

Spencer, Ale and Luca looking at a wireframe
Some people are here to finish off some work and coordinate releases. Some people are trying to plan the next six month cycle with team-mates they only see a few times a year. Some people have just joined the company and some people are trying to design for the next year or more.  That’s us.

While most here are looking at April, we are brainstorming, paper prototyping, grabbing stakeholders, talking to users, meeting with developers and trying to build that shared vision for a set of products and where they might go in the future — inspiring, chaotic, impossible, crazy, amazing.

set of wireframes and post-it notes

But we are also trying to finish things off from the last cycle, pay some technical debt, polish up a few things.  We are trying to listen to what else is happening, it all moves so fast. We also sign-up to get at least four other smaller things done in the next month.

At the end of the week, a few things are finished. Even better, a few more big things are planned. Dozens of drawings, hundreds of post-it notes are photographed. We shake hands with friends and colleagues that we will only talk to online for a few months and head home to get building.

Read more
Inayaili de León Persson

IKEA’s design process

Graham pointed out a recent Wall Street Journal article out to me as I was going on about my recent kitchen renovation (yes, I’ve used IKEA units). It gives a glimpse into IKEA’s ‘painstaking’ and, for me, fascinating design process.

IKEA kitchenPhoto by David

Even though, being IKEA, they can very much define how people will live, they go through long and careful research, which also has to be in line with their strict production processes. The symbiotic relationship between user, design, engineering, and the dedication to improving this relationship, reminded me of the design process that happens here at Canonical and Ubuntu.

Research Manager Mikael Ydholm leads a team that visits thousands of homes annually … and compiles reports from trend spotters and experts that look as far as a decade into the future.

I would love to learn more about IKEA’s design processes and their designers’ work, so if anyone knows of more in-depth articles, videos or books on it, please give me a shout.

Read more
Katie Taylor

App Design Clinic #3

Today’s clinic included:

  • A discussion of launcher placement,
  • Brad Well’s Bible app – general design guidance
  • Michael Zanetti’s uAuthenticator app – general design guidance, plus a discussion of naming and how names appear in the dash and in the app header

The next clinic is on Wednesday 6th November. We love discussing design, so please send any designs and/or questions to

Read more
Katie Taylor

Wednesday App Clinic – Update

Over the last few weeks, we’ve enjoyed running 2 Wednesday App Clinics. Thanks to all those who sent us their apps and questions. It’s been a fantastic response! It certainly has helped us to see how you’ve been using the design guides and the components, and I hope it has helped you.

The first clinic started with an introduction and then feedback on a Brad Wells’ Blackjack app, and Marcin Le?niowski’s Skydiving logbook app. The second clinic included Michael Zanetti’s GetMeWheels, Daniel Beck’s RamSamSam RSS reader and Szymon Waliczek’s uShopper shopping list apps.

Screenshot from 2013-09-26 10:22:43

If you would like feedback or to ask a particular question (and to see your app featured!) send a screenshot or link to before 1pm UTC on Tuesday.

To watch previous clinics go to the Ubuntu OnAir youtube channel at

The clinics are on Wednesdays at 1pm UTC at . Join us (or watch later) to find out more.

Read more
Lisette Slegers

In my previous blog post, we looked at the key screens for Shorts, the organic grid and the reading view. You can read about the list view behaviour in this document. In this post, I would like to look at journeys for adding and editing content, sharing an article and adjusting the reading view.

Sharing and adjusting the reading view

From the reading view, pull up the toolbar to reveal options:

Reveal reading options

Options for adjusting the reading view are:

  • Font size
  • Light / dark theme

Article view options

Any changes made to the reading view are persistent until the view is changed again.

Adding things to read 

There are different options for adding content to the Shorts app. All of the options described here are for when the user already has feed subscriptions in the app; the first use scenario is not yet covered. To get to the different options for adding content, pull up the toolbar from the topic view:

Adding content

1. Adding a topic

Adding a topic

Adding a new topic with feed suggestions makes finding things to read much easier for users who don’t understand RSS. However, suggesting feeds for subjects could easily become quite complex; for example feeds related to ‘News’ are location specific. Whether we can suggest feeds for users will depend on if we can automate this process.

2. Adding feeds

Add feeds 1

Add feeds 2

When adding one or more feeds, the user needs to select a topic to organise it under. Selecting the topic is done with the expanded option selector.

3. Add online accounts

This might not be possible for version 1, but being able to read articles that were posted on your social networks would be a great feature to have in Shorts. Connecting to social networks will be done through Ubuntu Online Accounts.

4. Import subscriptions

Exact functionality for importing and exporting subscriptions will depend on the how the file manager works.

5. Other

Depending on browser functionality, it might be possible to add feeds from the browser.

Edit topics

In Shorts, feeds are organised under topics. Occasionally, users might want to change the names of their topics and the organisation of their feeds. Under ‘edit topics’, users can:

1. Change topic names

Edit topic names

2. Change topic organisation by adding a new one

Edit topics: add a new one

3. Moving feeds into a different topic

Move feeds into a different topic

The above proposal lets users drag feeds from one topic and drop it into another. The list of feeds under a topic could be very long, so there is an option to collapse the topic. Whether this is possible depends on the drag and drop pattern available in the SDK. Drag and drop is not the easiest thing to do on a touchscreen. A possible alternative would be to long-press on a feed, go into selection mode and have move topic as one of the options.

4. Deleting feeds or entire topics 

Same as in the messaging menu, we will use the swipe to delete pattern – this will soon be in the app design guides.

Next steps

We aim to make the app powerful but simple by having the more complex options easily accessible where they are needed, and to cater for both advanced and novice users. Do you think this app can work without pages and pages of settings? Looking forward to hear your feedback and ideas. You can follow our progress on Google+, the Ubuntu Phone mailing list and IRC channel. Next thing to do is look at first use and no content scenarios.

Read more
Calum Pringle

It’s been a while since our last update to the app design guides so I thought it was about time I shared the latest additions to this growing resource.

Screen sizes

A brief intro to the framework we use for designing for a scalable OS - the grid unit. With a link directly to a more detailed explanation on

Read about designing for multiple screen sizes.


We’ve started to collect frequently asked questions. This section could be improved if it was a little more ‘live’ so we’ll have a think about that.

Read our most frequently asked questions.

Combo button

When you are receiving a phone call, it is possible to decline the call (of course), or alternatively you can decline and reply with a message. To accommodate this and similar use cases we have designed the combo button. Use the combo button to display secondary variations of the primary action.

See our new combo button.

Option selector

While designing System Settings we have come across many situations where there is a need to select from a list of mutually exclusive options. Use the option selector when you need to select an option from a list.

See our new option selector building block.


Our slider has gone through a little makeover too.

Take a look here.

Remember, this site is a work in progress, so we will continue to iterate on the content and design. As usual you can find us on the Ubuntu Phone mailing list and the IRC channel.

Read more
Lina Pio

One of the key challenges with designing calendar applications is the number of ways you can display your time, whether it’s by year, month, week or day. After a lot of good old fashioned hard work, we refactored navigation by making the tab header the key to switching between views. Although the direction I’ll take you through in this article is strong and clean, it’s still a work in progress, and as such, can still change. The images are small in this article, to get a closer look at all of them collected together, download the PDF here.

The latest designs in this article show you how we’ve aimed to solve:

  • Navigation between different calendar views
  • Gestures to help quick navigation
  • Editing events
  • Creating events
  • How this will potentially look and feel


Different views

There are 5 different view templates inside the calendar app we are focusing on. They are:

  • Year
  • Month
  • Week
  • Day
  • Event


Navigating between different views using title header bar

You can move through the different views by tapping on the title header bar to toggle the view mode options. Just like our patterns, this title is scrollable – so that you can scroll through the view modes which don’t fit the width of the screen. Also like our pattern, swiping to the left or right moves along to the next or previous unit (year/month/week/day/event) in its category. For reference, take a look at Calum’s excellent post on this.

To get a better idea, click here to see a video of the prototype which formed the base of this navigation model and allowed us to test it out, comparing and contrasting it against other design directions. It was enough to give us a feel for the potential final build.


Navigating between views using spread and pinch gestures

To aid fast navigation for pro users and to also add an element of fun, we’ve decided to enable zooming in and out between views using finger spreading and pinch gestures similar to zooming in and out in a map app.

 Spreading fingers gesture: This zooms in to the next view; the next view offering more detail, close up.

     E.g. A user spreads when on the year view. This opens up the month view. Spreading on the month view opens up the week view, and so on.

Pinching fingers gesture: This zooms out, to a less detailed view – the previous view in the view hierarchy.

     E.g. A user pinches on month view, the system responds by taking the user to the year view.


An event

An event has several detail fields. In order of appearance they are:

  • Event name
  • Time
  • Description
  • Location
  • Guests
  • This happens (how many times does this event happen in the series? Or is it a one time event?)
  • Remind me
  • Timezone


Editing an event

A bottom edge swipe on an event page brings up the toolbar with the edit button.

[NOTE: toolbar menu options within the calendar and across the whole system have not been finalised, this image of the toolbar is a placeholder to give an idea of how to edit]

The edit mode shows the boxes around the fields allowing the user to type and change the event details. The toolbar in edit mode is always present. It shows cancel and save options.


Creating an event

A bottom edge swipe on year, month, week and day views brings up the toolbar with the option ‘New’ to create a new event. Pressing this brings up a similar template to the ‘Edit’ mode, the only difference being the blank forms.



The visuals in the image below are an exploration of how this can potentially look and feel. This is still very much still in progress, but gives a strong hint of what’s to come.



I hope you like our thoughts and directions on this, and that this article gives a stronger idea of what the final app will look and behave like.

Watch this space for my upcoming articles focusing on: an in depth look at events – (including guest contacts, location views, time and date pickers etc) calendar synching with external accounts, calendar settings, and calendar mode inside the indicators.

Read more
Martin Keary

This is a presentation of our ‘Paper’ Motion theme for Ubuntu Mobile.

The theme is informed by the ‘paper’ graphic style of the mobile OS and we have sought to accentuate it wherever possible. Rather than using more overt effects like page curling and folding, we have hinted at the theme by using multiple layers, ‘stacking’ and suggestive effects. Multiple layers of sliding paper can be observed in the animation of the switch button, stacking can be seen occurring on the icons in the launcher and an example of a suggestive page-turning effect can be seen during the ‘App Stacking’ example.

Read more
Lisette Slegers

Research around reading

As you can see in the image above, I have spent some time looking at different types and contexts of reading, trying to understand what the reading experience might be for Ubuntu. The contexts of reading varies from libraries to magazine stands to the sofa in your lounge, and these each have an impact on how and what you read.

Something we all know (from a healthy bit of stalking field research on public transport) is that reading on a phone means you are probably doing something else at the same time. You are waiting for your friends in a restaurant, or on a busy train on your way to work. You open the reader app to quickly check some news.

Meet “Shorts”: leaf through your news while you wait

Paul is in the station, waiting for a train. He has 5 minutes until it arrives.

Shorts wireframe 1He launches Shorts. The app opens up with a view that shows short snippets of articles on the topics that interest him. The items are laid out on the page in the organic grid, similar to the grid that is used for the gallery app.

Shorts wireframe 2

It is going to rain tonight. Paul decides to stay in and cook a meal with his flatmates. All he needs is a recipe. He navigates to one of his topics, Food.

Shorts wireframe 3

Paul selects a recipe and reads through it. He decides it is too elaborate and returns to the topic.

Shorts wireframe 4

He looks further through the topic and taps on another article. This recipe is perfect for tonight! Paul saves it so he can easily find it later.

Check out this video too:

See how this concept also fits with our Design Vision and the other ritual apps?

Next steps

We will be connecting the dots and working on key journeys for Shorts. Follow development progress on Google+, the Ubuntu Phone mailing list and IRC channel.

One last thing

What do you think of the name?

Read more
Matthew Paul Thomas

In late 2008, I sketched initial designs for what became Gnome’s System Settings utility. This centralized most operating system settings in a single window, without the need to reopen menus or switch between multiple windows if you didn’t find the setting you were looking for the first time. It made Ubuntu, and other Gnome-based systems, much easier to configure.

Five years later, we’re building a phone operating system. So once again, we need a centralized system settings interface.

What other phone OSes do

The first step in designing this was a competitor evaluation of how other phone systems present system settings.

The main Settings screen of

iOS 6.1.4.

iOS is highly consistent in using a hierarchy of list items for Settings. But their design is rather awkward in three ways. First, the top-level Settings screen is very long, usually containing 30 or more top-level categories. Second, Apple originally tried to include application-specific settings inside the system-wide Settings, which made them hard to find while using the app. Some apps (including nearly all the default ones) still do that, but nowadays most put settings in their own UI. And third, the top-level “General” settings category is a bit of a junk drawer — containing subcategories for everything from auto-lock to accessibility, software updates to Siri.

In the “Data usage” screen of

Android 4.2: Tapping “Set mobile data limit” checks the checkbox. Tapping “Mobile data” flashes the switch label, but does nothing else. Tapping “?” opens a menu of more settings.

Android’s Settings similarly uses a hierarchy of lists, though some sections use dialogs instead. It has other consistency problems, too. Sometimes checkboxes are on the left, sometimes on the right. Tapping a checkbox label toggles the checkbox, but tapping a switch label doesn’t toggle the switch — sometimes it navigates to a different screen, other times it does nothing at all. Sometimes a screen’s heading contains a Back button, sometimes it doesn’t. Sometimes it contains a “?” dropdown menu of more settings, and sometimes it doesn’t. All this shows the importance of system settings having, if not a single designer, at least strong design guidelines.

An impressive aspect of Android’s Settings is that they can display in either portrait or landscape mode.

The “phone+camera” screen of

Windows Phone 8.

The Windows Phone design emphasizes typography and visual simplicity. It’s a bit rough around the edges: for example, the “photos+camera” settings screen uses ten font variations, and the main heading doesn’t fit on the screen. Windows Phone also groups “system” and “applications” settings on separate screens, but the separation needs work: for example, the voicemail sound effect is set in one of the “system” screens, while the voicemail number is set in one of the “applications” screens.

A nice detail in Windows Phone’s Settings is the use of summary values. The row you would tap, to navigate to a settings screen, often contains a line of small text summarizing the current settings values. This can save you from having to visit the other screen at all.

Learning from others

This competitor evaluation revealed three main issues. First, the difficulty of organizing system settings versus application settings. Apple tried to group them all together in iOS, but that lacks in-app discoverability. Microsoft used “system” and “applications” categories in Windows Phone, but suffers from poor sorting. It seems more likely that we can solve the sorting problem than the discoverability problem. So, as with Ubuntu for PC, Ubuntu Phone will have “System Settings”, not just “Settings”. Applications will be responsible for presenting their own settings.

Second, there is a tension between categorizing settings, and promoting frequent or urgently used settings. Categorizing by itself is tricky enough: different people might look for the same setting in different places. (For example, iOS sometimes mirrors subcategories of settings inside multiple categories.) A search function may help, but is not a complete answer, because people still need to know what settings are available in the first place. Categorization becomes even trickier when trying to provide quick access to settings like flight mode or orientation lock. Indicators at the top of the screen may help with this, by providing quick access to frequently used functions, like they do on Ubuntu for PC.

Third, it can be useful to reveal current state of settings as part of the navigation to those settings. This is usually done in text, with summary values, but an icon could work too. For example, a Bluetooth settings icon might be dull when Bluetooth is off, bright when it is on, and have an emblem when it is paired to any device.

User journeys

Two user journeys influenced the design of the System Settings interface.

The primary journey is someone wanting to solve a problem. Maybe their Internet connection is not working. Maybe they’re wondering if they can save battery. Maybe a cabin attendant has asked them to put the phone into flight mode. Maybe a friend has been messing around with their phone and they want to stop it from happening again. This person usually will be in a hurry, and sometimes irritated. They’ll want to get in and out as quickly as possible.

The secondary journey is an adventurous new owner, starting out with their phone, wanting to explore what it is capable of. They have more time to read explanations, and to explore cross-references between categories.

Designing the overview

Next, I sketched out nine possible layouts for the overview screen — the first thing people would see when they entered System Settings.

There was a square grid of icons with headings, like on Ubuntu for PC. A variation where the headings doubled as controls. A triangular grid of the same icons, just for fun. Text lists of subcategories, interspersed with occasional controls as list items. And an amalgam of the grid and list models.

Another text-based list, this time using two lines of text for each subcategory. An arrangement of tiles of different sizes for varying prominence of categories. And finally a list using both icons and text.

Selecting the most promising elements from each of the nine layouts, I passed them on to one of our visual designers, Rosie Zhu. She produced mockups of three possibilities, and with help from Marcus Haslam we decided on one final layout.

The design promotes frequently- and urgently-needed settings at the top, categorizes other settings compactly, and places bureaucratic stuff (“About This Phone” and “Reset Phone”) right at the bottom.

This is far from a final mockup. We need to finalize the icon style, and fine-tune control sizes, use of color, use of lines, and so on. But the basic layout is in place for engineers to start work. (Contact Sebastien Bacher if you’d like to help out with the code.)

Designing individual screens

Meanwhile, I have been busy designing individual settings screens. This has helped reveal missing controls in the UI toolkit, so they can be implemented for app developers to use them too.

Links to designs for the individual screens, as well as the design for the overview screen, are on the System Settings wiki page. Your feedback on any of the designs is welcome, either here, or on the ubuntu-phone@ mailing list.

Read more
Michal Izydorczyk

Thank you for all your positive feedback after our first blog post.
We are very excited and are continuing with the designs,
here’s a quick update on how we’re getting on.

During the last few weeks we have been looking at the development of the weather and clock apps. We are also looking at set of gradients that could specify a range of weather conditions.

Here’s the how

A linear colour gradient is specified by two points, and a colour at each point. The colours along the line through those points are calculated using linear interpolation, then extended perpendicular to that line.


This is great way to describe temperature and how it changes over 24 hours.

The second part of developing these apps was to create a set of graphic assets that could support the weather icons as well as the clock face.

Using entirely white mono assets was obvious to contrast with the colourful changing backgrounds.

But we quickly realized that the graphic style of our icons used as indicators or toolbar actions did not fit well for those assets. The weather icons, for example, looked a bit too heavy while we wanted something more zen and simple to blend nicely with the minimalistic and elegant design of the apps.

We replaced the solid fills with thin outlines and add some roundness to the end of the strokes. The weather icons have become playful but graceful, while keeping their plain but not to simplistic in the look and feel.

The clock faces are designed following to the same principles. With great results?

You be the judge ;)


Read more
Calum Pringle

We have just published a new chapter on our App Design Guides : how to handle orientation.

To cater for the different orientations of a range of touch devices, we need to design apps for Ubuntu in a responsive way.

Phone orientations


  1. The primary orientation for an app on the phone is portrait.
  2. Consider using landscape orientation when we want to have a full screen experience for a single piece of content, such as watching a video, looking at a photo or gaming.
  3. A phone app automatically fits in the tablet’s side stage, with a flexible height.

Tablet orientations


  1. The primary orientation for an app on the tablet is landscape.
  2. Consider portrait orientation when it will help the user engage with your app; for example reading a magazine or writing a long email.
  3. By supporting portrait, your app automatically supports split screen.

Responsive strategies

Use these strategies to make your app work on screens of both different sizes and orientations.

Position graphic elements relatively

For ease of use we space graphical elements relatively; to both one another and the screen edges.


Decide how your app might show more or less content

  • An app on the tablet’s main stage might show more content than on the phone.
  • orientation_6

  • An app on the phone with a list of content, such as a feed, would show much more content in the side stage as it is taller.
  • orientation_7

  • If your app’s content is larger than what fits in view, for example a map, you might consider showing more or less content depending on shape and orientation.
  • orientation_8

  • If your app’s content is fixed in shape then it can simply scale up or down. For example the same amount of content on the phone would be scaled up on the tablet.
  • orientation_9

A few last things

1. Use extra space constructively
Consider what content your app could show in extra space, be it the history of a calculator, a list of missed calls or even high scores!
2. If your phone app does not scale, it will remain a fixed height in the side stage.

Hope this helps – and as ever please let us know what you think, these guidelines are a work in progress and will grow over time. Feel free to get in touch with us on the Ubuntu Phone mailing list and the IRC channel.

Read more