Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modernize xarray logos #66

Open
andersy005 opened this issue Nov 15, 2021 · 19 comments
Open

Modernize xarray logos #66

andersy005 opened this issue Nov 15, 2021 · 19 comments

Comments

@andersy005
Copy link
Member

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

@headtr1ck
Copy link

I gave it a try but don't know where exactly to change things.
So feel free to use these as a basis for a PR :)

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 href by xlink:href etc.).

@andersy005
Copy link
Member Author

Thank you very much, @headtr1ck! I'm definitely going to integrate these in the website and will report back

@headtr1ck
Copy link

The xarray logo name (the only difference between the square and non-square logo version) could also be done in pure html/css :)
Should be even better for responsiveness.

@jhamman
Copy link
Contributor

jhamman commented Jan 17, 2023

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.

@headtr1ck
Copy link

Has there been any progress on this?

@jhamman
Copy link
Contributor

jhamman commented Mar 27, 2023

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.

@max-sixty
Copy link

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...)

@abkfenris
Copy link

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.

A2B45C95-71AA-4A79-B872-C989751D26BD_1_201_a

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.

  • Of the four, I like B the best (once I could see it), but it misses some of the multi-dimensional aspect.
  • D maybe has more of the multi-dimensional aspect, but it really seems muddled quickly when scaled down or cast to grayscale.
  • A is nice, but seems to conflate mutli dimensional data with something else
  • C feel like a logo for a HPC cluster or other high throughput protocol.

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.

Xarray logo sketch 2

@TomNicholas
Copy link
Member

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.

PXL_20221207_173453621

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 😅

@headtr1ck
Copy link

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.

@andersy005
Copy link
Member Author

I am sharing some of the feedback i have received from my colleagues who are also Xarray users:

visually I like the A-1 + B options a lot! but it seems like the D options do a better job of conveying the dimension/selection ideas core to xarray…but maybe that doesn’t need to be the responsibility of the logo!

strong preference for A-1 and A-2 and kinda dislike the rest. the main reason is that, when zoomed out, they all start to lose their structure and contrast except the A options and logos like this usually need to be clearly discernible at different sizes. i’m not sure the idea of selection is more clear for me in D, if anything i get it more in A! because of the nested squares which to me convey increasingly specific selections

@Illviljan
Copy link

I liked D-2, clean with colors that are clear even from afar.
It's missing the ease of working with different shapes though, I was thinking something like this to indicate it:

image

@benbovy
Copy link
Member

benbovy commented Mar 27, 2023

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...):

xarray-logo-idea2-xarray-colors-temp

xarray-logo-idea2-xarray-colors-temp

(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)

@fmaussion
Copy link

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...

@JessicaS11
Copy link

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.

@abkfenris
Copy link

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?

Size family

@scottyhq
Copy link
Contributor

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:

Screenshot 2023-03-28 at 10 49 48 AM

@benbovy
Copy link
Member

benbovy commented Apr 3, 2023

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.

xarray-logo-idea

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).

I love all these ideas but have to say I do still really like the original logo!

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.

@jhamman
Copy link
Contributor

jhamman commented Aug 3, 2023

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:

image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests