logo

[domenkozar]

Current logo is generated using https://www.midjourney.com/ as a snowman.

Suggestions welcome!

[kip93]

Just a hobbyist but I can probably whip out something for this. If I get some time this weekend after playing with rolling release support I can try to sketch up some drafts at least.

[domenkozar]

That would be much appreciated 😊

[kip93]

These are just very quick sketches. The idea is to test the waters to see which ones people like before spending any long amount of time designing something more final (though I'm not sure who these "people" would be, maybe we can check with current contributors?). Plus I don't have much more time this weekend, so I could only come up with very few ideas.

If you have any other ideas I can also sketch those out too.

	Snowflakes could be either "normal" ones or nix flakes Honestly my favourite out of this bunch (:
	Supposed to represent the first and last letters of "flakestry", using the nix flake's lambdas to represent them
	Very generic, but sometimes that works nicely Could be repurposed somewhere as a search button?
	Very generic, but sometimes that works nicely The nix flake could also be placed on the side of the box Could be repurposed somewhere as a tarball icon?
	Tried to simplify the current snowman icon This should look nicer on a small size compared to current one
	Could also just redraw the current icon without a floating tree

[domenkozar]

Nice work! I really like the magnifying glass and the cloud idea. Flakes flying out of the cloud is really cool :D

I've used DALL-E 3 to experiment on the idea a bit, maybe something like this:

Maybe we could put "FY" inside the cloud and have lambdas snowing from it.

[kip93]

Ok, just played around a bit and created a first iteration of the logo. Created it both with lambdas and with flakes. I think they came out nice, and now I can't really decide which one I like more.

Of course still open to any edits. E.g., changing colours, or number/size of falling shapes.

[domenkozar]

Some more iterations with Ana Marija Strmljan

[kip93]

Just what I needed, more great designs. Because I was not having trouble deciding already (:

Honestly at this point they all look like great options, so I can't see this getting anywhere without more input. Maybe some sort of vote. But who with?

[domenkozar]

We just pick something that we think is good :)

[kip93]

I'm partial to my own design, but I did like the stylised FY, so I updated my logo to use that instead.

I did a quick size test to see how well do all the logos we have collected thus far would look on different resolutions, in the hopes of reducing the number of candidates.

24x24 (same size as GitHub repo's icon)
28x28 (same size as current flakestry website icon)
32x32
64x64
100x100 (same size as the GitHub profile's icon)

From this I noticed that all designs have some sort of issue:

• My own design doesn't have good detail resolution on small sizes
• Ana's designs have less than ideal contrast (1.07:1 for the lightest colour, according to aremycolorsaccessible.com, though this is not an accessibility issue since it's not text), making the clouds really hard for my eyes to see on sizes smaller than the 32x32.

From this new insight, I went and created 2 new designs:

1.61:1 internal contrast 1.14:1 contrast against light bg 4.25:1 contrast against dark bg

3.04:1 internal contrast 3.78:1 contrast against light bg 4.72:1 contrast against dark bg

Contrast ratios for the first image are still not super contrasty, (I'd say 3:1 ratio is the bare minimum for "good contrast"), but that small increase helps my eyes make out details on the small icon size much more easily. The second image came about just because I wanted to play around to see how I could improve contrast in the image.

Doing the same size comparison (added dark and light backgrounds for contrast check):

24x24 (same size as GitHub repo's icon)
28x28 (same size as current flakestry website icon)
32x32
64x64
100x100 (same size as the GitHub profile's icon)

---

If I had to go ahead and make a decision between these 2 designs, I'd go with this one:

But, of course, still open to any edits.

[rdela]

Some more iterations with Ana Marija Strmljan

I think this one is the most substantial and resolved design so far.

[kip93]

I still think that contrast should be better on that image for smaller sizes, but if Ana fixes that up (or provides the source files so that I can change the colour of the cloud myself) I have no complaints going with that one

[rdela]

I think you have done some interesting things since that iteration with color and contrast. There are ways to combine that work. The shape of the cloud in the one I linked seems nicest to me, but I question the need for the dot at the bottom right. You got rid of the dot the subsequent iterations, to good effect in my opinion. I would get rid of the cloud shape at small favicon sizes as well, fwiw. I also like the two/duo-tone F, which shares contrast issues on white backgrounds currently but using the darker background color you chose instead would solve that.

[rdela]

Couple quick ideas on that wavelength

[rdela]

SVGs with transparent background

[domenkozar]

That's too many colors, what if we make the cloud dark blue?

[kip93]

I would get rid of the cloud shape at small favicon sizes as well

That's a great idea. It would remove most of my worries about contrast and visibility. And with SVGs you can do some CSS shenanigans that can probably just dynamically remove the background on smaller sizes; though that might just be overengineering a bit (:

That's too many colors, what if we make the cloud dark blue?

Have to agree here. A logo should minimize the number of colours being used. 1 or 2 is ideal, 3 is pushing the limits (of course this is imho as someone that is no graphics designer). I think keeping the FY colours that I used and just changing the cloud colour for light & dark backgrounds might prove to be best.

Unfortunately I don't have time this weekend, but with a bit of luck next one I might get some time to play around a bit more.

[kip93]

Unfortunately I don't have time this weekend.

Unfortunately, this lack of time turned into an "I forgor 💀"

Here I tried to go back to @rdela's proposal of using the thin line cloud, but I made the F a single colour to avoid overloading the design with too many colours.

Plus, here goes an attempt at doing some CSS magic. This should detect both:

• whether the size is too small, and remove the cloud if needed
• if the website is using a dark colour scheme, and change the cloud background

Not sure how GitHub is going to like that since it does not like random CSS, but here goes nothing:

24x24 (same size as GitHub repo's icon)
28x28 (same size as current flakestry website icon)
32x32
48x48 (threshold where the cloud gets removed, anything larger should have the cloud)
49x49 (smallest size with a cloud)
64x64
100x100 (same size as the GitHub profile's icon)
128x128
256x256

Just judging form the preview of the comment it looks like my CSS does work!

Any opinions on the design? Or maybe the embedded CSS approach? I think this makes it the simplest to have have a single icon that adapts itself, but we can split it into multiple files too. This was just my intellectual curiosity with trying the embedded CSS that I knew was a thing but never had a reason to use until now.

[kip93]

Screenshots showing both light and dark theme in github:

[kip93]

Also, this is tied to zoom levels, so if you zoom in the absolute size of the icon increases and BOOM you now have a cloud