How Jony Ive’s iOS 7 Icon Grid Matches Up Against Real Apple Products [Image]

gqVkI26

With iOS 7, Jony Ive designed an icon grid that was meant to give developers some guidance on how to proportion their icons so they would look “harmonious” on the new iOS 7 homescreen.

As you can see above, though, Jony Ive has been using a similar mental grid to design Apple’s physical products for a long time. As Reddit user Kepano notes, however, Ive has probably not used this grid as a precise guide to design in the past.

“In my opinion as an industrial designer this image suggests that there are some intuitive similarities between all of Ive’s designs but that the iOS7 icon grid is probably the first time he’s defined those proportions so strictly. The fact that certain shapes match so closely (e.g. the width of the donut shape on the iPod) is probably not a coincidence but a matter of taste. What the image doesn’t show is that these products have radically different dimensions which is why the corner radii are very different from one another.”

  • goodvillenews

    so, they will replace them with rather not ugly one?

  • ridwan47

    The icons are ugly no matter how they spin it…. The grid is totally unnecessary… it imposes restriction on design… :/

  • dpacemaker

    I’ve been using the Beta since it was released. It’s on my iPhone 5 and I think the icons look good. At first they were strange, but seeing them on the Retina screen they look really good. The only bad ones are GameCenter, Messages, and Phone. The last two are just too neon greenish and are too bright. The rest look good, and so far for me the beta has been really smooth. One of the smoothest Betas I’ve ever used. I’m looking forward to all of the upcoming features we have yet to see in beta.

  • ridwan47

    I’ve been using the Beta since it was released. It’s on my iPhone 5 and I think the icons look good. At first they were strange, but seeing them on the Retina screen they look really good. The only bad ones are GameCenter, Messages, and Phone. The last two are just too neon greenish and are too bright. The rest look good, and so far for me the beta has been really smooth. One of the smoothest Betas I’ve ever used. I’m looking forward to all of the upcoming features we have yet to see in beta.

    What about Safari, Camera, Notes, Settings icon ? Are they beautiful too ??

    These icons looks like a very bad jailbreak theme….

  • originalp

    The grid is fine but the icons themselves are ugly, specially Safari, seen much better ones online!

  • CharilaosMulder

    The icons are ugly no matter how they spin it…. The grid is totally unnecessary… it imposes restriction on design… :/

    It imposes guidance resulting in mentally pleasing proportions and – as said by jony – in a more harmonious look across all icons on the home screen. If there are no restrictions on designing things that go together, nothing but chaos will be the result.

  • Tyler Allen

    Fine Apple do all the “damage contra” you can! The Icons are still tacky as can be! some go light to dark. some dark to light. Just ugly to the core!
    They look like they were designed for a 13 year old girl.
    Why do a majority of people like them? because all females will! It looks feminine!
    No working man will like these! sure the sugar in the tanks will as well and that will account for the majority…
    So if apple your goal was to make a phone for females and the flamboyant gays, then well congrats you succeeded!
    I’d say these icons go with a grown man like mike tyson’s voice!
    I can’t wait till ios7 is jailbroken so i can make my phone look likes it made for a man again!

  • chrisheath

    The two most obvious proportions inherent in this grid are the golden section (1:1.618…) and the square root of two (1:1.4142…). If you know how to use these proportions geometrically (a compass and straight edge will suffice) you can match them perfectly to the size and placement of all the elements in an Apple designed iOS 7 icon without too much effort.

    It’s a cleverly constructed grid, but don’t get too hung up on it. The secret to using it is in knowing how to extend it, or should I say divide it up using the ratios I mentioned. If you are capable of doing this, then you can make the grid’s constraints work for you, leading to plenty of scope for variability in your final design. Some designers see the geometric constraints as a straight jacket, but on the contrary, it can become a springboard for creativity if you know how to use it.

    If you try to divide it up like a familiar grid made up of equidistant lines, you’re heading down the wrong track. You may also be interested to note that the rounded edge of the icon mask is not a quarter circle. The golden section is also at play here.

    Over time, as more and more icons are designed in accordance with the grid (assuming designers get to grips with how to extend it geometrically), it will be hard to go back to the current state of affairs in iOS 6 and earlier, where anything goes as far as icon design is concerned. iOS 6 and earlier will eventually be looked back on as the Wild West of icon design.

    The constraints of the colour pallet, the simplicity and reduced use of 3D, and the need to reuse some icon designs within an app ( this dictates whether the icon will be a pictogram ) are considerations that have been well thought out. It has resulted from a process of thoughtful reduction (simplification), removing redundant whimsical effects where they add no value, and building a design language that can be used across the whole interface. The more I see of iOS 7, the more I realise that no stone has been left unturned when it comes to unifying the user experience. I’m looking forward to using it.

About the author

John BrownleeJohn Brownlee is a Contributing Editor. He has also written for Wired, Playboy, Boing Boing, Popular Mechanics, VentureBeat, and Gizmodo. He lives in Boston with his wife and two parakeets. You can follow him here on Twitter.

(sorry, you need Javascript to see this e-mail address)| Read more posts by .

Posted in News, Top stories | Tagged: , , , , , |