Design and Web team summary – 11 May 2021

Tags: Design

This article is more than 3 years old.


The web team at Canonical run two-week iterations building and maintaining all of Canonical websites and product web interfaces. Here are some of the highlights of our completed work from this iteration.

This iteration, part of the team joined the Product Roadmap sprint.

Meet the team

Hey, I’m Pete and I joined the Canonical team just last week. I’m from the UK, but currently living in Barcelona. I am working on the web team as a front-end engineer and am hoping one day to be able to work on both front-end and back-end.

It’s only been a week but everyone has been really amazing, happy to answer all my questions and help me out in any way. I already feel right at home.

Beyond programming I enjoy playing old school video games, trying to cook, playing guitar, camping and juggling.

Web squad

The Web Squad develops and maintains most of Canonical’s sites like ubuntu.com, canonical.com and more. 

Brand

The Brand team develop our design strategy and create the look and feel for the company across many touch-points, from web, documents, exhibitions, logos and video.

Social banners

We designed some social banners for different platforms and in a couple of styles to be used by the Sales and Marketing teams.

Marketing documents

We created a number of documents for the Marketing team to use, from Whitepapers to Datasheets, many of them containing new illustrations and diagrams. 

Anbox Cloud video

The Anbox Cloud video was edited down, a new soundtrack applied and had some small visual text tweaks done in this iteration. 

Brand Hierarchy

We continued our exploratory work around the relationship of Canonical to Ubuntu and tested how they can work together better and how they appear in different media. 

MAAS

The MAAS squad develops the UI for the MAAS project.

We’ve spent the last few weeks QAing the UI and fixing bugs for the MAAS 3.0.0 release. There have been a few last minute improvements as well.

Controller versions

We’ve have begun the work to better expose the MAAS versions of controllers and will soon also show the available upgrades all from the controller view.

Grub bootloader

GRUB is used on AMD64 UEFI, ARM64 UEFI , and PPC64EL OpenFirmware for booting both locally and over the network.

Booting with secure boot enabled is currently broken in MAAS due to incompatibilities with the shim. HTTP booting has also been disabled in MAAS due to bugs which have subsequently been fixed.

Intel has informed Canonical they will be removing TFTP support in future versions of UEFI firmware. This makes HTTP booting a requirement to support new Intel machines. 

So we’ve added the ability for administrators in the UI to disable boot architectures.

In this design, we’ve added an action in the Subnet details page which will display the form. Giving you the ability to disable boot architectures.

There are 11 boot architectures in MAAS, which all of them will be enabled by default and a user may select the ones they want to disable from this form.

JAAS

The JAAS squad develops the dashboard for the Juju project.

We spent most of our time fixing some last minute issues before the Juju 2.9 release this iteration. With this release, self-bootstrapped controllers will have the same feature set as users on JAAS.ai. Such as Configuration management, Actions execution, and now the Juju web CLI!

You are able to upgrade to the latest version by running `juju upgrade-dashboard`.

Vanilla

The Vanilla squad designs and maintains the design system and Vanilla framework library. They ensure a consistent style throughout web assets.

Dark theme for divider pattern

We continue to introduce dark theme to our patterns, and with the 2.30.0 release, the divider pattern will be available for use with a dark theme.

Light:

Dark:

Button link

We’ve also introduced the ability to make buttons assume the appearance of a standard link. 

It was already possible to make a link look like a button, and this update serves as the a counterpart to that. This pattern is useful in situations where a button can afford to be subtle.

Audit component states 

We’ve conducted an audit of component states, identified a few glitches and inconsistencies, and we’ve prepared a proposal that standardises them.

Logos section blog post

Making logo sections can be tricky. Logos come in all shapes and sizes, and without proper care, it is easy to end up with a poorly balanced layout. We’ve detailed our approach to solving this problem in a blog post. As a preview, the image below shows a comparison of a logo section before/after applying the technique described in the article:

Snapcraft and Charmhub

Charmhub

We released a brand new redesign Charmhub.io for Kubecon 2021. It integrates really with the juju.is website.

Part of this release we revamped the blog and tutorial pages with a new layout and clearer post pages to reduce distractions during reading.

We also took the opportunity to redesign the homepage on juju.is. Notice the new section “What is Juju?” and it’s great animation. We will be publishing a blog post about this section soon.

Happy charming!

Snapcraft

Brand store admin pages

Continued to work on the brand store admin pages, currently working on the snaps management search which allows you to search, add and remove snaps from the store.

Upload metadata

Added a field to the settings form for snaps which allows you to opt-in to uploading the metadata for your snap.

Team posts:

We are hiring

  • Home based – EMEA
    UX Designer  ›
    Be part of a team working on web applications for enterprise cloud services, IoT and embedded devices, bringing exciting new projects to life and improving existing ones.

  • Home based – EMEA
    Web Developer ›
    An exceptional opportunity for a web developer to work within a large team of UX and visual designers and developers building websites and apps.

With ♥ from Canonical web team.

Talk to us today

Interested in running Ubuntu in your organisation?

Newsletter signup

Get the latest Ubuntu news and updates in your inbox.

By submitting this form, I confirm that I have read and agree to Canonical's Privacy Policy.

Related posts

Designing Canonical’s Figma libraries for performance and structure

How Canonical’s Design team rebuilt their Figma libraries, with practical guidelines on structure, performance, and maintenance processes.

Visual Testing: GitHub Actions Migration & Test Optimisation

What is Visual Testing? Visual testing analyses the visual appearance of a user interface. Snapshots of pages are taken to create a “baseline”, or the current...

Let’s talk open design

Why aren’t there more design contributions in open source? Help us find out!