Take a look at the final pictures of the stand taken yesterday before we opened for business today!
Phone demo pods ready to be played with :)
Entrance to the stand “Phone + OpenStack + NFV + IoT”
The Canonical meeting roomRead more
Take a look at the final pictures of the stand taken yesterday before we opened for business today!
Phone demo pods ready to be played with :)
Entrance to the stand “Phone + OpenStack + NFV + IoT”
The Canonical meeting roomRead more
With MWC just two days away, the final preparations are now in full swing. The stand is looking bigger and brighter than ever and we cannot wait to share it with you.
It’s day 3 and the stand is nearing completion. The funky lights have been fitted, the meeting rooms have curvaceous walls inspired by the Ubuntu shape, and the cloud and phone demo pods are ready to rock some products for you to try.
Stay tuned tomorrow for some final pictures of behind the scenes at MWC!
One of the meeting rooms
Rectangular demo pods that will feature various cloud productsRead more
It’s day two behind the scenes at MWC and the stand is starting to take shape. The iconic orange Ubuntu flags are up, the walls and doors have been assembled, and the flooring has been put down. We are nearly there…
Stay tuned tomorrow to see our final preparations for the stand.Read more
With Mobile World Congress just around the corner, work has now commenced on our biggest stand to date!
Over the next week we will be posting pictures of the stand so you can see how it all comes together.
This year we are in the Main Hall – taking up more space :)
The flags are up!
Stay tuned for more pictures of the stand tomorrow
Today we launched a new and redesigned tablet section on ubuntu.com that introduces all the cool features of the upcoming BQ Aquaris M10 Ubuntu Edition tablet.
In this redesign, we have broken out of the box, removing the container that previously held the content of the pages. This makes each page feel more spacious, giving the text and the images plenty of room to shine.
This is something we’ve wanted to do for a while across the entire site, so we thought that having the beautiful, large tablet photos to work with gave us a good excuse to try out this new approach.
The overview page of the tablet section of ubuntu.com, before (left) and after
For most of the section, we’ve used existing patterns from our design framework, but the removal of the container box allowed us to play with how the images behave across different screen sizes. You will notice that if you look at the tablet pages on a medium to small screen, some of the images will be cropped by the edge of the viewport, but if you see the same image in a large screen, you can see it in its entirety.
From the top: the same row on a large, medium and small screen
This project was a concerted effort across the design, marketing, and product management teams.
To understand the key goals for this redesign, we collected the requirements and messaging from the key stakeholders of the project. We then translated all this information into wireframes that guide the reader through what Ubuntu Tablet is. These went through a few rounds of testing and iteration with both users and stakeholders. Finally, we worked with a copywriter to refine the words of each section of the tablet pages.
Some of the wireframes
To design the pages, we started with exploring the flow of each page in large and small screens in flat mockups, which were quickly built into a fully functioning prototype that we could keep experimenting and testing on.
Some of the flat mockups created for the redesign
This design process, where we start with flat mockups and move swiftly into a real prototype, is how we design and develop most of our projects, and it is made easier by the existence of a flexible framework and design patterns, that we use (and sometimes break!) as needed.
Testing the new tablet section on real devices
To showcase the beautiful tablet screen designs on the new BQ tablet, we coordinated with professional photographers to deliver the stunning images of the real device that you can enjoy along every new page of the section.
One of the many beautiful device photos used across the new tablet section of ubuntu.com
Many people were involved in this project, making it possible to deliver a redesign that looks great, and is completed on time — which is always good a thing :)
In the near future, we want to remove the container box from the other sections of ubuntu.com, although you may see this change being done gradually, section by section, rather than all in one go. We will also be looking at redesigning our navigation, so lots to look forward to.
Now go experience tablet for yourself and let us know what you think!Read more
Juju is a cloud orchestration tool with a lot of unique terminology. This is not so much of a problem when discussing or explaining terms or features within the site or the GUI, but, when it comes to external sources, the context is sometimes lost and everything can start to get a little confusing.
So a project was started to create embeddable widgets of information to not only give context to blog posts mentioning features of Juju, but also to help user adoption by providing direct access to the information on jujucharms.com.
This project was started by Anthony Dillon, one of the developers, to create embeddable information cards for three topics in particular. Charms, bundles and user profiles. These cards would function similarly to embedded YouTube videos, or embedding a song from Soundcloud on your own site as seen bellow:
Multiple breakpoints of the cards were established (small, 300px and below. medium: 301px to 625px and large: 626px and up) so that they would work responsively and therefore work in a breadth of different situations and compliment the user’s content referring to a charm, bundle or a user profile without any additional effort for the user.
We started the process by determining what information we would want to include within the card and then refining that information as we went through the different breakpoints. Here are some of the initial ideas that we put together:
We wrote down all the information there could be related to each type of card and then discussed how that might carry down to smaller card sizes and removed the unnecessary information as we went through the process. For the profile cards, we felt there was not enough information to display a profile card above 625px break point so we limited the card to the medium size.
Just enter the bundle or the charm name and the card will be generated for you to copy the code snippet to embed into your own content.
You can create your own here: http://www.jujugui.org/community/cards
Below are some examples of the responsive cards are different widths:
Maybe, like me, you seen more of the inside of your gym in January than you had for the six months previous. New year, new diet, new me.. or something like that.
A big creeping problem in recent years is that websites have been on an all out binge, and not just over the winter holidays — big videos, big images, fancy fonts, third-party libraries — they just can’t get enough of ’em.
Average page weights increased by 15% in 2014 and although I haven’t yet seen any similar research done for 2015 yet, I’m willing to bet that trend did not reverse.
Last week I was tasked with making some performance optimisations to the Ubuntu online tour.
This legacy codebase stretches all the way back to 2012, and as such was not benefitting from some of the modern tools we now have at our disposal as web developers.
We have been maintaining our largest codebases such as ubuntu.com and canonical.com to ensure they are as performant as they can be but this Ubuntu tour repository slipped through the cracks somewhat.
We have users all over the world and many of them don’t enjoy the luxury of fat internet pipes that we enjoy in our London office. Time to trim the fat…
At first look, I noted on load of the site it required 235 HTTP requests to download 2.7MB of data. Chunky Charlie!
Delving into the codebase, I immediately spotted some big areas ripe for improvement:
Beyond that – I ran the site URL through Google’s PageSpeed Insights and also discovered;
As you see, the site was only scoring a lowly 46/100, not great.
For jobs such as this, my first weapon of choice is the task runner, Gulp. It’s quick and easy to drop Gulp on top of any existing site and use some of it’s wide array of plugins to optimise source assets for performance.
In an ideal world, you would not deploy any files from the repository you have compiled locally. They should be ignored by version control and compiled on the fly by running your task runner on the server using a continuous integration engine such as Jenkins or Travis CI. This is much cleaner and will prevent merge conflicts when multiple developers are working on the same codebase.
So — when we have all of the above configured and then run it over our legacy codebase, how much weight did it shave?
Good news! Now to load the site, we only need 166 HTTP (-29%) requests to download 2.2MB(-18%) of data. Slim(mer) Jim for the win!
This should mean our users with slower connections will have a much improved experience.
When we run the leaner site now deployed through Google Pagespeed Insights – we now get a much healthier score also.
This was a valuable exercise for our team and reminded us we not only have a responsibility to keep all our new and upcoming work performant but we should also address any legacy sites still currently in use wherever possible.
A leaner web is a faster web and I’m sure that’s something we can all get behind.
Here are the best links shared by the design team during the first month of the year:
Our cloud design team has just returned from a trip to Cape Town for our mid-cycle sprint. We have the luxury of being collocated in London and working closely throughout the whole year, but these sprints give us an invaluable opportunity to collaborate with other stakeholders and engineers working around the world. We get together to define priorities and review progress on our goals for this cycle.
We can showcase upcoming features and designs and get feedback from a variety of sources.
This time we also heard from cloud architects who are building data centres with the products we design. It gave us an insight into how our products are being received in the field – what is working well in reality, what we need to do more of.
The week mainly involves lots of talking, drawing, presenting and discussing topics and we work to a tight schedule.
But we also get a chance to socialise and get to know people we work with in different time zones, which I think is just as valuable as the working bit.
At the end of the week we plan in detail for the next few weeks based on the outcomes of our conversations.
It’s an exciting time to be at Canonical. A new version of our provisioning product MAAS has just been released and it’s a huge evolution and something we’re very proud of.
The new Juju GUI just went live today! It has a completely revamped interface to make it easier to build and manage your cloud applications and services.
Our Autopilot tool for building OpenStack clouds will have a really nice set of new options in our next release.
Below are some photos of our week in Cape Town. I’m looking forward to our next Ubuntu release in April and the evolution of the cloud tools that come with it.
If you’d like to join the fun, get in touch, we’re hiring!
In the coming months, users will start noticing things looking more and more different on Ubuntu. As we gradually roll out our new and improved Suru visual language, you’ll see apps and various other bits of the platform take on a lighter, more clean and cohesive look.
As Ubuntu brings convergence to life—embracing today’s as well as future devices—our visual style and UI Toolkit need to evolve to support the new world. The changes taking place platform-wide make it simpler for designers and developers to integrate convergence from inception, and help apps come to life equally on mobile or desktop without a lot of additional work. As we apply new convergence UI and UX patterns to general-purpose components like lists and checkboxes, we also seek out opportunities to work with community developers and designers to put the thinking and new components into practice. The Clock app has been one such opportunity.
Our clean, crisp and lucid Suru visual language and style works well with the added functionality required for convergence. There’s less visual distraction and noise than ever, providing a clear pathway to making the most of the new toolkit’s convergence functionality.
Our Suru visual design language is based on origami, with graphic elements containing meaningful folds and shadows to create the illusion of paper and draw focus to certain areas. Using the main clock face’s current animation (where the clock flips from analog to digital on touch) as inspiration, it seemed natural to place a fold in the middle of the clock. On touch, the clock “folds” from analog to digital.
To further the paper look, drop shadows are used to give the illusion of layers of paper. The shadow under the clock face elevates it from the page, adding a second layer. The drop shadows on the clock hands add yet another layer.
As for colours, the last clock design featured a grey and purple scheme. In our new design, we make use of our very soon-to-be released new color palette. We brightened the interface with a white background and light grey clock face. On the analog clock, the hour and second hands are now Ubuntu orange. With the lighter UI, this subtle use of branding is allowed to stand out more. Also, the purple text is gone in favor of a more readable dark grey.
The bottom edge hint has also been redesigned. The new design is much more minimal, letting users get used to the gesture without interrupting the content too much.
In the stopwatch section, the fold is absent from the clock face since the element is static. We also utilize our new button styling. In keeping with the origami theme, the buttons now have a subtle drop shadow rather than an inward shadow, to again create a more “paper” feel.
This project has been one of my favorites so far. Although it wasn’t a complete redesign (the functionality remains the same) it was fun seeing how the clock would evolve next. Hope you enjoy the new version of the clock, it’s currently in development so look out for it on your phones soon and stay tuned for more visual changes.
Visual Design: Rae Shambrook
UX Design: James Mulholland
Here are the best links shared by the design team in December:
We arrived in Helsinki on Sunday evening, ready to start our week long SDK sprint on Monday. Our hotel was in a nice location, by the sea.
The SDK is a core part of Ubuntu and provides an array of components and flexibility needed to create applications across staged and windowed form factors, with good design and user experience in mind.
The purpose of the sprint was to have the designers and engineers come together to work on tools and components such as palette themes, bottom edge, header, scrollbars, focus handling, dialogs, buttons, menus, text selections and developer tasks such as IDE, packaging and application startup.
Monday morning started with walking into our venue that looked somewhat like a classroom.
The first task of the day required some physical activity of moving all the tables around so that the environment was much more conducive to a collaborative sprint.
Each day we broke off into working groups for our respective sessions and ironed out any existing issues, as well as working through new and exciting features that would enhance different SDK components.
Jamie, Pierre and Zsombor working hard on the colour palette.
Old school pointing devices, Jamie gives it a go, looking very much like a professor!
During the course of the week we achieved what we’d set out to do:
In the early hours of Wednesday morning (before breakfast) a few of us managed to witnessed a planetary conjunction (Venus, Mars and Jupiter) which was truly amazing… a surprise benefit of sprinting in the arctic circle.
Even though there were a few hours of daylight, we managed to embrace the cold and stand outside to enjoy the beautiful views during lunch and coffee breaks.
All in all, it was a very productive and fun sprint. We left with a sense of accomplishment and camaraderie.Read more
Here are the best links shared by the design team in November:
We will soon push an update of the Suru icon theme that includes more device icons in order to support the Ubuntu convergence story.
Because the existing icon set was focused on mobile, many of the new icons are very specific to the desktop, as we were missing icons such as hard disk, optical drive, printer or touchpad.
When designing new mono icons, we need to make sure that they are consistent with the graphic style of the existing set (thin outlines, rare solid shapes, etc).
A device, like a printer or a hard disk, can be quite complex if you want to make it look realistic, so it’s important to add a level of abstraction to the design. However the icon still has to be recognisable within the right context.
At the moment, if you compare the Suru icon theme to the symbolic mono icons in Gnome, or to the Humanity devices icons, a few icons are missing, so you should expect to see this set expand at some point in the future — but the most common devices are covered.
In the meantime, here is the current full set:
Today we celebrate our amazing Ubuntu Community and show our appreciation for all the hard work put into making Ubuntu what it is today.
Ubuntu is not just an operating system, it is a whole community in which everybody collaborates with everybody to bring to the life a wonderful human experience. When you download the ISO, burn it, install it and start to enjoy it, you know that a lot of people made magnificent efforts to deliver the best Ubuntu OS possible.
To show our appreciation, the Community Managers and Designers have nominated several community application developers to receive a special thank you for their outstanding work:
We’ll send everyone an official Ubuntu keychain and sticker pack.
We also got hold of some other special Ubuntu items and because it is impossible to pick favourites, names were drawn out of a hat:
The following folks will be receiving a special Ubuntu gift from us:
3rd prize: An official Ubuntu hat – Niklas Wenzel
2nd prize: An official Ubuntu pad from Castelli – Andrew Hazen
1st prize: An official Ubuntu wireless mouse from Xoopar – Joey Chan
Well done guys!
Models not included.
For everyone who works out of passion and love for Ubuntu: we thank you, and hope it will encourage more contributors to join and make Ubuntu even better!Read more
We’re using NPM as Vanilla’s package manager. Which gives us a number of advantages such as, an easy way to install and update the CSS framework. This all worked fine until we hit an issue with Github Pages. They do not supporting install scripts therefore it is not possible in
npm install. Highlighted in this issue #4 on the Jekyll Vanilla theme project.
There are a number of ways to use Vanilla with Jekyll. Here are the number of methods we discussed with their pros and cons.
This is not recommended as it duplicates a lot of code. The repo will grow in size as it will include all the framework code also.
Again this will include the entire framework in the repos code base. Another downfall would be the loss of the NPM update process.
This is the method we went with in the end. Creating a submodule in the git repo does not add all the code to the project but includes a reference and path to include the framework.
By running the following command it will pull down the framework into the correct location.
We lose NPM’s functionality but submodules are understood and run when a Github Pages are built.
These methods were derived from a short exploration, but solved our issue. Any better methods would be very much welcomed in the comments. You can see a demo of the Vanilla theme running on the projects Github Page below:Read more
After many hours of research, testing and never-ending questions about structure, design, aesthetics and function, we’re very happy to announce that Jujucharms has a new homepage!
All through this site redesign, our main aim has been to make complex content easy to digest and more fun to read. We’ve strived to create a website that not only looks beautiful, but also succeeds in thoroughly explaining what Juju is and the way it can improve your workflow.
Key content is now featured more prominently. We wanted the homepage to be illustrative and functional, hence the positioning of a bold headline and clear call to action which users immediately see as they access the site.
One of the key change between the old homepage and the new is the addition of two visual diagrams, which we have made sure to optimise for whichever device users may be accessing the site with. The first diagram explains the most relevant aspects of the service and how users can incorporate it into their workflow (Fig. 1). The second explains the different elements that compose Juju and the way the service works at a technical level (Fig. 2).
After scrolling, visitors encounter a section which allows direct access into the store, encouraging them to explore the wide range of services it offers. This allows for a more hands-on discovery and understanding of what Juju is – users can either start designing straight away, test it, or explore the site if they wish to find more information before trying it out.
Overall, we’ve made sure to re-design our homepage in a way that truly benefits our audience. In order to do so we conducted numerous user testing sessions throughout the development of the site and re-iterated the designs based on our user’s feedback. This approach enabled us to understand which content and elements should be prioritised and define the best way to evolve the design.
We collaboratively reviewed and analysed our findings as a team throughout the process and made decisions on next steps to take. After quite a few iterations we hope to have designed a homepage which reflects the core concept and benefits of Juju, and that it becomes something that users will want to come back to.
We hope you like it and look forward to hearing your thoughts about it!Read more
Here are the best links shared by the design team in October:
And ubuntu.com has a brand new homepage too!
The new homepage gives a better overview and links to all Ubuntu products. We also wanted to give visitors easy access to the latest Ubuntu news, so we’ve included a ‘latest news’ strip right below the big intro hero with links to featured articles on Ubuntu Insights.
We’ve also improved the content and flow of the cloud section, and brought the phone and desktop sections up to date.
Let us know what you think. And try the new Ubuntu 15.10!
© 2010 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.