Modernize xarray logos #66
Comments
|
I gave it a try but don't know where exactly to change things. xarray-datastructure<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="120">
<style type="text/css">
#temp .cxt {
fill: #bfdfdf;
}
#temp .cxy {
fill: #409f9f;
}
#temp .cyt {
fill: #7fbfbf;
}
#prec .cxt {
fill: #efbfcf;
}
#prec .cxy {
fill: #cf4070;
}
#prec .cyt {
fill: #df7f9f;
}
.lat {
fill: #ff7f00;
}
.lon {
fill: #ff4040;
}
text {
font-size: 10px;
}
</style>
<defs>
<g id="xt">
<g id="col1">
<rect id="r" x="0" y="36" width="10" height="10"/>
<use href="#r" y="11"/>
<use href="#r" y="22"/>
<use href="#r" y="33"/>
<use href="#r" y="44"/>
<use href="#r" y="55"/>
</g>
<use href="#col1" x="11"/>
<use href="#col1" x="22"/>
<use href="#col1" x="33"/>
<use href="#col1" x="44"/>
<use href="#col1" x="55"/>
<use href="#col1" x="66"/>
<use href="#col1" x="77"/>
</g>
<g id="xy-part">
<g id="col2">
<path id="p" d="M88 35.5 v10 l5 -5 v-10Z"/>
<use href="#p" y="11"/>
<use href="#p" y="22"/>
<use href="#p" y="33"/>
<use href="#p" y="44"/>
<use href="#p" y="55"/>
</g>
<use href="#col2" x="6" y="-6"/>
<use href="#p" x="12" y="-12"/>
<use href="#p" x="18" y="-18"/>
<use href="#p" x="24" y="-24"/>
<use href="#p" x="30" y="-30"/>
<path id="pp" d="M100 34.5 v0.1 l5 -5 v-0.1Z"/>
<use href="#pp" x="6" y="-6"/>
<use href="#pp" x="12" y="-12"/>
<use href="#pp" x="18" y="-18"/>
</g>
<g id="xy-part2">
<use href="#col2"/>
<use href="#col2" x="6" y="-6"/>
<use href="#col2" x="12" y="-12"/>
<use href="#col2" x="18" y="-18"/>
<use href="#p" x="24" y="-24"/>
<use href="#p" x="30" y="-30"/>
<use href="#p" x="24" y="-13"/>
<use href="#p" x="30" y="-19"/>
<path id="p1" d="M112 33.5 v1 l5 -5 v-1Z"/>
<use href="#p1" x="6" y="-6"/>
</g>
<g id="xy">
<use href="#col2"/>
<use href="#col2" x="6" y="-6"/>
<use href="#col2" x="12" y="-12"/>
<use href="#col2" x="18" y="-18"/>
<use href="#col2" x="24" y="-24"/>
<use href="#col2" x="30" y="-30"/>
</g>
<g id="yt">
<g id="col3">
<path id="q" d="M0.5 35 h10 l5 -5 h-10Z"/>
<use href="#q" x="6" y="-6"/>
<use href="#q" x="12" y="-12"/>
<use href="#q" x="18" y="-18"/>
<use href="#q" x="24" y="-24"/>
<use href="#q" x="30" y="-30"/>
</g>
<use href="#col3" x="11"/>
<use href="#col3" x="22"/>
<use href="#col3" x="33"/>
<use href="#col3" x="44"/>
<use href="#col3" x="55"/>
<use href="#col3" x="66"/>
<use href="#col3" x="77"/>
</g>
<g id="cube">
<use href="#xt" y="36"/>
<use href="#xy" x="88" y="35.5"/>
<use href="#yt" x="0.5" y="35"/>
</g>
<marker id="arrowhead" markerWidth="5" markerHeight="4" refY="2" orient="auto">
<polygon points="0 0, 5 2, 0 4" />
</marker>
</defs>
<g id="temp">
<text x="55" y="7">temperature</text>
<use href="#xt" y="10" class="cxt"/>
<use href="#xy-part" y="10" class="cxy"/>
<use href="#yt" y="10" class="cyt"/>
</g>
<g id="prec">
<text x="152" y="7">precipitation</text>
<use href="#xt" x="100" y="10" class="cxt"/>
<use href="#xy-part2" x="100" y="10" class="cxy"/>
<use href="#yt" x="100" y="10" class="cyt"/>
</g>
<g id="lat">
<text x="225" y="7">latitude</text>
<use href="#xy-part2" x="124" y="10" class="lat"/>
</g>
<g id="lon">
<text x="260" y="7">longitude</text>
<use href="#xy" x="148" y="10" class="lon"/>
</g>
<g id="axes">
<line x1="275" y1="110" x2="335" y2="110" stroke="black" marker-end="url(#arrowhead)"/>
<text x="340" y="112">t</text>
<line x1="275" y1="110" x2="275" y2="50" stroke="black" marker-end="url(#arrowhead)"/>
<text x="273" y="44">x</text>
<line x1="275" y1="110" x2="305" y2="80" stroke="black" marker-end="url(#arrowhead)"/>
<text x="309" y="77">y</text>
<line x1="305" y1="107" x2="305" y2="113" stroke="black"/>
<text x="308" y="107" transform="rotate(-45, 308, 107)">reference_time</text>
</g>
</svg>xarray-logo<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="240">
<style type="text/css">
#temp .cxt {
fill: #bfdfdf;
}
#temp .cxy {
fill: #409f9f;
}
#temp .cyt {
fill: #7fbfbf;
}
#prec .cxt {
fill: #efbfcf;
}
#prec .cxy {
fill: #cf4070;
}
#prec .cyt {
fill: #df7f9f;
}
.lat {
fill: #ff7f00;
}
.lon {
fill: #ff4040;
}
.logo {
font-family: Helvetica, sans-serif;
font-size: 72px;
}
.logox {
fill: #888888;
font-weight: bold;
font-style: italic;
}
</style>
<defs>
<g id="xt">
<g id="col1">
<rect id="r" x="0" y="36" width="10" height="10"/>
<use href="#r" y="11"/>
<use href="#r" y="22"/>
<use href="#r" y="33"/>
<use href="#r" y="44"/>
<use href="#r" y="55"/>
</g>
<use href="#col1" x="11"/>
<use href="#col1" x="22"/>
<use href="#col1" x="33"/>
<use href="#col1" x="44"/>
<use href="#col1" x="55"/>
<use href="#col1" x="66"/>
<use href="#col1" x="77"/>
</g>
<g id="xy">
<g id="col2">
<path id="p" d="M88 35.5 v10 l5 -5 v-10Z"/>
<use href="#p" y="11"/>
<use href="#p" y="22"/>
<use href="#p" y="33"/>
<use href="#p" y="44"/>
<use href="#p" y="55"/>
</g>
<use href="#col2" x="6" y="-6"/>
<use href="#col2" x="12" y="-12"/>
<use href="#col2" x="18" y="-18"/>
<use href="#col2" x="24" y="-24"/>
<use href="#col2" x="30" y="-30"/>
</g>
<g id="yt">
<g id="col3">
<path id="q" d="M0.5 35 h10 l5 -5 h-10Z"/>
<use href="#q" x="6" y="-6"/>
<use href="#q" x="12" y="-12"/>
<use href="#q" x="18" y="-18"/>
<use href="#q" x="24" y="-24"/>
<use href="#q" x="30" y="-30"/>
</g>
<use href="#col3" x="11"/>
<use href="#col3" x="22"/>
<use href="#col3" x="33"/>
<use href="#col3" x="44"/>
<use href="#col3" x="55"/>
<use href="#col3" x="66"/>
<use href="#col3" x="77"/>
</g>
<g id="yt-part">
<g id="row3">
<path id="q" d="M0.5 35 h10 l5 -5 h-10Z"/>
<use href="#q" x="11"/>
<use href="#q" x="22"/>
<use href="#q" x="33"/>
<use href="#q" x="44"/>
<use href="#q" x="55"/>
<use href="#q" x="66"/>
<use href="#q" x="77"/>
</g>
<use href="#row3" x="6" y="-6"/>
<use href="#q" x="83" y="-6"/>
<use href="#q" x="89" y="-12"/>
<use href="#q" x="95" y="-18"/>
<use href="#q" x="101" y="-24"/>
<use href="#q" x="107" y="-30"/>
</g>
<g id="cube">
<use href="#xt" y="36"/>
<use href="#xy" x="88" y="35.5"/>
<use href="#yt" x="0.5" y="35"/>
</g>
<marker id="arrowhead" markerWidth="5" markerHeight="4" refY="2" orient="auto">
<polygon points="0 0, 5 2, 0 4" />
</marker>
</defs>
<g id="temp">
<use href="#xt" x="5" class="cxt"/>
<use href="#xy" x="5" class="cxy"/>
<use href="#yt" x="5" class="cyt"/>
</g>
<g id="prec">
<use href="#xt" x="5" y="77" class="cxt"/>
<use href="#xy" x="5" y="77" class="cxy"/>
<use href="#yt-part" x="5" y="77" class="cyt"/>
</g>
<g id="lat">
<use href="#xy" x="45" y="77" class="lat"/>
</g>
<g id="lon">
<use href="#xy" x="85" y="77" class="lon"/>
</g>
<g id="axes">
<line x1="168" y1="0" x2="168" y2="60" stroke="black" marker-end="url(#arrowhead)"/>
<line x1="168" y1="0" x2="138" y2="30" stroke="black" marker-end="url(#arrowhead)"/>
</g>
<g id="logo-text">
<text x="1" y="220" class="logo logox">x</text>
<text x="42" y="220" class="logo">array</text>
</g>
</svg>Probably the square and non-square version of the logo can be unified with some css. The two contain quite some copy-paste, but in svg references to other svgs are allowed, so one could load these definitions from a common file (Or use the different display styles as a sprite, maybe svg inside an svg?). The CSS could also be moved outside, then you have all the freedom for styling it :) Another note: I am not sure about what is required in the header, I have only tested these in a modern chrome. I think it is SVG2 standard, so opening them in inkscape etc. might not work (might need to replace |
|
Thank you very much, @headtr1ck! I'm definitely going to integrate these in the website and will report back |
|
The xarray logo name (the only difference between the square and non-square logo version) could also be done in pure html/css :) |
|
As an update to this issue. @andersy005 and I have been working with a designer w/ @numfocus to update Xarray's logo. We should have drafts in the next week or so to share. |
|
Has there been any progress on this? |
|
Yes and no. @andersy005 and I have been iterating with a designer through NumFocus to come up with a new logo design. We have some drafts but none of them are feeling quite there yet. Here are the latest mocks: xarray_LogoPresentation_v2.pdf Do any of these options pop out to folks as promising and worth pursuing further? I'm personally trying to decide if we should we scrap this effort or push through? If you are new to this subject, I suggest reading the "project background" section here for the motivating context. Pinging the core team @rabernat, @shoyer, @dcherian, @benbovy, @max-sixty, @crusaderky, @spencerkclark, @fujiisoup, @fmaussion, @mathause, @andersy005, @Illviljan, @keewis, and @TomNicholas. And a few others @xarray-contrib/nasa-roses, @xarray-contrib/xbatcher-devs, @xarray-contrib/xpublish-devs. Based on these drafts, I would favor B1, A1, D2 though I think they all need additional work. |
|
I do like the way the current one embodies the multidimensional data. D1 & D2 somewhat do that, although not as explicitly. I'm much less of a fan of C-1 & C-2, they don't seem to embody anything about xarray specifically, even if they're cool images. (ofc I'm one small voice and have zero expertise here, don't anchor on my unfiltered thoughts...) |
|
I also really like how the current one captures multi dimensional data that I'm not sure any of these really get right now. One of the things I pondered is how do the logos render at different sizes and in grayscale (and almost fell down the stairs trying to view at a distance). A really quick and dirty way comparison of logos and scales.
Note: For some reason the B variants don't show up in iOS or MacOS previews for me, but do show up in Firefox's PDF reader.
I tinkered with adding a Dask like 'array layer' behind B and highlighting the axes to see if that could keep some of the cleanness of the current design, but maybe add some depth and clarity to highlight the multi dimensional aspect.
|
|
I'm going to reiterate my comments on the doc, because I think Alex's last image there moves in the same direction. IMO Xarray's essence is labelled dimensions, and I think our logo should (and easily could) capture that somehow. The PyData ecosystem is filled with things that are "cubes" or "arrays" in some sense, but what makes xarray unique is the clearly-defined dimensions (axes) and their associated labels. None of the suggestions made by the designer really distinguish xarray from any other library providing a cube of data points, whereas xarray's current logo actually does this really well. (I'm also not a big fan of the X design for similar reasons - it communicates nothing about what xarray actually is, because as far as I know the X in Xarray is itself totally arbitrary? Then again I guess you could argue that X as in "X-dimension" is suggesting that idea... 🤷♂️) I feel like it should be possible to come up with a simple graphic design that suggests labelled dimension axes. Maybe via axes with ticks alongside the cube array? I tried to make one quickly here a while ago but my graphic design skills clearly leave something to be desired.
By bolding the 3 main axes I think @abkfenris's design starts to suggest a similar idea. Having said all that I definitely wouldn't die on this hill 😅 |
|
Since xarray objects are wrapping other ndarrays, which are the famous cube logos, maybe we could indicate that. Somehow wrapping a cube and add some labels, attributes, índices etc. |
|
I am sharing some of the feedback i have received from my colleagues who are also Xarray users:
|
|
I liked D-2, clean with colors that are clear even from afar.
|
|
I like the proposed variants (with a preference for B and D), although I do also agree that they don't fully capture data cube multi-dimensions and dimension labels. I couldn't help but give it a try (keeping a single cube for simplicity but taking a few ideas from the current logo like parallel plans also suggested by @abkfenris and @TomNicholas...):
(EDIT: I've been trying a few things and it drifted away from the logos proposed in #66 (comment). Not sure if that was the right thing to do at this stage, though... Further iterations on one of the proposed logos sounds good to me too) |
|
I really like @benbovy 's suggestion (except maybe the choice of colors - but this is very subjective) and I have similar concerns as many others that with the new designs the particularity of xarray gets lost and abstracted too much... |
|
I agree with the other comments made so far. I think @abkfenris raises some important points for option D. When I look at it my first thought is to wonder why it's a not-quite-hexagon of hexagons before I force my brain to see it as representing stacked layers in three dimensions. I "vote" to continue exploring modifications to B and @benbovy's mockup. |
|
Between @TomNicholas sketch, and the current logo, I had a thought, what about having a family of logos based on display size? On small screens the logo could be a single cube and plane, then in larger contexts the current logo on up to the annotated version?
|
|
I love all these ideas but have to say I do still really like the original logo! The "hexagon cube" subjectively does look modern to me and the colors are appealing. Seems like having a standardized new color palette and font could go a long way without completely redoing the logo... That said, for a simplified small logo l couldn't resist also trying to capture labelled dimensions in just a single cube for compactness :) Admittedly it borrows heavily from @TomNicholas sketch, the numpy logo, and makes liberal use of Keynote font and color defaults! But perhaps the idea of fitting the name into the logo somehow could get incorporated into the other options:
|
|
I did also try putting the x-a-r-r-a-y letters into the cube itself, which I think works pretty well for suggesting labelled dimensions.
One thing I don't really like, though, is that all the letters may not be visible at small scales (favicon) and also at larger scales this is kind of duplicate with the "Xarray" text shown next to the cube (I think is better to keep the plain text for more clarity).
It looks like most comments here go in that way, which makes me wonder if we do really want to rebrand the logo. We all seem to be used and attached to the current logo and I'm not sure that's best for giving (unbiased) opinions about a rebranded logo. The current one has some flaws especially when it is shown at small scales, but I think this could be fixed with a simplified version (without the need to provide a whole family of logos to keep things simple). Just removing all the stroke lines may be enough, actually. I did that for another logo in benbovy/spherely#13 (comment). I quickly tried it for the Xarray logo and it looks already pretty clean IMO:
Another advantage of the current logo is that it looks nice in both light and dark settings. Personally I'm happy with the current one but I'm also open for a rebranding that still captures what is Xarray perhaps in a very different way than the current logo. |
|
Aggregating the feedback from folks here and in the dev meetings, we asked the designer to go back toward the original logo, with a fresh eye on color and readability at very small scales. Here's what they came back with:
The full set of assets is attached: Xarray - Final Assets.zip From my perspective, we landed in a pretty good spot here. We have a more modern logo, a fresh set of colors, and a basic style guide for how to use them. I particularly like that we can take these colors/fonts and apply them to many of the assets/diagrams/etc. that we have without too much trouble. |
The three existing logos were designed using Latex and rasterized as PNGs. Using these PNG logos on the website results in a not-so-great user experience (features like switching to a dark theme don't work). Could we redesign/modernize the logos using tools like Figma or Illustrator to produce logos in SVG format?
Cc @jhamman
The text was updated successfully, but these errors were encountered: