icon set
collaboration and deliverables
project overview
This ambitious project required the production of hundreds of icons for iOS, Android and desktop web. The associated app would be a control interface for whole home automation, integrating the services of many third-party apps such as Spotify, Nest, Hulu and others. The decision to create sets of icon size buckets was the result of a deep collaboration between the design and engineering teams.
my contributions
One of my first tasks was classifying icons according to use case. Categories included navigation (iOs and Android), media control (pause/play etc), service (Spotify, Nest, Hulu, etc). Through conversations with the design and engineering teams, I was able to determine several sizing buckets which would streamline production and delivery while also grouping icons of similar size and optical weight inside a common rectangular padding. Delivery of iOS icons would be in a PDF format while the Android development team required PNG's in a variety of resolutions. Many icons were added or iterated during the course of the project. I was able to implement an automated icon export and delivery system for both the iOS and Android engineering teams while maintaining a single set of master icons.
careful organization and planning is shown in this page from my notebook
leveraging Sketch App to automate icon export
This icon would appear in the app at three different sizes according to which module it was used in. Each size needed an iOS version delivered as a PDF, a web version delivered as an SVG and an Android PNG version delivered in five resolutions (based on screen density of device). Each row of the horizontal grid is 12px high and this grid was used for alignment throughout the app. Padding was built into each icon for proper alignment. The team initially prototyped screens in Photoshop. I advocated the use of Sketch App for it's flexibility in export functions which were not yet available in Photoshop.
icon library organized by use and bucket size
i created and maintained an icon reference library used by the design and engineering teams
the icon reference library helped avoid confusion, especially in a case like these similar triangle icons
