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.
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.
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.
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.