[meta] Logo Suggestions

[martinrieder]

Any software deserves to have logo, so I am starting this issue for sharing and discussing any suggestions. With Daniel Rojas being the originator of this great tool, he deserves the right to make the final choice. We could still have a community vote (before the next major release?) to come up with the best candidates. Feel to also list some criteria that the logo shall fulfill. @formatc1702 @kvid @amotl

I will start by posting some of my suggestions, putting each one in a separate comment for easier reference. Please use the emoji reactions below each one to provide direct feedback.

[kvid]

I suggest using e.g. SVG to enable high-quality scaling when needed. Maybe see how these projects store logos:

• https://github.com/simple-icons/simple-icons
• https://github.com/gilbarbara/logos

[martinrieder]

I agree that there are some good reasons for choosing SVG, though I do not see this as a limiting factor by itself. It only implies some limitations regarding simplicity and coloring though... I feel confident that I can vectorize them using Inkscape. Contributions in raster images are also welcome, yet even pen-and-paper format if anyone here feels creative!

I must admit that I left the creativity part to an AI, which came up with some interesting suggestions. It seems to be legasthenic though, so some spelling correction must be done...

AFAIK there is no LLM that was trained on vector images, so I used DALL-E3. Let me know if you want to see the prompts for these. Some are minimalist and easy to vectorize, but others a bit more fancy and colorful. Please cast your vote and I will try my best to vectorize.

[martinrieder]

EDIT One simplified

[martinrieder]

EDIT two simplified

[martinrieder]

Three

[martinrieder]

Four

[martinrieder]

Five

[martinrieder]

Six

[martinrieder]

Seven

[martinrieder]

Eight

[martinrieder]

Nine

[martinrieder]

Ten

[martinrieder]

Eleven

[martinrieder]

Twelve

[tobiasfalk]

They all look good but I think that most of them are tomuch, crowded, complicated. Something simpler would be much better, nine, goes in to the right direction.

Consider how they work in different sizes, like a github profile picture or a desktop icon.

[tobiasfalk]

Also think about the different environments the logo is used in. Should the logo have a comandline/terminal representation and so on. On the FreeCAD discord a discussion about the new Logo has been done and it could help reading it to get some ideas and so.

[kvid]

I agree with most arguments by @tobiasfalk that a simple logo is better. It should IMHO be easily recognizable also when shown as small icons, e.g. in Windows. Of the 12 suggestions, I've seen so far, nine seems better, but it might be too similar to the USB logo.

@tobiasfalk wrote:

[...] Should the logo have a comandline/terminal representation and so on.

Are you thinking about an ASCII art version of a graphical logo?

[tobiasfalk]

@tobiasfalk wrote:

[...] Should the logo have a comandline/terminal representation and so on.

Are you thinking about an ASCII art version of a graphical logo?

Yes

[martinrieder]

Thanks for the feedback. I understand your concerns. Please see the images above as an inspiration. None of them are meant to be final. We could also merge certain aspects into a combined version.

There's another one I left out because I thought that it might be suited as an icon for the YAML files.

That brings up the question: does the logo need to include the WireViz text?

[kvid]

@martinrieder wrote:

[...] That brings up the question: does the logo need to include the WireViz text?

IMHO - no, because that is unrealistic to recognize for small icon sizes. The name is too long to be scaled down to a few pixels wide.

[tobiasfalk]

@martinrieder this also looks like a good start, as said a more simpler Version could be more effective in recognition and so, especially when small.

As for the the WireViz in the logo, I would say maybe not the whole name but a W and a V would be a good idea.

These two arrangements come to my minde:

V W

And

W V

[tobiasfalk]

[kvid]

The VW (V over W) is too close to the VolksWagen logo, I think.

[tobiasfalk]

https://youtu.be/YPoLD_5FQ38?si=7bf4MCppmUOhpJVl Sorry😁🤦‍♂️

[kvid]

If you search for WV logo, you'll find West Virginia and a few others that we should be careful about getting too similar to.

[tobiasfalk]

WZ could also work, since the Z is more prominent when saying Viz

[martinrieder]

@kvid wrote:

I suggest using e.g. SVG to enable high-quality scaling when needed. Maybe see how these projects store logos:

• https://github.com/simple-icons/simple-icons
• https://github.com/gilbarbara/logos

I am well aware of the trend to have minimalist logos, optionally spelling out the name separately. Knowing what stands behind them is often hard and comes close to learning Egyptian hieroglyphics. In that respect, I would say that we should not incorporate any letters into the logos. It needs to show some connectors and wires though.

[tobiasfalk]

What about a Plan where a wire comes out of?

[martinrieder]

What about a Plan where a wire comes out of?

Fourteen

This one I had already saved. Any ideas for simplification?

[tobiasfalk]

Maybe only one paiper(or half of it) and one wire with connector.

[martinrieder]

Maybe only one paiper(or half of it) and one wire with connector.

IMHO a wiring harness would always contain multiple wires and connectors...

Thinking opposite, we could also show a connector going into the schematics sheet.

[tobiasfalk]

Thinking opposite, we could also show a connector going into the schematics sheet.

Yes sounds good, but isn't WireViz used to design harneses before creating them, and this may look the other way around.

Since designing is often connected with pens, why not a pen or pencil and wires somewhere/how.

[martinrieder]

Thinking opposite, we could also show a connector going into the schematics sheet.

Yes sounds good, but isn't WireViz used to design harneses before creating them, and this may look the other way around.

Since designing is often connected with pens, why not a pen or pencil and wires somewhere/how.

Funny, because that is one thing that I also got as a suggestion. The prompt was: "Create a logo with a minimalistic style in rectangular shape, featuring connectors in a wiring harness surrounded by a frame."

[martinrieder]

Fifteen

Here's a connector going outwards.

EDIT fifteen simplified

[tobiasfalk]

Here's a connector going outwards:

Maybe just the circle

[martinrieder]

Sixteen

Is this one is still too crowded?

EDIT Sixteen simplified

[tobiasfalk]

And more wires than traces

[martinrieder]

Seventeen

Just some wires and simple connectors. Some artifacts and colors need fixing...

EDIT seventeen simplified

[martinrieder]

And more wires than traces

I can remove the circles resembling vias of a PCB trace. These would need to be moved to the splice location.

Note that I uploaded some simplified versions above.

[obelisk79]

Greetings, I recently led the effort to replace the logo for FreeCAD. As part of that I spent some time studying logo/design theory. I would note that a logo should be visually simple, unique and easily identifiable from other products. Using letters such as WV aren't really that important as long as the visuals are clean, scale properly and don't rely on color to be effective.

It seems like there's a lot of AI generated images in this discussion. I would caution against this approach. However, of the images shown, No. 9 seems to be the closest to a decent concept.

[martinrieder]

@obelisk79 thanks for your feedback. I noticed that www.freecad.org shows a different logo than wiki.freecad.org. Is there a reason for this? Which one do you prefer?

The AI content is only intended as a source of inspiration. None of them are meant to be the final logo. Some editing will be required anyways.

[tobiasfalk]

I noticed that www.freecad.org shows a different logo than wiki.freecad.org. Is there a reason for this?

This has most likely to do with the fact that the new Logo was finalised just some weeks ago and that not all is moved.

[obelisk79]

This is the correct new logo for FreeCAD. The migration has not been instant but most instances have been updated:

[obelisk79]

I did a little doodling based on image #9

-a2ea-7418114f0b63)

[martinrieder]

@obelisk79 wrote:

I did a little doodling based on image #9

Thanks for that idea. It looks nice, though I think that it is missing some important characteristics of a wiring harness:

• Diversity of connector shapes
• Spliced connections with dot
• Bundling of multiple wires

Therefore, I have created something similar, though not as sleek as yours:

When I find a little more time, I would like to merge this with one of the suggestions above, starting with Fifteen. The tilted view and the connector breaking out of the circle add some dynamics that make it a little less boring.

[obelisk79]

You could add those elements in, I actually had splice dots and removed them, as a full representation isn't necessary in a logo. It's an abstract and unique symbol. Either way, I attached the vector file in my previous post which I created in Inkscape. j

[kvid]

I liked the idea https://github.com/wireviz/WireViz/issues/373#issuecomment-2144187572 by @obelisk79 based on https://github.com/wireviz/WireViz/issues/373#issuecomment-2143869673 (nine) by @martinrieder, but I thought it should be left-right oriented like a real WireViz diagram. Spinning a bit further on that thought, made me try out how I could use WireViz to create a logo suggestion. I decided to drop all text to focus on a low number of connectors and wires, use a few basic colors only to keep the complexity low, and tweak the line thickness and size to reduce image distortion when scaled down. However, I welcome ways to improve this idea. My goal is to capture the essence of WireViz in a simple logo that is easy to recognize and easy to distinguish from other logos.

The small 16x16px version is very blurry - how can that be avoided? Is it better to reduce the number of connectors and wires from 3 to 2 and scale up pen thickness, or does it have to be hand drawn?

WireViz outputs SVG and PNG (that both might need some manual polishing), but I suggest here the unpolished output (followed by dark and black background, then grayscale version, and smaller sizes): Color and count variations of this idea are easy to make by changing the YAML input:

Expand to show YAML input for the diagram above

```yaml # WireViz v0.4 used to generate a logo suggestion # options: # Uncomment options to change background # bgcolor: "#111111" # Dark background # bgcolor: BK # Black background connectors: X: type: " \n\n\n" style: simple bgcolor: BU cables: W: colors: [BKBKRDRDRDRDBKBK,BKBKYEYEYEYEBKBK,BKBKGNGNGNGNBKBK] bgcolor: "#cccccc" show_wirecount: false show_wirenumbers: false connections: - - X. - W.: [1-3] tweak: override: graph: nodesep: "0.6" ranksep: "0.8" pad: "0.2" node: penwidth: "12.0" fontcolor: "\"#cccccc\"" fontsize: "5.0" ```

[martinrieder]

[.. .] I thought it should be left-right oriented like a real WireViz diagram. Spinning a bit further on that thought, made me try out how I could use WireViz to create a logo suggestion. [...] My goal is to capture the essence of WireViz in a simple logo that is easy to recognize and easy to distinguish from other logos.

I love the idea. It provides a proof of the capabilities that WireViz has. Thanks for sharing the YAML code on this piece of "artwork".

The small 16x16px version is very blurry - how can that be avoided?

Why does it need to be that small if the trend is moving in another direction? Could we have different levels of detail for different resolutions?

My humble idea that I have not tried yet:

• 4 connectors to the left, labeled with the letters W, I, R, E
• 2 wires only to have them crossed and spliced
• 3 connectors to the right, containing the letters V, I, Z

The individual connectors could also be merged into a single one with the letters assigned to pins. If it used as an icon, then simply remove the letters and scale it down.

Is it better to reduce the number of connectors and wires from 3 to 2 and scale up pen thickness, or does it have to be hand drawn?

Nice Idea. There is an online tool called SketchViz that will generate a hand-drawn version of your graph.

My personal favorite is actually number two, of which I made a simplified version. It still needs some polishing though:

https://github.com/wireviz/WireViz/issues/373#issuecomment-2143866846

EDIT two simplified

According to your idea, I might rotate this by 90° and move the words Wire and Viz to the side to get that left- right orientation.

[kvid]

@martinrieder wrote:

[...]

The small 16x16px version is very blurry - how can that be avoided?

Why does it need to be that small if the trend is moving in another direction? Could we have different levels of detail for different resolutions?

16x16px seems to be the smallest icon size used at the relevant OS platforms: https://blog.icons8.com/articles/choosing-the-right-size-and-format-for-icons/#h-desktop

[martinrieder]

In https://github.com/wireviz/WireViz/issues/373#issuecomment-2145580987, @kvid wrote:

[.. .] I thought it should be left-right oriented like a real WireViz diagram. Spinning a bit further on that thought, made me try out how I could use WireViz to create a logo suggestion. [...] My goal is to capture the essence of WireViz in a simple logo that is easy to recognize and easy to distinguish from other logos.

I wrote:

I love the idea. It provides a proof of the capabilities that WireViz has. Thanks for sharing the YAML code on this piece of "artwork".

My humble idea that I have not tried yet:

• 4 connectors to the left, labeled with the letters W, I, R, E
• 2 wires only to have them crossed and spliced
• 3 connectors to the right, containing the letters V, I, Z

I found that it would be nice to have an option like show_colors for hiding the color names... Besides that, I made up this one using WireViz and some tweaks (see code below):

SVG created directly in WireViz v0.4.1-rc

Sketchviz style SVG created using fskpf/svg2roughjs that makes it look a little more interesting...

With the latter, I am just demonstrating what is possible. I would not consider this as my favorite. @kvid @formatc1702 Would you consider adding the code below to the examples?

YAML input and GV dot output

```yaml # WireViz v0.4 used to generate a logo suggestion # options: # Uncomment options to change background # bgcolor: "#111111" # Dark background # bgcolor: BK # Black background templates: - &connector style: simple bgcolor: "#cccccc" connectors: W: <<: *connector type: "W" I1: <<: *connector type: "I" R: <<: *connector type: "R" E: <<: *connector type: "E" V: <<: *connector type: "V" I2: <<: *connector type: "I" Z: <<: *connector type: "Z" cables: X: wirecount: 2 bgcolor: "#cccccc" show_wirecount: false show_wirenumbers: false show_name: false colors: [OG,BU] connections: - - W - X: 1 - V - - I1 - X: 1 - I2 - - R - X: 2 - Z - - E - X: 2 tweak: override: graph: nodesep: "0.3" ranksep: "0.6" pad: "0.1" node: penwidth: "4.0" fontcolor: "\"#000000\"" fontsize: "24.0" fontname: "Helvetica" edge: penwidth: "2.0" ``` ```dot graph { // Graph generated by WireViz 0.4.1-dev // https://github.com/wireviz/WireViz graph [bgcolor="#FFFFFF" fontname=arial nodesep=0.3 rankdir=LR ranksep=0.6 pad=0.1] node [fillcolor="#FFFFFF" fontname=Helvetica height=0 margin=0 shape=none style=filled width=0 penwidth=4.0 fontcolor="#000000" fontsize=24.0] edge [fontname=arial style=bold penwidth=2.0] W [label=<

W

> fillcolor="#FFFFFF" shape=box style=filled] V [label=<

V

> fillcolor="#FFFFFF" shape=box style=filled] I1 [label=<

I

> fillcolor="#FFFFFF" shape=box style=filled] I2 [label=<

I

> fillcolor="#FFFFFF" shape=box style=filled] R [label=<

R

> fillcolor="#FFFFFF" shape=box style=filled] Z [label=<

Z

> fillcolor="#FFFFFF" shape=box style=filled] E [label=<

E

> fillcolor="#FFFFFF" shape=box style=filled] edge [color="#000000:#ff8000:#000000" penwidth=2.0] W:e -- X:w1:w X:w1:e -- V:w edge [color="#000000:#ff8000:#000000" penwidth=2.0] I1:e -- X:w1:w X:w1:e -- I2:w edge [color="#000000:#0066ff:#000000" penwidth=2.0] R:e -- X:w2:w X:w2:e -- Z:w edge [color="#000000:#0066ff:#000000" penwidth=2.0] E:e -- X:w2:w X [label=<

OG BU

> fillcolor="#FFFFFF" shape=box style=filled] } ```