Windows icon [UI]


Just a heads-up to the UI designer:

When the lion logo icon is displayed against e.g. a blue (black, violet) background, which may be the case in desktop environments (or when e.g. Facebook is opened in the mobile app), and if the user happens to be wearing glasses, then due to the significantly different diffraction coefficients of orange and blue, when the user looks at the icon at an angle, the mane very visibly shifts sideways. This isn’t a fringe effect (except it is, ha-ha) - with my lenses and a blue/dark background colour it is noticeable at all angles. If I have the icon duplicated on two screens, there is no head orientation in which both manes appear nice and symmetric, and when I look at the icon through, say, the left edge of my left lens, the mane shifts so much to the left relative to the white lion face that the rightmost part of the white face is no more surrounded by the orange mane at all. [What really happens is that, after diffracting in the glasses, the orange overlaps with the background to form a dark hue (best illustrated with a green background) on the right side of the mane]

The same goes for the up/down axis. On my setup, the icon is displayed on the bottom taskbar, at which I look through the bottom part of my lens. So the mane shifts downwards.

The diffraction effect is not unique to the Brave icon, of course, but what makes it bad for this icon specifically is the white center. With e.g. Firefox or Opera - which also use warm colours - the effect manifests by making the logo wider or narrower depending on the angle of sight, which isn’t nearly as noticeable. Perhaps also most other icons are not as perceptive to slight distortions, but the Brave logo just doesn’t look any good when even slightly distorted in the above fashion.

As I said, just something for the UI designer to reflect upon. My lenses are relatively thin, the experience would be worse for someone with thick lenses. The best way of handling diffraction issues per-se is to fill the inside of the icon with the same colour as the background, but that may not always be desirable. Changing the lion’s face to e.g. #F3E9B4 already alleviates the problem somewhat (while also making the icon look generally better).

As an aside, I find it quite interesting that this appears to be the first time in 20 years of using a computer while wearing glasses that I notice the effect. But now after seeing it on the Brave logo, I observe it on many other icons as well. For instance, for the Adobe icon the red frame shifts relative to the contents. But with Brave the effect is so pronounced that the entire icon begins to fall apart.



Hi @ptz,

Per the posting guidelines please provide the requisite info so we can investigate in an efficient manner.
You can edit your original post by clicking 3 dots icon at the end of your post.



closed #3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.