Popper-core: Looking for new logo

[FezVrasta]

Hey guys, I'm trying to get a new logo for the project because the one I created sucks.

The idea is to have something clean and minimal, but not typography-based logos.

• Ideas?
• Anyone able and interested to design one?

I'd like to use the logo to print some stickers and maybe, in future, t-shirts?

Thanks!

[xtuc]

Popper makes me think about popcorns and it illustrates the dropdown which pops. It's just an idea.

[FezVrasta]

@xtuc cool! We just need to make it clear the lib has nothing to do with movies 🤔

[edcarroll]

@FezVrasta perhaps something involving a ruler? Since it's a positioning engine

[FezVrasta]

• popcorn
• ruler

mix together? 😁

[edcarroll]

That would be quite an interesting logo 😛

[FezVrasta]

Maybe a popcorn with eyes mouth and everything (cute popcorn-guy) wrapped with a tape measure 😶

[FezVrasta]

It sucks, but I was thinking of something like this maybe..

I'm really not good with this stuff ahah

[edcarroll]

I actually really quite like that... though definitely make the popcorn more yellow (as otherwise it looks like a cloud). Not sure what that will do to the contrast with the ruler though

[franciscolourenco]

Skip the ruler, just keep the popcorn. Also something else which came to my mind: https://www.google.de/search?q=push+pop&safe=off&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwjp9syGgOnVAhUHmrQKHXrvAmcQsAQILA&biw=1436&bih=803

[FezVrasta]

I recently drawn this, maybe without the grave to make it less sad :-P

[SaraVieira]

Small idea I made quickly:

[FezVrasta]

@SaraViera that's a cool idea! I'd love it to better describe the main usage of the library (tooltips/popovers) and that's something that your current sketch lacks, but it's very funny and original!

[rmanenti]

Hey Federico,

Here's a quick sketch of an idea.

[SaraVieira]

Do you think that changing the thing from toasts to a tooltip with the name would help?

[FezVrasta]

Probably! Maybe an hybrid? 🤯

[SaraVieira]

[SaraVieira]

[FezVrasta]

Now is a bit sad ☹️ (sorry!)

I liked the face on the bread slice

[SaraVieira]

OHHH

2M

[xtuc]

What about just the tooltip?

[SaraVieira]

@xtuc @FezVrasta How do you feel about

[xtuc]

It looks amazing!

I just wondering why do you have a tooltip spawning out of a toaster :thinking: :smile:

[FezVrasta]

So, the idea is cool in my opinion, it just needs to be realized/concretized/drawn in a more "professional" (?) way. Not sure you get what I mean.

[SaraVieira]

[souporserious]

Had a little time this morning to try and get something. Figured we could riff off of tooltips :)

[xtuc]

This https://github.com/FezVrasta/popper.js/issues/377#issuecomment-342826459 one :100:

[SaraVieira]

@FezVrasta I get what you mean , but I honestly don't know how to make professional stuff :(

[carolevy]

Hi :)
Just tried this little one out... Using the colors from your website :)
No smiley faces on toasts, sorry!

[xtuc]

@carolevy that looks amazing!

My votes goes to both:

• https://github.com/FezVrasta/popper.js/issues/377#issuecomment-342828772
• https://github.com/FezVrasta/popper.js/issues/377#issuecomment-342826459

[yuvikakoul]

Here is a suggestion for the logo.
Have tried to have the same feel as the website and tried to keep it clean and professional.
Thought behind the creation:
Have connected a tooltip with the ruler to show the combination of what is provided with how it is provided.
Cheers!
Yuvi :)

[FezVrasta]

Oh damn that's actually pretty awesome!

[yuvikakoul]

Thanks @FezVrasta :)
Would really love to work on this with you to bring it to perfection for the project :)

[carolevy]

@yuvikakoul Hey! Really nice!! Just wondering what it would look like with a regular line instead of the dotted line around the popper?

[FezVrasta]

@yuvikakoul Can't ask more 🤩

I posted some pictures on Spectrum but I'm going to post them here as well:

I really like the way those logos are colored, with all those gradients that creates those curves (talking particularly about the fox).

I think your logo would look great if the black and the yellow parts would be colored following the same idea. To remove the flat-iness from the logo and give it some movement.

What do you think?

edit @carolevy I agree with you about the dotted border

[yuvikakoul]

Hey @carolevy Thanks for the suggestion.
This is a great add and gives better sense of depth to the overall flat design.

[yuvikakoul]

Hi @FezVrasta
This is an interesting approach. :)
l'll give it a try, let's see how it comes out.
Cheers!

[carolevy]

@yuvikakoul @FezVrasta Yay! Prefer this version :) great work! very professional.
also agree with @FezVrasta regarding the use of colour, even though I also like that they were the same as on the website!

[FezVrasta]

I think the colors may remain the same, we could just introduce some gradients using variations of them

[yuvikakoul]

@FezVrasta @carolevy how about something like this, a subtle gradient?

[FezVrasta]

me like it! 😀

Just some random notes:

• is it me or the bottom left corner is sharp and the others are rounded?
• Maybe a nicer typeset for the whole logo?
• I'm not sure about the color of the border, also, do we actually need one?
• Maybe do something to better separate the yellow ruler from the rest? I'm not sure, it's just an idea - make the gradient cover only the black part and use a different gradient for the yellow?

[schiehll]

I'm not a designer, but I had an idea while reading the issue. Maybe you can use the negative space on the "R" to create an arrow.

Something like this, but made by someone with some design skills:

[yuvikakoul]

Hey @FezVrasta
I've got two variations of the typeset, which I feel go with the overall theme.
What do you suggest?

[FezVrasta]

I like more the second

We should also think about a "tooltip only" version for the stickers 🤔 (without any text outside it)

[yuvikakoul]

Yeah, it gives an edge yet keeps it professional :)

[yuvikakoul]

Hey @FezVrasta
Here are the icon versions of the logo.
1 can be used for stickers, icons and the one with only can be used for small placements like favicon.
Cheers!

[FezVrasta]

Thanks! I'm not sure about the "P.js" idea, I wonder if people will remember the name of the library if they just see that...

Maybe I'm just overthinking it tho

[yuvikakoul]

Hi @FezVrasta
My initial choice was to use the icon with just .JS written so that it looks exactly similar to the logo that people would see on the webpage and would be able to relate to easily.
Also, the whole idea is to slowly bring it only to the illustration without any text so that the people will recognize it just by looking at the logo :)

[FezVrasta]

I think we need more opinions from other people, but definitely what you have done so far is awesome. I'm not even going to compare it with the old logo because it would be an insult to your work 😂

Anyway, I still think the yellow ruler could use some love 🤔

[FezVrasta]

I tried to play a bit with the tooltip-logo idea to experiment something a little different, ideas?

[divyenduz]

I like the one with .JS the most, it fits well with the full logo (completing pooper + .js) and will give users of the site a nice recall of the logo if they see it in other places.

[yuvikakoul]

I like the usage of grid in the first one.
Few suggestions:
the black could be toned-down a bit and add a hint of blue to match the overall theme of the website and be integrated seamlessly in the website.
I feel .JS in the popper makes it complete (Popper.JS) and would help users understand and relate to the icon more. This way the icon can be used standalone as well.
Would like to hear your suggestions on the same, @FezVrasta .
Cheers!
Yuvi

[FezVrasta]

@yuvikakoul I see two problems with the current design:

1. The big ".JS" in my opinion is going to look anonymous, there are thousands of libraries out there called <something>.js, I don't think that focusing on the ".js" part is going to pay.
2. I still think the ruler could use some love, I'd like it to stand out from the rest of the logo, maybe using different orientation for the shades/gradients on the yellow part?

Talking about my sketch, I like as well the grid because I think it's very meaningful. Also, something I wanted to experiment is the usage of a non-squared shape inside the existing squared one, to break a bit from the monotony of the outer shape. Maybe you have better ideas than me, but I hope my effort can help you to understand what's in my mind 😅

Thank you again!

[yuvikakoul]

Hi @FezVrasta Something like this?

[FezVrasta]

I really like how it looks, I think we should have some kind of glyph or symbol to put in the black area to make the logo unique, something subtle, maybe just of a lighter shade of gray then the rest 🤔

What do you think?

[yuvikakoul]

How about a crosshair to represent its precision and to say its right on target.

what do you think?

[FezVrasta]

good idea! I was thinking about something larger tho 🤔

[yuvikakoul]

Yes was thinking the same
How about this?
I feel this is large enough to be visible on smaller sizes and at the same time not too large for the bigger sizes.

[silvenon]

I would make the target symbol stronger and put it directly at the center, to symbolize precision. Another idea is to make the gradient completely smooth, so it doesn't suggest color banding. These logos are looking awesome, by the way. 🌟

[silvenon]

While @yuvikakoul's logo will be a clear winner, I wanted to play with tones a bit and this is what I came up with:

Not sure what I'm going to do with it yet, just wanted to share this draft in the meantime.

Losing the golden look would probably be a good way to proceed. 😄

[FezVrasta]

This remembers me one of the first sketches I did prepared

[FezVrasta]

Just to bring this conversation to a conclusion, @atomiks prepared one that I absolutely love.

Issue resolved!