Product Design / General

Is pixel perfection still a thing?

Is pixel perfection still a thing?

Product Design / General · November 30, 2018 at 4:42pm
For me pixel perfection was always important. However I'm never sure how to do it in regards of icons: When designing/developing icon sets for products, do you guys use one fixed icon (canvas) size and then design every icon for that canvas? What if you realize down the way, that you want an icon to be significantly bigger or smaller in one instance in the actual product? As soon as you scale, blur occurs - especially for smaller icons this is an issue in my opinion, because even a little blur greatly deteriorates visual appeal and and also reduces readability (as 4k screens are not yet that common on desktop).
What do you think? How do you do that?

November 30, 2018 at 4:49pm

Yes. I use vector assets and precise integers to avoid blurring. I sometimes redraw icons to suit the instance if a multiple isn't possible.

like-fill
2
  • reply
  • like

Could you elaborate on the multiples? I mean, I know what you mean ... but somehow I'm still having a hard time. My three canvas/icon sizes are 16, 24 and 32: The most common size is 24px and getting to the other sizes always results in blurs. Always starting at 16 doesn't seem to be a real option either, because at this tiny size you need to omit so many details to make it still readable, that blowing those icons up by 2 results in quite bland looking stuff.

  • reply
  • like

Personally, I’d try to stick to vector graphics nowadays. This means that your icon will always stay sharp no matter the resolution it’s displayed at. :)

  • reply
  • like

Jelle, that's not true. As soon as you scale and the icon is positioned between the monitor's pixel raster you will have aliasing effects. On mobile it's not as visible because most mobile phones have high resolution displays nowadays. On desktop it's pretty obvious, though.

  • reply
  • like

I'd pick 12/24/48 then if you want clean edges. Or you'd need to redraw for those .75 & 1.5 multiples. You need clean integer multiples to keep icons sharp.

  • reply
  • like

I'd pick 12/24/48 then if you want clean edges. Or you'd need to redraw for those .75 & 1.5 multiples. You need clean integer multiples to keep icons sharp.

  • reply
  • like

I'd pick 12/24/48 then if you want clean edges. Or you'd need to redraw for those .75 & 1.5 multiples. You need clean integer multiples to keep icons sharp.

  • reply
  • like

November 30, 2018 at 7:15pm

Jelle, that's not true. As soon as you scale and the icon is positioned between the monitor's pixel raster you will have aliasing effects. On mobile it's not as visible because most mobile phones have high resolution displays nowadays. On desktop it's pretty obvious, though.

Hmmm, I have never noticed it myself personally, and I’m not even running a full HD monitor, Regardless, I still recommend going with vector graphics.

  • reply
  • like

November 30, 2018 at 10:18pm

True, 12/24/48 makes more sense ... although there will be discussions why the first size is not a multiple of 8. The only rule I was able to establish with my devs! :D

  • reply
  • like

16/32/64 would also work, but you’d need to redraw them...

  • reply
  • like

💜8💜

like-fill
2
  • reply
  • like

December 1, 2018 at 9:59am

64/32/16 is my two cents...

  • reply
  • like

December 2, 2018 at 2:02am

16/32/64. Perfect at 16px (pt, dp) is a goal... Wonderful at 64 is a quest. Make icons is like to make a font.

Edited
  • reply
  • like

16/32/64. Perfect at 16px (pt, dp) is a goal... Wonderful at 64 is a quest. Make icons is like to make a font.

8pt grid can help too...

  • reply
  • like

Sync your icon (font) size to your font. Define also a base line... Icons are very close to a font system.

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```