Mobile Zone is brought to you in partnership with:

Vladimir is a DZone MVB and is not an employee of DZone and has posted 21 posts at DZone. You can read more from them at their website. View Full User Profile

Demystification of the iOS 7 Icon Grid Design

06.21.2013
| 13176 views |
  • submit to reddit

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, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)