Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Challenge: Pixel perfect design

developer.apple.com

Post reply on HN
Print view View original

61–70 of 116 posts

Re: Challenge: Pixel perfect design

#61

Post by paldepind2 »

chrismorgan wrote: post #28
dmix wrote: post #20

This is a really good video about how Apple cares about being pixel perfect compared to Windows with something simple and obvious like the mouse cursor icon: https://www.youtube.com/watch?v=YThelfB2fvg The improvements he made are also quite nice, Microsoft should take note...

You can’t tell me Apple cares about pixel perfection when they implement fractional scaling (which, last time I heard, was I think effectively the only choice on most of their laptops) with rendering at the next integer up and downscaling. Basically Apple have made it so that it’s literally impossible to be pixel perfect, even though they were in the best position by far to force developers to do it properly, in thos…

How did Wayland do it initially and how are they doing it now?

Re: Challenge: Pixel perfect design

#62

Post by 2bitencryption »

> Once you’ve decided, explore a single element that captures the essence of the app, and express that element in a simple, unique shape. For example, the Mail app icon uses an envelope, which is universally associated with mail.

And this bullet point is underneath an example of... the "Photos" app icon, I believe? Which basically violates this suggestion, and as a result looks like a total mess in pixel format (even more so than than the real-life hidpi version on my iPhone).

Mail => envelope

Messages => message bubble

Photos => ...colorful peacock tail that suggests more of a "painter's canvas" than it does "photographs" ??

Re: Challenge: Pixel perfect design

#63

Post by 2bitencryption »

stefanv wrote: post #16

Just a thought: what if this some kind of teaser for a new device Apple is preparing? Maybe some e-ink device? Ok, I know we are in 2022, but I would really love to see some “low-tech” device from them. I’ll try to wake up now :)

possibly the v1 of the inevitable "Apple mixed reality visor/glasses" has a low-res, mono-color display, or else it uses low-res mono-color as an "idle" mode when not actively in use so the user is not distracted?

Re: Challenge: Pixel perfect design

#64

Post by jammaloo »

2bitencryption wrote: post #62

> Once you’ve decided, explore a single element that captures the essence of the app, and express that element in a simple, unique shape. For example, the Mail app icon uses an envelope, which is universally associated with mail. And this bullet point is underneath an example of... the "Photos" app icon, I believe? Which basically violates this suggestion, and as a result looks like a total mess in pixel format (even…

The icon isn't the photos app icon, although the general shape is similar.

>Add details cautiously. If the content or shape is overly complex, details can be hard to discern. Icons at all three sizes should generally match in appearance, although you can explore subtle, richer, or more detailed additions at 48×48 pixel size.

I believe that example is meant to be an example of a bad icon, as it has a complex shape with lots of different textures.

Re: Challenge: Pixel perfect design

#65

Post by toxik »

qubidt wrote: post #36
toxik wrote: post #6

Earlier quoted context omitted.

True, and pixel art was originally designed for cathode ray tubes. This leads to a funny effect where modern pixel art designers perhaps misunderstand the intended look of actual oldskool pixel art and emulate it anyway. The same is true of old fonts.

Modern pixel artists far from "misunderstand" the legacy of pixel art. They're specifically designing for a sensibility and context that didn't exist when pixel art was originally made. Actually talk to pixel artists and they'll explain this to you themselves perfectly fine

So it seems you missed the word “perhaps” which essentially makes this correction meaningless.

Re: Challenge: Pixel perfect design

#66

Post by 2bitencryption »

jammaloo wrote: post #64
2bitencryption wrote: post #62

> Once you’ve decided, explore a single element that captures the essence of the app, and express that element in a simple, unique shape. For example, the Mail app icon uses an envelope, which is universally associated with mail. And this bullet point is underneath an example of... the "Photos" app icon, I believe? Which basically violates this suggestion, and as a result looks like a total mess in pixel format (even…

The icon isn't the photos app icon, although the general shape is similar. >Add details cautiously. If the content or shape is overly complex, details can be hard to discern. Icons at all three sizes should generally match in appearance, although you can explore subtle, richer, or more detailed additions at 48×48 pixel size. I believe that example is meant to be an example of a bad icon, as it has a complex shape wit…

> The icon isn't the photos app icon, although the general shape is similar.

are you sure? I'm holding up my iPhone side-by-side, an to me there's no doubt this is attempting to represent that. To represent the different colors, the pixel version uses a unique pattern for each "feather". It seems as 1:1 as a 48x48 pixel version could be.

Re: Challenge: Pixel perfect design

#67

Post by grishka »

Macha wrote: post #57
grishka wrote: post #40

Earlier quoted context omitted.

Apple gives no shit about being pixel-perfect lately. Try using modern macOS on a non-retina display and your eyes will bleed because every single icon is drawn as if there's no pixel grid whatsoever. Everything is a blurry mess. Steve Jobs would've definitely fired someone over this, yet with Tim Cook it stays unfixed for more than 2 years — I'd guess because pixel-perfect icons don't affect the bottom line.

Did some rearranging of my desks to seperate my work and play spaces, so my work from home desk now has a 1080p 21" monitor. It's amazing how not built for that modern macOS is. Even font rendering is a disaster again.

    defaults -currentHost write -g AppleFontSmoothing -int 0
This should help with the font rendering.

Re: Challenge: Pixel perfect design

#68

Post by WHA8m »

dmix wrote: post #20

This is a really good video about how Apple cares about being pixel perfect compared to Windows with something simple and obvious like the mouse cursor icon: https://www.youtube.com/watch?v=YThelfB2fvg The improvements he made are also quite nice, Microsoft should take note...

It's a catastrophe with windows. Make two windows snap to the borders, so together they're fullscreen? 2 pixel gap between the windows; 1 pixel gap at the right, left and upper side; 2 pixel gap to the windows bar at the bottom. How can this be so hard? And even if it's hard, this is so obvious you really want to fix it.

Re: Challenge: Pixel perfect design

#69

Post by flowerbeater »

ziml77 wrote: post #48
solardev wrote: post #34

Earlier quoted context omitted.

Even in the vector age, though, one of the things we've learned from pixel icons is that different sizes would ideally have different levels of detail. For example, see this camera icon: https://useiconic.com/icons/camera-slr/ (in the left pane, click the "three squares" icon to render them all at the same size). All three are vectors (you can inspect them if you want), but they still show different levels of detail.…

This is what annoyed me the first time I saw vector icons used in Linux desktop environments. I appreciate the attempt at making something that scales to any size, but in practice you need to custom design the smallest versions of an icon. Even at the larger sizes, a vector won't always look great. If the renderer doesn't fudge vector edges to snap to pixel edges, you'll end up with blurry edges instead of clean, sha…

> Even at the larger sizes, a vector won't always look great. If the renderer doesn't fudge vector edges to snap to pixel edges, you'll end up with blurry edges instead of clean, sharp ones.

Do you have an example? Text is essentially "vector" these days, and I've never heard of anyone complaining that text rendered on a modern screen has blurry edges. The blurriness of some text is often "cleartype" or whatever tricks are being used to make it look better on low-dpi screens, which end up making it worse on modern displays.

Re: Challenge: Pixel perfect design

#70

Post by jws »

solardev wrote: post #46
jws wrote: post #17

Problems with pixel perfect layout were what made me give SwiftUI a 12 month “wait for maturity” last year. I hope this and the new SwiftUI custom layout capabilities signal an interest in this at Apple. I was making strip charts of data at fairly high density and wanted my minor grid lines to be one pixel wide. You must make them line up with a physical screen pixel or they turn into a blurry anti aliased mess. As o…

How do you do "one pixel wide" when there are so many devices, viewports, LCD/LED types, zoom sizes for accessibility, etc.? It's all virtualized these days, no? A single pixel on something like a watch or 4k 27" display might not even be visible to the average person...

With UIKit you can query the device, it’s subpixel structure, and the alignment of your abstract window on the device and work it out from there.

Mostly, it’s possible there is an abstracted display at a non-native resolution over something like an HDMI. But if you are running your display at a non-native resolution then you just don’t care about details and you deserve what you get.

Post reply on HN