If you’ve ever had to create Ubuntu or Canonical related design materials, chances are you had a look at the Brand Guidelines, which, until now, have only existed in the form of bulky PDFs. Those days are over, as we happily introduce the brand new Ubuntu Brand Guidelines site, where you can read the guidelines and download the assets necessary to create your projects.

Ubuntu Brand Guidelines homepage

You can learn more about the Ubuntu brand values and the brand assets, such as our logos, colour palette and pictograms, and how to use them. You can also consult some of our Web-specific guidelines, look at examples of design work that has been done, and download assets like the logos and pictograms.

Brand assets section on the Brand Guidelines site

This is the first iteration of the site: lots of content is being prepared and will be added later on, and we will also work on some refinements to the asset download process, as well as adding many more useful downloads, such as templates and photography.

Among the more frequently requested assets are HTML and CSS snippets and templates that can simply be copied and pasted on internal and external projects, so the designer or developer can be certain everything looks as it should. This is in the works, but it’s something that takes a little bit more time to get just right, so please bear with us.

For now, we’d be delighted to get your feedback on this first version: have you found anything particularly useful on the site? What would you like to see there that you think it’s missing? How do you think it can be improved?

We hope we enjoy the online Ubuntu Brand Guidelines!

The desktop remains central to our everyday work and play, despite all the excitement around tablets, TV’s and phones. So it’s exciting for us to innovate in the desktop too, especially when we find ways to enhance the experience of both heavy “power” users and casual users at the same time. The desktop will be with us for a long time, and for those of us who spend hours every day using a wide diversity of applications, here is some very good news: 12.04 LTS will include the first step in a major new approach to application interfaces.

This work grows out of observations of new and established / sophisticated users making extensive use of the broader set of capabilities in their applications. We noticed that both groups of users spent a lot of time, relatively speaking, navigating the menus of their applications, either to learn about the capabilities of the app, or to take a specific action. We were also conscious of the broader theme in Unity design of leading from user intent. And that set us on a course which led to today’s first public milestone on what we expect will  be a long, fruitful and exciting journey.

The menu has been a central part of the GUI since Xerox PARC invented ‘em in the 70′s. It’s the M in WIMP and has been there, essentially unchanged, for 30 years.

The original Macintosh desktop, circa 1984, courtesy of Wikipedia

We can do much better!

Say hello to the Head-Up Display, or HUD, which will ultimately replace menus in Unity applications. Here’s what we hope you’ll see in 12.04 when you invoke the HUD from any standard Ubuntu app that supports the global menu:

Snapshot of the HUD in Ubuntu 12.04

The intenterface – it maps your intent to the interface

This is the HUD. It’s a way for you to express your intent and have the application respond appropriately. We think of it as “beyond interface”, it’s the “intenterface”.  This concept of “intent-driven interface” has been a primary theme of our work in the Unity shell, with dash search as a first class experience pioneered in Unity. Now we are bringing the same vision to the application, in a way which is completely compatible with existing applications and menus.

The HUD concept has been the driver for all the work we’ve done in unifying menu systems across Gtk, Qt and other toolkit apps in the past two years. So far, that’s shown up as the global menu. In 12.04, it also gives us the first cut of the HUD.

Menus serve two purposes. They act as a standard way to invoke commands which are too infrequently used to warrant a dedicated piece of UI real-estate, like a toolbar button, and they serve as a map of the app’s functionality, almost like a table of contents that one can scan to get a feel for ‘what the app does’. It’s command invocation that we think can be improved upon, and that’s where we are focusing our design exploration.

As a means of invoking commands, menus have some advantages. They are always in the same place (top of the window or screen). They are organised in a way that’s quite easy to describe over the phone, or in a text book (“click the Edit->Preferences menu”), they are pretty fast to read since they are generally arranged in tight vertical columns. They also have some disadvantages: when they get nested, navigating the tree can become fragile. They require you to read a lot when you probably already know what you want. They are more difficult to use from the keyboard than they should be, since they generally require you to remember something special (hotkeys) or use a very limited subset of the keyboard (arrow navigation). They force developers to make often arbitrary choices about the menu tree (“should Preferences be in Edit or in Tools or in Options?”), and then they force users to make equally arbitrary effort to memorise and navigate that tree.

The HUD solves many of these issues, by connecting users directly to what they want. Check out the video, based on a current prototype. It’s a “vocabulary UI”, or VUI, and closer to the way users think. “I told the application to…” is common user paraphrasing for “I clicked the menu to…”. The tree is no longer important, what’s important is the efficiency of the match between what the user says, and the commands we offer up for invocation.

In 12.04 LTS, the HUD is a smart look-ahead search through the app and system (indicator) menus. The image is showing Inkscape, but of course it works everywhere the global menu works. No app modifications are needed to get this level of experience. And you don’t have to adopt the HUD immediately, it’s there if you want it, supplementing the existing menu mechanism.

It’s smart, because it can do things like fuzzy matching, and it can learn what you usually do so it can prioritise the things you use often. It covers the focused app (because that’s where you probably want to act) as well as system functionality; you can change IM state, or go offline in Skype, all through the HUD, without changing focus, because those apps all talk to the indicator system. When you’ve been using it for a little while it seems like it’s reading your mind, in a good way.

We’ll resurrect the  (boring) old ways of displaying the menu in 12.04, in the app and in the panel. In the past few releases of Ubuntu, we’ve actively diminished the visual presence of menus in anticipation of this landing. That proved controversial. In our defence, in user testing, every user finds the menu in the panel, every time, and it’s obviously a cleaner presentation of the interface. But hiding the menu before we had the replacement was overly aggressive. If the HUD lands in 12.04 LTS, we hope you’ll find yourself using the menu less and less, and be glad to have it hidden when you are not using it. You’ll definitely have that option, alongside more traditional menu styles.

Voice is the natural next step

Searching is fast and familiar, especially once we integrate voice recognition, gesture and touch. We want to make it easy to talk to any application, and for any application to respond to your voice. The full integration of voice into applications will take some time. We can start by mapping voice onto the existing menu structures of your apps. And it will only get better from there.

But even without voice input, the HUD is faster than mousing through a menu, and easier to use than hotkeys since you just have to know what you want, not remember a specific key combination. We can search through everything we know about the menu, including descriptive help text, so pretty soon you will be able to find a menu entry using only vaguely related text (imagine finding an entry called Preferences when you search for “settings”).

There is lots to discover, refine and implement. I have a feeling this will be a lot of fun in the next two years

Even better for the power user

The results so far are rather interesting: power users say things like “every GUI app now feels as powerful as VIM”. EMACS users just grunt and… nevermind . Another comment was “it works so well that the rare occasions when it can’t read my mind are annoying!”. We’re doing a lot of user testing on heavy multitaskers, developers and all-day-at-the-workstation personas for Unity in 12.04, polishing off loose ends in the experience that frustrated some in this audience in 11.04-10. If that describes you, the results should be delightful. And the HUD should be particularly empowering.

Even casual users find typing faster than mousing. So while there are modes of interaction where it’s nice to sit back and drive around with the mouse, we observe people staying more engaged and more focused on their task when they can keep their hands on the keyboard all the time. Hotkeys are a sort of mental gymnastics, the HUD is a continuation of mental flow.

Ahead of the competition

There are other teams interested in a similar problem space. Perhaps the best-known new alternative to the traditional menu is Microsoft’s Ribbon. Introduced first as part of a series of changes called Fluent UX in Office, the ribbon is now making its way to a wider set of Windows components and applications. It looks like this:

You can read about the ribbon from a supporter (like any UX change, it has its supporters and detractors ) and if you’ve used it yourself, you will have your own opinion about it. The ribbon is highly visual, making options and commands very visible. It is however also a hog of space (I’m told it can be minimised). Our goal in much of the Unity design has been to return screen real estate to the content with which the user is working; the HUD meets that goal by appearing only when invoked.

Instead of cluttering up the interface ALL the time, let’s clear out the chrome, and show users just what they want, when they want it.

Time will tell whether users prefer the ribbon, or the HUD, but we think it’s exciting enough to pursue and invest in, both in R&D and in supporting developers who want to take advantage of it.

Other relevant efforts include Enso and Ubiquity from the original Humanized team (hi Aza &co), then at Mozilla.

Our thinking is inspired by many works of science, art and entertainment; from Minority Report to Modern Warfare and Jef Raskin’s Humane Interface. We hope others will join us and accelerate the shift from pointy-clicky interfaces to natural and efficient ones.

Roadmap for the HUD

There’s still a lot of design and code still to do. For a start, we haven’t addressed the secondary aspect of the menu, as a visible map of the functionality in an app. That discoverability is of course entirely absent from the HUD; the old menu is still there for now, but we’d like to replace it altogether not just supplement it. And all the other patterns of interaction we expect in the HUD remain to be explored. Regardless, there is a great team working on this, including folk who understand Gtk and Qt such as Ted Gould, Ryan Lortie, Gord Allott and Aurelien Gateau, as well as designers Xi Zhu, Otto Greenslade, Oren Horev and John Lea. Thanks to all of them for getting this initial work to the point where we are confident it’s worthwhile for others to invest time in.

We’ll make sure it’s easy for developers working in any toolkit to take advantage of this and give their users a better experience. And we’ll promote the apps which do it best – it makes apps easier to use, it saves time and screen real-estate for users, and it creates a better impression of the free software platform when it’s done well.

From a code quality and testing perspective, even though we consider this first cut a prototype-grown-up, folk will be glad to see this:

Overall coverage rate:
   lines......: 87.1% (948 of 1089 lines)
   functions..: 97.7% (84 of 86 functions)
   branches...: 63.0% (407 of 646 branches)

Landing in 12.04  LTS is gated on more widespread testing.  You can of course try this out from a PPA or branch the code in Launchpad (you will need these two branches). Or dig deeper with blogs on the topic from Ted Gould, Olli Ries and Gord Allott. Welcome to 2012 everybody!

As developers all over the world sink their teeth into the new features for the next release of Ubuntu it’s time to get out our cameras, brushes and pencils out and start creating the images that will make up the wallpapers for the next release. 12.04 will be an LTS so the same super high quality that the teams delivering the desktop experience are working to should inspire us to make this the best wallpaper set we’ve released yet!

As usual there is a group on Flickr set up for your submissions – Precise Pangolin wallpaper submissions group. Simply upload your pictures to Flickr – accounts are free – and again as usual the contributors who were selected last time will be the ones asked to choose from the final selection of images. For guidance around what might make appropriate content, image resolutions to be used and the like check out the Ubuntu Artwork team wiki page on wallpapers.

You can see from the Pangolin Release Schedule that the development process is well under way so  we’ll be accepting entries until March 15th 18:00 UK time with a view to choosing the images and getting them into the release the following week as the Beta Freeze closes. Questions are welcome on my iain at ubuntu dot com address or on IRC in #ubuntu-design where you’ll find me, like-minded community members and Canonical’s designers.

So get snapping, sketching and painting!

While we were sprinting in Budapest, we had the opportunity to meet the team responsible for such an interesting and inspiring product. We have in fact been lucky enough, thanks to some interesting connections, to be invited at Prezi’s! Of course this only after a hard day of work!

Prezi is a presentation tool which will make your PowerPoint presentations look embarrassing.
The back-end of Prezi is unsurprisingly powered by Ubuntu but, regardless of what it is under the hood, Prezi deserves the spotlight in its own right.

We visited their offices with a delegation of designers and cloud engineers, not only to discuss our products, but also to exchange stories and ideas. We were welcomed very warmly with beers and pizzas in their office, which is, especially architecturally speaking, very inspiring (lots of indoor green).

Prezi is a web application and uses a zoom and pan metaphor to move from a slide to another, it basically produces a ZUI (Zoomable User Interface). This not only allows you to be more creative but gives your slides more “context”, making them part of a bigger picture.
While Prezi is not an open-source project as we know it, and still requires Flash Player, it encourages the sharing of your prezis source.
Some of the functionalities, e.g. the typography, can seem quite limiting but overall the editing is very straight forward and the result can be very, very, effective!

For the purpose of the meeting I quickly put together a prezi and shamefully showed it to the real experts!

This presentation is targeted at people who never heard about Ubuntu, taking advantage of our beautiful logo (font included).

If you want to see what Prezi is capable of, have a look to this presentation their team put together:

Internally we have other tools that we have to use for collaboration purposes, but it is clear that Prezi is definitely a powerful medium and, after having talked to the creators, I can guarantee you it will keep improving (and also moving to different platforms).

With Unity we have been trying to raise the bar innovating in the User Experience with new UI elements, such as Dash and Overlay Scrollbars. But this shouldn’t come at the cost of overlooking less exciting but essential core areas of the OS.

Last cycle we started thinking about how to improve System Settings, and in Precise we hope some of these improvements can start landing.

After examining the current panels and a number of interesting and useful discussions with GNOME upstream, we have defined a small but useful set of changes that we hope will add another level of refinement.

Besides the usual detailed tweaks to options + related widgets, there were other areas we looked at. These are:

• layout consistency
• Unity customisation options
• simplified structure

Switch pattern consistency

With the introduction of the switch widget in GTK 3, and consequentially in GNOME System Settings, different layout patterns have emerged. However, unlike its use in mobile design patterns where it is aligned to the right of its label, in System Settings there were instances of it aligning to the bottom or left of its label.

Because this mobile pattern is here to stay, and it is also easily encapsulable (eg. in menus), made sense to bring consistency to its alignment. Also cognitively, the control should be “after” the label.

This is the result:

Where the description under the header is optional.

Simplified structure

While adding new options to some panels, also reported in some bugs, it became obvious that a bit of reordering was necessary. The biggest change has been the removal of the Screen Settings. Its options have been distributed across more panels.

Where to start

You can review all the details starting from this document. As usual, specs and code are meant to be fixed, so I would be very grateful if you could share your most constructive opinions!

http://www.youtube.com/watch?v=lbwNMnNUGFA

We invested in a six monitor rig and the prototype to test a number of different display configurations and to ensure that our design ideas scale well. However, our main focus for Precise is to ensure that we deliver a reliable and supportive experience for the core use cases, such as connecting to a second display or projector, disconnecting displays and using a closed laptop with an external display.

So here is the Phase 1 specification, scoped for the next couple of cycles, incorporating the feedback we got from the prototype and sessions at UDS:

http://design.canonical.com/the-toolkit/unity-multi-monitor-interactions/

Work continues now on the prototype, which will be used to conduct usability testing on the launcher, spread, window management and workspace interactions for multiple monitor setups.  We will be publishing the prototype on this site (the Ubuntu prototype application, along with the Qt C++ source code) in the near future, so keep tuned for more Multiple Monitor news.

Ispravka ?irili?nog fonta «?» «? ? ? ?» «? ? ? ?»!
????? ?????? ??? «?»:

• Bug #784549 (??????? #13, PDF) «?»
• Bug #654192 (??????? #47, PDF) «? ? ? ?»
• Bug #784585 (??????? #19, PDF) «? ? ? ?»

Amélie Bonet at Dalton Maag has drawn up redesigns for a number of the Cyrillic and Serbian/Balkans characters that weren’t as clear, or ideal as they could have been. If you use these characters, please help give feedback about whether the suggested improvements are sufficient, or whether they could be improved further. For Greek, there is also a proposed fix to monospace Gamma:

• Bug #867577 (?????? #1, PDF) «?»

Many appreciations to those who reported the original bugs about the Ubuntu Font Family. We have tried to follow up to the original reports at Blog Russia and at Opennet.ru (thank you to ????????? ???????? and also all those on the #ubuntu-rs IRC channel.

Please comment directly on the bug reports. You can use your own language if it is easier (eg. Russian, Serbian, English, Greek…). ??????? ???????!

Earlier this week the guys in #ubuntu-tv (on Freenode) generated an Etherpad with their thoughts and then arranged a meeting to discuss priorities.  Alan Bell produced some designs:  http://people.ubuntu.com/~alanbell/unitytelly/

The mailing list has seen some decent traffic as well, with people talking mostly about what the future of the Connected TV might be and features they’d like to see.

Essential
- 10′ interface- Watching Media (DVR, Live, Network(TV Guide is part of DVR/other services))- Control via remote controlHigh priority- Plugin support- Cloud and/or server storage (for home grown media)

- Playback of physical media (USB cd/dvd/bluray drive)

- Installable image

- Easy configuration of new devices (eg. installing same plugins, mounting same network shares)

- Ubuntu One Accounts

- Push media to/from other Ubuntu devices / Media syncing capabilities (Pause on one device, resume from same spot on another device)

- Collaborate with other Ubuntu devices (context: https://lists.launchpad.net/ubuntu-phone/msg00006.html )

- Control from portable devices (phones/tablets/web interface/PC) (collaboration with Ubuntu Phone/Tablet?)

Medium priority

- Sharing media with friends (social network connectivity)

- Purchasing media through online stores (Ubuntu one/Amazon/Netflix)

 

Mark Shuttleworth’s keynote this week at the Ubuntu Developer Summit includes introducing Juju, including a big slide showing off the new Juju logo. Below is the story of how that logo it came into being. The Juju project is done. We asked the Juju community to help, and out of out of love for the brand they responded:

Juju was finally released to all the Dev-Ops out there, and so it’s time for a little look back on how the Juju logo come into being. Four months ago in the middle of July 2011 the Design Team received a request for some help with a new logo. This was for a project what was just on the edge of the RADAR and nobody was quite sure how big it would get!

Abi R had a number of ideas for logos, the most interesting where the wavey “magic carpet” designs. After that Robbie introduces some ideas around the letter ‘e’ as the project has still called Ensemble at the time, and Abi had a couple of further goes at developing that into a cuboid concept to go with the atoms. These all got collected up and attached to the bug report that you can read.

Ensemble was about to get a rebrand, to become Juju. Juju is a west-African system of beliefs, and has the ‘u’ sound much more akin to the other ‘Ubuntu’ and “Unity’ words that the family projects working within Ubuntu tend to get. This is when the call went out to the Design blog for some new ideas. Martin Owens did a sun/shield design making use of the circle concept seen in the Ubuntu Circle of Friends, and the other suggestion from “Birdy” was for a concept around a flying bird.

Mark Shuttleworth also suggested something around the topic of “connections”. So with everything in the basket, from Flying Carpets to Flying birds when it was time to sit down and play with the designs. What you can see here is the first concept presented to Mark for review.

This didn’t really have the “connections” aspects (Juju is about magically plugging components together to semi-automatically build a bigger system). The other things that didn’t seem to work was the dots on the ‘j’s in the word ‘juju’, so what you see is a slightly modified version of the Ubuntu Font Family. There’s the circle, there’s the connections, and also the Canonical/Ubuntu “dots” at the joins. It’s spells “juju” in the logo if you unwrap it in the right way, and spells “WW” in morse code!

After all Juju can only do two thirds of the server configuration site to make a website for you, you still have to do the other third! Thanks all for the juju designs. I hope you’ve enjoyed reading about this as much as I enjoyed trying to put everyone’s ideas together into one pot.

To read more about Juju visit juju.ubuntu.com and learn how you can ‘charm’ even the largest cloud or cluster deployments.

Last night I watched “Press Pause Play” which in it’s own words is a film about fear, hope and digital culture. If you’ve not heard the talk surrounding the movie one of the trailers is below and we’ll catch up once you’ve … well … caught up

Good huh? The interesting thing about Press Pause Play is that it speaks to people who are out in the world creating interesting things and discusses what the brave new world of powerful computers, amazing tools for creation and sharing of content and ideas instantly means for the creative arts. For better or worse anyone can be a film maker now or a photographer or web designer or musician. Install Ubuntu from a USB key, plug that computer into an internet connection and “Ta-Dahhh!” you’ve got instant access to tools which allow you to create amazing things. Or functional things. Or mundane things. Or robots … seriously … people are making robots and they’re using Ubuntu to do it.

The film is extremely good and I’d urge anyone interested how people make stuff today, music, art, film all that “stuff” to watch it. I also think there’s a lot in there for people passionate about free and open source software. The way that we create software, these tools, this approach, it’s helping people who’ve never met to collaborate and produce all sorts of things.

I found it an inspiring watch and best of all it’s available for free from www.presspauseplay.com just download, grab a cup of tea and enjoy. I had jelly babies too but don’t eat too many, you’ll be sick.

Some of you may have already seen our new 11.10 video. For those who haven’t, we’ll catch you once you’ve enjoyed it

Made in Ubuntu using only open source tools – indeed only an open source font! – I’ve made the source assets available so readers of the blog and beyond can make their own versions to promote Ubuntu. Here’s what you’ll need to do to get started.

1. Download the assets files from my Ubuntu One share by clicking this link.

2. While that’s downloading you can also install Pitivi, the video editor I used, which is easily found in the software centre.

3. Uncompress the zip file and take a look at the contents.

The Assets folder contains, as the name suggests, all the video and PNG files I used to create my video. The what’s new .xptv file is the file that Pitivi uses to pull all the assets together and make the video and the template.xcf file is the GIMP file I used as a template for the text slides that appear in between the video clips.

4. Open the What’s new 11.10v2.xptv file and you’ll have to tell Pitivi where all the assets have gone. Just point it to the Assets folder and it’ll do the rest reconstructing the video.

At this point you have two choices. You can either reuse my video assets and just translate the text panels that come up in between the videos or, if you’re feeling really daring, you can use mine like a storyboard and re-record the videos.

Translating the text panels is the simplest route, simply open the template in Gimp and then save copies as PNG files with the same names as I’ve given them. Once you hit render Pitivi will pull in the new PNGs and, boom, you’ve got a video with translated text panels. Simple!

Recording your own videos is a little more time consuming. The way I did it was using a command line tool called recordmydesktop, available again in the software centre, which I found was pretty straightforward to use. It allowed me to specify what area of the screen to record from and could be launched either in the terminal or, when I didn’t want the terminal in the launcher, using ALT-F2 and then killing the process once I’d recorded the features I wanted to share.

The only other things I did while recording was make sure that any time you’re showing the clock it’s set to 11.10 and that the wifi and volume are always at maximum and bluetooth is always on.

We’d really like to translate this into as many languages as possible and Paolo, long time Ubuntu supporter in Italy has kicked us off with Italian translation of the video and we’d love for you guys to try translating it into your own languages, maybe even go and record your own videos. Paolo’s video is below, thanks again chap, we’re hoping you’ll inspire others!

We’re happy to unveil the brand new Ubuntu App Developer website today, a place where developers who want to create Ubuntu applications can find all the information they need and get in touch with the Ubuntu app developer community to share ideas, ask questions and get all the news and events.

Ubuntu App Developer’s website new homepage

The brief

The goal of this project was to create a website that would centralise the best resources on developing Ubuntu applications; a place where developers could find not only all the tools and information necessary to get started on Ubuntu app development, but also a place where they can be a part of an engaged community of other developers who are equally eager to learn and happy to share their knowledge.

Our timeframe was very limited: just under 10 weeks to plan, research, design and build the site. This, of course, had an impact on what could be created. We spent quite a lot of time scoping down the project, making sure the essential information was included and the site was built in a way that it could grow organically, over time.

Planning the App Developer website

Research

Research is one of the most important parts of creating sites (or, to that matter, anything that people will use). As experienced designers, we can make informed guesses on what people will want to see on a given page, but sometimes people’s expectations can be quite different from our initial thoughts. With this in mind, we knew that even though we spent a few intense weeks sketching, brainstorming, covering the Millbank walls with post-its and wireframes, having day-long workshops and listening to what all the key people in this project had to say, ultimately, we had to put our thoughts in front of the developers we were making this site for. And so we did.

One of the many sketches that were done

John Oxton, the Web Team’s UX architect, as someone more qualified to go through this phase, will write a more detailed follow-up post that will focus mainly on the research phase of the App Developer site, the tools used, the main findings, the solutions, etc.

The brand, from a developer’s perspective

The Ubuntu App Developer website is part of the main Ubuntu family of websites. With this in mind, we had to make sure it adhered very closely to the Ubuntu brand guidelines. But we also wanted it to have a life of its own, so that it wouldn’t just be a copy of ubuntu.com.

One of the key assets of the Ubuntu brand guidelines are the Voice, Audience and Developer sliders, which are a tool in understanding what the design direction of any product should be, whether it is a banner, a brochure, a cd cover, a site, etc.

One of the detailed pages on the sliders in the Ubuntu brand guidelines

Here’s a quick overview of the sliders:

• The Voice slider determines whether a piece is representative of the Ubuntu community or if it’s representative of Canonical. This doesn’t reflect the position of the person creating the work, but of the work itself.
• The Audience slider determines the type of user you are talking to. The work can be consumer- or enterprise-oriented.
• The Developer slider determines whether the work is targeted towards end-users or developers. In this case, an advanced user would still not be a developer.

If you’re creating design assets for Ubuntu, you should be familiar with these: have a read of the guidelines as they go into a lot more detail, and do get in touch if you have any questions!

After talking to the stakeholders of this project, we were able to position the sliders as follows:

• Voice: Community
• Audience: Consumer
• Developer: Developer

This was the first time we created a website that was so directly targeted at developers. A brand is something that evolves over time, and this was a great opportunity to evolve the Ubuntu brand in this direction and to explore a new area of the guidelines that hadn’t been looked at in depth before.

Some quick notes and sketches exploring the design direction for the site

We wanted to create something that conveyed the idea of blueprints. This led to a design that makes use of outlines, widely spaced dots and that is clean and direct.

The App Developer’s site navigation follows closely the one of the main Ubuntu sites, with its own flavour

Detail of one of the reusable components of the App Developer’s site

Second round of testing

Trying to get as much feedback from our target users as possible, we showed a more finalised site to a few more developers. Again, John will write about the research side of this project in more detail soon, here on the blog.

The road ahead

This project was a highly rewarding and highly intense team effort. Everyone worked incredibly hard, but we had a lot of fun. Too many great ideas for the site had to be put aside for the future, as our time was so constrained, but rest assured all these were captured in a very exciting roadmap.

The website is now in the hands of the fantastic Ubuntu App Developer community and the Canonical Community Team, and we hope to see it grow with lots of content created by anyone who would like to contribute. Have a look at the site and tell all your friends about it! We’d love to hear your thoughts.

To join the Ubuntu Monospace beta and give feedback, apply to the ubuntu-typeface-interest team on Launchpad and follow the PPA instructions after being accepted.

Timeline

Hardly a day has gone by in the last six-months without the design team being asking when the Ubuntu Mono monospace is going to be available. Like all of the work on the Ubuntu Font Family, the monospace has been working its way through the phased testing process, gradually being made available to more users, as issues are improved and developed. It’s now at the state where it’s ready to share with the early-access beta team. Depending on how many issues are found it can then proceed to being released via font.ubuntu.com and then finally into a future version of the Ubuntu operating system.

Development on the Ubuntu Mono started back in August/September 2010 with Amélie Bonet at Dalton Maag taking the lead. The Ubuntu Mono consists of four fonts: regular, bold, italic and bold-italic. The full set are true monospace fonts, each character being exactly 0.5em wide and 1.0em high, regardless of the weight. Just like a typewriter there are 12 characters per inch at 12 point. On a typewriter or line-printer, creating “bold” is a matter of printing over the top, building up the ink but keeping the same spacing. The Ubuntu Mono Bold follows this principle.

What took so long?

Making a font takes a really long time, for Ubuntu Mono it has also been necessary to re-learn and re-discover much of a lost-art behind monospace font design; hopefully the experiences from the development (recorded in the bug tracker and design blog) will help others working on monospace development in the future.

In a variable-width font, the letters ‘m’ and ‘w’ are much wider than the letters ‘i’ or ‘l’ leading to two problems. The wider characters must be squeezed to fit, and the narrow characters bulked-out to fill the space. Out of all of these, the Latin ‘i’ and ‘m’ have taken the most time, with many experiments run over several months to try and discern a solution (a compromise is going to be necessary somewhere).

To serif or not to serif?

• Ubuntu Regular (proportional) on the top line, notice the ‘m’ and ‘@’, both much wider than the versions below. In a proportionally-spaced font the designer has a wide array of options in terms of setting the advance-width of a character, or optimising the kerning by setting customised spacing for certain pairs of letters next to each other (‘AV’, ‘Te’)
• Ubuntu Mono Regular (fixed-width) in the middle, making characters work is not just a case of squeezing harder! One needs to find a designed alternative: the ‘m’ has a raised middle stem helping to keep the sensation of lightness and space, and for the at-sign (‘@’) the surrounding circle does half a revolution less, leaving the ‘a’ at the top instead of the bottom.
• Ubuntu Mono Italic (fixed-width) at the bottom, is not just a slanted version of the monospace. The ‘a’ becomes single-storey matching the proportional italic and the letters ‘a’ ‘d’ ‘u’ gain tails in Latin. In Cyrillic Kursive (italic) the character forms often change completely.

The main Latin-based characters that vary are "j1flirt". In the end the ‘r’ was finalised without needing a serif, but the other glyphs have been provided with serifs of some form in order to “fill out” the whole of the cell in which they sit: the numeral ’1′ has a slab serif across the bottom, and for ‘f’ and ‘t’ the cross-bar goes the full width across instead of just the right-hand side. The commas and quotes also gain “typewriter” serif tails.

For more details (along with experimental the PDF diagrams) see bug #677134 (“Style: Mono: discern shape of serifs for i l t “). (Please try to have used the font by testing for one week in your normal use to help filter out knee-jerk reactions).

Where we are now

We need to test the readability of the font, particular the Cyrillic and Greek which have had less testing. We also need to test the technical aspects of the monospace font in as many terminals as possible, including the line-spacing. For this, a set of box-drawing and solid-fill characters have been included in the UbuntuBeta Mono. If working correctly when these are tiled side-by-side each should exactly touch, leaving no overlap and no gap.

This exact 2:1 ratio between height and width means that it can hopefully also be used as an 8×16 bitmap console font. Perhaps in a future version of Ubuntu you’ll be able to see Ubuntu Mono right from the moment the bootloader or CD menu appears! In order to do that, the fonts are being “hinted” to force optimised bitmap forms without “drop-outs” or gaps that appear from the fitting of the complex curve onto a low-resolution grid of pixels. As of this week Jason Campbell at Dalton Maag has handed over his hinted versions of Ubuntu Mono to Vincent Connare for tweaking. The most recent update from Vincent earlier today was “I am reviewing the Monospaced now!”, so hopefully that will reassure everyone that things are a-happening in the background!

Finally, remember that the Ubuntu Font Family is about quality, it’s better that we all get a high-quality monospace font in the long-run than to rush something out of the door too soon. Good things are worth waiting for!

Thank you to a commenter in a previous blog post for inspiring the title.

First of all a big thank you to everyone who submitted a wallpaper to our collection for the Oneiric release and to all our previous selected contributors who went through the images and selected the fine selection for this release! We had almost 2000 submissions this cycle and managed to whittle that down to 45 shortlisted pictures. We will aim to get as many as we can into the final release.

I’ve attached the images to a bug in launchpad which is how the images will get into the release and we’ll keep an eye on this listing until release day on the 13th October to make sure everything’s in place.

With so many images it’s not surprising that our shortlisters couldn’t pick out every great image so I’ve been through and made a gallery of my favourites and would encourage everyone to do the same and let the creators of this content know how much you appreciate their effort!

Thanks again and I look forward to seeing what we create next time around!

Not that long ago Matt Jones of BERG fame came up with a really lovely idea! In response to the keep calm and carry on posters from the Second World War that had become so popular again he decided that a more positive statement was needed!

“It occurred to me that this was exactly the wrong sentiment for this age …

I started sketching on the paper a contrary statement, where stiff upper lip was replaced by a stiff upper arm from soldering…”

The Get Excited and Make Things poster was born.

With this in mind I’d like to open up the wallpaper submissions process for the next release of Ubuntu, Oneiric Ocelot! The Flickr group for submissions is now open and can be found at http://www.flickr.com/groups/oneiric-wallpaper-submissions/ and just like last time we’re accepting both photos and rendered/ illustrated wallpapers.

For guidance on what formats are best to submit can I suggest you look at the excellent wiki page on the subject which can be found on the Ubuntu wiki at – wiki.ubuntu.com/Artwork/Documentation/Backgrounds.

We recommend a minimum resolution of 2560 x 1600 and templates for GIMP can be found on the wiki page.

In order for us to make the UI freeze we need just over a week to review and shortlist entries so we will be closing the group for entries on the 11th August at 12pm UK time. From there as with previous cycles the contributors whose images were selected last time will be invited to select a shortlist that will make it into Ubuntu 11.10.

So what are you waiting for?! Get excited and make things!! I am!

The stickers I made in my recent blog post have arrived and they’re lovely!

Thanks to everyone who commented, now get out there and make your own!

Some of you out there may have already seen that funky print shop MOO.com just launched a new product, round stickers. This means that you can now upload round images and make lovely bespoke stickers in a pack of 52. Full disclosure before I start to say that I used to work at MOO.com which is why it appealed to me to play with their product. Anyway, as soon as I saw these new stickers I thought of one thing and that thing was pictograms!

Our pictograms are a beautiful library of icons that help us illustrate the Ubuntu world and they’re all round.

“Perfect-o!”

I thought, I’ll grab the PNGs from design.canonical.com/brand, upload them and be handing out stickers around the office in no time!

But … horror of horrors … the pictograms we’ve made and put online are all 113 x 113 px and MOO recommend at least 472 x 472 px and their uploading tool doesn’t yet accept SVGs which left me with a big problem. I wanted to print 52 stickers and didn’t really want to manually open 52 images and scale them in Inkscape and resave them.

“I need to automate this!”

So here’s what I did to get my lovely pack of stickers made and what you can do to make your own pack of pictogram stickers.

What you will need …

• Some vector pictograms like the one’s helpfully zipped up for you on design.canonical.com
• Inkscape – Ubuntu users can click this link to install it. It’s available on a host of platforms.
• Gimp – Again Ubuntu users can click this link to install and again it’s probably available for your system too.
• David’s Batch Processing plugin for gimp
• Bow tie – this is optional but they are cool …

Got it all? Right! Let’s get cracking!

So unzip your pictograms and open up Inkscape. Then select all the ones you’re going to want to resize and drag them from the folder window into Inkscape.

Next you want to make these tiny little objects bigger so to do this select Object from the top menu bar and choose Transform from that drop down. Make sure you have all the pictograms selected and click on the scale tab.

Because we want to give MOO some nice big images let’s make them massive. I’ve made mine scale proportionally by 1500% and make sure you apply this to each object. Hit apply and zoom out because your screen is now filled with big orange shapes.

Next up we want to add a bit of space around our objects. Whenever you print something you need to provide an area around the image known as bleed. This will allow for the fact that your small item is being printed on a large piece of paper or card and being cut out and you want your image to go right up to the edge. This will become clearer when you upload your PNGs.

To add the bleed around mine I’ve cheated and added an invisible stroke to each object – there may well be a better way to do this but I’m excited and this is how I’ve made it work. You can do it my way by right clicking on your selection of all your pictograms and choosing Fill and Stroke.

First of all select the last tab Stroke style and enter a width of say 200px .Then select the second tab Stroke paint and click the second box in to choose Flat colour. This will immediately cover your lovely pictograms in a thick black line, not at all what we’re after, so reduce the alpha channel, the fourth bar in that pane to 0 to make our stroke transparent.

SAVE! You never know!

Now we need to be able to see all our lovely pictograms before we export them as PNGs. To do this click again on Object in the top menu and choose Align and Distribute from the bottom of that menu. This will bring up another panel with a section called Remove overlaps. I entered 100 into the vertical and horizontal just to give a little room around each object. Then click the icon next to these boxes and behold in amazement as all your pictograms sort themselves into an orderly group!

AMAZING!

Now we’re ready to export our pictogram PNGs. To do this click on File and choose Export Bitmap from the menu. You want to export each object individually so check that box at the bottom of the export window and click Export.

This will export your PNGs to the same folder you saved your inkscape file in earlier. We’re not done yet though! There’s no such thing as transparent ink and MOO will turn our strokes black again so there’s one last step we must go through and that means firing up Gimp.

If you’ve never installed a Gimp plugin before – and I hadn’t – there are plenty of guides to get you going. It’s as simple as typing make in the correct directory from a terminal window. If you get stuck drop me a line but for now I’ll assume you have the batch processing plugin installed.

Once you’re in Gimp head over to the Filters menu in the top bar and select Batch Process.

This tool will pop up, in the input tab choose to add files and select the PNGs that Inkscape made for you. Then select the Rename tab and select a new output directory – we don’t want to overwrite and mess up the originals. Also select to flatten the images, this will remove the transparency for you. Lastly on the output tab choose PNG from the dropdown of file types. The Default should be fine. Hit start and you should fill your new folder with lovely print ready pictogram PNGs.

Try saying that three times fast!

The end is in sight! All that remains is to head over to MOO’s sticker page and make your own stickers. Upload your PNGs, crop, rotate and generally play and in no time at all you’ll have some lovely stickers in your house, on your laptop, on your friend’s laptop, on your cat, basically anywhere you put them!

Enjoy!

Look out for a follow up post when mine arrive!

It’s been five years since people spotted the last Ubuntu billboards in the wild. This time Mauricio Pretto sent a set of photographs of driving between the airport in Porto Alegre, Brazil and the Fórum Internacional Software Livre (International Free Software Forum) venue where Canonical and Ubuntu have a stand for FISL 2011:

Designing for a surface 7 metres × 3.6 metres is a little different than for on-screen or a brochure, especially as the Ubuntu/Canonical Brand Guidelines don’t have a dedicated section for billboards yet! The design here was originally sketched by David Cotter for the Computex Show, and updated by Emily Maher for the FISL request.

Mauricio noted that the billboard guides people to “Come visit Canonical and learn more about Ubuntu” in Portuguese:

Venha visitar a Canonical e conhecer as novidades do ubuntu!

FISL, Centro de Eventos da PUC, de 29 Junho até 2 Julho

Emily gave a bit of background about the further work that needs exploring before the brand guidelines (they are guidelines after all, not hard policy) can be extended to cover super large formats:

I had been discussing this with Marcus Haslam, the Lead Brand Designer at Canonical … we want to work a few more things out before creating a dedicated piece in the guidelines and we need to make some adjustments, for example, the large format dots do not translate well on to such a large format. The dots were almost invisible when viewed from below, so we need to run some more tests at various sizes of the dots next to text and get proofs so we know how best to advise people.

Emily felt it was perhaps a little soon to lay down definite guidelines; but on the branding side the guidelines still translate, with the photograph angle, colours and border-style still applying directly.

Has anyone in Brazil spotted the billboards yet, or would you like to see billboard templates covered as part of the resources in the The Brand Toolkit?