Project duration: 3 months (June 15 – September 15, 2018)
ln this case study, we explored a proof-of-concept initiative aimed at finding a way for feature-rich apps to include a large number of flat icon elements without the concern of having to include not only a large number of different icons, but the variously sized versions for different screen resolutions and any need for having the same icon in a variety of colors.
Provide an elegant solution to reduce the risk of iconography in a feature rich app having such an impact on total file size.
To ascertain a baseline understanding of how iconography use in a mobile app affects the total file size of the app itself, we examined a wide range of apps that have a differing amount of icon use.
“Do you find that apps which use icons make it easier to use the app and improve the experience?”
Factoring the large number of device manufacturers across all OS types with a variety of pixel densities (screen resolutions), multiple versions of the same icon need to be included in the installation package…more so if there is a need for different icon colors.
While the need for the use of iconography in mobile apps varies from app to app, the impact on total file size is a consideration. In apps that only require the use of a few icons, the impact can be negligible, while feature rich apps can see a significant impact on total installation package size. Our solution was to create custom vector icon fonts, which even the most robust font files are relatively small in file size. A developer would only need a few lines of code to implement within any app. As with text, the icon font will allow any icon to be displayed at any size and in any color.
Why would a developer use iconography in an app? While more simple apps may not need to use any iconography, it is often a benefit to the overall user experience to use an icon as a visual representation of an action or feature. Icons can not only represent organizational concepts such as categories, but with the use of color they can also indicate status, such as warnings, priority, etc.
The use of iconography in a mobile app is a consideration of both preference and user experience. There is a strong case made for their need, especially in a feature-rich application. Traditional use of image files, such as PNG files and the need to account for the wide range of pixel densities, their impact on app file size can be significant. Through the use of a simple vector icon font one can drastically reduce the overall file size of both the installation package and post-installation impact on device space required. The added benefit of being able to display the icon font icons in any size and any color makes this solution an absolute win.