Advertisement


What is meant by 'designing an icon at 100% scale'?


Question

From the Android's Material Design guide,

System icons are displayed at 24dp. When creating icons, it’s important to design at 100% scale for pixel-accuracy.

What is meant by designing at 100% scale? Does it mean the icon should have 24*24 dp dimensions? Or does it mean that they should be in a file format in which scaling would not result in data loss or distortion etc., like SVG file format?

2016/04/08
1
13
4/8/2016 3:53:00 PM

Accepted Answer

Designing at 100% scale just means designing at the size (in pixels) that you will be displaying/outputing your icon at.

If you are designing a 24px × 24px icon, you set up your artboard in Illustrator or document in Photoshop or whatever else you are using to 24px × 24px.

As quoted from the Material Design guide, this is for pixel accuracy. If you work at a larger scale, or work in a vector format without taking in to account pixels then later reduce the size down to 24px—your shapes, paths, point or pixels won't be aligned to the pixel grid and you will get effects as illustrated in this example:

enter image description here

It's worth noting, since dp is not an absolute unit of measurement and translates to a number of different actual pixel sizes—designing at 100% scale also implies designing for each pixel size independently. (Thanks Yorik!)

2016/04/08
23
4/8/2016 8:31:00 PM