App icon improvements

[bragefuglseth]

The current app icon fits well into GNOME’s icon style, and gives an indication of what the app does. However, I think there are other metaphors we can use to make the icon have an even stronger association to file syncing. @jimmac has some old, unused icon sketches for a file server. Maybe those could be useful?

[hwittenborn]

Hey! I'd definitely be open to any icon ideas you have - I'm definitely not a professional UI/icon designer, it's all just a best-effort basis on my part from whatever skills I've managed to obtain. Feel free to send any of them here, I'd love to look at them :)

[jimmac]

Here's an initial sketch on the idea of using the file cabinet and indicating the process of synchronization on the app icon:

[hwittenborn]

I like the idea @jimmac! It does look a bit too similar to the Nautilus icon for me though - an idea I was really heavy on when I first started was doing something like a drive bay. Instead of the little slots of paper like in the current logo, I was wanting those to be pictures of drives, to symbolize backing up a lot of storage devices.

I don't know if you ever do icon requests (and if you do what kind of compensation you want for them), but if you'd be willing to work on something like that I'd be willing to pay something. I'm just now entering college and I'm quite strict on my available money, but I'd be more than open to give something to help make Celeste look good.

If there's any other icons ideas you have I'd be glad to see them too - I know I had that drive bay idea, but I'm definitely not set on it if something better could pop up.

[eriolloan]

Hi, what about something along those lines ? (Just focusing on a concept for now, it would need some work to align with adwaita colors and proportions)

[eriolloan]

Not related to the issue I know but a thumbs up from you means so much to me @jimmac. Thanks :)

[hwittenborn]

Yeah I like that a lot @eriolloan! I feel like it fits the "Cloud" vibe Celeste aims for a lot more than the current logo.

I don't feel like the icon necessarily fits into the GNOME icon style (I'm thinking mostly because of the lack of a gradient on the bottom corners of the icon), but I do think that's quite a nice icon regardless and I'd love to get it included in Celeste once it gets finalized :).

[eriolloan]

Thanks @hwittenborn. What about this :

[hwittenborn]

That's really nice @eriolloan! Especially the symbolic icon, I feel like it's miles ahead of Celeste's current ones.

I just had a couple thoughts I was wondering if you could experiment with:

• Could the blue drop under the cloud/syncing circle be grey-based instead of blue? It just feels a bit out of place with the blue being there.
• Could you try making the bottom of the syncing circle more square based? I'm just wanting to be able to see the solid line on it more (like with the GNOME Calculator icon). I think making the line a bit bigger might help too if that doesn't look good.
• Would it be possible to make the back two clouds solid colors? It just feels a bit out of place with the front one being a solid color. I feel like it'd fit better into GNOME's icon style as well (see the square-based icons on https://developer.gnome.org/hig/guidelines/app-icons.html#gnome-app-icon-style).

[eriolloan]

Thanks @hwittenborn.

I experimented with grey gradients in an earlier version. I was not convinced as I felt it made the cloud look a bit gloomy and reminiscent of cardboard, but that's probably just my tastes and objectively it looks fine. Two pairs of eye are better than one so tell me if grey feels ok.

I think the white area of the cloud pops a bit more when contrasted against the gradients, but solid colors look ok to me.

If you liked the gradients but leaned towards solid colors to adhere to the adwaita icon style, you might be limiting yourself more than necessary: reading the icon guidelines confirmed that the style is not flat and gradients are welcome for curved surfaces. I found many successful examples of that in my own app drawer (Photos, Weather, Scanner, Tuba, Rnote...) and thought "why not".

The gradients are rough and WIP so I'm not happy with them yet (each cloud being two circles with conflicting gradient directions I was planning on merging the shapes and blending the gradients better when nearing a final version.) I can refine them if you're not sure and want to know where that can go. Solid looks fine and gradients are allowed in this case so you tell me.

You're absolutely right for the circle shadow being too subtle. Using a solid color is probably enough to improve readability. Tell me if what you see above works for you.

I'm not sure we can go further than that however. Circling the arrows completely:

• makes both the cloud shape and the global design less legible,
• might not be allowed. Borders are not mentioned in the guidelines and it favors flattened 3D and shadows. I'd stay away from borders for that reason.

We can't use a bigger shadow since having two shadows of different sizes:

• would be visually inconsistent and creating visual noise,
• goes against the recommended size for these is 4px (bigger applies to thick objects).

We can always use a darker tone for the shadows, or if you have another idea I can experiment with it.

To comment on squaring the circle:

• I don't think it adds in semantics, aesthetics or legibility,
• it disrupts the way curvy shapes flow into one another (we're loosing the cloud "vibe") and it looks like a gravestone in the cloud to me,
• the shadow-only version looks disjointed from the circle,
• adding a border on the sides to make the shape more apparent feels really awkward and, same as above, it probably contradicts the guidelines, An alternative would be changing the cloud color somewhat to stress that this line is in fact the shadow of something, but I think it's visual noise and you can only see the gravestone at small sizes.

Here are my attempts at making it work so you can see what I mean :

Anyway, I can edit some more as well as mix and match things until we get to something that feels right.

Also to note: when finalizing, some things will move or be scaled up or down by a few pixels (like the arrows on both hicolor and symbolic versions) to have it look crisp at all sizes. I'll do this last as it's a bit more work on my HiDPI screen.

That was a bit wordy but I feel it's necessary to share the motivation for the design choices so you can either be onboard with the reasoning or point me to what I don't see or what I can do to make it work better.

[hwittenborn]

Thanks again @bragefuglseth, everything's looking pretty good! No problem with all the comments, I definitely want to get this right. Here's the stuff for everything you were talking about:

I think the bottom grey gradiant works great for the logo - it gives the impression of a drop shadow to me, which I'm really liking. The only thing I'd change is the shadow under the circle to have the gradient in the bottom corners, like how the main white cloud is doing.

I agree that the solid colors for the back two clouds looks a bit off for a GNOME-styled logo, though I think the gradient across the entirety of them looks a bit off too. Maybe there could be a bottom gradient like the main white cloud? I know they're quite obstructed because of the main cloud, but I'm curious if even having them in the exposed bottom corner they have would make everything look appropriate (maybe moving the clouds to the left a bit could help that as well?).

I think having the two sections of the back two clouds from the gradient version wasn't bad though, I'm just not liking the gradient across the entire cloud a ton. Maybe the two sections of each cloud could be separated by one being darker? Another idea I was thinking of was just copying the style of the main white cloud, and then moving it up and left like you were currently doing (though I'm not entirely sure how good that'd look).

I don't think the squared syncing icon is very good either, go ahead and keep it at it's current circular state for now (unless you think of anything better of course).

That scaling stuff sounds fine, that can be looked over once you get to that though.

Let me know if you have any question on any of that!

[eriolloan]

Another idea I was thinking of was just copying the style of the main white cloud

I'm not sure I get that right, can you expand on it a bit ?

maybe moving the clouds to the left a bit could help that as well

You'll notice that I moved them closer and higher between the very first concept and the first proposition. I did so because I noticed that it made the icon be mostly horizontal instead of square and it looked small in comparison to other Gnome icons. I'll see what I can do but it won't be night and day.

The rest sounds good to me!

I'll be away for two days so I'll work on it as I get back.

edit: formatting

[hwittenborn]

Sounds good! Whenever you're able to work on it is more than fine, I'm in no rush on my end.

[eriolloan]

I extended my vacations a bit ;)

Ok, here's what I've got:

[hwittenborn]

I really like those icons @bragefuglseth! I feel like they're almost complete honestly, there was just two things I was wondering about:

• Could the back two clouds have the lighter gradient in the bottom corners like the main cloud? It just feels a bit off without them.
• Could the dark blue cloud be slightly darker? I'm thinking a color closer to the current Celeste background color (thought with a blue tint in it) would be nice. I don't have a specific color in my head (nor do I know if it'd look very good honestly), but if you'd want to experiment that'd be good.

Do you plan on making the source files available once this gets merged by the way? If you do, I could mess around with the colors myself and see if we could agree on something.

The only other thing that'd need to get changed is Celeste's symbolic icons - I'd like to use the current symbolic icon you provided as the syncing icon if you'd be fine with that though. I can help work on those if you don't want to work on them too, I really appreciate all the work on these main icons in itself :).

[eriolloan]

Could the back two clouds have the lighter gradient in the bottom corners like the main cloud?

Like lighter gradients instead of darker ones for the two background clouds? If that's the case it would create more visual noise being too close in color to the main cloud. I can show you if needed. If it's something else can you explain some more ?

Could the dark blue cloud be slightly darker?

Honestly I'd recommend against it. If you want to adhere to the adwaita style and its color palette. This is the darkest blue we can afford within these constraints. (I actually had to cheat a bit for the shadow on the darkest cloud, using a dark tone at 33% opacity. But I don't think it's a good idea to use it for something other than a shadow.)

If you want my opinion on this: at this point I don't see what would make the icon more representative of the function of the app, be more legible on both dark and light background, or more inline with adwaita.

I still have massive work to do on hinting so it looks good on low DPI displays.

Do you plan on making the source files available once this gets merged by the way?

In the spirit of FOSS, sources will be available of course :) I can't prevent you from tinkering with it afterwards but I hope you won't need to: I'm using all my professional skills to provide you with solid assets your users and the guidelines can be happy with.

For the symbolic icon we had the same idea! I'm working on a symbolic icon for the app derived from the hicolor icon metaphor (multiple clouds) because I thought the one you see on the previews is looking more like a syncing status icon. I was planning to wait for the hicolor icon to be approved to suggest you than in a second phase I work on the app indicator and ask you what states you need to be displayed (syncing, synced, error, paused ?).

edit: quote formatting again

[bragefuglseth]

I really like those icons @bragefuglseth

FWIW I’m not the one doing the work here, @eriolloan is, but this looks good nonetheless 😄

[hwittenborn]

Like lighter gradients instead of darker ones for the two background clouds? If that's the case it would create more visual noise being too close in color to the main cloud. I can show you if needed. If it's something else can you explain some more

I was talking about in the white gradients on the bottom left and right of the main white cloud. I was wanting those areas in the back two clouds to also be a bit lighter, so that all three clouds had a white gradient in the bottom left and right.

I'd send a screenshot of the specific place I'm talking about but I don't have any image editors on my system at the moment. If that doesn't make sense I can send a picture later though.

This is the darkest blue we can afford within these constraints. (I actually had to cheat a bit for the shadow on the darkest cloud ...

Do you think it'd be fine to go out of the color palette a little bit? I think it'd be okay if it makes the icon colors a bit better.

What's that shadow on the darkest cloud that you were talking about? I'm assuming it didn't show well because of it's size on the rendered image, but I couldn't see anything at first glance.

In the spirit of FOSS, sources will be available of course :) I can't prevent you from tinkering with it afterwards but I hope you won't need to: I'm using all my professional skills to provide you with solid assets your users and the guidelines can be happy with.

For sure! I don't want to make any changes to the icon after we get it merged in, at least not without consulting you first. I know it'd suck for a bunch of things to change right after you got it merged in, and I definitely want to avoid that.

I'm working on a symbolic icon for the app derived from the hicolor icon metaphor (multiple clouds) because I thought the one you see on the previews is looking more like a syncing status icon. I was planning to wait for the hicolor icon to be approved to suggest you than in a second phase I work on the app indicator and ask you what states you need to be displayed (syncing, synced, error, paused ?).

That'd be great to have a symbolic icon for the main app too! I'm not quite sure where it'd be used - I was thinking potentially in notifications, but I was thinking the status icons could be used there. It definitely wouldn't hurt to have one included in case it'd be needed, but if you don't want to make that one in particular I think it'd be fine to exclude it.

If you think it'd be good to work on that before getting the other icons done I'm fine with that, whatever is best for you is fine by me :).

[hwittenborn]

FWIW I’m not the one doing the work here, @eriolloan is, but this looks good nonetheless 😄

Lol that's my bad, I must've been crazy tired the other day or something. Glad to see you like the icon too though!

[eriolloan]

I don't have a problem with the location. The gradient you want is what confusing me here.

Like lighter gradients instead of darker ones for the two background clouds? If that's the case it would create more visual noise being too close in color to the main cloud. I can show you if needed. If it's something else can you explain some more

I was talking about in the white gradients on the bottom left and right of the main white cloud. I was wanting those areas in the back two clouds to also be a bit lighter, so that all three clouds had a white gradient in the bottom left and right.

A bit lighter is not the same as a white gradient. I'm doing both and you tell me (A) or (B):

A


B


In my quoted comment I was recommending against (A).

Do you think it'd be fine to go out of the color palette a little bit? I think it'd be okay if it makes the icon colors a bit better.

The colors look fine to me as they are and the darker we go, the harder it would be to visually parse the icon on dark backgrounds. Can you share your rationale for doing so?

What's that shadow on the darkest cloud that you were talking about? I'm assuming it didn't show well because of it's size on the rendered image [...]

You're right it is subtle.

Here's a closeup


That'd be great to have a symbolic icon for the main app too! I'm not quite sure where it'd be used [...]

It's used in the current application menu to the right of the "Activities" button. It looks like this feature might be deprecated at some point but an icon for this is currently needed.

If you think it'd be good to work on that before getting the other icons done I'm fine with that, whatever is best for you is fine by me :).

Thanks, I'd rather progress on one thing at a time, validating each step as we go.

edit: posted wrong image

[eriolloan]

I just thought of something about this:

Do you think it'd be fine to go out of the color palette a little bit? I think it'd be okay if it makes the icon colors a bit better.

I can darken the last cloud a bit by applying a darker gradient over it, as if there's a drop shadow. They're supposed to come from the top so I can't really darken on the top. Looks like this:

[hwittenborn]

Thanks for all those mockups, I appreciate them a ton!

A bit lighter is not the same as a white gradient. I'm doing both and you tell me (A) or (B):

That's my bad for the confusion, I was definitely wanting something more along the lines of B. B isn't quite what I was thinking though, these icons show more of what I'm thinking:




The bottom shadow is darker, and then the gradients in the corners get lighter up to the point of the main icon's color. I think that's how I want the back two clouds to behave as well.

The colors look fine to me as they are and the darker we go, the harder it would be to visually parse the icon on dark backgrounds. Can you share your rationale for doing so?

I'm thinking about it more, and I was actually starting to think the back cloud could be one color lighter (Blue 3/4 from the GNOME color pallete I guess). Would you be able to give that a shot to see how it looks?

If neither of those ideas work we could settle on the icon design from https://github.com/hwittenborn/celeste/issues/115#issuecomment-1658924987 though, I definitely don't want to go back and forth to the point of it draining you. Let me know if you think either of those ideas would be good changes though.

I appreciate all the work you've put in for this, thanks for all the changes you've been open to so far as well! :)

[hwittenborn]

Just throwing out an idea for the main app's symbolic icon as well, but perhaps the icon could be the same as https://github.com/hwittenborn/celeste/issues/115#issuecomment-1658924987, but with the arrows removed and the cloud being closed up at the bottom? I saw the symbolic icon in mockup B from https://github.com/hwittenborn/celeste/issues/115#issuecomment-1663784454, but I was thinking an empty cloud might look better.

[eriolloan]

I'm all for the lighter shade of blue, it's more contrasting when placed on dark background.

The bottom shadow is darker, and then the gradients in the corners get lighter up to the point of the main icon's color. I think that's how I want the back two clouds to behave as well.

Thanks for pointing it out! I think it works well for the main cloud (It doesn't have to stay, your call). Not so much for the few pixels that make up the other clouds sides...

it looks dot-like when visible, and almost non-existent at 64px and below. I'd choose between the simple lighter or darker gradients if we want to see some thickness on these clouds.

Just throwing out an idea for the main app's symbolic icon as well, but perhaps the icon could be the same as https://github.com/hwittenborn/celeste/issues/115#issuecomment-1658924987, but with the arrows removed and the cloud being closed up at the bottom? I saw the symbolic icon in mockup B from https://github.com/hwittenborn/celeste/issues/115#issuecomment-1663784454, but I was thinking an empty cloud might look better.

Just so we're on the same page: it cannot be the same as the main icon but we have to create something from the ground up that is unmistakably related.

So while we focused on the main icon I had multiples shots at making a symbolic version since we began this thread. It's a lot of small moving parts in term of requirements/constraints that flow into one another like dominos, and as long as it's not working it looks horribly wrong at this size.

So I went all in on this today and discovered we:

• don't have to focus on the dark-on-light version as it is not how the shell will use it (this one looks ugly if you view it at its intended size and that's expected: to keep it short there's this optical effect we have to deal with on screens where white "overflows" on black so at this size the black icon will look messier and bigger that the other way around, you can safely ignore this one on the previews),
• can't represent 3 stacked clouds on 16x16px (while adhering to what the guidelines have to say about minimal thickness of elements) and still have them be parsed as clouds by a human eye,
• can't use only clouds: I tried empty foreground cloud with filled cloud in the background and another with filled cloud in the foreground and the top border of a cloud in the background and event if it works visually it looks like something for a weather app... so the obvious thing was to keep the arrows (and have them fit into the main cloud),
• can't offcenter the main cloud as it would mean a smaller cloud that is less legible and the arrow would not fit anymore (they're already the smaller they can be while still looking like arrows),
• have to use a filled shape instead of only outlines for the legibility of the arrows and to distinguish the app icon from the app indicator icons.

The one you see in the latest previews is the one that I came up with to do the job the best with these constraints. That's why I wanted the hicolor icon to be validated but since we haven't touched the metaphor I figured it was safe to start working on it.

Now, I might attempt very minor adjustments but I don't see much that can move and I'm generally in favor of not fixing something that's not broken ;).

I can fully understand if this one doesn't work for you and I absolutely won't mind if you find someone else who think can have a crack at it. (And also I really can't see myself start over and spend another day moving and resizing tiny circles XD)

I've started working on the status icons. I came up with this list of states to play with:

• connecting
• syncing
• paused
• alert (e.g. file conflicts)
• error
• disconnected

Am I missing something or are some of these not needed ?

If you feel we're done for the main icon you just need to tell me the features you want and I'll blend them together :)

[eriolloan]

I appreciate all the work you've put in for this, thanks for all the changes you've been open to so far as well! :)

You're welcome !

[hwittenborn]

I do like the small gradients on the newest image the best, I feel like it fits into GNOME's icon style the best. I understand that it might look a bit pixelated (or even non-existing) on smaller sizes, but I feel like it's more than fine considering other GNOME app icons have the same style.

It's also just a personal preference thing, probably partly being due to other GNOME icons doing the same, but it does seem the best personally.

I'm pretty sure this is the last request for the icon, but was there any color in the GNOME color pallete lighter than the third cloud, but darker than the second? The color in the third cloud just seemed a bit too colorful/vibrant for my personal tastes.

From first glance it looked like you were using Blue 3 - could we possibly use a color that's slightly less colorful/vibrant? Something closer to the white/grey section on something like Google's color picker (you have to enter the Blue 3 hex code in manually though) seemed to be what I was going after.

I wouldn't want to have you keep going back and forth trying to get small color changes like this figured out though - would I be able to get the icon asset so I could try getting a good color going locally? I could then upload it into here so we could agree on something - having you make the color change and then me checking how it looks after just seems a bit less productive than me figuring out exactly what I want first, and then checking with you to see if you agree.

If that doesn't seem like the best approach for you and you'd rather do it all on your end, that's more than fine too though.

So I went all in on this today and discovered we: ...

All the points you listed make sense, I agree that making the main symbolic icon a solid color instead of an outline would be best to distinguish it from the status icons.

My only gripe is that the bottom of the arrow is touching the edge of the cloud - would it be possible to remove the outline of the second cloud and make the main cloud slightly bigger? It seemed like it'd be fine and still connected to the non-symbolic icon when visualizing the icon in my head.

I've started working on the status icons. I came up with this list of states to play with: ... Am I missing something or are some of those not needed ?

I don't think there will be a need for a connecting or disconnected icon, but syncing, paused, and error icons would definitely be needed. File conflicts are currently handled as errors, but I definitely think it'd be good UX improvement to handle those as alerts with an alert icon instead.

[hwittenborn]

One other tiny thing - assuming we go the route of keeping the border gradients on the back two clouds, would it be possible to make the gradient on the front cloud the same width? It feels like it's a bit more spread out on the front one, and I think having them all the same width would make everything look more cohesive.

[eriolloan]

I understand that it might look a bit pixelated (or even non-existing) on smaller sizes [...]

I produced the preview so you could see how doing so is detrimental. And I get that you have.

but I feel like it's more than fine considering other GNOME app icons have the same style.

Yes some icons do this, but not all the time. You're right that it's a recurring stylistic element for those, but it's only featured so prominently on the element that needs focusing as to not create visual noise. This gradient is like a tool that brings focus to something. You can use best when you know where it's needed.

I'm pretty sure this is the last request for the icon, but was there any color in the GNOME color pallete lighter than the third cloud, but darker than the second?

Nope :/

The color in the third cloud just seemed a bit too colorful/vibrant for my personal tastes.

That's a gripe I have with the GNOME palette. It is partially inconsistent but hey, we can make do: I initially used the darker blue because it shares the lighter blue's low saturation. On the other hand the middle one being more saturated contrasts better on dark backgrounds. So here's a real design choice to be made as we can't win on both sides (consistency vs. usability).

All the points you listed make sense, I agree that making the main symbolic icon a solid color instead of an outline would be best to distinguish it from the status icons.

Cool!

My only gripe is that the bottom of the arrow is touching the edge of the cloud [...] would it be possible to remove the outline of the second cloud and make the main cloud slightly bigger?

I don't think so, but feel free to try yourself or ask around. Currently the arrows are legible (you just told me they are arrows, that's how I know ;)). At this size it's not unusual to cheat on the purity of shapes to get the desired result at 1:1. Graphic design is not pure geometry, it's accounting for the human eye and brain. I know this icon works as is.

In addition : a single bigger cloud means parting with a meaningful element of the metaphor and a distinctive feature. Keep also in mind that the cloud cannot expand horizontally as it is already 16px wide. It can only grow vertically. And if you go this route you can expand it by a single pixel vertically but it still wont fit the arrows fully. Expand it more and it will probably look goofy and not connected to the hicolor version which is wide instead of tall. I already went as far as possible with this (you'll notice the cloud is already taller than the hicolor one but is still wider than it is tall).

would it be possible to make the gradient on the front cloud the same width? It feels like it's a bit more spread out on the front one, and I think having them all the same width would make everything look more cohesive.

If you mean thickness, they're already the same. All the shadows have been produced by displacing the corresponding element by 4 pixel vertically. On the background clouds you're only seeing the tail of them so it's normal that they're thinner and that's precisely what makes them consistent.

It's also just a personal preference thing, probably partly being due to other GNOME icons doing the same, but it does seem the best personally.

About the personal thing: I think I should give you some context to what I'm doing here. I'm not working differently than if I was getting paid (seriously, don't pay me). My clients pay for the skills/time they know they need but lack/can't invest in otherwise. There's something that's often frustrating to consider for them: unless they're selling art, their target audience doesn't care about their taste (or their partner's if you can believe it XD). A visual asset has a function it must fulfill within a given set of constraints (audience + style guides + budget) and that's about it. I work from what they think they need and I deliver what they didn't know they needed because I remove taste from the equation, theirs and mine. They get results and they trust me for that reason.

---

Excuse me but I have to tell you this is the point where it's getting exhausting.

Your input allowed us to explore within the space of what is required and desirable, and I tried to advise you when a suggestion was not optimal with some detailed reasoning because I love it when someone curious gains an understanding in a field they want to know more about and then grasp why I had to do x instead of y. But if we don't settle on something I will have to pass the torch on to someone else.

I'm eager to see your application develop to its full potential as I've always personally wished there was a polished and usable Nextcloud client for GNOME. I can't submit code as I'm just dipping my toes in Rust territory but graphic design is what I've done for most of my life now and I thought it could be a mean for me to contribute.

So over the course of this week I provided you with at least 3 working propositions (flat, shadows, highlights, + possible mixing of ligther/darker blue) for the hicolor version that don't need fixing as they:

1. follow elementary design principles,
2. comply fully with the Gnome HIG guidelines.
3. present a metaphor in line with you application purpose,
4. are decent usability-wise (good enough contrast between the main cloud and the arrows as well as between the main cloud and the other clouds so that most visually impaired user can still interpret the gist of the metaphor correctly),
5. are legible no matter the background used.

I also managed to cramp all that in a 16x16px variation using one single color and still have it be readable and distinctive icon.

Now I don't say you're asking things that are not possible, I'm just telling you I can't do better for your application.

If you feel like trusting me to keep doing my best I propose we carry on and complete this project in a way that I'm confident will be beneficial to your application's users and ultimately satisfactory to the both of us, but I won't mind if you want to achieve this by yourself or with someone else and I'll be happy if what I did gets you closer to what you want. I'm trained to think of your app and users, but you also should do what you think is best from your standpoint.

In any case the sources including some status icons are now hosted on a FOSS file-sharing platform for you to do as you please (note that the link expires after one week, they don't host longer than that).

[hwittenborn]

Sorry if I was sounding too demanding or anything, I definitely wasn't trying to go for that. I really appreciate all the work you've been doing, I don't think I could've even come close to an icon like this myself. We can definitely get this finalized then, as I don't want to keep you going on this longer than you want to.

I know this icon works as is.

In addition : a single bigger cloud means parting with a meaningful element of the metaphor and a distinctive feature. ...

I trust your input on all of that, we can go ahead and keep the latest revision of the symbolic icon then.

I really would like to keep those gradients on the full-color icon though, would you be fine with that? I also went at the coloring issue on the third cloud (that and the third cloud's gradient color are the only things changed in it), and this coloring looked pretty good to me:

What do you think? I know it goes outside of GNOME's color palette, but I do think it improves the look of the icon since the color is a bit less vibrant. Throwing it into App Icon Preview also appeared fine on light and dark modes.

If you think either of those changes aren't good, we can revert to an icon without the respective change(s). I won't have any other requests for the icon, so we can settle on anything that's been provided from this point.

I'd like to say again I really do appreciate all the work you've provided, the quality's been as if I've paid for it and I'm incredibly thankful you've been willing to provide all of this for free!

[eriolloan]

Thanks for your positive feedback. I just wanted to make sure this is going somewhere.

I trust your input on all of that, we can go ahead and keep the latest revision of the symbolic icon then.

🙏 That's a relief, I really can't see what can technically be changed here.

I really would like to keep those gradients on the full-color icon though, would you be fine with that?

Sure, it's like having a flat version except for higher res.

I know it goes outside of GNOME's color palette, but I do think it improves the look of the icon since the color is a bit less vibrant.

I agree they match better and no one will know or care to inspect in with a color picker.

So here's are the sources for this version.

I'll come back to you with status icons soon.

[hwittenborn]

I'm glad to hear all of that! I'm glad to have that all settled too, I think the icon's in a really fine place now, and it'll definitely do great once we get it added.

Since we're getting close to finishing this all up, I wanted to mention I'd like to credit you for icon development in Celeste's About page. Would you be interested in that?

If you'd want that, I'd just need a name and an email/website you'd want linked. There's no pressure for any of that if you don't want to though, but if you do I'd definitely like to acknowledge all the work you've done :).

[hwittenborn]

Hey @eriolloan, do you have any update? By all means I don't want to rush you at all, I'm just curious on the current status of things.

[eriolloan]

How quickly two weeks can disappear! Sorry about this @hwittenborn, busy with a million other things but this is on my radar again.

Thanks for your offer, I'm ok with using my name (Adrien Facélina) other than that I don't use my website anymore and don't really have an email address for this purpose, so I can't see much more info to add...

I'm getting back to working on the icons.

[hwittenborn]

All good @eriolloan! I'm fine with having just your name in the credits - we can get that all confirmed in the PR that makes the icon changes as well just to make sure everything checks out fine.

Feel free to keep working on this whenever it's good for you, I'm not in any major rush still.

[eriolloan]

Thanks for your patience @hwittenborn, here are the status icons I've come up with so far (completely open to discussion, expansion and improvement as I have some time now) :

• Syncing

• Synced

• Paused

• Disconnected

• Alert

You told me the disconnected status was not needed but I had it nearly done already. I can remove if from the file I'll include in my PR if you're sure you won't need it somewhere in your app. I could see it used to prompt the user to check their wifi settings directly rather than opening the app to discover they have no connection, or directly in the server list...

Now the main icon is complete and could be pushed/sent quickly if you're ok with what was done, but I gave the tedious "circle-pushing" another go. You were right that my original design could be improved. I also came up with an alternative based on the other metaphor (multiple clouds instead of cloud-sync). Tell me if you fancy one over the others.

edit: corrected mislabeling of disconnected icon.

[hwittenborn]

I really like those @eriolloan! I don't have too much I care about changing, I just had these thoughts:

• For the Synced icon, does the checkmark not work when at the bottom of the cloud like with the other icons? I'm curious if it would, but I'm assuming you've already tried that and moved it since it looked better.
• We can definitely keep the disconnected icon. The main place I imagine it'd be used is when internet is off like you mentioned, or when a client is logged out from a server. Though I'm not aware of any way to check that with rclone (Celeste's backend for syncing files). I'm sure I can add a way to get it working, but it definitely would be good to have it in the repository just in case it's needed in the future.

I definitely prefer the syncing cloud over the three-layer cloud though, let's stick with that.

[hwittenborn]

I'll go ahead and get all the icons merged in one go as well, just so the app/tray icons are all in the same style for end users.

[eriolloan]

Ok here they are (same thing, the link is up for a week).

For the Synced icon [...] I'm assuming you've already tried that and moved it since it looked better.

That's about right ;) It looked a bit too much like a distorted heart shape.

My concern (as well as yours if I get why you ask) with it was that it is not centered vertically. I assumed we don't want the cloud to jump when changing state, so I had its position fixed on every icon. For what it's worth I tested it with a quick mockup of a top bar and it doesn't feel off-centered, but this not really production conditions. So if you can test it and it's off I'll find a solution.

[hwittenborn]

Sorry for the late response @eriolloan - I started university schooling a few weeks back and it's been keeping me quite busy. I'm going to try to get this looked at in the coming days though, just wanted to send a heads up.

[eriolloan]

Thanks, no problem. Just @ me if you need something done.

[hwittenborn]

Hey @eriolloan, I finally got a chance to get these looked at.

I really like how they look in my system's tray on Ubuntu 23.10, the only thing that was off for me was that the synced icon (the one with the checkmark) felt off-centered vertically. The other icons have stuff going on below the cloud that make them look fine, but it felt like there was a gap with the synced one since there's nothing there.

Like you mentioned a few comments back I would definitely prefer the cloud to not jump in between icons. I couldn't think of any other way of going about the sync icon though - are there any other metaphors you had in mind for the synced icon? If not I would still prefer the clouds to not jump, but the gap at the bottom isn't huge and I'd be more than fine keeping it as is.

[hwittenborn]

I did this rough mockup in Inkscape where the cloud was longer vertically (the lines, edges, and spacing are all really rough, I just threw some points lower on the cloud) - do you think making all the clouds longer like this would be fine?

I don't think making the cloud longer like that make anything look too off - comparing the height to the other icons made it appear to be a valid height for symbolic icons as well. I hadn't messed around with doing that on the other icons a ton, but if you think it'd be something that could be tried I'd definitely like to give it a go.

If you don't think that'd work out I'm fine with that too though, and then we can go with whatever you think would be best from the previous comment.

[eriolloan]

Ok thanks for the real condition feedback.

Your mockup looks fine in isolation but since we don't want the cloud to jump between states, we'd have to have a bigger cloud for each one. And I don't think the smaller parts would stand out anymore (defeating the purpose)...

I'll find another way to convey the same meaning for the sync icon while taking up more space vertically.

I'll get on this ASAP.

[eriolloan]

I had some time so there you go : updated icons.

Is this better in use ?

An interesting question to ask near the end of the process : do you have a monitor at 1440p or below ? If so can you make out the checkmark ? I don't have access to a lower res screen for a few days...

edit: replaced "tick" with "checkmark"

[hwittenborn]

I found that new icon to work a lot better in my usage, the vertical alignment looks much better to me. My only complaint with it is that it isn't in the same style as the other icons.

Would it be possible to give a variant with a solid checkmark with no circle around it (vs the current outlined one) a go? I don't know if it'd be the best approach, but at the least everything would be in the same style and I think it'd look fine at smaller sizes like in the system tray. What do you think?

do you have a monitor at 1440p or below ?

I don't have a 1440p monitor, but I was able to set my screen resolution to 800x600 in my desktop's settings. I don't know if that's what you were looking for, but this is what the tray icon looked like at that resolution:

[hwittenborn]

If you don't think there's a way to make the checkmark work without that approach you're currently using, that would be fine as well though. I still think it's a really good icon, and I think it'll work effectively with the other icons if need be.

[eriolloan]

Thanks for your feedback, it might not be the final icon but you confirmed this one is legible at least.

Would it be possible to give a variant with a solid checkmark with no circle around it.

I would like that very much. On my first tries I could only come up with icons that look like a heart if you don't squint so I switched my gear and went for the circle...

I'll have another go at it.

[eriolloan]

Tell me if I nailed it this time :)

ui-icons.zip

[hwittenborn]

I did some testing to see how it looks in my tray, and that looks perfect @eriolloan! Unless there's anything else you're wanting to look at, you can go ahead and get the PR going and I'll get these icons merged in :).

[eriolloan]

Oops, I didn't look at your source files properly: you have a loading symbolic icon. If you need it I can make one before the PR.

[hwittenborn]

Oh I completely forgot about that :P. If you could it would definitely be nice to have it, if it's hard to implement we can stick with the syncing icon too though.

The loading icon would only be shown at startup while some quite short-lived checks are done - I'm thinking sync checks would always need to be done at startup so it might be fine to just show the syncing icon during that though. If you'd want to give a shot at it I'd be fine having it just in case, but if it proves hard to implement I'll be fine with the current icon set.