Signal logo should be optically centered in icon

[kevincoleman]

The logo in the icon on iOS feels like it sits too far to the bottom left. I think this is because the logo was centered metrically based on the oval of the speech bubble, not optically based on the whole logo’s appearance.

Current, too far to the southwest:

Suggested, optically centered:

(This is just an example graphic, and shouldn’t be used as the source)

I’m happy to make a PR for this if nobody objects.

[OmarBasem]

I think the circle itself is already centered if you exclude the tip

[kevincoleman]

@OmarBasem right, that’s what I’m saying. Because of the tip sticking out it looks optically off-center. By bumping it up and right we can make it appear visually centered even though it’s technically not centered.

[awaitlink]

@kevincoleman Why are you so sure that the icon must be actually fully centered? For me, the current icon (where the circle is centered) looks visually better. Your suggested variant makes the size of the empty (blue) gap on the four sides of the icon uneven.

I'm sure Signal designers know how to center icons. It's not only the iOS icon that is centered in this way, but the Android icon, icon on the website relative to "Signal" text, etc., so I'm sure this is intentional.

[NiklasBr]

Your suggested variant makes the size of the empty (blue) gap on the four sides of the icon uneven

Not at all, his PR makes them even when taking into account how the human optical perceptual system works, which is slightly different from a centered mathematical perspective. Sort of like the auditory A-weighting for sound. Or why every design software since time memorial which handles optical kerning for fonts: To make it look correct for humans rather than machines.

[awaitlink]

@NiklasBr, no, I think the PR does the exact opposite. It makes the logo fully mathematically centered, by positioning the center of its bounding box in the center of the icon. This makes gap pairs left-right and above-below unequal.

Whereas the current variant, which, I repeat, is used not only in the iOS app, but everywhere the redesign took place, is centered visually — the icon is positioned so that the center of the circle is in the center of the icon.

Additionally, you can look at icons for Google Duo (iOS), Discourse. Their squircles are positioned in the same way as current Signal icon, centering the circle part only.

All in all, I believe the current icon is centered correctly and intentionally.

[NiklasBr]

Google Duo (iOS), Discourse. Their squircles are positioned in the same way as current Signal icon, centering the circle part only.

The Duo icon is obviously top-right heavy and the Discord fails on the vertical axis. But less so. Those don't look especially nice. I don't understand why you chose those two when there are so many beautiful icons avaialble. ;) The best centered Google icon is probably their Maps app which, which happens to have the center of gravity slightly above the center mathematical point actually hits the visual/optical center pretty spot on.

I initially reacted with enthusiasm for this change because I have always been mildly irritated at the fect that the icon, as it appears on my home screen, is not actually visually centered and is in dire need of being pushed up a few points, and perhaps, to the right a point or two. It is currently too bottom-left heavy.

After examining the PR again I'll retract my previous endorsement. I looked at the difference and got the the pre- and post-versions mixed up. The new versions are actually less centered, in that they seem to follow the bounding box with a 1:1:1:1 ratio. Which is not an improvement.

I partly agree with you now @u32i64, thanks.

[awaitlink]

@NiklasBr I've chosen these because they somewhat resemble the layout of Signal's icon: there is a main part and a tip; and I found out that their logo positioning logic in the icon is the same as Signal's. Just to show that Signal is not the only app that chose to center like this.

Notice however I've used Discourse, not Discord, as my example 😉.

[NiklasBr]

Oh, yeah... That ones really bad.

[kevincoleman]

Hello! This sort of went off the rails between 1am and 6am Pacific time. 😝

To clear up confusion: I did not move the icon to where it’s centered by its bounding box or by its oval. Neither would make sense.

As @NiklasBr noted: “[this] PR makes [the side bearing spaces] even when taking into account how the human optical perceptual system works, which is slightly different from a centered mathematical perspective.”

My decision/suggestion is based in the properties of type design, where the human perception of negative space it considered just as heavily as metric measurements. While I realize the Signal logo may be centered any number of ways in other environments, my goal is simply to fix this case, where the logo is more obviously off of optical center because of the icon’s bounding squircle.

Because the “rightness” of the positioning is something that’s subjective to the human eye, the only real way to garner proper data for making a decision about the positioning would be to do a large-sample-size study where viewers look at the icons for short periods of time and then decide which feels better. After all, the main use case for an icon is decidedly not to look very closely at it for prolonged periods, but rather to glance at it for a second or less. While not a large-scale test, I have showed the two icons to several people I know, and unanimously they’ve picked the one that’s bumped up and right (I didn’t give them any leading information about what was different). I suspect this would be the case in a larger study as well, but I’m always open to change my mind based on data. If we wanted to do this sort of testing I support it, but I realize it’s a much bigger undertaking to user-test in advance of a minor improvement PR like this.

As an aside, if anyone would like to learn more about optical adjustments I actually include a section about it in my typography course, and would be happy to share resources about the many optical adjustments that are regularly made to aid humans in seeing things as they are intended (as opposed to how computers would render them).

All this said, I’m new here. Is there any official group of decision makers (core contributors?) that can decide on this issue? Either way I don’t want to be responsible for creating a PR that just hangs in discussion forever instead of providing value.

[kevincoleman]

Just noticed the logo looks a little left-of-center in the new update for desktop too. I think it’s the same thing going on. This would probably be best specified in whatever brand guide accompanies the logo (which—nice new logo, by the way!).

[Imperiopolis-Signal]

We're not going to change this logo, the current centering is intended. If you want to discuss further feel free to open a feature request thread on the community forum.

[kevincoleman]

Fair enough. I don't get the impression anyone bothered to consider the merit behind this request, but I guess the nature of open source is that nobody really has to care about contributions since they’re free. I had hoped to take interest in contributing to Signal, but people’s attitudes here have been pretty unwelcoming. 🙄

[glitchedgitz]

@kevincoleman is absolutely right. Usually, this isn't the case with most logos, and logo designers missed it when needed.

Real-life example https://flutter.dev/brand

[kevincoleman]

@giteshnxtlvl thanks for the vote of confidence. It doesn't appear that the Signal team is open to contributions or expertise on the matter, but at least you and I have our heads on straight. 😉