Part icons are hard to recognize in their 16x16 pixel version. (TO DISCUSS)

[davidperrenoud]

From dirk.van...@gmail.com on November 15, 2008 13:42:11

The part icons of our current parts are not looking good and not adhering the Part Designers Guideline.

The guidelines describe that icons should be an (if necessary cropped) view of the 100% view of the part in the breadboard view. So an icon should not be a scaled down version of the total part, because than the detail is lost and the icon is not conveying the size of the part.

Maybe the icons section in the current guidelines are not clear or we cannot find the acceptance of these guidelines. If that is the case the guidelines should be altered or a new design strategy should be conceived.

If the guidelines are accepted all parts need new icons and there representation in the smaller sizes should be adjusted conforming these guidelines. (i.e. they should NOT be scaled down, but rather cropped to 16x16 or another size)

Original issue: http://code.google.com/p/fritzing/issues/detail?id=249

[davidperrenoud]

From irasc...@gmail.com on November 15, 2008 15:23:25

In the case of the arduino, the simple cropping approach does not work--a tiny scaled-down version of the arduino reads much better as an icon than cropping out a corner, which (as we have seen) results in an icon consisting of a small blue rectangle with white text ("Ard Dec").

So change the guidelines if necessary.

[davidperrenoud]

From andre.knoerig@gmail.com on November 16, 2008 06:00:24

Yeah, that's indeed a difficult one, and I'm not sure if we can have a one-size-fits-all rule. I also think most parts are better recognizable when they are fully shown. However, then the icons often look ugly.

In the old Fritzing where we had the cropped icons, it was nevertheless pretty easy to identify parts, because one gets very quickly adjusted to them, and they are visually "iconic". Also, for some parts it is very helpful to see the close-up to actually identify them: Especially voltage regulators and ICs. I think after all this is the better solution, but maybe they should be something like 75% instead of 100%, and maybe there are exceptions for "modules" such as the Arduino.

[davidperrenoud]

From dirk.van...@gmail.com on December 30, 2008 09:00:26

Ok. I came up with four distinct methods of choosing which icon a part should have. Each method belongs to a specific case. The methods are:

1. CROPPED. use the part (or a cropped portion of the part) in 100% size (i.e. the same scaling as it would appear in the breadboard view, zoomed to 100%)
2. SCALED DOWN & CROPPED. use a scaled down version of the part, with its details still visible, 50% - 35% zoomed out. And then cropped to fit in 32x32 pixels.
3. SCALED DOWN TO FIT. use the scaled down part so the icon exactly fits in its 32x32 box.
4. DESIGNED. not use the actual svg of the part at all. Instead use a special designed icon for the case.

---

To be used in these cases:

1. CROPPED. Applies to most parts. Applies at least to all parts which are already smaller than 32 x 32 pixels in their 100% view, or are could almost fit in the 32x32 pixels box, if non-relevant elements are discarded. Examples are: LED, resistors, ceramic disc capacitor, small transistor, power transistors, voltage regulators and electrolyte capacitors. A special mention is for the electrolyte capacitors. Especially the big ones, e.g. a 4700µF, could be argued never fit in a 32x32 pixel box and their icons could be difficult to recognize on their own. However, since these capacitors come as a class of capacitors, in which a smaller one, one which will fit in the 32x32 box, is the default one, this method of making the icon is still preferred. Because their differential characteristic amongst each other is their size, scaling is sub-optimal. If the bigger, non-fitting ones would be scaled down, their icons would loose all this valuable size information.
2. SCALED DOWN TO FIT. If a part is so big, that its icon would be very to hard to recognize in its cropped 100% version, considering the exceptions just described, it could be scaled down to fit. This applies mostly for modules and off-board parts. For modules it is most interesting to see them in total, for that could tell exactly which components are part of the module and hence what the module does. Similarly for off-board parts. Most of the off-board parts are off-board because they are too big to fit on a breadboard or on a PCB. Also off-board parts often have wires attached to them, which makes them not only bigger, but also technically modules. Examples are: Arduino's, Servo, Motor, Battery pack. A special consideration goes out to modules and other parts with a lot of detail that gets scaled down. If the part has a lot of contrast full details scaling it down can render it very ugly and noisy in Fritzing. In that case the designer needs to remove some of the details from the icon svg or make them less contrast full in order to make the scaled down 32x32 version not too noisy. Test this in Fritzing, because Illustrator will sometimes be smoothening out details where Fritzing doesn't. Compare the Arduino svg file for the breadboard and the arduino svg file for its icon.
3. SCALED DOWN & CROPPED. Sometimes both methods described above are not ideal: a cropped icon becomes too abstract, and a scaled down to fit icon looses all details, rendering it useless as icon. Then try to do something in the middle, scale a bit until it can be recognized and then crop. Try to limit the scaling to about 66%. If scaling is necessary beyond the 50%, it might be better to scale all the way until it fits. (method 2). This applies mostly to big parts with repeated characteristics or a big extended surface, which itself doesn't give that much information. Examples are: the breadboard and the force sensitive resistor (fsr). Technically the voltage regulators and other TIP120 packages also have been treated this way. Their icon is actually a 90% scaled down, then cropped version of the breadboard svg. If we would have used strictly 100%, their icons would have been slightly too big. It would have been hard to recognize its characterizing heat plate with chopped off corners from the icon. Because this scaling down 90% is hardly noticeable, I listed them above under method 1.
4. DESIGNED. Finally for some parts, we made a custom designed icon. This applies to parts which are a such a special case or don't even have a breadboard representation. Examples are: a plain pcb, wires.

NOTE: this means that SCALING UP IS FORBIDDEN. If a part is smaller than 32x32, or even tiny, like smd parts, still no scaling up should be applied. Since especially for small parts their size is much more relevant and characterizing than their looks or their text (Who can tell me what kind of part reads: "203"?), it's much more important to communicate the size through its icon. So leave it small.

[davidperrenoud]

From dirk.van...@gmail.com on December 30, 2008 09:09:46

And sorry for this lengthy bug-comment.

The text of the previous comment should of course be part of the part design guidelines.

Still there is a issue about what to do with the smaller 16x16 icons. Right now they are scaled down, which is not optimal for recognition. I would be favor a cropped 16x16 image. However, then the remaining question is: which area of the 32x32 icon should be cropped? The middle? The top left quart? Or does the part designer also make a 16x16 version in addition to the 32x32 one???

Changing the summary of this issue.

Summary: Part icons are hard to recognize in their 16x16 pixel version. (TO DISCUSS)

[davidperrenoud]

From andre.knoerig@gmail.com on January 19, 2009 12:58:17

Let's see the scaled-down & cropped variant on a few parts. This sounds the most promising.

[davidperrenoud]

From andre.knoerig@gmail.com on May 22, 2009 03:10:38

Labels: -Priority-Medium Priority-Low

[davidperrenoud]

From irasc...@gmail.com on March 01, 2010 12:42:56

closing this--we seem to have resolved it on a case-by-case basis. And aren't the icons 32x32?

Status: Fixed
Owner: andre.knoerig
Cc: -andre.knoerig -merunga