Canonical Voices

Posts tagged with 'brand'

Anthony Dillon

This was a fairly busy two weeks for the Web & design team at Canonical.  Here are some of the highlights of our completed work.

Web squad

Web is the squad that develop and maintain most of the brochure websites across the Canonical.

Getting started with AI webinar

We build a page to promote the AI webinar.

Watch the webinar

Legal page updates

There have been several minor changes to the legal pages on the site.

New telco whitepaper

Designed and built a takeover and landing page for a whitepaper on telecommunications, featuring Lime Microsystems.

Get the whitepaper

Moved blog.ubuntu.com to ubuntu.com

This was a collaborative effort between multiple squads in the team, which resulted in moving the blog from blog.ubuntu.com to ubuntu.com/blog. This is now live with redirects from the old links to the new home of blog.

Visit the blog

Brand

Brand squad champion a consistent look and feel across all media from web to social to print and logos. 

Marketing support

We completed a few documents for the Marketing team, datasheets and a whitepaper.

Suru exploration

We did some initial exploration work on how we can extend the use of Suru across the webs. We concentrated on use in the header and footer sections of bubble pages. The aim is to get consistent use across all our websites and guideline how it is to be used in order to help the development teams going forward.

Illustrations

We pushed on with the development of our illustrations, completing an audit of illustrations currently used across all our websites and putting a plan in place to update them in stages.

We designed an illustration for ‘The future of mobile connectivity’ to go in a takeover on Ubuntu.com

Iconography

Finalised a list of UI icons with the UX teams with a view to create a new complete set to go across all our products, delivering a consistent user experience.

Slide deck tutorial

We completed the first stage of a video tutorial to go alongside the Master slide deck that guides you on how to use the new deck, do’s and dont’s, and tips for creating great looking slides.

MAAS

The MAAS squad develop the UI for the maas project.

Understand network testing

As the engineers are starting to flesh out their part of the spec for network testing in MAAS – a new feature aimed at the 2.7 release, the UX team spent a significant amount of time learning and understanding what network testing implies and how it will work. We began creating initial sketches to help both the design and the engineering team think in line for what the UI could look like.

Upgrade to Vanilla 2.0 

We upgraded the MAAS application to Vanilla 2.0, making use of all the great features introduced with it. As things the new version of the framework introduces quite a few changes, there are a number of issues in the MAAS UI need to be fixed – the work for this was started and will continue in the next iteration.

Implement small graphs for KVM listing

We are introducing new small graphs within a table, that will, to begin with, be used in the KVM and RSD pages, allowing the users to at-a-glance see their used and available resources. The work for this began with implementing graphs and infotips (rich tooltips) displaying storage and will continue in the next iteration with graphs displaying cores. 

JAAS

The JAAS squad develops the UI for the JAAS store and Juju GUI  projects.

Juju status project

We gathered which pieces of information would be good to display in the new Juju status project. The new GUI will help Juju to scale up, targeting users with lots of Juju/models, stitching all bootstrapping together. Status of all models with metadata about the controllers, analytics and stats. JAAS is the intersection of Juju, CLI, models and solutions.

Jaas.ai enhancements

We have worked on an update to the homepage hero area to include a slideshow. This will help to promote different types of content at the homepage.

Vanilla

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

Released Vanilla 2.0

Over the past year, we’ve been working hard to bring you the next release of Vanilla framework: version 2.0, our most stable release to date.

Since our last significant release, v1.8.0 back in July last year, we’ve been working hard to bring you new features, improve the framework and make it the most stable version we’ve released.

You can see the full list of new and updated changes in the framework in the full release notes . Alternatively you can read up on high-level highlights in our recent blog post New release: Vanilla framework 2.0, and to help with your upgrade to 2.0 we’ve written a step-by-step guide to help you along the way.

Site upgrades

With the release of Vanilla 2.0 we’ve been rolling upgrades across some of our marketing sites.

Snapcraft

The Snapcraft team work closely with the snap store team to develop and maintain the snap store website.

Distro pages

Upon our release of new pages with instructions to enable snap support to users, we got some echo in the media. Check these articles:

These pages are generating an aggregated traffic around ~2000 visits per day since they launched, they keep growing without having performed any specific campaign.

Release UI drag’n’drop

The Release UI has received some love this iteration. We’ve updated the visual style to improve usability and worked on drag’n’dropping channels and releases – which will be landing soon.

There was some refactoring needed to make the right components draggable, and we took the opportunity to experiment with React hooks. This work was the foundation for a better release experience and flexibility that we’ll be working on in the coming iteration.

Commercial applications

Responsive UI layout

The UI for the base application is now responsive and has been optimised for tablet and mobile devices. The work comprised of two components:

  1. Modifying the existing CSS Grid layout at certain breakpoints, which was relatively simple, and;
  2. Migrating the react-virtualized tables to react-window (a much leaner alternative for virtualized lists) and making them responsive. This piece of work was substantially more difficult.

Candid

Candid is our service which provides macaroon-based authentication.

Multi log-in, implementation of the design

Candid has the ability to login to a selection of registered identity providers. We required an interface to select the provider you want to use to authenticate with. This task included applying Vanilla framework to the existing views with improvements on performance and maintainability.

Blog Posts

The post Design and Web team summary – 25 June 2019 appeared first on Ubuntu Blog.

Read more
Anthony Dillon

This was a fairly busy two weeks for the Web & design team at Canonical.  Here are some of the highlights of our completed work.

Web

Web is the squad that develop and maintain most of the brochure websites across the Canonical.

Integrating the blog into www.ubuntu.com

We have been working on integrating the blog into www.ubuntu.com, building new templates and an improved blog module that will serve pages more quickly.

Takeovers and engage pages

We built and launched a few new homepage takeovers and landing pages, including:

– Small Robot Company case study

– 451 Research webinar takeover and engage page

– Whitepaper takeover and engage page for Getting started with AI

– Northstar robotics case study engage page  

– Whitepaper about Active directory

Verifying checksum on download thank you pages

We have added the steps to verify your Ubuntu download on the website. To see these steps download Ubuntu and check the thank you page.

Mir Server homepage refresh

A new homepage hero section was designed and built for www.mir-server.io.

The goal was to update that section with an image related to digital signage/kiosk and also to give a more branded look and feel by using our Canonical brand colours and Suru folds.

Brand

Brand squad champion a consistent look and feel across all media from web to social to print and logos.

Usage guide to using the company slide deck

The team have been working on storyboarding a video to guide people to use the new company slide deck correctly and highlight best practices for creating great slides.

Illustration and UI work

We have been working hard on breaking down the illustrations we have into multiple levels. We have identified x3 levels of illustrations we use and are in the process of gathering them across all our websites and reproducing them in a consistent style.

Alongside this we have started to look at the UI icons we use in all our products with the intention of creating a single master set that will be used across all products to create a consistent user experience.

Marketing support

Created multiple documents for the Marketing team, these included x2 whitepapers and x3 case studies for the Small Robot Company, Northstar and Yahoo Japan.

We also created an animated screen for the stand back wall at Kubecon in Barcelona.

MAAS

The MAAS squad develop the UI for the maas project.

Renamed Pod to KVM in the MAAS UI

MAAS has been using the label “pod” for any KVM (libvert) or RSD host – a label that is not industry standard and can be confused with the use of pods in Kubernetes. In order to avoid this, we went through the MAAS app and renamed all instances of pod to KVM and separated the interface for KVM and RSD hosts.

Replaced Karma tests with Jest

The development team working on MAAS have been focusing on modernising areas of the application. This lead to moving from the Karma test framework to Jest.

Absolute import paths to modules

Another area the development team would like to tackle is migrating from AngularJS to React. To decouple us from Angular we moved to loading modules from a relative path.

KVM/RSD: In-table graphs for CPU, RAM and storage

MAAS CPU, RAM and Storage mini charts
MAAS usage tooltip
MAAS storage tooltip

JAAS

The JAAS squad develops the UI for the JAAS store and Juju GUI  projects.

Design update for JAAS.ai

We have worked on a design update for jaas.ai which includes new colours and page backgrounds. The aim is to bring the website in line with recent updates carried out by the brand team.

Top of the new JAAS homepage

Design refresh of the top of the store page

We have also updated the design of the top section of the Store page, to make it clearer and more attractive, and again including new brand assets.

Top of jaas store page

UX review of the CLI between snap and juju

Our team has also carried out some research in the first step to more closely aligning the commands used in the CLI for Juju and Snaps. This will help to make the experience of using our products more consistent.

Vanilla

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

Vanilla 2.0.0 release

Since our last major release, v1.8.0 back in July last year, we’ve been working hard to bring you new features, improve the framework and make it the most stable version of Vanilla yet. These changes have been released in v2.0.0.

Over the past 2 weeks, we’ve been running QA tests across our marketing sites and web applications using our pre-release 2.0.0-alpha version. During testing, we’ve been filing and fixings bugs against this version, and have pushed up to a pre-release 2.0.0-beta version.

Vanilla framework v2.0.0 banner

We plan to launch Vanilla 2.0.0 today once we have finalised our release notes, completed our upgrade document which will help and guide users during upgrades of their sites.

Look out for our press release posts on Vanilla 2.0.0 and our Upgrade document to go along with it.

Snapcraft

The Snapcraft team work closely with the snap store team to develop and maintain the snap store website.

Install any snap on any platform

We’re pleased to announce we’ll be releasing distribution install pages for all Snaps. They’re one-stop-shops for any combination of Snap and supported distro. Simply visit https://snapcraft.io/install/spotify/debian or, say https://snapcraft.io/install/vlc/arch. The combinations are endless and not only do the pages give you that comfy at-home feeling when it comes to branding they’re also pretty useful. If you’ve never installed Snaps before we provide some easy step-by-step instructions to get the snap running and suggest some other Snaps you might like.

Snap how to install VSC

The post Design and Web team summary – 10 June 2019 appeared first on Ubuntu Blog.

Read more
Peter Mahnke

It was another busy iteration for the web and design team, trying to get a lot of work wrapped up before we head off to Lyon, France for our 19.10 Roadmap cycle kick-off.

JAAS

The team rolled out a new version of the website with a new url, too: https://jujucharms.com now redirects to https://jaas.ai/ as part of a bigger renovation planned for JAAS and Juju. This move also updates the technology used for the site and we’ve migrated the Juju GUI as a Flaskapp that allows us to update and deploy both the website and GUI within minutes. With faster rollout we are now able to iterate and respond to your feedback and bug reports much more efficiently, inline with the infrastructure we use in our other Web Team sites.

JAAS.ai comes with some new and better UI, with more patterns and elements from our open source Vanilla framework . We can’t wait to show you the great things this move will let us do going forward.

Snapcraft

Snap categories

This time category pages received the same treatment as the store page, with fancy banners and more prominent featured snaps.

Publishing your first snap

Following on from last week, the package step of your first snap has had its 3rd section updated. “Update your snapcraft.yaml” has become “Download your snapcraft.yaml”. We now auto-generate a snapcraft.yaml based on the demo project and the name you picked – all you have to do is replace the snapcraft.yaml in the demo project and away you go.

We’ve also created an interactive YAML viewer to explain the different parts of the file giving new users a tl;dr; version of the full explanation available in the docs.

Vanilla

Replace floats based grid with the css grid layout

The 2.0-alpha-1 release removes the floats-based shelves grid (http://shelvesgrid.org/) and replaces its functionality (responsive grid, nesting, prefixing / suffixing) using the native css grid layout.

Secondary navigation

We have an updated primary navigation coming in Vanilla 2.0.0 but unfortunately, we don’t have a secondary or tertiary (if needed) design solution. Looking at our suite of brochure sites and applications, we only use a secondary navigation on Ubuntu, LXD, Ubuntu Blog and the newly revamped canonical.com (coming soon).

Taking initial concepts for canonical.com and applying to recently updated Vanilla navigation, we were able to explore different styles and find a consistent design.

Our latest solution below will be prototyped and tested before proposing up to Vanilla as a new component.

2.0.0-alpha release

We have now made all of the changes that we wish to include in Vanilla Framework 2.0.0 (including the CSS grid changes above). Before we officially release this version of the framework we are testing a selection of our sites using the 2.0.0-alpha pre-release. This release includes all proposed v2.0.0 features but is not recommended for use on production sites – for full details read the release notes.

Brand

Marketing documents

Supported Marketing with the creation of a number of whitepapers, a datasheet and branding for the upcoming Kubecon event in China.

Planning

A large portion of the iteration was spent planning for the upcoming Design Sprint, where we are going to look at all areas of branding across the company, plan guideline updates, expanding the illustration style, look at the Suru language across all touchpoints from web to exhibitions and work out a brand strategy to move forward with.

Icons

We created an icon for the security podcast team, they had made a pretty good stab at it, so we just helped it along, simplified it and brought it inline with brand.

MAAS icons were also created for the ‘Real-world MAAS’ section of the website.

Web

Takeovers & landing pages

We built and launched a few new homepage takeovers with landing pages, including:

Cloud-init

The transformation of the DevOps journey in IoT

New AI Consulting webpage

We published a new page about Canonical’s AI consulting programme.

Adding Google re-captcha to all our forms

We love robots at Canonical, but we get a few too many spam form submissions these days, so we added Google’s recaptcha to most of our forms.

UA for I launch

Canonical has completely updated it’s Ubuntu Advantage product to really help enterprises.  We updated the website to reflect these updates.

The post Design and Web team summary – 10 May 2019 appeared first on Ubuntu Blog.

Read more