Quasar: A new logo for Quasar Framework

[zuck]

Hi all,

I'm working on a new logo for Quasar Framework, as my personal contribution to the project.

It's fully _vector_ and _square-bounded_. If you like it, I could provide you the .svg file.

Comments and suggestions are welcome!

[oraknabo]

Don't forget the X-ray jet!

[smolinari]

That is pretty cool. 👍

It might be hard to do, but could you also add a bit of perspective to it? Quasars float in space and it would give the image a bit more of a floating effect, if it were slanted a bit and not so round. That might also help you with the suggestion above too. 😄

Scott

[rstoenescu]

@zuck I love it. Thanks a lot for this! Being svg and squared, I just couldn't ask more out of it. Let's also see what the community has to say about it.

[han2015]

I like the old one.

[adam-zpos]

It's nice. I think too many jagged edges make it look too over the top, and too complicated for what is meant to be representing something to simplify cross platform development.

[smolinari]

I agree with the too many edges suggestion. With less edges, the logo would probably look sleeker, which Quasar definitely is. :smile:

Scott

[rstoenescu]

@zuck Can you try a version with less edges? Or even better maybe 5 edges but not split into half at the end? Would this be hard?

[samhowley]

I love the new logo, looks fantastic.

But since feedback was requested :

What about simplifying and instead of making them pointy spiky arms coming out make them like gears, which implies practical functionality and the concept that in the higher gear you can move faster.

Like :
http://www.bikecyclingreviews.com/images/1/M30415_2.jpg

[samhowley]

Hah, I had totally forgotten the tie in the space theme in the name Quasar, my idea is kind of mixing metaphors :)

[rstoenescu]

@samhowley I like your idea with the gears.

[zuck]

Hi all,

thanks for your feedback and suggestions!

A couple of new concept iterations:

[zuck]

Another little revision of last proposal (which merges both metaphors as suggested by @samhowley):

[smolinari]

I like this one the best.

How about some perspective? Is that possible?

Scott

[druppy]

I agree with Scott :-)

It is a neat shape, yet simple and unique.

[zuck]

@smolinari The problem with perspective is that it'll lose regular shape. A regular shape (something that fit inside a square or a circle) is, in general, a good thing because it guarantees simpler life when it has to be used as an icon or similar...

Still experimenting with merging metaphors and simplifying shapes: this is IMHO the final iteration on that path, which adds a very useful feature: it now works also with just two colors without visual problems.

[zuck]

Or with inverted colors and without back circle on dark backgrounds:

[dheerajvs]

Some inspiration from other places (respecting copyrights, of course):

• https://pbs.twimg.com/profile_images/470514506691383298/jSoWQBpt.jpeg
• http://telin.ugent.be/~sdonn/template_images/quasar_icon.svg

[zuck]

@dheerajvs Actually the first link you posted has a quite nice and smart concept! Unfortunately, it's already taken and used, so better to keep following another path for this project... Nice catch, by the way!

[bboydflo]

I like the last ones @zuck presented. I think they are simple and nice. Good job!

[Sfinx]

What about adding some orange colors ? The black-blue palette can become boring quickly

[zhennann]

I love the old one

[rstoenescu]

@zuck
I simply love the last two examples. Can we experiment a little on the following ideas?

• Use Vue's colors? My sketch below shows an example but I don't quite like it.
• "Close" the spinning spikes with a thin line (with the lighter color).
• Use multiple colors (same as Google logo color palette)

The gradient is also nice. I wonder how it would look like with Google logo color palette or with Vue's colors.

Would it be better for the center to use the darker color (of the two currently used) instead of plain black?

I'm not much of a designer, so just throwing ideas. Made a sketch for the "close the spinning spikes with a thin line". Please forgive the quality, it's made in GIMP by hand :)

[zuck]

@rstoenescu I like the idea to use a different color for the center (which, by the way, is a black hole, so if we don't want to use plain black, we should at least keep a quite dark color).

I don't really like the idea of thin lines to enclose the spike because:

1. They simply disappear at small sizes (e.g. favicon, logo in a toolbar, normal icon, etc.) making it visual identical to the one with "open" spike.
2. Keeping the spike open breaks the gear shape in small chunks that could represent the "Component" metaphor used by Quasar Framework (small chunks of code that, merged and ordained together, generates a software system). If we close it, we lose this visual metaphor and its meaning.
   
   
   
   1. Visually, makes the shape less interesting: what do you see? A quasar-shape inside a gear or small elements orbiting around a black hole?
   
   

For these reasons, I would keep on the last presented shape, maybe experimenting a little bit more on colors as you and others suggested (all chosen colors are already taken from Material palette with the only exception of Vue colors):

Personally, I suggest to keep on light blue palette in order to keep a visual legacy with old (current) logo and project identity: this is my preferred choice.

My second choice would be to use (flat) Vue palette in order to visually express the link between the two projects (but loosing a little bit in terms of "self-identity").

My third choice would be the one with full spectrum palette (the very last one), in order to express versatility and feature-rich nature of Quasar Framework.

[smolinari]

I agree with the blue "heritage". I like the blue. 😄

I like the idea of the closing of the spiral (i.e. turning the white spiral 2-3 px to the left?), as Rasvan suggested, because it gives the logo a less flat look and more depth. If we (I 😄 ) can't have a perspective that would be the next best thing. Could you please try to implement that suggestion and also demonstrate what it would look like down to favicon size? If it flattens out in smaller sizes, is that really a problem? That is the question that needs visual answering.

I personally don't see the "togetherness" (merging/ ordaining) with the separate gear chunks. It looks more like separate gear chunks. How about this suggestion? Twist the spiral so much, that only one or two pixels are left. In other words, the spikes of the spiral go to much more pointed ends?

As for the "black hole", in the quasar galaxy metaphor, the dark grey looks good. I was thinking maybe also give it a slight radiant from white to the grey to a smaller black hole in the middle? That would give the hole more "life" and help with the depth of the logo too. If the logo gets flattened at smaller sizes, that isn't so bad, I'd imagine. Again, would need to see it though to judge.

Scott

[rstoenescu]

@zuck Thanks for the clear (and logical) explanation. I totally agree. The second one is simply brilliant.
I'd also like to see a try with @smolinari's suggestion too if possible. Just wondering how that would look like.

[beebase]

My honest opinion. I think the quasar/gear combo is too busy. Also stay away from jagged lines. I would go for a logo with 1 color that is as simple as possible but still captures the essence of a quasar. Like icons on airports/ traffic /public buildings. Simple logos are often the best communicators. 1 color also sticks out in promotional material. (Think of multiple sponsor logos on an event page, being a speaker somewhere etc.

I like the directions Dheerajvs suggested.
http://telin.ugent.be/~sdonn/template_images/quasar_icon.svg

Esthetics are key here, since where talking about a beautiful GUI framework :-) My first associations are balance, clarity, clean, organized, not too bulky.
I have always leaned toward minimalistic design, so I am very biased I guess.

Btw: the quasar site is very pleasing to the eye. It's feels like a candy store going through the docs. The content itself is quality, but looks good and organized as well

[zuck]

@beebase I agree in general, but honestly the gear/quasar combo, at the end, is just a circle with a pattern shape tiled around it. From a geometrical point of view _is_ visually simple and a kind of solution used in many successful and famous logos. Some examples:

• Ubuntu
• Picasa
• Chrome

Furthermore, normally a colored shape is visually more distinctive than a bunch of lines as in the linked suggestion you and Dheerajvs reported, especially at small sizes.

These are the requested variations:

I still think the best option should be n.1 with the following color variations for specific use cases:

[rstoenescu]

At this point I vote to go with no.1 too. Well, maybe make the center dot a little bit more "blueish". Simple, metaphoric, meaningful.

[beebase]

@zuck I see what you mean, but still, the picasa and chrome logo are easier on the eye, shapewise, compared to the quasar/gear combo. (Ubuntu logo, I just don't like)
Also, I my first thought when seeing the gear shape is, metal, machines, industry.
Maybe using a stick and a ring, experimenting with different dimensions, would be an idea for a simple abstract design.
Anyway, I hope guys don't mind me being critical. (I am NOT a designer, but trying to stay constructive at all times).
Taste is has always been an endless debate ;-) but I'm sure you'll end up with something good, just like Quasar framework is.

[smolinari]

Yup, nr. 1 looks the best to me too now. Thanks for the effort to illustrate the other ideas.

Scott

[zuck]

@beebase I see your point. I tried to follow your idea but honestly, also due to poor perspective distortion support in Inkscape, I was not able to produce any visually good result with that shape (a ray crossing a circle). About your sketches: the first one is obviously too unbalanced but the second was quite interesting, even if 3D always adds some troubles when we go fully flat and monochrome...

So, this is my final version with all use-case variations.

Thanks for all you suggestions and contribution!

In order:

1. _colored with gradient_
2. _bicolor_
3. _one color_
4. _one color inverted_

[zuck]

Some integration examples:

[smolinari]

You know what would be really cool too? A spinner with that logo, where the spiral in the middle turns. 😄

Scott

[rstoenescu]

@zuck, created Quasar Art github repo: https://github.com/quasarframework/quasar-art and added read-write permissions for you. Let's store the sources (in a new /src folder) and the end-result graphics (in a /dist folder) there.

Can you generate png, jpg, favicon etc? Some ready to use graphics with our brand new smart logo at different sizes for different platforms. One with the logo for a lighter background and one for a darker one, just like in your examples. And one with transparent background? Uh oh, I'm asking a lot. Please bare with me :)

Thanks for your amazing and brilliant work and efforts. And thanks to all who contributed with ideas.

Just look at it. Beauty and smarts in one place :)

[zuck]

@rstoenescu Done. Please, check it out!

Thank you all for your help and contribution, I'm glad to have offered something back to the awesome Quasar Framework community!

Thank you @rstoenescu for your amazing work!

I think we could now finally mark this issue as _fixed_! :smiley:

[rstoenescu]

@zuck please drop me an email or contact me on Gitter when you have time.

[dobromir-hristov]

TO be honest, I was thinking of doing a logo design from the moment I started using Quasar, never got to it ☹️ I dont know why, but the cogwheel is not my thing though.

[odranoelBR]

Very nice !!! @zuck

[boriscy]

Anytime this new logo will arrive?, I like it :smile:

[matheus-rossi]

Definitely a new logo is needed, i liked this last option too.

[smolinari]

It will arrive soon. 😄

Scott