webxdc / store

XDC store, migrated to codeberg
https://codeberg.org/webxdc/store
5 stars 0 forks source link

New non-deltachat icon for the store #189

Closed Septias closed 1 year ago

Septias commented 1 year ago

I want to create a new icon which doesn't show dc.

r10s commented 1 year ago

cool, i am also not too happy with the current icon and would have created sth. as well, but happily waiting for your ideas :)

a general note: to let the icon look "square" also if used in white bubbles, do not use use "plain white" as background (as currently) unless there is a border or sth like that; we should try be a good example with the store and go for an icon that looks "square" in mostly all cases

Septias commented 1 year ago

Made some icons: icon4 icon3 icon2 icon1 icon5

I still think none of them are good enough for the final version, but at least a start maybe. Feel free to also design some stuff @r10s. First and last are definitely my favorites atm.

r10s commented 1 year ago

thanks for the inspirations and to push that forward. if we want to go for a variation of the "webxdc icon" with a "play" symbol, at a first glance, i find the first one too far away.

the other ones are interesting, but maybe have too many details. maybe the following variation?

 

simpler-rotated

 

i also rotated the "play" button a little, so that its left border is parallel (roughly :) with the slash (without the rotation, there is an optical illusion for me that looks as if it falls to the left :)

but not sure, just an idea

Septias commented 1 year ago

I also tried rotating it the way you did, but it didn't work for me. For your design though I think it fits pretty well :) What do you mean by the square borders you mentioned above? @r10s

r10s commented 1 year ago

i mentioned borders only if one really want to have a #ffffff background. i would not do that here and i would also not add borders in case of these icons.

instead, we could a background that is close to #ffffff, so that we still have the square icon as for other webxdc apps and contrast to the bubbles, both, in dark and light mode.

i am thinking of sth as the background in the dc icon that us used on github, ios and others., EDIT: maybe the following:

 

simpler-rotated2b

 

UIs will add rounded corners and maybe borders etc. this variation will look like square icon in both, light and dark mode. we could also go for a more fancier background color, or maybe dark. but before tweaking that, but that should come after the basic shape is selected

Septias commented 1 year ago

I thought maybe a big border like the first icon could be nice, but this is already close to perfect I would say. So my suggestion is to just add this now and be happy. At some point, I would like to get an explanation for why we do not just allow transparent backgrounds because having to choose a color makes it very hard to find a good match for dark and light themes. But that can wait for some irl discussion as I'm sure you have good reason for that.

r10s commented 1 year ago

first, it is not the end of the world, if there is an icon with plain white background. i just do not want to give a not-so-good example with our flagship apps :)

an explanation for why we do not just allow transparent backgrounds

the reason is to give implementations the chance for a nice, uniform layout. if we would allow shaped icons or transparency, UI cannot eg. add the icons with a drop shadow or a border (or, of course, they can, but it will look not nice or uniform)

also, depending on host app, support of alpha channels and transparency may be more complicated that just drawing sth opaque (this is a minor reason, but still)

because having to choose a color makes it very hard to find a good match for dark and light themes

that would be even harder for transparent icons. eg. on easily ends up with black on transparent - that look good on white but turn invisible on black.

this is reasons, transparent icons have a contrasting border, if done well (see the delta chat icon)

there could be other approaches to deal with all that (see eg. the icon guides for apple or google), however, the current approach "rectangular, no shape, no transparency" fulfils many aspects in an comparable easy way for both, hosts and webxdc apps