New Visual Proportions for the iOS User Interface
aentan.com
aentan.com
A 4 pixel grid is too fine to serve the purpose of a grid. I mean, you could do a 1 pixel grid, and everything would line up, but what's the sense in that? Grids are only visually meaningful when the base unit is a perceptible size.
The author is striving for harmony, but grids are only one source it. The left margin in one of Apple's preference fields is about one typographic space wide. It's good horizontal rhythm when considered as part of the text element. A good designer knows when to treat space as part of the text, and when to treat it as part of the layout.
The author's preference fields have a 16 pixel wide margin, which has a nice numerological relationship with other elements, but has no relationship with the text at all.
The resulting designs have a kind of twisted harmony that you can get by looking at it and thinking about the multiples of 4 pixels throughout the interface, but they lack any real visual harmony to my eye.
It would be convenient if design were as simple as snapping everything to some simple grid. For better or worse, things are much more complicated than that. And Apple has done much more work to establish a complex harmony across many visual properties than the OP.
I would actually argue that the remainders are a good thing.
When viewing a list, they act as a nice visual indicator that there is more content below. If the last item directly lined up with the bottom of the screen, it would not be as easy to differentiate at a glance. By showing half the last item, it encourages the user to pan down to see the remaining content.
Certainly some would suggest I'm claiming "it's a feature, not a bug" and maybe that's true, maybe the remainder it is unintended, but I think it does make more sense to have the bottom element in a list half showing to alert the user that there is more content below.
http://ignorethecode.net/blog/2011/08/01/invisible_scrollbar...
Showing a peak of extra content to indicate that there's something you're not seeing may not be deliberate, but it's definitely desirable when you've got no other permanent indicators. That said, given Apple's usual attention to detail, I wouldn't be surprised to find that this is a deliberate design choice.
I can understand the value of not ending up with a remainder in print but on screens?
People can resize their browser windows to whatever dimensions they want; does that mean using any kind of grid or rhythm on the web is hopeless? Of course not.
1) Visually distinguish navigational elements from content 2) Account for visual weight of different elements to create a stronger perception of rythm 3) Give some warmth and life to the design so it doesn't feel sterile and robotic 4) Indicating continuation of content (as you very nicely explain)
As the Dalai Lama said, "Know the rules well, so you can break them effectively."
FWIW, this appears to be a misattribution.
I used to have my data structures & algorithms class (back when I taught DS&A) read "On following rules" by Kirit Saelensminde [http://www.kirit.com/On%20following%20rules]. This little saying goes along with it nicely.
Apple, you're welcome.
Not necessarily. You're forgetting that each pixel is made out of three little colors, so with certain color arrangements one can probably get remainder even on a 1x1 pixel rhythmic grid.
If you want a really awesome example, here's one that I noticed when I was first developing Cydia a few years ago, and had to do a lot of "iPhone-native CSS" (I am one of these people who stares at and slaves over individual pixels in designs) that I believe "cannot be unseen":
So, as stated in this document, cells are 44px "tall". However, this description doesn't take into consideration the effects of the borders: only one of the two borders can count for the spacing, as there are N+1 of them in a group, not N*2.
In this case, the top border is included in the 44px "rythm", but in either case, that means that the open area inside the cell "between the borders" is actually 43px, an odd number. Of course, the fact that it is odd is unimportant: you just have to be consistent.
This is why the height of the switch in that example is actually 27px: that way it will feel balanced. Meanwhile, the height of the right chevron disclosures is likewise odd: 13px. The slider control is a 9px bar with a 23px handle. Even the little speaker is 5px at its narrowest, and 23px at its widest.
Great, right? Only... now that we've been staring at this for so long, you might notice that the text looks imbalanced, because the cap height of the font Apple uses is 12px. This is also why I say the top border is included: the text is a half pixel higher than really feels right.
Of course, this is a subtle issue, and I'm certain that a pixel here or there is the kind of thing a normal person doesn't notice, but it slowly drives people like me /nuts/ (which led to a bunch of little tweaks--even requiring custom chevrons--in the CSS I use for mobile websites).
I haven't looked into the cap height issue as much as you do but one thing that really bothers me and as a result the developer I work with is that Helvetica and Helvetica Neue have different top and bottom boundaries. So there are slight differences in text render on the Retina display.
You're not familiar with Matias Duarte then?
http://allthingsd.com/20100527/exclusive-palm-loses-mobile-d...
- Things are different at the edges - Objects with text underneath are taller than ones without - Temporary features (pop ups etc) at the forefront of attention are a different size to things in the background - Things inside a clear frame might follow different, contrasting proportions to those outside
I'm not a designer but I am a drummer. Rhythm-by-the-numbers is boring. Good rhythm plays around the edges, and within the same beat (say four to the bar) people enjoy different beats laid on top (say, three beats). You can speed up and slow down, emphasise boundaries by adding a little extra time to the last beat of the bar, etc. Is visual design any different? Don't designers use the word "rhythm" precisely because it is a good metaphor?
None of this says Apple that has got it right. But the criticism just doesn't seem to have an aesthetic foundation.
Here's a quick example I made: http://i.imgur.com/NEc92.png
You do make a good point: When you get into single-column layouts, like a solo in a song, having mathematical vertical rhythm is irrelevant.
On grids. A grid is a fantastic idea for a newspaper, or even for an iPad, where you have large elements which need to all be aligned. However, your eyes are not trained to jump around in pretty pixel increments, your eyes jump to what they want to look at. In other words, fuck "rhythm." When horizontally aligning elements, I am completely for snapping to a grid of sorts, it makes your UI "just look nicer." When aligning vertically, against things that don't exist, you win nothing. (Well, you do win something, but it's something you didn't touch upon, more on that later)
On grid size. By making a "grid" of 4x4 pixels, all you have done is decrease the resolution of the display. Only an OCD programmer would get excited by a declaration that all pixel offsets must be even. In programming, whenever you sit down and design a framework that is too flexible, you have designed a framework which isn't useful. If you complain about "rhythm," you certainly can't suggest a 4px grid, it has no noticeable rhythm.
On why your design looks nicer. I'll say it, a few of your "fixed" screens do look nicer. This is because you have introduced more padding, in the form of 2px increases, to every element. Anybody can make something look nicer by removing information. Of course your examples will look great compared to the real thing, negative space tends to do that. I want you to compare the number of visual elements on either the Likables screens you posted, with the number of visual elements on the playlist view.
Maybe I'm wrong but right or wrong isn't the point. Making people think and talk about something is.
What I'm saying is that "You can look at a 4-pixel rhythm as 8-pixel, 16-pixel or 32-pixel. 4 is just the lowest basic unit" doesn't improve upon our situation. The lowest basic unit is called a pixel. Grids make everything look consistent; but when the only requirement is that you snap to 4-pixels, things aren't going to look consistent, because you have far too much flexibility.
There really isn't too much for me to argue with here, actually. My only concern is whether or not a 4px rhythm is, perhaps, too flexible. While I certainly haven't tested to the extent Aen has, I'm wondering if using 8px as a minimum for the rhythm would be better read by the eye as having some consistency, or if it would simply require too much change from the existing interface? (i.e., the status bar would need to go from 20 to 24px)
3, 7, 10, 17, 27, 44, 71, 115.
For example, the first comparison http://cl.ly/9RHh if you look closely, the list on the left has a slight left indent, whereas the list on the left (new dimensions) is aligned directly with the buttons above it.
The original list looks "better" to me, as it coveys a subtle sense of depth that the redesign removes. The Likeables app look very WP7-metro to me and alien to the iOS platform. Not saying it's worse, but would work better in a properly tiled OS system.
If I'm not mistaken, the author doesn't take issue with the proportions on the x-axis and makes the mistake of keeping things tightly aligned to the horizontal grid/x-axis proportions. Consequently, he missed some of the subtle things in the original.
The samples in this article show less functional, less visually pleasing UIs.
The author has said in another HN post that "it's my job to look at things others don't look at"--even setting aside the holier-than-thou sort of tone that that evokes, this sort of "it doesn't line up with the grid" complaint reminds me of those obnoxious "unsolicited redesigns" of websites you see hit HN once in a while--the ones that don't take into account critical aspects of why things are done the way they're done.