I made an Anki app icon in macOS Catalina style

overlyhumble's Avatar

overlyhumble

19 Oct, 2019 10:18 AM

As per title, I made an Anki app icon in macOS Catalina style and was wondering if it could be any good to use it in the official release.

  1. Support Staff 1 Posted by Damien Elmes on 19 Oct, 2019 11:38 PM

    Damien Elmes's Avatar

    Thank you for the contribution! To start with, I'll move to the community section so that others can chime in with their thoughts.

  2. 2 Posted by Lorenzo on 20 Oct, 2019 07:47 AM

    Lorenzo's Avatar

    +1'ing this. It fits really well with the rest of Apple's icons.

  3. 3 Posted by Denzel Zhu on 20 Oct, 2019 02:51 PM

    Denzel Zhu's Avatar

    +1 really like this

  4. 4 Posted by james on 20 Oct, 2019 04:42 PM

    james's Avatar

    yes! i think it'd be a great idea

  5. 5 Posted by stephenl on 20 Oct, 2019 05:12 PM

    stephenl's Avatar

    +1. Great looking icon.

  6. 6 Posted by David on 20 Oct, 2019 06:19 PM

    David's Avatar

    -1 still better than current tho.

    I don't like but it's better than the current one. Would love to see something better. Also I don't think that the icon should be changed because of some silly post which was made just for fun. (It could get out of control and the icon could be get to be changed quite frequently if approved)

  7. 7 Posted by Dan on 20 Oct, 2019 06:26 PM

    Dan's Avatar

    Love it, once I found it I started using it and it looks amazing. It feels nicer opening the anki app with this sick icon.

  8. 8 Posted by James Yu on 20 Oct, 2019 06:45 PM

    James Yu's Avatar

    Holen Sie sich Outlook für iOS<https://aka.ms/o0ukef>
    ________________________________
    Von: Dan <[email blocked]>
    Gesendet: Sunday, October 20, 2019 7:26:25 PM
    An: [email blocked] <[email blocked]>
    Betreff: Re: I made an Anki app icon in macOS Catalina style [Community #1638]

  9. 9 Posted by Glutanimate on 20 Oct, 2019 07:15 PM

    Glutanimate's Avatar

    Thanks for all the effort you put into this! I think that Anki's icon is due for a refresh, and this seems like a step in the right direction.

    However, I have to agree with David somewhat: I think it's important that we don't pull the trigger too quickly and make sure that we do this right. I really like the way AnkiDroid handled this in the past, with call-outs for icon submissions and polls (e.g. for the material design icon in 2015, or recently the adaptive icon).

    If you allow me to nitpick for a moment about the current proposal, these are the things that seem a bit off to me right now:

    • Color scheme: Blue on blue looks fresh, but it also constitutes a hard-break with the blue on grey designs we've had across all Anki clients so far. I'm not sure if this is the right move, as I feel that blue and grey have become part of Anki's branding.
    • Star alignment within the container: It's hard to describe, but it feels a bit off-balance? I don't know, I'm not a designer, but I feel this could be improved a bit IMHO
    • Orientation of the smaller star: As far as I know, in all Anki icon designs so far the smaller star usually points towards the top right corner of the icon. See the current icon, or this older AnkiDroid icon for instance. Not sure if that would work better for the new proposal, too, but it might be worth taking a look at.
    • Stroke width on the stars: Again, all the icon iterations so far have had the smaller star feature a thicker stroke width. In the current proposal the smaller star seems to have a proportionally smaller stroke width. It's more symmetrical that way, but also feels a bit off compared to the designs so far.
    • About the smaller star in general: Maybe we should get rid of it completely? Both AnkiDroid and AnkiMobile no longer have it in their designs, so perhaps it's time to drop it on the desktop as well?

    And some more general points:

    • Icon sizing & recognizability: I think the current proposal looks good at larger resolutions, but I think it loses a lot of its recognizability at smaller sizes, especially the 16-48px range that app icons appear in on many platforms (see the Inkscape icon preview attached below). I feel this is a point where cutting out the smaller star could really help with.
    • Cross-platform concerns: Regardless of which design we end up with, it's important to take into account that it needs to work well across all platforms supported by Anki (if we don't want to invest the resources to create platform-specific icons for macOS, Windows, and Linux). I'm not sure if the current proposal hits that mark, but then again perhaps this is a mark that's practically impossible to hit.

    Just some food for thought for now. @overlyhumble, thanks for sparking off this discussion, either way!

  10. 10 Posted by overlyhumble on 21 Oct, 2019 06:42 AM

    overlyhumble's Avatar

    Hi everybody!

    First of all, thanks to everyone who chimed in to give your feedback and special thanks to @Glutanimate for the lengthy, in-depth and constructive criticism.
    All of your points are valid, so please let me get to the main ones:

    • Icon main color: I think it's true that grey has been an integral part of Anki's identity until now; however I liked the idea of a colorful icon, as that looked more modern-looking and, more importantly, more welcoming to me. This is something that designers working for social media are already exploiting to make users more attracted to their app icons and make them open the apps more frequently (see Instagram, the new Facebook app icon, Reddit, etc). I enjoyed the idea of using the very same exploits the attention economy jackals deploy in order promote a productive technology like Anki and maybe make it cater for a larger audience. Still, I have tried to make an icon with a grey background and will post it later when polished a bit more (see other points below).

    • Second star: it is also true I didn't respect the orientation (for "symmetry"'s sake, if that makes sense to you) nor the stroke width in regards to the second star. I am tinkering with two versions of the icon, one with the star and one without. I like the smaller star giving balance to the main one and if we decide to take it off, something else needs to take its place imho (see Ankidroid icon with the lines representing the card).

    • Scaling, recognizability and design language: The issue regarding sizing, scaling and recognizability sounds the more concerning to me, as I really didn't think of that and it's true my icon just doesn't behave well in small print, so it really needs to be rethought from scratch. I'll try to keep in mind the need for an icon working regardless of screen size and OS design language.

    All in all, I'll be very happy if we managed to create a new icon with a hive-mind design process, where you start from something and then see it evolve based on the community's feedback (nobody wants to rush a sloppy job icon to the official release, I reckon).
    Also, my designing skills are somewhat limited (I have no formal nor informal design education, just like tinkering with the Affinity suite) so if anyone wanted to contribute directly with some concepts of their own creation, that would be awesome too!

  11. 11 Posted by John Hirscher-P... on 25 Oct, 2019 02:32 AM

    John Hirscher-Pierce's Avatar

    +1 The logo is much more modernized for Catalina compared to the old rectangle logo. It is a bit off-center, but with that corrected, the icon should look fine. If this comes to fruition, can we see a comparison if the background is grey and this original design?

  12. 12 Posted by Colton Osborn on 26 Oct, 2019 12:43 AM

    Colton Osborn's Avatar

    +1 Like it.

    Make the previously mentioned fixes and add please.

    Adding a little black would be a plus I think.

  13. 13 Posted by Philippe MB on 27 Oct, 2019 01:32 AM

    Philippe MB's Avatar

    +1 It is slick. I also like the current logo, and I also support having different icons over the various OSs because different communities have different sensibilities.

  14. 14 Posted by overlyhumble on 28 Oct, 2019 09:43 AM

    overlyhumble's Avatar

    Hello everybody, it's your boy overlyhumble, back at it with some new icon concepts:

    • the original icon with a new smaller star (corrected the outlining thickness issue and the 2 stars group is now correctly centered) and a grey outline.
    • same but in charcoal
    • charcoal design with single star (not a fan of this current implementation)
    • single star with a circle in circle design maintaining the two main colors (I really liked this kind of concept but I'm not quite satisfied with how it turned out)

    What do you think of these?

  15. 15 Posted by csosborn on 28 Oct, 2019 10:08 AM

    csosborn's Avatar

    I really think the Anki_2_star_charcoal.png would look great if the outer circle was blue instead of a charcoal shade. The outer rim the same color as the stars.

  16. 16 Posted by overlyhumble on 28 Oct, 2019 04:04 PM

    overlyhumble's Avatar

    Here it is, @csosborn! Ended up liking it better than I expected, what do you think of it?

  17. 17 Posted by steven on 28 Oct, 2019 05:50 PM

    steven's Avatar

    I'm also a big fan of Anki_2_star_charcoal.png. I prefer it over the blue outline version, but don't have a good reason why.

    If we have a different colour outline for the circle, I think white might make sense. That follows the current desktop outline colour, it aligns with the star outline, and the new Mac icons all have a white/gray outline for their circles.

    Regarding the changes in general. I think you have a strong argument for many of them, but I think too many changes at once makes it unrecognisable. To me, your most recent iteration is the only one I immediately recognise as Anki, and I'd prefer the changes be even more conservative than that.

    Thanks for your hard work!

  18. 18 Posted by Lorenzo on 29 Oct, 2019 08:51 AM

    Lorenzo's Avatar

    Anki_2_star_charcoal takes the cake for me. It looks great in the Dock, it is consistent with the rest of Apple's icons (that is, the outer ring has about the same color as the inside) and it's not too different from the original Anki icon, making it so that the transition is seamless. +1.

  19. 19 Posted by Philippe Michau... on 29 Oct, 2019 01:23 PM

    Philippe Michaud-Boudreault's Avatar

    Anki_2_star_charcoal_blue_outline.png
    or the other charcoal one looks pretty good to me, any of these works.

    On Linux I like the existing icon, i think it's already great like that, with a round logo it would look strange.

  20. 20 Posted by Thomas Kahn on 31 Oct, 2019 02:05 PM

    Thomas Kahn's Avatar

    Because of the sizing issues that glutanimate mentioned Anki_1_star.png seems to be the best option to me.

    Great work all around!

  21. 21 Posted by Ben on 03 Nov, 2019 04:34 PM

    Ben's Avatar

    I'm partial to the original all-blue design but all the concepts look quite nice. Great work, overlyhumble.

    Regarding the sizing issue: if you use Apple's Icon Image Format you can create different files for different icon sizes. I've seen icons that omit detail as they get smaller — perhaps the icon could retain two stars at a larger size but drop to one at smaller sizes?

    Selfishly I'd love a refreshed iOS icon in line with whatever is chosen for the desktop app. That's not to put more work on you though, overlyhumble, especially if you're not an iOS user. Maybe someone else can pick up the ball down the line :)

  22. 22 Posted by overlyhumble on 05 Nov, 2019 09:49 AM

    overlyhumble's Avatar

    Once again, thanks to everybody who is contributing and thank you all for the enthusiasm shown for the project.

    It seems the icons with a prevalence of the grey gradient are resonating the most with the community, for clear "historical" reasons.
    Personally I really am in love with the blue one (here is the updated version, with proper smaller-star-outline width), but as I said, I get were the most of you are coming from.

    The issue of sizing and recognizability still stands and maybe @Ben is onto something here: we could have a double star design for larger screens and a single star design, still in the same fashion of the former, for smaller icon uses.

    As for the single icon or OS-dependant icon, I think the answer is somewhat in the middle: the logo should clearly be the same for all OS's (ie the double/single star on a consistent color background among OS's) but maybe some details can be worked on (eg the round icon for macOS; iOS icons have to be squircles and I really would like it not to be yet another white squircle with a smaller icon inside it; Android has more freedom but the majority of launchers show round icons, so there's that; Windows is implementing a new design language called Fluent, which I really like so I'd like to experiment with that one - also, IIRC app icons are quite smaller on Windows 10 so it should be the single star design for that).

    My skills are what they are, so nothing is to be expected that soon, and if anybody would like to contribute, once again, please say so here in the comments so we can team up.

  23. 23 Posted by overlyhumble on 11 Nov, 2019 02:38 PM

    overlyhumble's Avatar

    As I anticipated, here's a first proposal of the icon in Fluent design language, sharing the color palette of the very_blue icons.

    It mimics the Office Suite icons, with the rectangular shape cut in half in reference to the "front/back" design of the Basic Card.

  24. 24 Posted by overlyhumble on 11 Nov, 2019 03:11 PM

    overlyhumble's Avatar

    (Light) grey version

  25. 25 Posted by Thomas Kahn on 04 Dec, 2019 06:52 AM

    Thomas Kahn's Avatar

    Last one looks fantastic, great idea with the front/back reference!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Anki_for_Catalina.png 384 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac