Skip to main content

Your submission was sent successfully! Close

Thank you for signing up for our newsletter!
In these regular emails you will find the latest updates from Canonical and upcoming events where you can meet our team.Close

Thank you for contacting us. A member of our team will be in touch shortly. Close

  1. Blog
  2. Article

Canonical
on 12 June 2015


Last week the SDK team gathered in London for a sprint that focused on convergence, which consisted of pulling apart each component and discussing ways in which each would adapt to different form factors.

The SDK provides off-the-shelf UI components that make up our Ubuntu apps; however now we’re entering the world of Unity 8 convergence, some tweaking is needed to help them function and look visually pleasing on different screen sizes, such as desktop, tablet and other larger screens.

To help with converging your app, the Design Team have created a set of predefined grid layouts screen targets: 40, 50, 90 GU (grid units), which makes life a lot easier to visualize where to place components in different screen sizes.

Scheduled across the week were various sessions focusing on different components from the SDK such as list items, date and time pickers; together with patterns like the Bottom Edge and PageStack. Each session gathered developers, visual and UX designers, where they ran through how a component might look (visual), the usability (UX) and how it will be implemented (developer) on different form factors.

Here’s the mess they made…

Main topics covered:

– Multi-column layouts, panel behaviors and pagestack

– Header, Bottom Edge and edit mode

– Focus handling

– List item layouts

– Date and time pickers

– Drop-down menus

– Scrollbars

– Application menu

– Tooltips

 

Here are some of the highlights:

 

  • Experiments and explorations were discussed around how the Bottom Edge will look in a multi-column view, and how the content will appear when it is revealed in the Bottom Edge view. Also, design animations were explored around the ‘Hint’ and how they will appear on each panel in a multi-column layout.
  • Explorations on how each panel will behave, look and breakpoints of implementing on different grid units (40,50,90).
  • A lot of discussion was had around the Header; looking at how it will transform from a phone  layout to a multi-column view in a tablet or desktop. Currently the header holds up to four actions placed on the right, a title, and navigational functions on the left, with a separate header section underneath that acts as a navigation to different views within the app. The Design Team had created wireframes that explored how many headers would appear in a multi-column layout, together with how the actions and header section would fit in.
  • Different list item layouts were explored, looking at how many actions, titles and summaries can be placed in different scenarios. Together with a potentially new context/popover menu to accompany the leading, trailing and default options.
  • The Design Team experimented with a new animation that happens during a focused state on the desktop.
  • The new system exposes all the features of a components, so developers are able to customize and style it more conveniently.

Overall the convergence sprint was a success, with both the SDK and Design Team working in unison to reach decisions and listing priorities for the coming months. Each agreed that this method of working was very beneficial, as it brought together the designers and developers to really focus on the user and developer needs.

 

They enjoyed some downtime too…

Arrival dinner at Byron Burgers

 

Out in Soho

Wine tasting in the office (not a regular occurrence)

 

Related posts


bethcollins
17 March 2022

How we implemented an interactive Live Demo Box

Design Article

The Vanilla squad recently spent a two week sprint prototyping an interactive live demo box. We were tasked with coming up with a proof of concept, to enable demoing of each variant of our examples dynamically. A few guest developers were able to joined us, which meant four of us were able to dedicate a ...


Marina Castejon
20 January 2022

Accessible by design: How we are designing for accessibility at Canonical

Design Article

In this blog post, I will talk about some of the most important considerations when it comes to building UIs that are accessible by design and how we are approaching this challenge at Canonical to continuously improve the accessibility of Vanilla, our open source design system and CSS framework. Background When I joined Canonical in ...


Bartek Szopka
10 January 2022

Release of Vanilla framework v3.0

Ubuntu Article

We’ve just released Vanilla v3.0 – a new major update to our CSS framework. It includes a few significant updates and improvements around spacing variables, responsive breakpoints, a new expanding search box and various updates to existing components. Important aspects of the release include dropping a noticeable chunk of deprecated style ...