SchildiChat / schildichat-meta

Issues related to all SchildiChat clients and the overall ecosystem
8 stars 3 forks source link

App icon suggestions #2

Open andrew712-1 opened 3 years ago

andrew712-1 commented 3 years ago

SpiritCroc's edit:

People seem to be unhappy with the icon (not all, but a considerable amount). Issues seem to be:

So, while we, the SchildiChat team, are happy with the icon, we're open for contributions if you have any. Note that if you want your suggestion to be taken seriously, you need to be grant us all rights for your design (re-destribution, modifications etc. without having to ask you), and we need a vector graphics / svg, so we can properly work with it. Make sure to also read below discussion for previous suggestions, so you know what aspects are important to us.

Original message by andrew712-1 ### EDIT: Let this issue be about the logo only and [this new issue ](https://github.com/SchildiChat/schildichat-meta/issues/3)to be about the app name https://github.com/SchildiChat/schildichat-meta/issues/3 Please change the icon, the current one is too childish. Please change the name of the app, it's too long, and hard to pronounce especially for russians. We need a shorter and easier to pronounce (internationally) name. I love your app, but I can't recommend it to anyone because of these two issues...
HerrFrutti commented 2 years ago

I like the lower left color.

A thaught about the horn: What if you expand the turtle to the edge and put the horn inside the middle. Expanding the turtle would give you some space. We would loose the dots though.

su-ex commented 2 years ago

pay visual homage to Element

Well, we do not like Element's style, that's one of the reasons SchildiChat exists. Furthermore, there's no need to stress that SchildiChat is "just a fork", it should feel like a complete matrix messenger, independent of the implementation, also for users who never even tried Element. Apart from that, SchildiChat and Element should be easily distinguishable if they are both installed (for testing or whatever reason).

Yes, other modern messaging apps have very simplistic icon styles. There's nothing wrong with that. However, it's still nice if the icon somehow catches the user's eye (in a nice way), instead of looking just like an icon to some Android system setting by being too plain, if you understand what we mean. Your latest suggestions are far too abstract, they bear no visual representation of our app at all.

Regarding color choice, we were thinking more about something like this: color choice

dzg commented 2 years ago

su-ex commented 2 years ago

Still far too generic imo: Seeing the icon and thinking of a turtle is a must. At least we're often asked what our current icon should represent. With such a generic icon, this won't change at all, rather the opposit.

Aaaaaand there needs to happen a lot so I can give up the post horn. All current suggestions don't satisfy me at all and I strongly prefer our current icon. 📯

dzg commented 2 years ago

su-ex commented 2 years ago

Not bad, but I fear it'll be far too much detail in small. Now I'd have expected a more abstract form of a post horn like mentioned above. 😆

dzg commented 2 years ago

Heh, I was actually joking with that. (Totally not my style.)

su-ex commented 2 years ago

Haha, ok, tastes sure are different. 🎨 I think I'd prefer the head more up and not so much bent down, but apart from that, this should go straight into our sticker pack. 🤩

SpiritCroc commented 2 years ago

@dzg are you fine if we include your joke in our stickerpack? That would actually be a fun addition (although probably best with transparent background) :grin:

franksouza183 commented 2 years ago

Maybe like this? Just a tweaked design and some lighting schildichat-desktop

franksouza183 commented 2 years ago

... or like this schildichat-desktop-2

SpiritCroc commented 2 years ago

These look great, I'd love to use them some way or another! However, the 3D style is a bit too much for use as an icon (a little too much detail, and looks out of place compared to other icons). I attached some screenshots how they compare to other icons on my Android, it's in the middle row the 2nd from the right: device-2022-03-09-092931 device-2022-03-09-092841

su-ex commented 2 years ago

I'm not entirely convinced by the post horn as head of the turtle ...

franksouza183 commented 2 years ago

Try these.

shildichat-desktop-4 shildichat-desktop-3 shildichat-desktop-5

I would like to know how the algorithm behind this icon frame/container works. Is the background color only set automatically? It would be interesting to have a background color that gives us some contrast, as in the second example. Also, the icon size should be a little bigger inside the frame.

example1 example2

I'm not entirely convinced by the post horn as head of the turtle ...

Acctually, the turtle's head is retracted inside the shell xD

SpiritCroc commented 2 years ago

The background content is fully chosen by us, while the shape is enforced by the operating system (keyword: adaptive icons). So we can set it to anything that's not transparent. For demonstration purposes, I didn't set it, though, so my launcher made it white. For our current icon, we're using #e2f0d2, which I'd probably prefer over your choice of background green, in order to get more contrast.

The feet look a little weird right now, as if the turtle was not standing on the ground, but instead rolling around :thinking:

franksouza183 commented 2 years ago

I bent the feets a little to follow a more circular shape for the icon as a whole.

shildichat-desktop-3

And a more symmetrical version:

shildichat-desktop-10 shildichat-desktop-9 shildichat-desktop-8 shildichat-desktop-7 shildichat-desktop-6

SpiritCroc commented 2 years ago

All icons starting with "And a more symmetrical version:" seem to be too abstract to me. And the one before has lost too much shades on the shield I think, looks too flat to me :thinking: But maybe also wait for @su-ex' opinion before spending more time, we both need to be happy with it. I'm also not fully sure if this is what makes users currently unhappy with the icon more happy.

franksouza183 commented 2 years ago

one more try, base on @HerrFrutti 's sketch:

shildichat-desktop-11

about the lack of shading in the other proposal, here: shildichat-desktop-5 shildichat-desktop-4 shildichat-desktop-3

su-ex commented 2 years ago

Your first new draft heads in the right direction. But I think it still stands true what has been stated somewhere above:

I did prefer the pointy head and feet in your initial sketch.

Also, the layering of the post horn feels somehow off. I'd still like to see a draft that sort of integrates the post horn into the backplate of the turtle's shell.

NathanC commented 1 year ago

I think this issue got off on the wrong foot-- there's nothing all wrong with a "childish" or playful logo. The current icon has grown on me substantially since I first saw it, but I would describe my desire for it to be changed as wanting something more modern, or even more techy. Matrix, to me, feels like a sleek and high tech system, and I'd want my client to have branding that reflects that feeling.

The current logo feels sort of like a 90s/early 2000s website favicon. It's not bad by itself, but feels out of place in the current ecosystem of chat app icons and Matrix.

What about using the current Android app's notification icon as the main icon, or slightly modifying it? The icon is apache licensed from what I can find, and I don't see any other software currently using it as their branding.

white turtle in profile on a transparent background

It's clearly a turtle, yet looks minimalist and modern. I also feel like it's somewhat playful and has personality. I personally like it in monotone (and would like it that way in my desktop tray along with my current system tray icons), but I think it could also be colored tastefully though I'm not sure what colors would look best.

Then, in an about us page on all SchildiChat clients, you can explain the name Schildi and the idea behind it, and show the old logo. You could use the horn branding in other aspects of the client, perhaps in notification settings.

tl;dr; I think it preserves the brand and is easily identifiable, feels sleek and modern, and still has a lot more personality than e.g. Element or Signal.

(I'm going to keep using SchildiChat regardless, just my 2 cents.)

NathanC commented 1 year ago

I just set it as my local icon on Android, here's what it looks like (though I'm using a skinned icon pack overall). I also like the parity with the app icon and the notification icon.

Screenshot_20221105-121612

SpiritCroc commented 1 year ago

Don't know, the app icon would be missing something if we'd just use the notification icon for it, in my opinion.

NathanC commented 1 year ago

That's understandable. As I said, the current icon has grown on me, just wanted to see the android icon suggested in the thread to get people's thoughts.

Something like this is inherently difficult since everyone has different aesthetics.

In the first suggestion in this comment, with the shield-like back for the turtle, I tried that as my local icon for a bit. However, the geometry felt a bit strange to me, kind of noisy.

What about just having the shield shape with the turtle texture, and the horn on it? You said best the beginning the shell stands for security, so a shield conveys that well, and a shield + golden horn makes a lot of sense for a secure chat app.

You could maybe even have the arms/head coming out of the shell as a loading animation?

MadTooth commented 1 year ago

Use a normal icon instead of your trash

https://stock.adobe.com/search?k=turtle%20logo

SpiritCroc commented 1 year ago

@MadTooth if you want me to respect your opinion, work on your tone. Also, icon should be original, not a stock icon.

MadTooth commented 1 year ago

@SpiritCroc "Original" trash, cool :]

SnoutBug commented 1 year ago

I think it is possible to stay true to the original design, while also drawing a more obvious connection to a chat app, for example like this:

turtle

Here the head doubles as a speech bubble containing two dots suggesting someone typing.

I know that the requirement was for a more detailed icon, keeping the current colors. Perhaps someone with a little more experience knows how to improve this draft if they see any potential.

Also possible alternatives to schildichat could be:

  1. Emys, the scientific name for a pond turtle of which, the european pond turtle is native in germany, complimenting the former german name
  2. Cassiopeia, either with a C or a K, which is the name of the turtle in the book Momo by Michael Ende
su-ex commented 1 year ago

The posthorn is missing, it's a must! 📯 Also, this somewhat looks like an alien turtle. 👽🤔

SpiritCroc commented 1 year ago

more obvious connection to a chat app

Fun idea, but took me a while to see it, even with that hint. :see_no_evil:

Don't know, kind of looks to me like the turtle's main feature is its butt. I see one could argue that's also the case with the original icon, but actually it's more the shell rather then the butt below the shell there. :thinking:

Sir-Photch commented 1 year ago

Color "choice" wasn't really a choice, I'm just using the Element colors

Not feeling the horn, sorry.

This is a really good suggestion. Why are you so hardstuck on the horn? "SchildiChat" is a close fork of element either way.

Without reading the FAQ on the website, there would have been no way for me to tell that the yellow thing in the current icon is supposed to be a "horn".

How about opening up a poll for users to decide?

SnoutBug commented 1 year ago

I agree. until reading this thread I thought the icon was supposed to depict a turtle with a severed head.

su-ex commented 1 year ago

This is a really good suggestion.

Absolutely no. It doesn't resemble a turtle in any way and the color is horrible. Also far too generic.

Why are you so hardstuck on the horn?

I want it. It's a homage to message delivery of older times. It just needs to be in. Point.

How about opening up a poll for users to decide?

Absolutely not. It has to fit @SpiritCroc and me in the first place.

Sir-Photch commented 1 year ago

Absolutely not. It has to fit @SpiritCroc and me in the first place.

Too bad!

williamkray commented 1 year ago

schildichat-concept-icon1

no post horn, because that doesn't lend itself to good iconography. happy to supply the svg so you can tweak colors etc.

strider72 commented 1 year ago

Late last night in Schildichat itself I suggested the above logo concept — the shell as seen from above, with a speech balloon nib.

One thing I like about it is the concept easily adapts to different variations. You can easily have a mono-color icon, or full color, or two color , or whatever. It's distinct but simple enough to be easily recognized at small sizes.

(Not digging the yellow in @williamkray 's mockup, but otherwise very close to what I was thinking.)

For the record, I actively dislike the "horn sticking out of a turtle shell" icon concept. It looks like a weird decapitated turtle. Until finding this discussion I had no idea that what that was supposed to be — I just thought what the heck is up with the turtle's head?

strider72 commented 1 year ago

Color "choice" wasn't really a choice, I'm just using the Element colors

I also like this one. An iconic form of a turtle, very recognizable as the animal (head, limbs, and tail sticking out of the shell). I like it for similar reasons to my own idea as described above

strider72 commented 1 year ago

For the record, I actively dislike the "horn sticking out of a turtle shell" icon concept. It looks like a weird decapitated turtle. Until finding this discussion I had no idea that what that was supposed to be — I just thought what the heck is up with the turtle's head?

Also, in the current icon you're clearly looking at the poor decapitated turtle's butt. ;-)

SpiritCroc commented 1 year ago

Also, in the current icon you're clearly looking at the poor decapitated turtle's butt. ;-)

Well yes, but no: the butt is actually hidden in the shell (and the head is not decapitated, but just hidden behind the shell). :P

So, regarding the speech bubble with turtle shell texture, that's somewhat too generic to me, it lacks something special in my opinion to make it stand out.

strider72 commented 1 year ago

There are too many simultaneous concepts for a good icon. The turtle works. The horn works. The turtle AND the horn is too crowded, and too disconnected, for a good clean icon. You need too much detail to see what the two things are. It's confusing.

Think of famous brand icons — especially as adapted for phones and such. Apple. Target. Windows. Twitter. Reddit. Facebook. McDonalds. Android. All are a single concept, very clean and straightforward.

My suggestion is do the turtle or do the horn. Either can work, but pick one.

strider72 commented 1 year ago

If the art is simple enough for an icon, I can't see how you can show the horn sticking out of the shell with enough detail that people will specifically recognize it as a horn.

Well yes, but no: the butt is actually hidden in the shell (and the head is not decapitated, but just hidden behind the shell). :P

Now that you've told me, I can see that it's a horn sticking out of the shell. But without being told, it looks like the turtle has a weird misshapen head. If you have to explain the logo just to know what it is, it's a poor logo.

So if you really must have the two concepts, well... I don't know. Two disjoined concepts have to be instantly and simultaneously recognizable for what they are. That's very difficult because a turtle shell and a horn are not connected at all in people's minds. You either end up with a deformed turtle or a misshapen horn.

strider72 commented 1 year ago

One more concept from me: the recognizable turtle shell pattern — the somewhat hexagon shapes — on a field. On of the hexagons is replaced with a full curled horn.

This won't work well at small sizes though. A simplified version for small sizes would be just the horn...?

(Also — su ex dismissed the "element turtle" variant in part because he didn't like the color. That's the easiest part of that icon to change. Make it a more turtle-y green and it will really pop, IMO.)

SpiritCroc commented 1 year ago

There are too many simultaneous concepts for a good icon. The turtle works. The horn works. The turtle AND the horn is too crowded, and too disconnected, for a good clean icon. You need too much detail to see what the two things are. It's confusing.

I see your point, and I personally can imagine myself being fine with only having a turtle and no posthorn. But still ideally I'd like to have some other element related to messaging, such that the icon is not too arbitrary. And su-ex must be happy with the logo as well, so if that includes a post horn, then it must be.

While big business logos can be simple, and will be recognizable anyway since the company is big, a little bit more detail doesn't hurt a small project such as us to differentiate. There are many logos out there that resemble Windows and Apple Logos, for example. Also, firefox managed to combine two elements fine in a logo in my opinion, so it's not impossible.

su ex dismissed the "element turtle" variant in part because he didn't like the color. That's the easiest part of that icon to change.

Obviously, but this is not the only thing we don't like about this icon (or at least, that does not make us like it more than our current icon).

SpiritCroc commented 1 year ago

I mean, if anybody can make https://github.com/SchildiChat/schildichat-meta/issues/2#issuecomment-1283602755 work, I'd be interested, that's still the proposal I (and I think su-ex as well) like the most from here. But unfortunately it may be a bit tricky to keep recognizable at low resolution, and also to make the aspect ratio more square while still having it look nice.

strider72 commented 1 year ago

While big business logos can be simple, and will be recognizable anyway since the company is big, a little bit more detail doesn't hurt a small project such as us to differentiate. There are many logos out there that resemble Windows and Apple Logos, for example. Also, firefox managed to combine two elements fine in a logo in my opinion, so it's not impossible.

At small sizes, the Firefox logo is basically just the fox. The world kind of disappears. Hmm...

How about this: a turtle in profile. Rather than its shell being a normal shell pattern, it has the horn on it. Or you could do the turtle from above, but that might muddly the concept quite a lot, as from above its the pattern that makes it most recognizable as a turtle.

At smaller resolutions, you might have the distinctive turtle and lose the horn

franksouza183 commented 1 year ago

another draft rascunho-schildichat

SpiritCroc commented 1 year ago

That looks pretty cool! I wonder if one could make it work as icon somehow, or if too many details would get lost :thinking:

weiss-d commented 1 year ago

Hi everyone! How about a speech bubble that looks like a segment of a turtle shell? And it has a post horn and a little turtle tail :) This way it will be distinguishable from other messaging app bubbles, and can be downscaled to a tray size without loosing details. What do you think?

image

Here you can download SVG files for testing: https://cloud.disroot.org/s/H8wkzw2nCgyLEH2

SpiritCroc commented 1 year ago

Hm, looks ok-ish to me, but I'd need to try out for a while to be sure. I think for me personally, the post horn is a bit too prominent in this one, but the shell-formed message bubble sounds like a nice idea to me.

weiss-d commented 1 year ago

@SpiritCroc I guess we can scale the horn down a bit in full-size icon:

schildichat_sw_test-2

SVG: schildichat_sw_test-2.tar.gz

SpiritCroc commented 1 year ago

I didn't mean the scale, but conceptually having it the thing that you recognize first in the icon. Personally I would prefer having more stress on the turtle rather than the horn in some way.