I thought I’d share how to build the iOS Icon Grid by way of a simple animation. This is the same method that is described step-by-step in the book ‘Icon Design‘.
Phi – Golden Ratio
Phi (golden ratio) plays an important role in the iOS Icon Grid. The golden ratio is generated by using the Pentagon Progression.
In addition, the related proportion ‘√2’ (square root of two) is generated by using the Square Progression.
Icon Grid
Watch the whole video to see how easy it is to create this icon grid. I hope this animation provides you with some useful insights into Apple’s icon grid system, the role geometry plays in creating these grids, and the Golden Ratio.
The animation is the best way to see how easy it is to use simple geometry to create icon grids. You don’t need to do any calculations. By using a combination of squares, circles, pentagons and hexagons, you can create a range of useful icon grids, just like this one for other iOS icons, tvOS icons, Mac OS icons and Watch OS icons. You can also use a compass and straight edge to replicate the steps in the video. These icon grids form part of a grid system.
iOS Weather Icon & Grid
Here is a similar animation showing how to build the iOS 7 Weather Icon using circles, pentagons and the golden ratio.
Design By Geometry is now on Instagram. This is where I am placing icon and logo designs on a regular bases. Keep an eye out for my next post here where I will feature some of these new designs.
Affinity Designer
I now use Affinity Designer for a lot of my work. The grid below, which is the basis for the animation was designed with Instagram’s requirements in mind. That is, the grid is set to 1000 x 1000 pixels on a canvas set to 1080 pixels by 1080 pixels. The golden ratio was used to resize the grid for presenting smaller icons and logos.
While it looks complex, each grid is grouped and can be hidden from view. There are a number geometric progressions that are not displayed above.
Example
The following picture is of an eagle that was proportioned using the grid. Originally hand drawn on a regular grid, I used the golden ratio to set the relationship between the width of the lines and the space between the lines.
Hmm, except that Apple seems to use a ratio of about 1.634345 instead of the usual 1.618034 for the golden ratio?
My current best match for Apple is with phi = 1.627406
Thank you TH for asking.
Apple’s icons do correlate with a number of ratios; not just the golden ratio.
Apple’s iOS icon grid expresses two distinct ratios as a result of its geometric construction; one is the golden ratio (1.618… : 1) and the other is the root-two ratio (1.4142… : 1)
The proportions used in many of Apple’s icons depends on the symmetry system of what is depicted.
For icons based on 3-fold symmetry like the system preferences icon, the root-three ratio (1.732… : 1) correlates well. The iOS weather icon correlates perfectly with the pentagon progression. The pentagon progression expresses the golden ratio many times over.
Apple appears to combine ratios as evidenced by their icon grid. The thing to remember is the iOS icon grid is not the grid system that Jonathan Ives spoke about when he introduced iOS 7, it’s just one manifestation of the grid system.
Do you have an example of the ratio you mentioned that correlates with an Apple design?