Design and Web team summary – 8 October 2018

Snappy

Whitelist/ Blacklist territories for your snaps

We’ve recently implemented the ability to include or exclude your Snap in certain territories. This functionality has been ported to improve the publisher experience on snapcraft.io. Part of the work is an implementation of a multi-select picker with filtering capabilities, that will be proposed to upstream Vanilla soon.

Add licences for publishing snaps

The multi-select component also enabled us to implement Snap licences on the new Snap settings page for publishers. When choosing a license you have the option to provide a simple list of licences or a more complex SPDX expression, allowing publishers the freedom to pick the right licence for them.

Storefront visual refresh

Snapcraft.io suffered large page sizes that we’ve mitigated by using [Cloudinary](https://cloudinary.com/) to serve our images at various sizes and optimisations. This change alone has shown between a 13.5% and 9% decrease in page size.

 

Web

18.10 work has begun. We have built the takeover for 18.10 and added the new 18.10 download buttons across the site.

We build two new takeovers – Fingbox and AI webinar. Including an improvement to the takeover selection based on language. If we have takeovers for other languages we now use the clients preferred language to display it instead of geolocating.

MAAS

The design team have working on improving the action menu which is the menu in the top right of the page header. The menu now shows all actions and disable actions that are not available with the currently selected machines. The action list has also been grouped into logical sectors based on the actions they perform.

RBAC

Settings wireframe has been updated with the feedback from testing and engineering. The audit logging page has been wireframed.

Base

Unfortunatly Will has left the team and so we have been working on handing over all project details, including the demo service and Shopify adaptor. We have continued work on the Shopify adaptor recharge feature.

The base squad have performed a number of improvements to the web teams demo service. Which is the service that builds demos of branches when proposed for merging to master. One major improvement is that demos now rebuild when there is a new commit to a branch.

Vanilla

The Vanilla designer has working through all partner logos. Scaling and resizing them to a size that reprosents them evenly.

We have developed a script to analyse each individual components and check for the size of the generated CSS and report across a number of aspects such as number of selectors, use of !important, etc.

A new pageination component has been designed and developed. The original version just stepped back the forth but you can now paginate through a number of pages more quicky.

A design improvement has been drawn up for manpages.ubuntu.com. The spacing and text has been given some more space to breath with new headers across the site to bring the styling inline with our more modern sites.

Brand

In this iteration, we designed a booth for the IoT World Congress 2018 event, one of the worlds leading IoT events, which takes place on the 16th-18th October in Barcelona. In case you can’t make it, here is a rendering of our booth:

Furthermore, we started our exploration of the branding of our websites. We aim to make them feel more exciting than they currently do, and we have discussed lots of ideas around new illustrations, imagery, and iconography. Stay tuned!

We also got started on developing the Snapcraft branding a little further, exploring different styles we can incorporate into the website, infographics, case studies, and printed documents. We are transferring our development ideas into a new Snapcraft infographic, which will be released soon.

About the author

Anthony Dillon is a Lead Web Developer in the web and design team. The team is responsible for all websites and tooling across Canonical. Anthony loves to create beautiful things and push the boundaries of the web.

More articles by Anthony

Posted in: