Skip to content

Refresh app icon's design #1254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
gnprice opened this issue Jan 3, 2025 · 2 comments · Fixed by #1404
Closed

Refresh app icon's design #1254

gnprice opened this issue Jan 3, 2025 · 2 comments · Fixed by #1404
Assignees
@gnprice
Labels
a-Android Issues specific to Android, or requiring Android-specific work a-design Visual and UX design a-first-hour Issues specific to using the app for the first time a-iOS Issues specific to iOS, or requiring iOS-specific work
Milestone
M5a: Launch blockers

Comments

@gnprice
Copy link
Member

gnprice commented Jan 3, 2025 •
edited
Loading

We have an updated design for the app's icon, with more-saturated colors in the background gradient:
image

This issue is for integrating that new icon into the app.

Implementation

The next step needed is to produce SVG files describing the new icon — both the production version shown above (which we'll use when this app rolls out to everyone), and a "beta" variant which we'll use for the remainder of the beta period.

Then we can run the "beta" version through our tools/generate-logos script, and it should do the job. Later we'll run the production version through tools/generate as part of preparing the rollout (#715).

Details in chat thread.

Related issues
@gnprice gnprice added a-Android Issues specific to Android, or requiring Android-specific work a-iOS Issues specific to iOS, or requiring iOS-specific work a-first-hour Issues specific to using the app for the first time a-design Visual and UX design labels Jan 3, 2025
@gnprice gnprice added this to the M5: Launch milestone Jan 3, 2025
@gnprice gnprice mentioned this issue Jan 3, 2025
Closed
@gnprice gnprice self-assigned this Jan 7, 2025
@gnprice gnprice modified the milestones: M5: Launch, M5-a: Server 10 Jan 14, 2025
@sahu-virendra-1908

This comment has been minimized.

Sign in to view
@sahu-virendra-1908 sahu-virendra-1908 mentioned this issue Mar 8, 2025
Closed
@aikansh008

This comment has been minimized.

Sign in to view
This was referenced Mar 12, 2025
Closed
Closed
gnprice added a commit to gnprice/zulip-flutter that referenced this issue Mar 12, 2025
@gnprice
wip logo: Use new design, and support fancy Android features
594846e 
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.
@gnprice gnprice mentioned this issue Mar 12, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@gnprice gnprice

Labels
a-Android Issues specific to Android, or requiring Android-specific work a-design Visual and UX design a-first-hour Issues specific to using the app for the first time a-iOS Issues specific to iOS, or requiring iOS-specific work
Projects
Flutter app
Status: Done
Milestone
M5a: Launch blockers
Development

Successfully merging a pull request may close this issue.

logo: Use new design, and support fancy Android features gnprice/zulip-flutter
3 participants
@gnprice @aikansh008 @sahu-virendra-1908