LinkedIn Mobile: Navigation Interactions


These navigation interactions were created to solve a specific problem. Our icons are primarily outlined and filled when selected. Becuase of the way the icons were structured, the filled icons were not simply just a filled version of the outlined style. This meant that when selected, the icon style switch was rough and unpleasing to the eye. My solution was to use a radial mask effect that mirrors our button interaction patterns and create a buffer between the icon transition, so that the user no longer experiences the disconnect.