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

A new logo for Quasar Framework #399

Closed
zuck opened this issue Feb 18, 2017 · 41 comments

Comments

Projects
None yet
@zuck
Copy link
Contributor

commented Feb 18, 2017

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!

quasar-logo
test-logo

@oraknabo

This comment has been minimized.

Copy link

commented Feb 18, 2017

Don't forget the X-ray jet!

@smolinari

This comment has been minimized.

Copy link
Contributor

commented Feb 18, 2017

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

This comment has been minimized.

Copy link
Member

commented Feb 18, 2017

@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

This comment has been minimized.

Copy link

commented Feb 18, 2017

I like the old one.

@adam-zpos

This comment has been minimized.

Copy link

commented Feb 18, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Feb 18, 2017

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

Scott

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Feb 18, 2017

@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

This comment has been minimized.

Copy link

commented Feb 18, 2017

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

This comment has been minimized.

Copy link

commented Feb 18, 2017

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

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Feb 18, 2017

@samhowley I like your idea with the gears.

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2017

Hi all,

thanks for your feedback and suggestions!

A couple of new concept iterations:

quasar-logo-2

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2017

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

quasar-logo-3

@smolinari

This comment has been minimized.

Copy link
Contributor

commented Feb 18, 2017

I like this one the best.

image

How about some perspective? Is that possible?

Scott

@druppy

This comment has been minimized.

Copy link
Contributor

commented Feb 18, 2017

I agree with Scott :-)

It is a neat shape, yet simple and unique.

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2017

@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.

quasar-logo-4

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2017

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

quasar-logo-5

@dheerajvs

This comment has been minimized.

Copy link

commented Feb 18, 2017

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2017

@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

This comment has been minimized.

Copy link

commented Feb 18, 2017

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

@Sfinx

This comment has been minimized.

Copy link

commented Feb 19, 2017

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

@zhennann

This comment has been minimized.

Copy link

commented Feb 19, 2017

I love the old one

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Feb 19, 2017

@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 :)

screenshot from 2017-02-19 11 10 48

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 19, 2017

@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.
  3. 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):

quasar-logo-6

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

This comment has been minimized.

Copy link
Contributor

commented Feb 20, 2017

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

This comment has been minimized.

Copy link
Member

commented Feb 20, 2017

@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

This comment has been minimized.

Copy link

commented Feb 20, 2017

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 20, 2017

@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:

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:

quasar-logo-7

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

quasar-logo-8

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Feb 20, 2017

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

This comment has been minimized.

Copy link

commented Feb 20, 2017

@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.
img_20170220_124650

@smolinari

This comment has been minimized.

Copy link
Contributor

commented Feb 20, 2017

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

Scott

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 20, 2017

@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

quasar-logo-9

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 20, 2017

Some integration examples:

quasar-logo-10
quasar-logo-11
quasar-logo-12
quasar-logo-13

@smolinari

This comment has been minimized.

Copy link
Contributor

commented Feb 20, 2017

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

Scott

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Feb 20, 2017

@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.

screenshot from 2017-02-20 17 55 49

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

@zuck

This comment has been minimized.

Copy link
Contributor Author

commented Feb 20, 2017

@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! 😃

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Feb 20, 2017

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

@rstoenescu rstoenescu closed this Feb 20, 2017

@dobromir-hristov

This comment has been minimized.

Copy link
Contributor

commented Mar 3, 2017

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

This comment has been minimized.

Copy link

commented Mar 4, 2017

Very nice !!! @zuck

@boriscy

This comment has been minimized.

Copy link

commented May 26, 2017

Anytime this new logo will arrive?, I like it 😄

@matheus-rossi

This comment has been minimized.

Copy link

commented May 26, 2017

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

@smolinari

This comment has been minimized.

Copy link
Contributor

commented May 27, 2017

It will arrive soon. 😄

Scott

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.