Submissions on Twitter: https://twitter.com/search?q=%23WWDC22Challenges
Nice round up: https://twitter.com/lindadong/status/1534573814079598594
Challenge: Pixel perfect design
21–30 of 116 posts
Re: Challenge: Pixel perfect design
#22I noticed the images looked a little blurred to me for pixel art. Digging further into it, they're oversized high resolution JPEG images scaled down by the browser rather then correctly sized PNGs. Putting quality aside and thinking about the poor internet pipes; each image is around 100kb in size and had it been a two bit black and white PNG would have been around 12kb. I know, I know, it's a probably an off the she…
They looked perfect to me, using an Macbook Air M1 and Chrome.
how do you not see the grey gradient they adding next to each black pixel? making it seem blurry...
unless i am missing something
Re: Challenge: Pixel perfect design
#23Earlier quoted context omitted.
Quoted post unavailable.
https://devimages-cdn.apple.com/wwdc-services/articles/image... your saying there is no anti aliasing ? this looks really blurry, like you said open it up check with a color picker and you will see the gradients....
No post body was provided.
Re: Challenge: Pixel perfect design
#24Earlier quoted context omitted.
Quoted post unavailable.
https://devimages-cdn.apple.com/wwdc-services/articles/image... your saying there is no anti aliasing ? this looks really blurry, like you said open it up check with a color picker and you will see the gradients....
There's something odd going on with that picture, though, because it has faint grid lines for the pixels. It's hard to tell what's anti-aliasing blurring, and what's a grid line.
Re: Challenge: Pixel perfect design
#25When it comes to things like favicons, I always design variants for 16×16, 32×32 and larger scalable (or occasionally just 256×256). It perpetually bothers me that no avatar system that I know of supports different images at different sizes; the constraints can be significantly different, as in my own site’s favicon, where at one extreme 16×16 pretty much ignores vertical border to get it as big as possible, and is also effectively super thick and blocky, while at the other extreme the large-size scalable one wants some definite padding, thinner lines, and maybe other details. This is basic design stuff that is intuitive and has been generally practised from the dawn of GUIs.
As for black and white, well, I have been thinking that way a little more when contemplating e-ink displays, which handle monochrome better than greyscale (faster, less ghosting). It may surprise those that don’t know to learn that reMarkable renders your writing strictly monochrome with no antialiasing, presumably for both of these reasons; and it works rather well, though I would appreciate a higher resolution than its 226dpi. (The UI is all firmly black-and-white with no greys, but they do use anti-aliased rendering throughout.)
Re: Challenge: Pixel perfect design
#26Earlier quoted context omitted.
https://devimages-cdn.apple.com/wwdc-services/articles/image... your saying there is no anti aliasing ? this looks really blurry, like you said open it up check with a color picker and you will see the gradients....
There's something odd going on with that picture, though, because it has faint grid lines for the pixels. It's hard to tell what's anti-aliasing blurring, and what's a grid line.
No post body was provided.
Re: Challenge: Pixel perfect design
#27I always turn off font anti-alias where possible. Some fonts are pixel perfect without AA while others are not. I hate aliased text with passion.
Re: Challenge: Pixel perfect design
#28This 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 those few where it didn’t Just Work. Microsoft’s approach to fractional scaling is incomparably more sensible, and Wayland is finally heading towards being able to handle it properly (though I find it quite ridiculous that they didn’t just start by doing it properly).
Re: Challenge: Pixel perfect design
#29Pixel art is a fun retro hobby, but as the article acknowledges, "we create work for high-resolution HDR screens." Icons, logos, and illustrations in general should be vector-first, so they will show up cleanly on HiDPI and in the future, 4X or 8X DPI interfaces. Too many icons and logos (even the Y on the top left here in HN) look blurry on a simple 4K monitor with 200% scaling (which is not uncommon now).
> will show up cleanly on HiDPI and in the future, 4X or 8X DPI interfaces That future is still as far away as it was 20 years ago.
Why do you think so? 20 years ago, everything was clearly in 1X. Now, the Windows default for many resolutions is 1.5X and my Macbook is 2X by default. iPhones and Androids are at least 2X scaled by default. iPhones in the last 2 years (like iPhone 12 and 13 are scaled 3X. So we've gone from 1X only, to 2X pretty much everywhere for desktop, with 3X on the latest phones.
Re: Challenge: Pixel perfect design
#30Earlier quoted context omitted.
Quoted post unavailable.
https://devimages-cdn.apple.com/wwdc-services/articles/image... your saying there is no anti aliasing ? this looks really blurry, like you said open it up check with a color picker and you will see the gradients....
I see gridlines on my iPhone, but only if I zoom in a lot. I'm guessing this is a case of "designed and exported on Retina display, for Retina display". Because yeah, in true 1-bit image there won't be a grey gridline.