Nicki Stearns | Mix Iconography
16720
portfolio_page-template-default,single,single-portfolio_page,postid-16720,ajax_updown,page_not_loaded,,qode-title-hidden,qode-theme-ver-16.8,qode-theme-bridge,qode_header_in_grid,wpb-js-composer js-comp-ver-5.5.2,vc_responsive

MIX ICONOGRAPHY

Icons for the short-lived Disney’s Mix chat app.

OVERVIEW

In early 2016, myself and another designer were apart of a “Mix” app summit held at the Kelowna Studios. During this summit, several game designers, product designers, producers, studio leads, and project managers worked together to solve issues within the Mix app.

 

As part of my role in this summit, I created an icon set specifically for the Mix app. Later I used this same style to create the overall iconography for the Club Penguin Island app and website.

DisneyMix-Logo
2016

ICONOGRAPHY

Illustrator

1.0 › Introducing the ‘Squircle’. Not a circle, not a square.

CONCEPT

During our time consulting on Mix, we worked to create UI concepts, experience prototypes, and themed skins for the app. Even though Mix was a short-lived project, the overall style I created for the iconography lives on within the Club Penguin Island brand.

 

One of the central components of the Mix app was the concept of an avatar head as your character. To mimic this block shape, I started by designing icons with a square shape. Over time this started to felt too rigid and hard. So I began to explore various softer shapes to create icons out of.

 

Since the Mix heads were very animated within the app, they would often squish and expand when bouncing in their idle animations. This idea of a squishy, soft block helped me create the ‘squircle’.

 

The ‘squircle’ is not a square, not a circle, but a mixture of the two. The mashup of ‘square’ and ‘circle’ is what gave the ‘squircle’ it’s name. This same shape was later carried into the Club Penguin Island app.

 

Within the iconography, I tried to either maintain the ‘squircle’ shape within an element or use the ‘squircle’ shape to create the curve within the icons.

2.0 › Final set of icons.