Unifying a Visual Language
How do you take a myriad of iconography that was designed by several people over the course of a couple of years and make the entirety of all icons feel like they are from the same hand? Simple. Pull them all into one space and begin making angles, strokes, and similar shapes be the same. Sometimes though, it requires you to rethink the several designs and create something new.

Solving Production problems
Once everything was designed, one question came to mind, "What now?" They could simply be PNG's and I could have created multiple color sets depending on where they were used. But that becomes a logistical nightmare when you have to make edits. The solution was to design an icon font so that it could be scalable and have the ability to change color through CSS.

Some of the icons not included in the final project may be purchased at https://thenounproject.com/markshorter/

Art Director / Graphic Designer: Mark Shorter
I always begin by creating pen-to-paper sketches... sometimes its in my Dot Grid Journal, other times its on Post-It notes. This way, they marinade and I can easily set the over-arching visual direction before I begin creating a vast army of icons.
Here is a sample of the icons designed in Adobe Illustrator that is base-16. Some are designed to be used with specific calls to action, while others are used inline with copy. My vision was to create something that would unify all of our designers with a standard set of icons for both print and digital media.
Categorizing the icons, allows users to quickly find the icon they need. Some icons are copies of others with the sets and were designed to work as larger, more independent icons, but when scaled, appeared to hae the same stroke weight.
An 11x17 printed and digital version that I distributed to my team so that when we discussed icons for projects, it would 1) help those conversations move faster, 2) when we created new icons, we would have a baseline standard for comparissons and a mechanism in place to prevent duplicate work, and 3) it would help non-design oriented groups to better visually understand how we might incorporate icnography into a project.
I created over 300 icons that included the following categories:arrows, charts and graphs, document types, media controls, user specific actions, layout and forms, hospitality, devices, content editor, social media, and financial. Obviously, several icons, like email, the play button, social media, etc. I don't take credit for, but I did redesign them slightly to have consistent strokes and weight so that they would work very well with the J.P. Morgan brand while at the saem time matching the entire library.

Icons Available for Purchase
Some of the icons not included in the final project may be purchased at https://thenounproject.com/markshorter/
Icon Designs
252
805
4
Published:
Mark Shorter's profile
Mark Shorter

Owner

Icon Designs

Here is a pretty large set of icons that I have designed and unified to be on-brand with J.P. Morgan apps and websites. Originally, they were to Read More

252
805
4
Published: