Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

logo #11

Open
domenkozar opened this issue Sep 26, 2023 · 19 comments
Open

logo #11

domenkozar opened this issue Sep 26, 2023 · 19 comments

Comments

@domenkozar
Copy link
Member

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

Suggestions welcome!

@kip93
Copy link
Contributor

kip93 commented Nov 3, 2023

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
Copy link
Member Author

That would be much appreciated 😊

@kip93
Copy link
Contributor

kip93 commented Nov 5, 2023

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
Copy link
Member Author

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:

DALL·E 2023-11-06 11 31 58 - Design a simple logo with a stylized cloud from which multiple Greek lambda (λ) letters are falling like snowflakes  The cloud should have a soft, fri

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

@kip93
Copy link
Contributor

kip93 commented Nov 6, 2023

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
Copy link
Member Author

Some more iterations with Ana Marija Strmljan

2023-11-08-094350_1034x686_escrotum

WhatsApp Image 2023-11-08 at 08 11 38

WhatsApp Image 2023-11-08 at 08 11 51

@kip93
Copy link
Contributor

kip93 commented Nov 11, 2023

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
Copy link
Member Author

We just pick something that we think is good :)

@kip93
Copy link
Contributor

kip93 commented Nov 20, 2023

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
Copy link

rdela commented Nov 30, 2023

Some more iterations with Ana Marija Strmljan

WhatsApp Image 2023-11-08 at 08 11 51

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

@kip93
Copy link
Contributor

kip93 commented Nov 30, 2023

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
Copy link

rdela commented Nov 30, 2023

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
Copy link

rdela commented Nov 30, 2023

Couple quick ideas on that wavelength

flakestry color swap 1 light flakestry color swap 1 dark

@rdela
Copy link

rdela commented Nov 30, 2023

SVGs with transparent background

flakestry-color-swap-1-attr flakestry-color-swap-1-dark-attr

@domenkozar
Copy link
Member Author

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

@kip93
Copy link
Contributor

kip93 commented Dec 9, 2023

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
Copy link
Contributor

kip93 commented Feb 18, 2024

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
Copy link
Contributor

kip93 commented Feb 18, 2024

Screenshots showing both light and dark theme in github:

Light theme

Dark theme

@kip93
Copy link
Contributor

kip93 commented Feb 18, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants