[meta] Logo Suggestions #373
Comments
|
I suggest using e.g. SVG to enable high-quality scaling when needed. Maybe see how these projects store logos: |
|
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. |
|
EDIT One simplified |
|
EDIT two simplified |
|
Three |
|
Four |
|
Five |
|
Six |
|
Seven |
|
Eight |
|
Nine |
|
Ten |
|
Eleven 
|
|
Twelve |
|
They all look good but I think that most of them are tomuch, crowded, complicated. Consider how they work in different sizes, like a github profile picture or a desktop icon. |
|
Also think about the different environments the logo is used in. |
|
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:
Are you thinking about an ASCII art version of a graphical logo? |
Yes |
|
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? |
|
@martinrieder wrote:
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. |
|
@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 And W |
|
|
|
The VW (V over W) is too close to the VolksWagen logo, I think. |
|
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. |
|
WZ could also work, since the Z is more prominent when saying Viz |
|
@kvid wrote:
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. |
|
What about a Plan where a wire comes out of? |
Fourteen This one I had already saved. Any ideas for simplification? |
|
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. |
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." 
|
|
Fifteen Here's a connector going outwards. EDIT fifteen simplified |
Maybe just the circle |
|
Sixteen Is this one is still too crowded? **EDIT Sixteen simplified ** |
|
And more wires than traces |
|
Seventeen Just some wires and simple connectors. Some artifacts and colors need fixing... EDIT seventeen simplified |
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. |
|
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. |
|
@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. |
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. |
|
This is the correct new logo for FreeCAD. The migration has not been instant but most instances have been updated: |
|
I did a little doodling based on image #9
|
|
@obelisk79 wrote:
Thanks for that idea. It looks nice, though I think that it is missing some important characteristics of a wiring harness:
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. |
|
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 |
|
I liked the idea #373 (comment) by @obelisk79 based on #373 (comment) (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): Expand to show YAML input for the diagram above# 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" |
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".
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:
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.
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:
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. |
|
@martinrieder wrote:
16x16px seems to be the smallest icon size used at the relevant OS platforms: |
|
In #373 (comment), @kvid wrote:
I wrote:
I found that it would be nice to have an option like 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 YAML input and GV dot output
# 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"
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=<
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<table border="0" cellspacing="0" cellpadding="3" cellborder="1"><tr>
<td balign="left">W</td>
</tr></table>
</td></tr>
</table>
> fillcolor="#FFFFFF" shape=box style=filled]
V [label=<
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<table border="0" cellspacing="0" cellpadding="3" cellborder="1"><tr>
<td balign="left">V</td>
</tr></table>
</td></tr>
</table>
> fillcolor="#FFFFFF" shape=box style=filled]
I1 [label=<
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<table border="0" cellspacing="0" cellpadding="3" cellborder="1"><tr>
<td balign="left">I</td>
</tr></table>
</td></tr>
</table>
> fillcolor="#FFFFFF" shape=box style=filled]
I2 [label=<
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<table border="0" cellspacing="0" cellpadding="3" cellborder="1"><tr>
<td balign="left">I</td>
</tr></table>
</td></tr>
</table>
> fillcolor="#FFFFFF" shape=box style=filled]
R [label=<
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<table border="0" cellspacing="0" cellpadding="3" cellborder="1"><tr>
<td balign="left">R</td>
</tr></table>
</td></tr>
</table>
> fillcolor="#FFFFFF" shape=box style=filled]
Z [label=<
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<table border="0" cellspacing="0" cellpadding="3" cellborder="1"><tr>
<td balign="left">Z</td>
</tr></table>
</td></tr>
</table>
> fillcolor="#FFFFFF" shape=box style=filled]
E [label=<
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<table border="0" cellspacing="0" cellpadding="3" cellborder="1"><tr>
<td balign="left">E</td>
</tr></table>
</td></tr>
</table>
> 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=<
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<table border="0" cellspacing="0" cellborder="0">
<tr><td> </td></tr>
<tr>
<td></td>
<td>
OG
</td>
<td></td>
</tr>
<tr>
<td colspan="3" border="0" cellspacing="0" cellpadding="0" port="w1" height="6">
<table cellspacing="0" cellborder="0" border="0">
<tr><td colspan="3" cellpadding="0" height="2" bgcolor="#000000" border="0"></td></tr>
<tr><td colspan="3" cellpadding="0" height="2" bgcolor="#ff8000" border="0"></td></tr>
<tr><td colspan="3" cellpadding="0" height="2" bgcolor="#000000" border="0"></td></tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
BU
</td>
<td></td>
</tr>
<tr>
<td colspan="3" border="0" cellspacing="0" cellpadding="0" port="w2" height="6">
<table cellspacing="0" cellborder="0" border="0">
<tr><td colspan="3" cellpadding="0" height="2" bgcolor="#000000" border="0"></td></tr>
<tr><td colspan="3" cellpadding="0" height="2" bgcolor="#0066ff" border="0"></td></tr>
<tr><td colspan="3" cellpadding="0" height="2" bgcolor="#000000" border="0"></td></tr>
</table>
</td>
</tr>
<tr><td> </td></tr>
</table>
</td></tr>
</table>
> fillcolor="#FFFFFF" shape=box style=filled]
} |
|
One last logo draft that I would like to share, because it became my favorite recently... 
@obelisk79 @tobiasfalk @kvid I am aware about the fact that it conveys neither of the following properties, as stated in #373 (comment), but it scales well...
Anything else to criticize other than me providing too many ideas? 😇 Note that I am not intending to come up with any more suggestions. |
|
@martinrieder yes looks good, could you put it on a white background? |
|
Looks decent. As far as the properties stated in #373, I'd disregard them. In the world of graphic/logo design we aren't necessarily conveying purpose as much as we want a unique and easily identifiable design loosely associated with the purpose of the brand/product. This checks those boxes fairly well. |
|
Simply filling the dark background with white color looks ugly. I would need to vectorize it and add some dark outlines. The best I can offer for the moment is the following, as I only did some quick fingerpainting on my mobile...
|
(256/128/64/32/16px)
|
(256/128/64/32/16px)
|
|
Hi, Some rough points from my side. Very personal opinions obviously, and up for discussion:
So far, I see the most potential in:
For what it's worth, here is my own attempt, quickly sketched out and terribly colored in. Full version: Simplified icon version (64x64, 32x32, 16x16, downscaled in browser, looks good on retina) Icon version (true 16x16 px, retina screens might apply some blurry upscaling)
If anybody wants to try their hand at digitizing/fine-tuning it, go ahead 🚀 If I find the time, I might give it a go as well. |
|
Interesting idea, which led me to another crazy thought:
Going further:
|
|
I wrote:
I implemented the option to hide colors in PR #405 by 5e4271d, see the result here: |
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.
The text was updated successfully, but these errors were encountered: