Light: the new look of Ubuntu

Thursday, March 4th, 2010

Jono Bacon, Alan Pope, and many others have written, yesterday we published a new visual story and style for Ubuntu. The core design work was lead by Marcus Haslam, Otto Greenslade and Dominic Edmunds, who are the three visual artists leading our efforts in the Canonical Design team. Once we had the base ideas in place we invited some anchor members of the Ubuntu Art community to a design sprint, to test that the concept had the legs to work with the full range of forums, websites, derivatives and other pieces of this huge and wonderful project. And apparently, it does!

Here are some additional thoughts.

Embracing both Ubuntu and Canonical

One of the real challenges for us has been to find a branding and design strategy which spans the spectrum of audiences, forums and dialogues that we cover.  With Ubuntu, it’s my specific dream to find a constructive blend of commercial and community interests, not only for Canonical but for other companies. That has made our design and branding work difficult – the distinctive look of Ubuntu lent itself well to pure community messaging, but it was hard to do a brochure for Canonical data center services for Ubuntu on servers. We have not only Ubuntu, but also Kubuntu and an important range of derivatives that all have a role in our ecosystem.

So we spent a lot of time trying to distill the requirements down into a set of three dimensions:

Dimensions for our visual language

We found a set of ideas which each represent those spectrums, and which work together.

For example, we identified a palette which includes both a fresh, lively Orange, and a rich, mature Aubergine, which work together. The use of Aubergine indicates Commercial involvement of one form or another, while Orange is a signal of community engagement. The Forums will use the Orange elements more strongly, and a formal product brochure, with descriptions of supporting services, would use more of the Aubergine.

On the consumer/enterprise spectrum, we took inspiration from the aerospace industry, and identified a texture of closely spaced dots. When you see more of that, it means we’re signalling that the story is more about the enterprise, less of that, and it’s more about the consumer. Of course, there are cross-overs, for example when we are talking about the corporate desktop, where we’ll use that closely space dot texture as a boundary area, or separator. We also identified shades of Aubergine that are more consumer, or more enterprise – the darker shades mapping to a stronger emphasis on enterprise work.

And on the end-user / engineer spectrum, we took inspiration from graph paper and engineering blue prints. When you see widely spaced patterns of dots, or outline images and figures, that’s signalling that the content is more engineering-oriented than end-user oriented.

And finally, we found a number of themes which enhanced and echoed those ideas. We use a warm gray supporting colour to give shape to pages and documents, and we built on the dots and circles to create a whole style for figures, illustrations and pictograms.

The beauty of this is that we can now publish content that spans the full range, and we generally know when we start the design process what sorts of visual cues we want to be signalling. Instead of having these different mental domains fight with one another, we can now convey quite subtle collaboration between community and corporate, or work which is aimed at engineers and developers from enterprises as opposed to developers working with consumers. Time will tell how it shapes up, but for now I’m celebrating the milestone and the efforts of the team that pulled it together. There’s something there for everyone who wants to participate in the great hubbub of Ubuntuness that is our shared experience of free software.

So, for example, here’s a conference banner. The strong use of Aubergine suggests that it’s more corporate messaging (Canonical is heavily involved). Orange is used here more as a highlight. The Aubergine is darker, and there’s quite a lot of the fine dot pattern. Below the image is a set of scales showing where on those spectra this work is pitched.

Cloud Banner

As another example, here’s a brochure with an emphasis on end-users who are thinking about adopting Ubuntu’s cloud infrastructure. Again, the fine dot patterns suggests a more enterprise focus, as does the use of the dark aubergine. You can see the circle metaphor used in the quote callout.

And here’s a similar brochure, but with a more developer or engineering oriented focus: note the use of the graph-paper theme with wide spaced dots, and outline shapes.

Finally, here’s an example of a brochure and CD cover for Ubuntu:

As you can see the idea is to signal a mix of both community and Canonical involvement in the message, addressing consumer audiences with a mix of developers and end-users.

A new Ubuntu font

We have commissioned a new font to be developed both for the logo’s of Ubuntu and Canonical, and for use in the interface. The font will be called Ubuntu, and will be a modern humanist font that is optimised for screen legibility. It will be published under an open font license, and considered part of the trade dress of Ubuntu, which will limit its relevance for software interfaces outside of Ubuntu but leave it free for use across the web and in printed documents.

It will take a few months for the font to be finalised, initial elements will be final in the next week which will be sufficient for the logo and other bits and pieces, but I expect to see that font widely used in 10.10. The work has been commissioned from world-renowned fontographers Dalton Maag, who have expressed excitement at the opportunity to publish an open font and also a font that they know will be used daily by millions of people.

Initial coverage will be Western, Arabic, Hebrew and Cyrillic character sets, but over time we may be able to extend that to being a full Unicode font, with great kerning and hinting for print and screen usage globally.  We are considering an internship program, to support aspiring fontographers from all corners of the world to visit London and work with Dalton Maag to extend the font to their own regional glyph set.

The critical test of the font is screen efficiency and legibility, and its character and personality are secondary to its fitness for that purpose. Nevertheless, our hope is that the font has a look that is elegant and expresses the full set of values for both Canonical and Ubuntu: adroitness, accountability, precision, reliability, freedom and collaboration. We’ll publish more as soon as we have it.

A good start

It’s been an exciting process, but I have the sense that we are just getting started. The language will get richer, we will find new things that we want to communicate, and new treatments and visual themes that resonate well with these starting points. We’ll find new ways to integrate this on the web, and on the desktop (look out for the two new themes, Radiance and Ambiance).  I hope we’ll see the language being used to good effect across everything we do, both commercial and community oriented. There’s a range of expression here that should be useful to artists across the spectrum. Let me know how it works for you.

178 Responses to “Light: the new look of Ubuntu”

  1. Ubuntu, Shuttelworth: bottoni a sinistra | Giovanni Raco Says:

    […] atto è una rivoluzione. Già dieci giorni fa lo stesso Shuttleworth aveva messo in chiaro sul suo sito il progetto di rivoluzione grafica che ha in mente per Ubuntu. Nessuno gli ha dato molto peso, […]

  2. » Ubuntu, Shuttelworth: bottoni a sinistra Says:

    […] atto è una rivoluzione. Già dieci giorni fa lo stesso Shuttleworth aveva messo in chiaro sul suo sito il progetto di rivoluzione grafica che ha in mente per Ubuntu. Nessuno gli ha dato molto peso, […]

  3. nenelinux Says:

    hey Mark!!!

    what about the cursor???

    the default is very bored

  4. Wesley Says:

    I’m anxious to see how will this new look in kubuntu … KDE has a much greater visual potential than Gnome …

  5. Kein Sound für Lucid Lynx? | Der Webanhalter Says:

    […] Bei Ubuntu 10.04 wird das äußere Erscheinungsbild grundlegend renoviert. Doch nun kommt raus: Das Sounderlebnis wurde nicht überarbeitet! Überrascht schien Canonical-Gründer Mark Shuttleworth von der Frage nach einem neuen Soundtheme (Klangthema) worden zu sein. Gack, I completely forgot about that. A very good point. Would you see if you can rally a round of community submissions for a sound theme inspired by light? [Quelle] […]


    […] off, check out Mark Shuttleworth’s explanation of the new color scheme. I’m very NOT graphically oriented, and this is hands-down the best explanation of a color […]

  7. Paul Says:

    Very nice System.
    I´m living in germany an switch for one week from XP zu Ubuntu. I love it. It´s perfekt for a student.

  8. usr Says:

    Hi again, Mark!

    Metacity buttons theme is unconsistent at non-resized windows. The theme must be changed or the buttons order.
    I can’t beieve that the design develpment team doesn’t see it.

    A greeting!

  9. usr Says:

    I’m sorry, I meant: non-resize windows.

  10. usr Says:

    …”resizabled”, not “resize”.

    Excuse me again.

  11. Lucid beta 1 Says:

    […] 原文はこちら。( #  golu says: (permalink) March 5th, 2010 at 3:06 […]

  12. Parry Says:

    Why aren’t the humanity icons being removed in this release? They look really cartoony.

    Mark Shuttleworth: We’ll do a new icon theme in due course. The work will start during 10.10 and may or may not land in that release.

  13. Duncan J Murray Says:

    Looks like great work is going on – many thanks! I’ve used Ubuntu since 9.04, there’s a beautiful logic, simplicity, security, stability and autonomy which I was not finding in Windows (including 7). Looking at the screenshots of 10.04, I think you’ve done a great job in finally making Ubuntu look up to date. I’m concerned though by the movement of the window buttons to the left – I think that to make such a fundamental change you have to have a good reason. The other thing is that I think the design team should keep with the ‘flatness’ of 9.04’s gnome interface – the computer screen is flat, and I think looks best with flat icons/tabs/buttons/sliders etc…

    Looking forward to trying it out soon!

  14. Andrew Says:

    Wow! That concept with applying different design elements for different targets is just amazing. I haven’t ever seen that anywhere else and it really makes a lot of sense. Great thinking, team!

  15. Jim Raredon Says:

    Hi Mark,

    Amid of sea of whining, complaining, and some real rudeness (and probably worse), let me say I’m VERY happy with the new theme, including the new button locations. I’m actually coming back from openSUSE land because of the theme, ubuntu one, music store, and iphone support.

    Please keep up the great work! Myself, and The University of Michigan are truly benefiting from this! (I’ll be doing about a 100 machine Ubuntu rollout at UofM in the next few months.)

  16. kikl Says:

    Hi Mark, I gave 10.04 lucid lynx a shot during the last two days. O.K. it’s still buggy, but then it’s beta, so that is to be expected.

    I like your new dark theme ambiance a lot, incidentally, it is quite similar to the “new wave” theme I have been using so far. You also tweeked some of the icons, good Meanwhile ubuntu has become just as pretty as it is usable.

    Your focus on integrating e-mail, chat and broadcasting services is paying off. I am beginning to like tweets;-) Empathy supports facebook, great, I wish it would also support skype. It’s become a standard in internet telephony. I know, it’s closed source, but for the time being….

    Nautilus has one new feature that really shines. Press F3 and you get two fields side by side for browsing. This is very useful for dragging and dropping files between folders. Great feature! But, the design of the thumbnails should be improved, possibly resembling the software center thumbnails.

    O.K. You shifted the minimize, maximize, shut down buttons to the upper left corner. Some users are freaking out, but it’s a non-issue. You get used to it in a matter of days. But then, I don’t see the benefits, are you planning to use the free space on the upper right side somehow? Oh but if you do it, please do it consistently,. The chromium browser still has the buttons on the upper right side…

    But then, I’ll issue my bug reports to launchpad, don’t worry;-)

    Good luck and stay on course.


    PS: I am glad debian/ubuntu collaboration is slowly progressing!

  17. Ubuntu 10.04 Beta 1 | The Linux Blog .net Says:

    […] Comments | Posted by jjt in Linux, Ubuntu Three weeks ago, Mark Shuttleworth made a blog post on what he wanted the latest version of Ubuntu to look like. He’s been talking about Ubuntu […]

  18. Links March 2010 | etbe - Russell Coker Says:

    […] Mark Shuttleworth wrote an interesting post about the new visual style for Ubuntu and Canonical [7]. Apparently this includes the creation of a new font set which will be available for free use. […]

  19. Forrest Says:

    (Examines new logo)

    Huge swooping curves everywhere but for a thin crimped “t”? Did someone declare “t” deprecated?

    Maybe you should italicize it so it doesn’t look so squished.

  20.… – Tanner Helland (dot) Com Says:

    […] – now THIS is how logo and branding is meant to be done. […]

  21. Andrew Says:

    Here’s one simple request… can the font look good when *not* smoothed, like the MS family fonts (ie: Arial, Tahoma, etc…)?

    A quick search of the intrawebs reveals that many users don’t like smoothed fonts, some even complaining of headaches or the like. Unfortunately, none of the current *nix fonts look good if they’re aliased. It would make me really happy if the new fonts looked great in their unadulterated form, too.

  22. Richard Says:

    Was the new theme usability tested? It seems that some basic testing would have picked up the issue with the buttons being too close to the Edit menu.

    I dislike almost everything about the changes – however I could be convinced if there was some usability data justifying what’s been changed, particularly the window buttons.

  23. Kevin Says:

    Love the new look, but didn’t mind customizing the old one. However I have been using Linux since 2004 and my home has been windows free since 2006 and Lucid beta 1 is the first OS I have had friends compliment and when I tell them that the look is out of the box they can’t believe and are ready to try it on their own. Great job to Mark and the whole staff as well as the community, this is a major step forward for us all. C’MON APRIL 29!!

  24. John Says:

    Absolutely gorgeous work. Very professional, polished and good looking desktop. I have been using Lucid since alpha 2, and it is really an excellent computing experience. Sure, there are new changes to get used to, but I disagree with most critical posts: I like the button layout, it is consistent and intuitive; the colours are inviting and fresh. I am really excited to know what you are preparing for us for Lucid +1.

    Brave, daring and creative. Please, do not stop.


  25. David Says:

    Expected nothing less of Dalton Maag. Great stuff.

  26. New Kubuntu branding « Jonathan's Blog Says:

    […] “k” in there is a placeholder, as the new Ubuntu font that Mark Shuttleworth recently blogged about is still in its infancy. But before you jump to conclusions and declare the lack of a […]

  27. Sergey Says:

    Mark, the king is naked, window buttons on the left are very uncomfortable.

    > You shifted the minimize, maximize, shut down buttons to the upper left corner. Some users are freaking out, but it’s a non-issue.
    > You get used to it in a matter of days.

    You have just a few hours to satisfy a new user. He will not use ubuntu after that, if he hasn’t liked it. And he will not find how to change such ugly defaults within that time.

  28. Jade Says:

    What about these left-sided glyphs in the new theme of Ubuntu 10.04 ?
    Is there a reason to copy Apple’s approach ?
    I like Ubuntu, but it seems I will have to hack away at the theme to get the old look & feel back into it.
    The theme itself looks great, but left-sided glyphs are a mistake, pure & simple.