Meshtastic

Design guideline & logo

I’m just going to kill myself now :laughing:
:joy::joy:

We try to do a nice innovative job by comparing our ideas anyway :wink:

1 Like

If i may comment your draft:
It ended up visually too complex. Instead of incorporating one or multiple symbolic meanings into a new form, you just combined different signs with different aesthetic languages (that already could be logos on their own) into a “super character”. You got the “mesh”, that alone is relatively complex with different stroke weights and rings with whitespace in them. Then the “M”, that breaks with the previous aesthetic by being soft and rounded, very stylized. On top of that the “Wifi” Arcs, again a different aesthetic.
The result ends up being more like an illustration than a logo.

One advice: reduce. Think about what’s really necessary and what can be removed. How much of the Wifi Arc, the M and the Mesh-Thing really must be there so that the viewer can decode it? Sometimes a little “hint” is enough.

Logo/CI Design is really hard, and I wouldn’t claim that I master it, although I’d say I’m able to navigate through that jungle of forms confidently :wink:

@wakareva

Hehe, I didn’t actually intend to bring it up as a logo idea, but I don’t claim any copyright on it, so if anyone wants to try things with it… :slight_smile:
Maybe with an outline that “cuts out” the circles underneath?

2 Likes

@mc-hamster I thought exactly the same! Having something that works as a favicon is a must. This usually means having only a few simple elements with no thin lines. In addition it should have a minimal files size if we want to add it to the web interface and therefore should be in SVG format. The current icon matches all of this with less then 500 bytes in form of an uncompressed SVG. A new logo should have a similar filesizes.

4 Likes

Making it small doesn’t mean it has to be exactly the same when scaled down, it just should be considered and designed accordingly.

:slight_smile:

5 Likes

I understand everything but why, we are all fixed in the letter “M” !!! 🤦
It must be a logo not a simple “M” with circles or other …
I think it’s right not to think so much about the “M” so we can leave room for other ideas to think about :slightly_smiling_face:

Logo inspiration: Form of an M derived from the physical LoRa layer (chirps).

It could also be made to a word mark:

Probably too simple and the M form already exists in a logo somewhere. Still a cool analogy i think

10 Likes

Top design. Very nice idea.

2 Likes

Really nice. Does this inspire anyone with other treatments? (Though I really liked this one)

1 Like

put a small campfire under the M or some small poeple group, but this logo is better like bevor. but if some person se it the first time, and do know nothing about the project, what he should imagination?

I like that very much and despite looking almost familiar, I couldn’t find anything similar. Overall, I find it very well thought-out and it’s easily scalable.

Just for fun, as I believe it’s a job best left to professionals, I’ve also tried my hand at it:


It can be read as:

  1. radio waves propagating away from the centre
  2. two gears meshing (I know, no teeth…)
  3. the letter M emitting radio waves

Hi - yes, I like the general shapes here, the mesh network, and the form of the M. As others have said, there is maybe too much complexity here for some small icons, so would need some simpler versions also.

1 Like

thinking more I really like this @thepoweroftwo logo (and @wakareva pushing for this effort). Anyone wanna take it to the next (final?) step of:

  • cleaned up svg representation (black and white). (or is there a more common/editable resolution independent format artists like ya’ll use - I’m just a coding caveman)
  • for the logo: pngs in 512x512 (guideline) - a nice color background would need to be chosen (no curved corners - see guideline)
  • for the action bar (worst case icon for menubar): 24x24 black and white png (but really 22x22 see here)
  • for the android notification (or the smallest possible icon on the oled screen): 16x16 black and white (see previous item - really limited to more like 12x12 for the logo portion)
  • for favicon: 16x16 color
4 Likes

Oh cool… since it was just a quick draft, if no one else wants to do it, I’d like to fine tune it a bit (especially the typo version) and make different versions for different display sizes (stroke weight etc).

Speaking of the typo version, do we want/need it? (the word meshtastic with the symbols incorporated). I like it and it would make sense, but if it’s not going to be used then there’s no point in investing work there.
Also an option: making a meshtastic custom font from this so it can be used in headlines etc… :slight_smile:

2 Likes

I like the logo and the idea behind it, only if you notice the letter “M” seems to start out as an “i” and “a” making it look like “iaeshtastic” because you used the letter “a” and the letter “i” also in Meshtastic itself, suggesting that the two symbols used in the logo are an “i” and an “a” put together which makes “ia” :sweat_smile:
I think it needs to be fixed a bit :slight_smile:

“I know you all hate me, I don’t have to specify that” :grinning_face_with_smiling_eyes:

I will work on Saturday to make the logo more minimal and with less stuff. I had little time this week unfortunately

1 Like

You got a point, however I don’t think it’s too tragic.
The slight ambiguity is a tradeoff for simplycity.

One could do sth like this:


It kind of looses it’s poetry though.

Or move the two forms a bit closer together:

If anyone has different ideas on how to indicate the M more as an M, please share :slight_smile:

2 Likes

Hi @thepoweroftwo I like the original version, a little of ambiguity it’s not a big issue, I think.
Let me know if you need some help with the work around the logo.

1 Like

Ok, here we go, I did some fine-tuning and made a mini-styleguide for the main logo:

Margins and spacing:

Different sizes for different applications:

Examples:

What’s next to do?

  • Creating different pixel-perfect end formats like App Icons for iOS/Android in all sizes, Favicons and low-res display versions for the devices (monochrome, so no antialiasing there)
  • Improving the Meshtastic lettering with the LoRa-Forms incorporated (Kerning & choosing a font), One thought about this: Maybe we should cut off the rounded edge on the to of the A… if it goes better with the font we’re choosing…
  • Choosing colors

@wakareva You can help with those things if you want, are you on the meshtastic dev slack?
I’ll upload the vector versions later today.

5 Likes

Nice proposal!

While inspired by the LoRa chirps, your logo resembles the shape of a tent, which is great (like https://www.logoground.com/uploads/2018201302018-08-103897672camping.jpg). One could also think of mountainous areas…

1 Like