menu
ICON DESIGN + TOOLS

Maraschino

ROLE: Designer/Prototyper
DATE: Sep 2015 - Jan 2017
CLIENTS: Amazon, BlackBerry, Concur
TOOLS: AI, jQuery, JS, HTML, CSS
The Challenge

When working with icon fonts, finding the right glyphs for your project can be time consuming. There can be 500-1,000 icons to browse on a web page or static "cheat sheet". If you want to make changes to any of the icons, you also need the vector graphics or native files used to generate them - hunting for these often consumes more time and effort. I see this both as a challenge and an opportunity to improve the app development experience.

Project Maraschino - Genesis

Maraschino is a web app to help cherry pick the right icons for your project. It's build with popular icon fonts and based upon JSON data. Each icon has been assigned a unique ID number, common name, keywords, and categories. These provide hooks for the web interface and enable features like browsing by category or keyword search. Of course, the CSS codes are included so this also serves as a handy reference tool for designers and developers.

Staying Organized Saves Time

One of the most important features of Project Maraschino is the ability to save a short list of "My Picks". As you can see, each item has the actual glyph, ID number, icon name, and CSS code. This helps speed better communication because icons can be referenced by name and number. (Before, we only had the CSS codes - which are hard to speak aloud.)

Creating Tools for Concur & Amazon

At Concur, I encountered icon libraries for a variety of travel apps. They were stored on various machines throughout the organization. There were also a mix of icons that had been created in-house, and those from a consultancy. The native files were missing - adding to the challenge of unifying or extending the existing set. Together with one of the developers we reverse engineered the icons (working backwards from SVG to vector graphics). Next, I resized the icons and organized the native files so that each glyph was neatly aligned on its own artboard. (This ensured they were all the same weight/size and were easier to export.)

As part of this work, I wrote a plugin for Illustrator that speeds the process of distributing icons in various sizes across artboards. With just a couple clicks, you can export all of them in the right sizes, in seconds. This saves hours of production time resizing and exporting graphics.

Beyond icon design and production, I've also created a framework (based upon Project Maraschino) for locating and specifying icons. At Concur, I created a project called "BlackCherry", and it provided a "single source of truth" for the travel teams.

At Amazon, I built a tool for creating and downloading app icons, called the Icon-Maker. This removed a common barrier to publishing and thereby increased the number of published skills.

Maraschino: "My Picks" My Picks List

Organizing Icons in Illustrator Concur Icons

BlackCherry: Icon Library App Concur Library Tool

Illustrator Plugin Demo

 
© copyright myers design 2018