Tumblr Explore Icon
The following project is the exhibition of an update and re-branding of Tumblr’s “Explore” icon, wherein multiple variants of the icon and its subsequent micro-interactions have been developed, whilst keeping in accordance with the vibrancy and quirkiness that keeps Tumblr unique as a social media.
Final Icon
The final icon, whilst different in many ways, attempts to retain the same atmosphere as the original by staying true to the concept of the compass. As the Explore Icon serves as a gateway to the worlds of content that is Tumblr, it felt necessary to reflect this through the interaction with the icon itself, and so the concept surrounding this icon, is that of excitement and vibrancy.
Process Work
Shown above are the development stages of the re-branding for the icon; these hand rendered sketches were constructed from the already existing design, precedent and original self conceptualized ideas. These ideas were exposed to different styles of icon design in order to achieve a diverse variety to better the final selection.
Story boards
The micro-interaction consists of an exaggerated yet traditional compass movement; the two diamonds rotate while increasing in size then dispersing to form and expansive motion.
The staging effect of this animation depicts the compass in a more radar like approach; the pointer needle becomes attracted to what is seemingly treasure and thus stops in position and snaps together to form a diamond indicating that rewards have been found.
Exploration is not limited to this earth and therefore this micro-interaction illustrates a compass guiding one in an outer space environment where a star is found, signifying a from of treasure or a destination.
Mockup
The depiction on the left displays Tumblr with the old explore icon, located upon the top-bar of the screen. Upon the right hand side the updated explore icon is exhibited, also located on the top-bar.
Final Micro Interaction
