Canonical Voices

Posts tagged with 'web'

Inayaili de León Persson

We might have been quiet, but we have been busy! Here’s a quick overview of what the web team has been up to recently.

In the past month we’ve worked on:

  • New juju.ubuntu.com website: we’ve revamped the information architecture, revisited the key journeys and updated the look to be more in line with www.ubuntu.com
  • Fenchurch (our CMS): we’ve worked on speeding up deployment and continuous testing
  • New Ubuntu OpenStack cloud section on www.ubuntu.com/cloud: we’ve launched a restructured cloud section, with links to more resources, clearer journeys and updated design
  • Juju GUI: we’ve launched the brand new service inspector

And we’re currently working on:

  • 13.10 release updates: the new Ubuntu release is upon us, and we’re getting the website ready to show it off
  • A completely new project that will be our mobile/responsive pilot: we’re updating our web patterns to a more future-friendly shape, investigating solutions to handle responsive images, and we’ve set up a (growing) mobile device testing suite — watch this space for more on this project
  • Fenchurch: we’re improving our internal demo servers and enhancing performance on the downloads page to help deal with release days!
  • Usability testing of the new cloud section: following the aforementioned launch, Tingting is helping us test these pages with their target audience — and we’ve already found loads of things we can improve!
  • A new canonical.com: we haven’t worked on Canonical’s main website in a while, so we’re looking into making it leaner and meaner. As a first stage, Carla has been conducting internal interviews and analysing the existing content
  • Juju GUI: we’re designing on-boarding and a new notification system, and we’re finalising designs for the masthead, service block and relationship lines

We’ve also learnt that Spencer’s favourite author is Paul Auster. And Tristram wrote a post on his blog about his first experience with Juju.

Web team weekly meeting on 19 September 2013Spencer giving his 5×5 presentation at last week’s web team meeting

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

Read more
Inayaili León

A fresh-looking Design Blog

It’s been a long time coming, but we’ve finally done it: the Design Blog has a new look!

Let me take you through the main aspects we wanted to improve on.

Why change?

The last blog design was nearly four years old. With its small font sizes and crammed pages, the text was difficult to read and the images didn’t have space to breathe.

In updating it, we wanted it to appear lighter and cleaner. We wanted to move the visual design forward and let the living and breathing parts of the site — the articles and images themselves — take centre stage.

Ubuntu Design blog team page
The new Team page

A focus on content and flexibility

Ubuntu Design: Article page

One of the main objectives of this new design was to make the reading experience more pleasurable, losing unnecessary details that were crowding the page, so our readers can focus on the content.

We needed a design that could accommodate not just the content we have now, but also the kind of content we expect to see in the future. So we’ve introduced a grid that’s flexible as well as strong. It makes the article pages look more balanced and harmonious, making it easier for the reader to focus on the text and the images.

Speaking of images, we also wanted to make it easier for authors (and encourage them) to include large images in their articles, if available, to really show off the work.

It all comes down to flexibility: an article page should look great when it has no images at all, but the grid and the design should be flexible enough that, when images exist, they are allowed to shine.

The Ubuntu font

Our font is beautiful, but we weren’t using it to its full potential before. One of the goals of this design is to show off the Ubuntu font, its different weights and how great it works at different sizes.

This an example of a block quote, showing the flexibility of the Ubuntu font.

We increased the baseline font size and started applying a new typographic scale (based on a modular scale) which we will introduce to the main websites soon.

Small screens

Although we have taken steps to improve the way content displays on small screens, there are still a few more things we can do to improve the browsing experience on mobile devices.

Because the new design is so clean, it reads well on smaller screens, especially the article pages, which are the most important part of the blog. Other elements, like the footer and navigation, have been tweaked slightly for easier access on smaller screens.

What’s next

As with most projects, we’re not done yet. There are a few things that we’d like to improve further — like the small-screen experience — and some more functionality we’d like to add, but we believe this is a good first step.

As you can see now, the URL for this blog remains associated with Canonical. Another important point we need to address is the relationship between this blog and the Ubuntu Brand Guidelines site, as they are in fact just two aspects of the overarching Ubuntu design concept.

Now let’s hear your thoughts! What do you think of this updated design? And what would you like to see us writing about in the future — what would make interesting articles for you?

 

Read more
Inayaili León

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
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.

Ubuntu Brand Guidelines - Brand assets section
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!

Read more
Inayaili León

Warm grey is one of the neutral colours from Ubuntu and Canonical’s colour palette. It has been added to the palette for balance, being a bridge between the vibrant orange and aubergine.

The brand guidelines specify that warm grey (hex value: #AEA79F) can be used for: backgrounds, graphics, pictograms, dot patterns, charts and diagrams, and large size text.

Even though its use has been tried and tested on some of our print design materials, we are still finding the best way of applying it on the screen, with accessibility considerations in particular being something we want to get right.

Ubuntu Server brochure
Warm grey used in a brochure spread and diagrams

I made a quick example of warm grey text on white and buttons with white text on warm grey and showed it to the Ubuntu accessibility team, who promptly gave me some feedback.

Warm grey text on white and white text on warm grey
Example used to showcase warm grey text on white and white text on warm grey

Here are the conclusions of this discussion, and what we will now try to follow as a rule:

  • Warm grey is easier to read on white and at larger sizes, such as 24-36px
  • It can be used for short, less important pieces of information (for example the date or author of a post or news piece below the main title)
  • It can also be used in buttons that are deactivated and therefore less relevant

Guidelines can change though. If something doesn’t evolve, or is at least reassessed at certain intervals of time, it can very easily stagnate. So we will test these conclusions and follow these simple rules for now, knowing that later on we may decide there is a better way of achieving the same results.

Read more
Iain Farrell

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.

Read more
Paul Sladen

Kudos to everyone using the Ubuntu Font Family on their websites as a web font! This week the total to date reached over one billion requests—and it’ll go up even faster if you add Ubuntu Mono and Ubuntu Condensed to your sites too.

Shortly after the Ubuntu Font Family was added to Google Webfonts directory, Bruno and Dalton Maag team noticed that there had been 12 million API requests in the first month. I think you’ll agree that the current figure dwarfs that! Here’s the announcement from back then, now blown away:

Only added recently into Google’s font directory, the Ubuntu font family has already been viewed over 12 Million times around the world.

We expect the fonts to become even more popular once the font family is available in all its weights, and the core set is extended with Arabic and Hebrew, too.

Bruno and Dalton Maag, just a few months ago

I had a feeling that the usage might ramp up and now the those API requests to the Google Webfonts have reached one billion (109) or as David Wurtz, product manager for Google Webfonts put it:

…A big milestone!

David Wurtz, Product Manager, Google Web Fonts Team

Version 0.80 expansion

The statistics are not the only big milestone recently. Ubuntu Font Family 0.80 was released at the end of September 2011. In the release announcement it introduces the five additional .ttf files:

Hinting work continues on the Ubuntu Mono with Vincent Connare at Dalton Maag working to perfect the distortions to improve the rendering at low resolutions.

Mark Shuttleworth (who along with other people has been testing the Ubuntu Mono for nearly a year) is so happy with the Ubnutu Mono that in bug #865013 “Ubuntu Mono” has been made the default system monospace font in Ubuntu 11.10. For Kubuntu, Xubuntu and friends the monospace fonts are also shipped in release 11.10, but are not yet set as default.

Get them now!

I’ll hand it over to Dave Crossland to do the summing up. Dave is an independent font consultant working with the Google Web Fonts team who’s been heavily involved with building up the number of libre and open fonts available in the directory and knows intimately what works and what doesn’t:

The Ubuntu Font Family is one of the most popular fonts available in Google Web Fonts, …thanks to its excellent quality in design and technical engineering, and also its extensive character set that supports many languages. As more and more people learn about why web fonts are important, it’s great that the Ubuntu project has shared this high quality typeface and font family with the world!

Dave Crossland, independent consultant to Google Web Fonts team


To view and use the Ubuntu Font Family via Google Web Fonts; there’s a choice of Ubuntu (proportional ×8), Ubuntu Mono (monospace ×4) and Ubuntu Condensed (condensed ×1). You are expressly welcome and encouraged to share and use the webfonts on your own sites!

Read more
Inayaili León

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 website homepage
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.

Ubuntu Developer Website schedule
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.

Ubuntu App Developer site wireframe
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.

Ubuntu brand guidelines slides page
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.

Ubuntu App Developer design direction sketches
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.

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

Ubuntu App Developer site's box detail
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.

Read more
Inayaili León

We all know Ubuntu is great, but we want even more people to know just how great. With this in mind, we thought we’d give the visitors of ubuntu.com the tools to spread the word about Ubuntu.

As of today, you can see Tweet and Like buttons on some of the key pages of the website, such as Ubuntu for you, the Features pages, or the Download page.

Sharing features on Ubuntu for you page

This is the first step towards something bigger. In the pipeline are the introduction of more ways of sharing the Ubuntu message with friends, family and (why not?) your entire social network. For now, we’ve focused on the two most popular services.

Sharing a page from ubuntu.com on Twitter
Sharing your favourite pages of the Ubuntu website on Twitter is a breeze. Before tweeting, you can customise your message too.

We’d love to get your feedback, hear your suggestions, and know your ideas on how you can tell the world just how lovely Ubuntu is. As an Ubuntu lover and active member of the community, what tools do you think would help you and be most valuable in sharing your experience of Ubuntu?

Finally, if you love Ubuntu, help us spread the word: visit ubuntu.com and share those links with as many people as you can!

Read more
Inayaili León

Natty Narwhal isn’t the only thing new today in Ubuntu. Along with it, and as you may have already noticed, we have updated some areas of the Ubuntu website, including a fresh new homepage.

What’s new?

This overhaul of the website focuses on improving and refining the experience for users who are new to Ubuntu and who we want to entice and convert. We have taken a better look at how Ubuntu’s most important features and characteristics were (or weren’t, in some cases) being shown, and whether visitors’ most important questions were being answered.

Several things have changed. Firstly, rather than having separate sections for Desktop and Netbook (and as a consequence of the move towards Unity), we have created a single section called, simply, Ubuntu. We have also added a direct link from the main navigation area to a new Download section, making the different download options more visible.

Under the new Ubuntu section, Ubuntu’s features are given the spotlight. Rather than having a long list of screengrabs as before, various tabs take you through a more detailed tour of the most exciting and useful features.

The Web browsing features page
The Web browsing features page

In the new What’s new? section you can see what has changed from previous versions of Ubuntu.

Interactive tooltips in the What’s new? page
Interactive tooltips in the What’s new? page

The new homepage is cleaner, more focused and it shows off some of Ubuntu’s features from the outset. The new design also solves one of the biggest performance issues the previous version suffered from: very large file sizes, which rendered the page too slow to load.

Ubuntu website’s new homepage
Ubuntu website’s new homepage

These larger updates to the site started earlier this year. In March, the Business section (which was previously divided in two sections, Server and Cloud) underwent a major restructuring. The main objective was to make it easier for businesses to find out about all that Ubuntu, and Canonical, have to offer them.

The new Business section
The new Business section

Why the change?

These updates didn’t just pop up from nowhere. Last December, we carried out intensive user research to see how the website was performing. During these sessions, we interviewed users of different platforms and with different backgrounds. We analysed their paths through the websites, we heard their questions, took note of their concerns and observed their “awe moments”.

The findings from our analysis showed that although users found Ubuntu compelling, they were having difficulty finding answers to their questions on the Ubuntu website, and some of the most interesting features didn’t have the prominence they deserved.

The findings analysis phase
The findings analysis phase

This happened not only for end users, but also for business users, hence the update of both sections.

Whilst the overhaul is visible in both the design and structure of the website, we have also been trying to (slowly) improve what’s hidden behind the scenes.

We (as Canonical’s Design and Web Team) are conscious of the fact that both the markup and the code behind the website can be greatly improved. Our ultimate goal is to make the code that powers Ubuntu’s website as good as Ubuntu itself. We want it to be indicative of our standards.

This will make the website more easy to maintain and it will reflect on how accessible it is (which is a consideration that we’re striving to keep present throughout the entire process, not only in the coding phases of the project).

Steps in the right direction

To create these new pages, we have compartmentalised the new code so that we could experiment with creating better code. Our goal is for the new code to be more accessible, more flexible, more modular, less convoluted, less redundant, more performant and more robust. Our markup can be cleaner and more semantic.

One of our main concerns regarding the current website’s design and code is its lack of accessibility at some points. For this matter, we spoke directly with the Ubuntu Accessibility team to register their worries and suggestions. The main items that transpired from this session were:

  • Some colour combinations don’t provide enough contrast between background and foreground
  • Text should be easier to resize, using relative units (such as ems) rather than absolute ones (like pixels)
  • The copy should be clear and concise
  • Some of the text is too small
  • There are visibility issues in links and navigation

This chat was helpful as it helped to consolidate the issues we were aware of, surface other problems and most importantly provide us with a real world view of how these can disrupt users.

We have begun addressing some of these in the new designs and will continue to do so in the coming months.

What the future holds

You can expect more and better updates to ubuntu.com within the next few months.

The main focus of our work will be making the website more accessible and easier to navigate by following current web standards and bringing it up to the Ubuntu and Canonical standard of quality; the code should be easier to manage, the content easier to update, and the message clear.

We’re confident we’re heading in the right direction. We’d love to hear your thoughts, suggestions and comments.

Read more
Inayaili León

29 days later

It’s been 29 days since I’ve started working at Canonical and, let me tell you, they went by really fast.

In the past few weeks I have worked on lots of projects and there is a lot more in the pipeline. I’ve mainly been working on the “realign” (rather than “redesign”) of canonical.com and ubuntu.com; we’ve also been thinking about how we can make the design toolkit more interactive, making it easier for anyone who needs to use it to find the information they need, to name but a few projects.

More importantly, I have learned that:

  • You shouldn’t use Iain’s favourite mug
  • Marcus takes a long time to decide what he’s going to eat
  • Michael can make origami cranes
  • John has a truck
  • Alejandra eats more chocolate than I do

UDS – Ubuntu Developer Summit

A few days after I’ve started I was told I was going to the next UDS, which will be held in Orlando from 25th to 29th October. No-one has really given me a clear explanation of what is supposed to happen at UDS — I think they want it to be a surprise. So I’d be happy to get any tips that fellow attendees might have for me: What mustn’t I forget?, What should I be expecting?, How I can I make the most of it?

That is all for now, reporting from the design corner of the Canonical Millbank headquarters.

(Oh, and the view is still amazing.)

Read more