Loading...

OS DESIGN STYLE PHILOSOPHY FOR VISUAL PATTERNS AND INTERACTIONS

While working for Ubuntu I had to develop and work on creating design styles to work across the operating system so that the design had consistency. The main design philosophy around Ubuntu was the use of the art of origami, the whole operating system revolved around a paper type metaphors, everything had to reflect a hint of this in both the platform and the applications.We referred to this style as ‘suru’ which has been derived from a Japanese term meaning the art of origami.

USE OF PAPER ORIGAMI FOR BACKGROUND

All apps and platform was using a hint of paper in the background to give the OS consistency in the design

 

USE OF DROP AND INNER SHADOWS

The use of drop and inner shadows was to communicate hierarchy and show hints of paper. The inner shadow reflects paper cuts underneath and the drop shadow indicates paper laying over the top

HINT, REVEAL, COMMIT

This was a pattern used in most apps. For example using the phone bottom edge the meaning of the hint was to indicate to the user that there was something to invoke. The reveal shows the user what happens, the commit is where the next screen has come into full view.

EXAMPLES OF OS ELEMENTS & PATTERNS

Below you can see examples of patterns used in some of the phone & tablet software i.e: colour, widgets, buttons, etc.. that was mimicked in applications and platforms in the OS.

DRAWER FOR HEADER

The drawer for the header was one of the main features for the phone this allowed the user to access navigational features such as the option menu and the core category menu.  Below is different layouts that was experimented with

 

PROGRESS BARS

On the right is an example of how progress bars work in the software. There is three main use cases 1. determinate progress bar which give the user feedback into how long is remaining, 2 indeterminate progress bar which shows hints of feedback in the bar 3. activity indicators which is an unsure amount of time

DROP DOWNS

The drop down included 2 main use-cases of how you can access the option selector 1 using a separate menu for the options or using a combo button feature which allow multiple use cases.

WORKING WITH DEVELOPERS TO BUILD INTERACTIONS

Below I have shown a slider with examples of some of the specs I have created for the transition interactions. I developed specs for almost every interaction that was on the phone and worked along side developers to guide them through the process of creating a working example.



 Previous  All works Next