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.

Instagram

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.

iOS Icon Grid Template

iOS Icon Grid Template

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.

Eagle and Icon Grid

Eagle and Icon Grid

 

Tagged on:                 
%d bloggers like this: