Morgan Stanley: Mobile App
October 2016 – November 2016
Morgan Stanley hired me to develop an abstract iconography system for their mobile app buttons on iOS and Android. Each icon is defined by a symbol and color accent unique to its purpose.
Creative Direction: Ki Kwon
System Construction & Guidelines
Icon gradients were created using Morgan Stanley corporate brand palette. Existing brand colors were infused with extra saturation and vibrance helps the icons feel at home on the latest versions of iOS and Android and stand out on modern display technologies.
Hidden containers within the icon buttons prevent the logotype or icons from running too close to each other or too close to the button’s edges. A flexible, scaling grid system was created to accommodate various pixel dimensions and the corner radius of icon exports.
Two main components are created by the grid; the logotype baseline and the icon container. The logotype rests cleanly on the logotype baseline. The baseline is located above the icon to optimize for legibility, and icon “heaviness”. Stroke icons should be placed in the center of their containers, but should be adjusted optically for balance.
Concepts & Iterations
Many iterations and revisions were made before landing on the final designs. Below are some of those concepts.