Illustration In Motion -Micro-interactions

•

MICRO-INTERACTION DESIGN

THE BRIEF

We were asked to update and re-trend the graphic aesthetic of a current social media icon as well as develop three different micro-interactions as illustrated by any of the twelve principles of animation. The icon has to communicate or trigger a reaction, accomplish a task, adjust a setting, view a piece of content or turn a feature on and off.

T H E F I N A L I C O N

We chose to update the Instagram DM icon (also known as the 'share' button). As per our research we discovered that Instagram takes their anti-bullying policy very seriously (as one should), hence we gave the DM icon a twist by merging it with the heart icon. The concept behind doing this was to illustrate that when the user receives a DM, it's as if they've received 'love'.

P R O C E S S W O R K

Above are various icons which we initially started with. The idea was to merge the heart icon with the Instagram DM icon (the paper-plane).

Pictured above are the physical paper cut-outs used to create the shape used for the final icon.

Above are some more variations of illustrations of the heart merged with the paper plane.

P O S E - T O - P O S E S T O R Y B O A R D S

Micro-interaction using a gradient which loops around the solid DM icon we've created when the user receives a direct message. The communication behind this interaction was so that it seems like the plane is hypothetically following a certain flight path.

The micro-interaction displayed in the storyboard (pose-to-pose) above goes from being a solid drawing of the icon we've created to state-changing into a heart, and then rotating to stand on its point.

The message the micro-interaction above tries to depict is that of a ringing bell. The motion of the DM icon swinging back and forth is meant to trigger an action from the viewer to view their message and to alert them just as a bell would.

T H E F I N A L I C O N V I W E D O N I N S T A G R A M

On the top left is an image of what the Instagram DM icon and share button used to look like.

On the top right is an image of the Instagram home page viewed showcasing the UPDATED DM and share button icon. We changed what used to be just a paper plane into a solid illustration of the plane merged with a heart.