fable-compiler / Fable

F# to JavaScript, TypeScript, Python, Rust and Dart Compiler
http://fable.io/
MIT License
2.91k stars 298 forks source link

Logo for Fable and Fable related projects #969

Closed sergey-tihon closed 7 years ago

sergey-tihon commented 7 years ago

We (together with my fiancee) thought how Fable logo may look like... with ideas to incorporate

That's what we got and we would love to hear the feedbacks: fullsizeoutput_7f7 fullsizeoutput_7f8 fullsizeoutput_7f9 fullsizeoutput_7f6 fullsizeoutput_7fa fullsizeoutput_7f4 fullsizeoutput_7f5

tpetricek commented 7 years ago

I completely agree that Fable needs a logo - I think we should get multiple suggestions, so that we have a wide range of ideas to choose from!

Here is one idea from me - this is a lot simpler, so it should work for icons and not just for the main page. It uses the HTML5 shield with current Fable.io colours. You can also combine it with other logos, though I think it needs a bit more work (the Elmish logo below is not super nice, but shows the idea).

evelinag commented 7 years ago

To add some more options - I was thinking about something original that wouldn't be based on existing logos in the Javascript ecosystem. Instead I started with the name "Fable" which evokes all sorts of mythical creatures. So here's my rough initial sketch of a dragon as a logo. If you have any feedback, please let me know and I will re-draw it properly.

fable

ncave commented 7 years ago

@evelinag I know it's a dragon, but all I see is this :) Jk of course, I hope people like it. (perhaps if the dragon is a bit more straight to look like a "f" ?)

evelinag commented 7 years ago

@ncave Haha, well, that was one of the most successful logo designs of the 20th century :)

tpetricek commented 7 years ago

I fixed the problem with dragon! +๐Ÿ’ฏ for dragons!

dragon

vilinski commented 7 years ago

@evelinag remembered me rather on Rx Logo first. But now can't unsee that from @ncave :))

ncave commented 7 years ago

@tpetricek It still doesn't bite its tail, but it's getting there.

lucasmreis commented 7 years ago

+1 for a logo not related to Babel or HTML. If it's already being used for things like React Native and Node, it means that Fable has the potential to be bigger than that ๐Ÿ˜„

Pauan commented 7 years ago

Is there some way to make the dragon in the shape of an F?

jorgef commented 7 years ago

I like it!

What about making the "A" look more like a "#"?

Here you have a drawing as inspiration:

img_4689

alfonsogarciacaro commented 7 years ago

All of these are awesome ideas! Thanks a lot @sergey-tihon for submitting the original proposal. Actually, I like it very much and I think it's good Fable logo makes a homage to Babel the same way as the name does. (BTW, Babel is always used even when compiling for React Native or Node, as Fable itself doesn't output JS code directly.) But I'm also OK with the idea of the dragon if people like it more ๐Ÿฒ

MangelMaxime commented 7 years ago

Perhaps we could combine the proposition of @sergey-tihon with the dragon idea :) Like replacing the symbol on the left with a dragon :) (like that everyone is happy)

whitetigle commented 7 years ago

The first thing I thought when looking at @sergey-tihon's logo was;

Woot! Fatal Fury!

ff_logo

So add dragons and Fable will sure beat'em all ;)

As a very personal side note I'm not fan of the colors though, I prefer when there is more saturation, when colors are warmer.

Zaid-Ajaj commented 7 years ago

@sergey-tihon Fable text and colors + the dragons from @evelinag to the left!

vilinski commented 7 years ago

With diamond fa300x300 with f-dragon f-dragon

mike-morr commented 7 years ago

I like the diamond one it is my favorite so far. Not a fan of using Babels' type style, as it is just an implementation detail. Although they look amazing, very nice work!

The hard part of the compiler is compiling the .fs -> .js AST. Tying it that hard to Babel makes it even harder to swap it out for something else in the future. I also like the dragon logos.

mike-morr commented 7 years ago

Also the first one from @tpetricek is awesome too and I think captures the essence of Fable.

whitetigle commented 7 years ago

Thought about something this morning from given contributions and comments. So here is the starting mockup: mockup

And here is one result: fable

featuring:

I did it fast, so I can refine the mockup as needed (and of course make better proportions).

[update:] fable

I have svg files for both the diamond and the dragon if you want to play with them! ๐Ÿ˜„

Pauan commented 7 years ago

And now the bikeshedding tournament begins! :stuck_out_tongue:

whitetigle commented 7 years ago

@Pauan that's the limits of my english: what does it mean? ๐Ÿ˜„

Pauan commented 7 years ago

@whitetigle Here is a definition for "bikeshedding", and here is another definition. And here is some of the history behind the term.

It basically means people spending a lot of time arguing over "what color should we paint the bike shed?", even though it's a minor unimportant detail.

In this case, it means "arguing over what logo Fable should have".

A tournament means that many people compete to decide who the strongest person is.There is only one winner.

So a bikeshedding tournament is a competition to decide the "best" color for the shed (or in this case, the "best" Fable logo).

Of course I have no problem with bikeshedding, my comment was just for the sake of humor.

whitetigle commented 7 years ago

@Pauan thanks for the explanation! I feel smarter now ๐Ÿ˜„

tpetricek commented 7 years ago

With the flourishing of ideas on this thread, allow me to share the only design advice that I know (because a colleague told this to me once a long time ago):

A good logo is one that you could recognise if someone draw it in a sand with a stick.

Of course, there are good counter examples to this, but I think it is something worth keeping in mind even in the modern digital age. It also means that the logo will work in black & white and you will be able to resize it to 16x16 pixels for favicon.

I think many ideas here have quite elaborate story behind them, which is certainly fun, but they would not be usable as logos in the above sense of a logo. There is nothing wrong with that - it could still be an illustration for the fable web page - but I think if we want a logo, it is worth striving for simplicity (also because simplicity means it can be done without very good artistic skills :-))

voronoipotato commented 7 years ago

what about a ฦ’ shaped dragon, this has a nice dual meaning because the ฦ’ highlights the functional nature of fable.

voronoipotato commented 7 years ago

Also I think referring design decisions as bikeshedding really undermines the importance of the decision. Bikeshedding is strictly relegated to decisions of low importance, whereas the logo is of critical importance. Also there is merely an illusion that it takes little skill to make a good logo, when actually it takes a good amount of effort to actually fashion a quality logo. It might even be valuable to pool together some money to pay someone to make a professional logo.

Krzysztof-Cieslak commented 7 years ago

Small reminder - using F# Software Foundation logo in original colors in context "which could imply representation of the F# Software Foundation directly" is not legal.

That's FSSF contribution to our OSS ecosystem, we can't even use logo :)

lucasmreis commented 7 years ago

Just adding some inspiration sources:

I like the idea of a dragon because of what "fable" means. When I think of a fable, I usually think of Aesop's fables ( https://en.wikipedia.org/wiki/Aesop%27s_Fables ), mainly the Tortoise and The Hare ( https://en.wikipedia.org/wiki/The_Tortoise_and_the_Hare ).

Also, + 1 for a logo that is recognizable even as a favicon :)

Zaid-Ajaj commented 7 years ago

@sergey-tihon Can I use one of your logo's in an article of mine? :smile:

psb commented 7 years ago

Spanish inspired "fa-bull" :

  1. Plain fable-spanish-bg-wab

  2. fable-spanish-bg-baw

  3. fable-spanish-bg

  4. Plain with framework name (framework font is Rajdhani) fable-spanish-plus-framework

  5. With Spanish flag colours (created by accident!) fable-spanish-bg-accidental-yellow

  6. Spanish flag colours and framework name (in white) fable-spanish-plus-framework-accidental

  7. Plain favicon fable-spanish-bull-fav

  8. Spanish flag colours favicon fable-spanish-bull-fav-acc

That's what I've mustered fumbling around with Inkscape. Nothing deep and meaningful; just a play on the word 'fable' and a nod to Spain.

tpetricek commented 7 years ago

@psb I like the colour scheme and the simple line/area cubistic style! Numbers 5 and 8 are my favourites. I wonder if just "F-bull" could be a good mix of 5 and 8? (in any case, this is really nice work!)

Pauan commented 7 years ago

@psb I really like the combination of F and |>

Not liking the bull part as much, but it's a neat pun.

sergey-tihon commented 7 years ago

@Zaid-Ajaj yes, sure

psb commented 7 years ago

The files are here. I could do some minor changes, but my Inkscape and artistic skills are probably maxing out for me to make improvements. The files are there for anybody to use, improve and professionalise, if they wish to do so.

whitetigle commented 7 years ago

Hi there, another idea that popped in my mind tonight. ๐Ÿ˜†

big logo

misc ideas: |>, JS yellow, fsharp blue (is there an official color?), tunnel / babel tower, fsharp is the core, of the JS structure aiming towards the infinite and beyond (tm)

Drawing feels so good for the mind after coding ๐ŸŒˆ

@psb I really like the bull favicon: simple, warm, clear ๐Ÿ‘

sergey-tihon commented 7 years ago

One more option from our side (with dragon) logofablenew-02 logofablenew-01

screen shot 2017-06-01 at 15 41 11 screen shot 2017-06-01 at 15 51 14
et1975 commented 7 years ago

I like the dragon, but I thought I'd throw a different idea out, Japanese for fable is ๅฏ“่ฉฑ, here's something one could draw in the sand (I think it means "tale"): Simple: tale Spanish edition: tale_red

MangelMaxime commented 7 years ago

@sergey-tihon I really like this new design. More simple, and we could add the library logo in the dragon body :)

whitetigle commented 7 years ago

@et1975 I love kanjis and I like your simple rounded design. This is what I love with korean / japanese characters. They catch the eye immediately and can be re-designed according to the needs.

@sergey-tihon I really like the 3rd design! (simpler, no outline)

Krzysztof-Cieslak commented 7 years ago

I really like cubistic design proposed by @psb. Maybe variation of 5 with full FABLE instead of FA-bull_symbol ?

ncave commented 7 years ago

@sergey-tihon The blue ones are really nice, with or without outline, perhaps with an eye and a bit more natural body posture in the middle, something like that:

worldbeater commented 7 years ago

In my humble opinion here is the best logo for Fable created by @sergey-tihon: image Simple, flat and modern. It's great, I've fallen in love with it!

alfonsogarciacaro commented 7 years ago

All are great ideas, thanks a lot everybody for your proposals! :clap: :clap:

But I've also fallen in love with the dragon, awesome work @sergey-tihon! ๐Ÿ”ฅ ๐Ÿ‰ ๐Ÿ”ฅ Maybe the dragon can replace the F in Fable?

screen shot 2017-06-02 at 10 02 48 am
Pauan commented 7 years ago

@alfonsogarciacaro :+1: :shipit: :clap: :dancer: :shipit:

Personally, I think the dragon is a bit too tall, if it was shrunk down to 50-75% of its current size it'd be perfect.

psb commented 7 years ago

Well, for completeness I did some all text logos:

A: small 'e' fable-compiler-logo-plain-all-text-no-bull-a

B: big 'e' fable-compiler-logo-plain-all-text-no-bull-b

C: medium 'e' fable-compiler-logo-plain-all-text-no-bull-c

Favicon: fable-compiler-logo-plain-all-text-no-bull-favicon

And, using my best marketing spiel, they can be customised to meet all your logo needs: fable-compiler-logo-plain-all-text-no-bull-c-conf fable-compiler-logo-plain-all-text-no-bull-c-elm fable-compiler-logo-plain-all-text-no-bull-c-react

alfonsogarciacaro commented 7 years ago

@psb I liked the coloured versions! Looks like a Picasso-Mirรณ fusion ;)

Zaid-Ajaj commented 7 years ago

How can we even decide here, they are all beautiful and awesome :heart: :clap: :clap: :clap:

MangelMaxime commented 7 years ago

I have a hard time reading the logos from @psb Not saying they are bad but I need to concentrate at first to read the Fable word.

Other than that the colored version are really cool

Pauan commented 7 years ago

@Zaid-Ajaj As I said: bikeshedding tournament. :stuck_out_tongue:

sergey-tihon commented 7 years ago

Probably the final option from our side...

Smaller dragon that replace F in Fable word

screen shot 2017-06-02 at 15 28 30

and here is how logo can be branded

screen shot 2017-06-02 at 15 33 49 screen shot 2017-06-02 at 15 30 51
MangelMaxime commented 7 years ago

You got my vote @sergey-tihon I really like the logo. It's clean and the colors are really cool