iOS App Icons Designed With The Grid

ios app icon flat style

When iOS 7 (and now, iOS 8) made its debut, along with a complete UI overhaul using a flat visual design style, a new app icon grid was revealed. This framework, called by some the “Jony Ive Icon Grid,” made up of both a central circular element set and parallel and diagonal straight line elements, works to provide a supportive set of, literally, guidelines for icon designers. The goal of these guidelines was to create a more harmonious appearing homescreen for iOS devices.

The images in this blog show some recent icon designs by me here at DougITDesign. The top left icon was an iOS 7, flat-styled re-design of the original Atomic Web Browser icon (which I also designed, back when heavy shading, shadows, gloss and whatnot was popular). Unfortunately, the developer abandoned the app before iOS 7 came out. The bottom left icon is for a multi-language chat app called “OneTongue.” The bottom right icon is for a future chat app for alumni of some specific liberal arts colleges. The top right icon was for an iOS niche keyboard app titled “Penquills.” With a funny app title and a bad original concept, the developer approached me to create a graphic representation of a “Porcupine” to represent the “quill” in Penquills. (I did not design the current Penquills icon-the developer went with a stock art option and borrowed my approach for a more practical metaphor representing the pen quill, obvious as a ‘bird feather’ may have been. I think my porcupine was cool and provided what the developer originally asked for. In its abstractness, this icon could be a number of other animals, but works best as a porcupine. This icon also fits into the app icon grid in a unique and precise manner, which was done purposely).

ios app icon designed with grid system

The iOS app icon grid is a nice helper tool. However I have found this grid system, along with many other visual design grids and frameworks, somewhat redundant for someone with a “good eye.” Two of the designs above were completed before I overlaid the grid on top of them, and guess what…they almost perfectly fit into the “Jony Ive App Icon Grid” without even using the grid in the first place. Like I said, in visual design, a seasoned and trained person with a “good eye” is like having a built-in grid system.

Design grids for visual design are not as technically necessary as a grid/framework system for coding a websites with responsive design such as Bootstrap or Foundation, where every pixel, point, percentage or EM really does matter and making changes or updates can be more difficult than opening up a PS or AI file. But these types of visual design grids are a nice backup as well as providing a validating mechanism for the symmetry and balance of any iOS app icon design.

Share on FacebookTweet about this on Twittershare on TumblrShare on LinkedInPin on PinterestShare on Reddit

This article has 3 comments

Leave a Comment

Your email address will not be published. Required fields are marked *