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

MS icons squarespace-01.png

Color

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.

 
 
msicongrid.png

Grids

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.

 

 
Matrix Icon Concepts

Matrix Icon Concepts


Wealth Management Icon Concepts

Wealth Management Icon Concepts


Research Icon Concepts

Research Icon Concepts