Does anyone understands a thing about this so called grid system for the icons in ios7? When I look at the new icons I can't see a lot of lines lining up with the lines from the grid system. And if they happen to do, it seems more like a coincident than an actual design choice. It looks as if they thought: If we just draw enough lines in the grid system, then there will always be something aligning to any of these lines.
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Grid System?
- Thread starter dsdevries
- Start date
- Sort by reaction score
Why would they have talked about it in the iOS 7 design video if it was just a coincidence and not a design choice?
Perhaps to make it sound like something they gave a lot of "scientific" thought to, even if they didn't. To make it seem that much more "refined" and therefore "good" and "cool" right away just from the sound of it all. Marketing.
While that's possible, I think they actually did attempt to design the icons based on a grid system, but whether they did so to the extent they say is debatable.
I would say that is likely the case. Marketing and all that played (possibly even a big) role, but there was probably some design logic and work that was part of it as well. Too bad they didn't even quite execute following their own design decisions all that consistently/well when it comes to different icons that they have for their own apps.
Since we're talking about the grid system, I thought some people would be interested in this. I was intrigued about it since I first seen it. I was recreating it in Illustrator to try and understand the thought behind it. Here are a series steps of making the grid from what I seen.
The new shape is no longer a rounded rectangle, it's a superellipse. This shape can be made by starting with a circle and dragging the asymptotes to the edge of the shape's bounding box. I quite like the shape, with a rounded rectangle, the circles that make up the corner are very noticeable, this is a more subtle shape.
The outer circle is positioned to match up with the mid-point of the corners, where the corners change directions. I guess you'd call it the inflection point.
Then, the golden ratio is used to establish the vertical and horizontal lines here.
The inner circle matches up with the inside of the square that's created by the vertical and horizontal lines, and the outer circle matches up with that same square but from the outside. And then the diagonal lines appear, although they could have been on the very first image.
They might even conform to Apple's hardware, and considering that Jony is the designer of both, perhaps he is just adopting grid systems for software from ones he's been using for hardware.
Some of the icons don't seem to conform to the grid at all, like the camera icon maybe. I might superimpose the grid over all the icons to see if they somehow match up. Anyway, I like this sort of stuff.
The new shape is no longer a rounded rectangle, it's a superellipse. This shape can be made by starting with a circle and dragging the asymptotes to the edge of the shape's bounding box. I quite like the shape, with a rounded rectangle, the circles that make up the corner are very noticeable, this is a more subtle shape.
The outer circle is positioned to match up with the mid-point of the corners, where the corners change directions. I guess you'd call it the inflection point.
Then, the golden ratio is used to establish the vertical and horizontal lines here.
The inner circle matches up with the inside of the square that's created by the vertical and horizontal lines, and the outer circle matches up with that same square but from the outside. And then the diagonal lines appear, although they could have been on the very first image.
They might even conform to Apple's hardware, and considering that Jony is the designer of both, perhaps he is just adopting grid systems for software from ones he's been using for hardware.
Some of the icons don't seem to conform to the grid at all, like the camera icon maybe. I might superimpose the grid over all the icons to see if they somehow match up. Anyway, I like this sort of stuff.
Grid System
iOS 7 Grid System Icon Template is a free Template design resource made by Dribbble user Simon Grozyan. As far as I can tell, its license is Unknown.
Helpful hint: Dribbble users are nice. If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Ask nicely and they will probably allow you to use it.
iOS 7 Grid System Icon Template is a free Template design resource made by Dribbble user Simon Grozyan. As far as I can tell, its license is Unknown.
Helpful hint: Dribbble users are nice. If the license is unknown, it is usually because they forgot to mention it explicitly; not because they were being stingy. Ask nicely and they will probably allow you to use it.
????? I think OP is talking about the official grid....which Simon Grozyan remade right??
I like the idea of a grid, based on golden ratios, which each icon conforms to. My problem is that the new icons don't really seem to do that consistently at all. This post shows that in an illustration on mid-page:
http://www.baekdal.com/opinion/fixing-the-ios-7-icons/
The author of that post proposes alternative designs, which I don't care for either. But the point is, that he shows how the iOS 7 icons don't adhere to the grid themselves. So, what's the point of the Grid?
http://www.baekdal.com/opinion/fixing-the-ios-7-icons/
The author of that post proposes alternative designs, which I don't care for either. But the point is, that he shows how the iOS 7 icons don't adhere to the grid themselves. So, what's the point of the Grid?
The grid system was quite possibly not even designed by Jony. For all the evidence it seems to be from the same Cracker Jack team that brought us these new 80s style indiglow icons.
Since a lot of the proof posted here seems legit, then the designers are just doing a horrible job of implementing their designs into this grid.
Since we're talking about the grid system, I thought some people would be interested in this. I was intrigued about it since I first seen it. I was recreating it in Illustrator to try and understand the thought behind it. Here are a series steps of making the grid from what I seen.
The new shape is no longer a rounded rectangle, it's a superellipse. This shape can be made by starting with a circle and dragging the asymptotes to the edge of the shape's bounding box. I quite like the shape, with a rounded rectangle, the circles that make up the corner are very noticeable, this is a more subtle shape.
Image
The outer circle is positioned to match up with the mid-point of the corners, where the corners change directions. I guess you'd call it the inflection point.
Image
Then, the golden ratio is used to establish the vertical and horizontal lines here.
Image
The inner circle matches up with the inside of the square that's created by the vertical and horizontal lines, and the outer circle matches up with that same square but from the outside. And then the diagonal lines appear, although they could have been on the very first image.
Image
They might even conform to Apple's hardware, and considering that Jony is the designer of both, perhaps he is just adopting grid systems for software from ones he's been using for hardware.
Some of the icons don't seem to conform to the grid at all, like the camera icon maybe. I might superimpose the grid over all the icons to see if they somehow match up. Anyway, I like this sort of stuff.
Good work !
I can see Jony designing the grid itself. But it does seem like he handed off the icon design to another team who just didn't get it. Now, I'm not one who totally hates the icons. They're really just fine with me. But for all the talk about this cohesive grid system, it seems like it didn't pan out.
you obviously don't know anything about art or design. in a body of work, as opposed to a one-off piece, nothing is coincidental.
in the initial stages, the fact that the best-looking icons (in the lead designer's opinion, not yours) conformed to a certain pattern could very well be a coincidence, but further work would not have been. how strict they are with the guidelines is also a judgment call - in the end, what looks best trumps any rule - but the initial versions would still be based on the given guidelines.
edit: even in one-off pieces, with an experienced artist/designer, hardly anything is coincidental. in general, nothing is, if the artist is given enough time.
It's already been officially pointed out and confirmed that the marketing team largely came up with the icons, so, yeah we are all sure that tons of scientific and mathematical thought went into it as Apple likes to make it seem in their promotional materials.
It's already been officially pointed out and confirmed that the marketing team largely came up with the icons, so, yeah we are all sure that tons of scientific and mathematical thought went into it as Apple likes to make it seem in their promotional materials.
this is the post you are referencing, and here is the relevant quote:
yes, it was the marketing department, but it was designers in the marketing department, not writers or secretaries or analysts. my point still stands.
whether or not they used science or math is irrelevant. the point is design is not chaotic.
You do realize there are graphic designers who work in marketing?It's already been officially pointed out and confirmed that the marketing team largely came up with the icons, so, yeah we are all sure that tons of scientific and mathematical thought went into it as Apple likes to make it seem in their promotional materials.
Of course, but they don't really employ some sort of scientific/mathematic type of methods in their design, at least certainly not foremost by any stretch of imagination. While the developer videos and promotional materials make it sound like this grid design was some sort of scientific breakthrough that took years of work from world's top scientists before the actual implementation even started. Yes, a hyperbole, but it's an overall sense that it all tries to convey in one way or another.
You don't get it, huh?
Grid based design isn't something that Apple invented (or claimed to invent) for iOS7, it has been the norm in design of complex bodies of work.
Websites are designed using a grid, Windows 8 Metro -> a grid...
And just FYI - it seems that a lot of the new Apple periphals are also using a grid based design.
.
I think all this hubbub over the icons is a bit ridiculous. Especially people claiming they won't upgrade or they're going to Android/Windows Phone because of the icons. As if people choose phones based on fricking icons.
Seems like Apple themselves is trying to say that they've really gone out of their way to work this system out and closely follow it when they certainly have been far from consistent in their implementation.
There are a few icons that don't seem to line up at all, for example:
The rest align to the grid in a very minute way. Like the top of Notes and Videos share the same "top bar" spacing. The street corner in Maps is the same point that the Stocks icon has the dot.
Here's one that I thought was kind of a stretch, the guys head reaches the edge of the outer cirlcle, however, the tabs do not conform to the grid at all. So as I've said, the icons align to the grid just barely.
What's actually kind of ironic is that the Settings and Safari icons are easily the most true to the grid.
The rest align to the grid in a very minute way. Like the top of Notes and Videos share the same "top bar" spacing. The street corner in Maps is the same point that the Stocks icon has the dot.
Here's one that I thought was kind of a stretch, the guys head reaches the edge of the outer cirlcle, however, the tabs do not conform to the grid at all. So as I've said, the icons align to the grid just barely.
What's actually kind of ironic is that the Settings and Safari icons are easily the most true to the grid.
Agreed. Funny they brag about it in the video and on the site yet a lot of the icons don't even adhere to it.
Yes, exactly. What's the point of promoting this awesome grid system when a bunch of the icons don't even conform to it?
Thanks for posting this. I'm with the skeptical ones here. The grid stuff looks cool when they explain it but most of the icons don't conform to it at all. Honestly it really does seem kinda dramatized to appear more technical and advanced than it really is.