Pixel Perfection
March 16th , 2023 • Design Notes Diary
In the early days of iPhone development people would often talk about “Pixel Perfect” design, where we would sweat the details right down to the pixel. I hear a lot less of that these days. The shift towards such a wide variety of device screens and accessibility modes made it incredibly cumbersome to be designing things to that level because you’d be tweaking layouts for many dozen screens individually.
Well, I ran into a situation today where I had to pull out my old Pixel Perfect design skills, fire up xScope and get down to the pixel level.
The fast switching button in the top of Pedometer++’s workout view (discussed here) has turned out be a really great solution for providing persistent UI without getting the way. However, placing a UI element on the inside of the top corner of the Apple Watch has lead to a number of really tricky layout challenges.
Here is an array of all the different Apple Watch versions that this screen supports. If you look closely at them you’ll notice that the exact layout of the top areas are actually relatively different between the models. Pay special attention to the position of the time label for reference.
