Nicer "beta" app icon #415
Comments
gnprice
added
a-first-hour
|
Here's the iOS version of the icon from #414, with the main app in the frame for comparison: And here's the icon for Android as it appears on a current version of Android (my Pixel 8 with Android 14): What's happening with that white space is that Android (or rather, the stock launcher app for Android — Pixels and others will behave this way, but other vendors will be different, including IIRC Samsung) forces the icons to fit in a circle. When the icon we give it doesn't fit in the circle, it shrinks it and puts that on a white background. So some things that don't look great with this icon, to my eye, include: that white space; the red is kind of jarring; the red looks a lot like a notification badge on iOS (it's a slightly different color, and in the wrong part of the icon, but close enough to catch your eye when glancing past it); the text is too lightweight; the text is slightly off center; the placement of the banner relative to the Z doesn't feel quite aligned. Again, I'd be happy with either a design that fixes those and otherwise brings this up to our standards, or a design based on some other concept entirely. |
|
Deeper colors but not so different icon:
|
this is sort of based on apple's developer app logos (Xcode/testflight etc) |
|
Hey @gnprice sir if you don't mind can i work with this design if you don't mind and assign me this |
This comment was marked as duplicate.
This comment was marked as duplicate.
|
Thanks @terpimost and everyone for the designs! Sorry for the belated followup. I think a chat thread will work better than GitHub for discussion (which means I probably should have started a chat thread in the first place, and filed this issue as just a placeholder pointing to that). Let's continue here: |
|
Updated status in new chat thread: I think this will end up getting resolved at the same time as #1254. |
Fixes zulip#415. Fixes zulip#1254. Fixes zulip#1401. Fixes zulip#1402. Thanks to Vlad for developing the new design through several iterations. Changes from the old version include: * The background gradient is more saturated. (zulip#1254) * The "BETA" label is cleaner, and has a more balanced layout relative to the main "Z" of the logo. (zulip#415) * The icon is "adaptive" using the API introduced in Android 8, which lets it be handled more nicely by Android launchers / home screens that want to put the app icon in a circle (like on Pixel) or an iOS-style squircle (like on Samsung devices). In particular this should avoid it getting shrunk and placed on a bed of white padding. (zulip#1402, originally filed on zulip-mobile in 2020.) * The assets include a monochrome foreground icon, which makes the app work with the "themed icons" introduced in Android 13, for users who choose to enable that. (zulip#1401, originally filed on zulip-mobile by a user report last year.) This commit continues to use "BETA" versions of the logo for the actual app, but also adds the corresponding non-beta versions of the source SVGs so that we can smoothly switch to those when it comes time to launch the app. The relevant area in Figma is around here: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6549-5962&t=mMvSGpqwbgJBIv6U-0 but the exact story of these source files is somewhat complicated, because there are a number of technical requirements and it's taken several rounds of iteration between design and engineering to get to this result. Specifically: * zulip-white-z-beta-on-transparent.svg was "beta-foreground.svg" from Vlad here: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2072480 * zulip-white-z-on-transparent.svg and zulip-gradient.svg were from Vlad in this message (as code blocks): https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2038233 * Then zulip-combined.svg was "app_icon_1.svg" here: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2030417 which I produced as described in that message from "app_icon.svg" here: https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/updated.20app.20icon/near/2030569 * And zulip-beta-combined.svg I assembled myself, in a text editor, out of those pieces. * I also wrote ic_launcher.xml.
During the beta period, a broad audience of Zulip enthusiasts — first the community on chat.zulip.org, then others who read the Zulip blog and want to try a better mobile Zulip experience — will be installing this app on their phones where most of them also have the existing production app installed. The app should therefore have an app icon that
With #414, we get an icon that checks the first two boxes (resolving #390) but not so much the third. It's adapted from the one we've long used for debug builds of zulip-mobile, which is a use case that has the same first two needs (clearly Zulip, distinct from main icon) but where it really hasn't mattered if it looks good.
The basic concept of that icon is that it's the Zulip logo (just like the main app's icon) but then with a banner reading "BETA" overlaid on it. I'd be happy either with a better-designed execution of that concept, or with some other concept if we like that better.
The text was updated successfully, but these errors were encountered: