Over a million developers have joined DZone.

Demystification of the iOS 7 Icon Grid Design

· Mobile Zone

There's been a lot of talk last week about the Apple iOS 7 and the icon design. 

Many designers are offering their own icons solutions and redesigning the default iOS 7 icons and I have an impression that The Grid System itself is very little discussed and analyzed.

I think that iOS 7 grid system it is a masterpiece. 

I also think that grid system is poorly used by Apple, the default iOS 7 icons are lacking consistency and contrast (probably the Apple will change that in the future).

The grid system can probably best understand by starting with the biggest 1024px x 1024px icon, I will use that size like default measure.

The grid system is basically based on 64 x 6416px x 16px square blocks.

The circles dimensions are based on Golden Proportions

You can see on the picture how the rectangular 512px x 320px with golden golden ratio is used for the calculation of the circles.

I played with the Golden Ratio and various Grid System for years and my personal believe that the iOS 7 grid system is meaningful and very well designed.

I've used Photoshop to replicate the icon and grid design, the grid is made with Photoshop Guides (View > Show > Guides). I tried to make everything as px perfect as possible. If you have any suggestions let me know.

>>Download the Photoshop file here

Free for personal and professional use.


Published at DZone with permission of Vladimir Carrer , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}