mirdaki / ping

A cross-platform and blazingly fast Matrix client focused on group and gaming chat.
MIT License
54 stars 1 forks source link

"A picture is worth a thousand words" #6

Open mirdaki opened 3 years ago

mirdaki commented 3 years ago

We need a logo (or I at least want one haha). It should be quick and dirty, just enough of something to help it stand out when sharing. Depending on how #5 ends up, it should be reminiscent of "Ping". Should be an SVG so things can easily scale.

ChunkyProgrammer commented 3 years ago

I know you plan on changing the name but I was thinking maybe a Ping pong paddle hitting a green ">" so it's like Ping and Matrix (I am not an artist)

Pingtrix design

mirdaki commented 3 years ago

Oh I like the Ping Pong analogy. Depending on the name change, that is something we might end up referencing. Thanks for sharing @ChunkyProgrammer!

ghost commented 3 years ago

A variant of this? ping

mirdaki commented 3 years ago

Thank you for the suggestion @KrazyKirby99999! I like the connection to Matrix and the simplicity of it. That has given me an idea, give me a few and I'd like your thoughts on it

mirdaki commented 3 years ago

So this is more abstract draft (and I'm not at all sold on the colors haha), but what do you @ChunkyProgrammer and @KrazyKirby99999 think about something like this? image

Also, color suggestions would be appreciated! Colors from the logo would be pulled into the UI at one point most likely

ChunkyProgrammer commented 3 years ago

So this is more abstract draft (and I'm not at all sold on the colors haha), but what do you @ChunkyProgrammer and @KrazyKirby99999 think about something like this? image

Also, color suggestions would be appreciated! Colors from the logo would be pulled into the UI at one point most likely

I like the design.

I tried switching the colors up but I'm not a big fan of the color choices I made either (it just looks like a cookie or some kind of melon). I would recommend converting the logo to a svg file (since you want to pull the colors from the UI) and using a program like Inkscape to play around with the colors until you find something that looks nice.

matrix logo attempt

ghost commented 3 years ago

@mirdaki , are there any specific colors that you have in mind?

mirdaki commented 3 years ago

So this is more abstract draft (and I'm not at all sold on the colors haha), but what do you @ChunkyProgrammer and @KrazyKirby99999 think about something like this? image Also, color suggestions would be appreciated! Colors from the logo would be pulled into the UI at one point most likely

I like the design.

I tried switching the colors up but I'm not a big fan of the color choices I made either (it just looks like a cookie or some kind of melon). I would recommend converting the logo to a svg file (since you want to pull the colors from the UI) and using a program like Inkscape to play around with the colors until you find something that looks nice.

matrix logo attempt

Agreed, I'll put together a cleaner version of it in Inkscape and share it with y'all!

mirdaki commented 3 years ago

@mirdaki , are there any specific colors that you have in mind?

Not exactly. I want them to be a good enough combo that I can pull them into the app's UI to highlight or accent different UI elements

I also personally like teal as a nice color (which is why I originally used a shade of that), but I don't have strong feelings on keep that

It should also feel at home in a desktop taskbar or mobile launcher, though it standing out slightly can't hurt adoption 😁

mirdaki commented 3 years ago

OK @ChunkyProgrammer and @KrazyKirby99999, here is a cleaner version of the idea in an SVG format (though I have to upload it as a PNG here)

Ping-Logo

The shape is meant to be reminiscent of a vibration or alert animation when someone revives a message. It also happens to look a bit like a crosshair for the FPS crowd

I chose the blue-ish-purple as a base since it's in the same ballpark as Discord and Twitch and gives off a stable, but quality vibe (granted, not a color scientist haha, so that might just be me). The orange adds a bit of flair, is sort of complimentary to the purple, and isn't super common in the messaging world. It also feels a bit more Rust-y, as a nod to the programming language. I've added small borders around the elements to give it a bit more interest visually

I'd appreciate any critiques or suggestions 😁

ghost commented 3 years ago

What are the rgb values of each part?

mirdaki commented 3 years ago

The purple is 5340a5ff It's border is 150070ff The orange is f87047ff It's border is 6d2f00ff

ghost commented 3 years ago

What if you use replace the orange with #C57711?

mirdaki commented 3 years ago

Sure! This is what that looks like

Ping-Logo-2

It certainly meshes with the purple better!

mirdaki commented 3 years ago

I did show the logo to a couple friends. The sentiment was that the logo looks like a weird melon and they thought it wasn't super correlated with the name. Though it looks OK just buy itself.

They also both independently mentioned the ping-pong analogy when they first heard the name, so here is my shot at doing that. What do y'all think? I went for a bit more cartoon-y of a look this time

Ping-Pong-Logo

ghost commented 3 years ago

What about making the paddle #5340a5ff, the handle #D68A15, centering the ball in the paddle, making the ball larger, and removing the star?

mirdaki commented 3 years ago

Sure! It's a good color combo. I do worry a little the ball makes it look sorta like an eye. Not quite sure how to change that.

Ping-Pong-Logo

ghost commented 3 years ago

What if the ball is replaced by the marks from https://user-images.githubusercontent.com/8786151/113494361-6083ee00-949c-11eb-991d-67d87bf82a20.png, but smaller and the same color as the ball?

mirdaki commented 3 years ago

OK, here are a few variants. I played with the color, outline, and shape combination. I'll label them to make it easier to refer to

A Ping-Pong-Logo-3

B Ping-Pong-Logo-4

C Ping-Pong-Logo-5

D Ping-Pong-Logo-6

ghost commented 3 years ago

Capture This is what the icons look like on a windows desktop. I would rank them B, A, C, D. The marks on B resemble a crosshair, and I think that it is more aesthetically pleasing.

mirdaki commented 3 years ago

Ah fantastic thought putting it on the desktop! My current desktop environment doesn't have well, desktop icons 😁, so I'd have to boot up my work machine to test that

I agree, B is the most pleasing of all of them. I did think the marks were a little small, so I made them larger. Also made color variants with the same white-grey and the gold-orange of the handle. What do you think?

E Ping-Pong-Logo-7

F Ping-Pong-Logo-8

jasikpark commented 3 years ago

I like the combination of A and D the most 🙋 - A, but with a ping pong ball in the center, and definitely large impact strokes!

mirdaki commented 3 years ago

Here you go @jasikpark! Both with bigger impacts and the ping-pong ball, though varying impact types.

G Ping-Pong-Logo-9

H Ping-Pong-Logo-10

ghost commented 3 years ago

image Out of these, E and G are the best.

jasikpark commented 3 years ago

G is exactly what I was going for, yeah :D

mirdaki commented 3 years ago

I've shown A-H to some folk who fall under the right audience for the project and they all preferred G. Are there any tweaks y'all can suggest for G? We can always revise the logo later, but I think we're close to done with the initial version I'll pull into the app

ghost commented 3 years ago

Maybe show the 4 diagonal lines at different sizes? Other than that, I do not see anything that might be benefit from being changed.

ghost commented 3 years ago

By different sizes, I mean the same sizes as each other, but different images. Each with its own set of sizes for the lines.

mirdaki commented 3 years ago

Sure! I've either increased the size or increased the size and moved the diagonals.

I Ping-Pong-Logo-11

J Ping-Pong-Logo-12

K Ping-Pong-Logo-13

ghost commented 3 years ago

It's difficult to tell them apart, but I slightly prefer K over the others. image