Web design and branding

[rabernat]

In my call with @alberto-arribas, we discussed the importance of design and branding for encouraging user engagement.

We currently have a very simple and mostly empty sphinx site:
https://pangeo-data.github.io/pangeo/

I will soon be adding a lot more content to this. But it would be great to make it also look pretty.
@niallrobinson and Alberto mentioned that a Met Office designer might be able to help out with crafting a logo and distinctive look for the site. This would be great!

Let's use this issue to discuss what we hope to get out of that.

[rabernat]

Hi @alberto-arribas, I just wanted to ping you on this question, since I am planning a update and release of our documentation soon. It would be great to at least have a cool logo for pangeo.

Also pinging @darothen...I seem to recall your brother is a graphic designer. Can someone please make us a cool pangeo logo!? 😁

[mrocklin]

https://99designs.com is also effective and cheap.

…

On Fri, Feb 23, 2018 at 2:01 PM, Ryan Abernathey ***@***.***> wrote: Hi @alberto-arribas <https://github.com/alberto-arribas>, I just wanted to ping you on this question, since I am planning a update and release of our documentation soon. It would be great to at least have a cool logo for pangeo. Also pinging @darothen <https://github.com/darothen>...I seem to recall your brother is a graphic designer. Can someone please make us a cool pangeo logo!? 😁 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#78 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AASszEPiEr959tkfYWh1SOO0Oqqh4MgAks5tXwr7gaJpZM4Rer9_> .

[niallrobinson]

Hi all - we've got a designer in our group, @meganfitzsimons who has taken a run at it - i've attached her initial ideas. It's a work in progress and any feedback welcomed. She's on a course this week but hopefully she can get something together in the next couple of weeks.
Pangeo-brand-sheet.pdf

[rabernat]

@niallrobinson this is fantastic! Sincere thanks to @meganfitzsimons!!! I and the other pangeo folks will have a close look and get you some feeedback.

[darothen]

A bit late to the party, but pinging @mattrothenberg

[mattrothenberg]

Happy to help on the visual design & front-end development fronts, bandwidth permitting 👍

[jacobtomlinson]

Our designer @meganfitzsimons put together the pdf that @niallrobinson linked above. We are just putting together a repo of assets, design guides and mockups to aid developers when building things.

We would love some feedback, comments, etc on the designs! Don't be shy 😆.

[rabernat]

I have been shy about feedback...mainly because I am so grateful for this amazing volunteer effort that I am reluctant to say anything critical!

Overall I am very pleased. Here are a few comments:

• I love the color palettes and see no need for any changes there.
• Likewise for the fonts: 👍
• I like the look of the big "E" wordmark logo, but I'm not sure it makes sense to have the "E" be the centerpiece. "P" would make more sense, but the three-layer offset "P" looks kind of weird.
• Rather than a big letter in the logo, maybe we could make the sphere look more Earth-like? After all, Pangeo is all about geoscience data. An abstract globe would be quite appropriate. Maybe we can even have satellites swirling around it! 🛰
• I am somewhat hesitant to have the main landing page have a black background.
• The main application of these designs will be on the sphinx site. We plan to eventually do away with the Jekyll blog at pangeo-data.github.io

Thanks again to @meganfitzsimons and all the UK Met office folks for pushing this forward.

[jacobtomlinson]

Don't worry about seeming ungrateful! @meganfitzsimons was surprised when there wasn't any feedback from our video chat last week as there is usually a back and forth as part of the process.

We'll get back with an update soon.

[mrocklin]

• The A and N have odd-looking cuts in them that look odd up close. I guess this is to help distinguish them in an otherwise wide-looking font?
• I like the stylized E in the context of the text Pangeo. It's distinctive in a way that is still very readable from context. No comments on it when it's on its own solo.
• I'm not sure I know how to react to fonts well. Were there other options that came out of the design process?
• How would this look both on light and dark backgrounds?
• The blue-green color palette makes sense to me given the context. It looks like there is a bit of red in the palette as well that isn't used elsewhere. Are there cases where this would be used?

[meganfitzsimons]

@rabernat Glad you liked the designs, happy to take on feedback so don't worry!

Can definitely try the P as the main wordmark, this was part of the original designs and we couldn't decide which to go for.
I can mock up some similar 'Earthlike' icons, in my opinion the satellites may over crowd, as from a design perspective I think its important to have some nice simple imagery that can scale down.
Landing page is an easy fix.

As @jacobtomlinson says it's still early in the process so best thing is to make a few versions and see which works best

[mrocklin]

Here is the Jupyter logo (semi-related project) for context

[meganfitzsimons]

@mrocklin there were other typeface options but this was the final choice, cut outs in letters are fairly common

Logo was designed to work on both light and dark backgrounds, so that wont be a problem

The pink is a secondary colour as I'm sure at some point you'll need a wider range of colours for certain applications!

[kmpaul]

I think I'm more shy about this than @rabernat just because I've been so quiet on this project for so long. However, I just wanted to say that I think this effort is fantastic! @meganfitzsimons I love the designs. I agree with @rabernat on all of his points. This is wonderful, so thanks!

[fischcheng]

This looks wonderful. However, to my taste, the color scheme is a bit too dark and heavy. I think the "E" makes sense in the context of "Earth" though. What are those "Symbol/Icon" for specifically? Thank you for the effort!

[niallrobinson]

Firstly, I work with @meganfitzsimons but I wasn't involved in these designs - so this feedback is objective!

I agree with @fischcheng about the "E" - i think it implies Earth as you say - it's also a bit less literal than just making the first letter more prominent (which is a bit like making it a capital or something). The other thing I like about stylizing the "E" is that it becomes much more abstract than the "P", which basically still looks like a "P".

@rabernat Similarly, I quite like the fact that the earth is implied by the logo colors - everyone here seems to have got straight away that it alluding to an earth. My worry is that if we turn it into a literal earth it become a bit heavy handed (as well as busy, which isn't good for downscaling). I like that the logo just looks like a logo, but clearly makes people subconsciously think of a globe.

Finally - a style sheet like this is meant to give you all the tools you need to go and make more associated stuff. So @mrocklin the idea with the color palette is that when we build associated stuff (sphynx docs etc) we have lots of colors to choose from, and everything ends up with a common feel.

[meganfitzsimons]

Pangeo-brand-sheet(revised).pdf

Tweaked colour palette, refined logos

[jacobtomlinson]

Looks awesome @meganfitzsimons.

Is that font free to use?

[rabernat]

I am very happy with the revised look and feel. I have come around to the "E" symbol, which I definitely now read as "Earth".

The one color scheme that doesn't seem to look right is this:

The two dueling gradients seem to clash a lot. But I don't feel this particular logo is necessary.

If everyone else is satisfied, I would be glad to see this advance to the next stage, i.e. setting up a repo with some visual assets and stylesheets.

[jhamman]

We are just putting together a repo of assets, design guides and mockups to aid developers when building things.

@jacobtomlinson and @meganfitzsimons - where do we stand with regard to this repo? I have a few presentations over the next few weeks that would be a great opportunity to show off this work.

[jacobtomlinson]

It was on @meganfitzsimons to-do list for this week. I'll find out how she is getting on with it!

[jacobtomlinson]

Just created https://github.com/pangeo-data/branding.

[jhamman]

@jacobtomlinson - This looks great. Thanks for the quick response and turnaround.

Two things that may be worth thinking about.

1. Do we want to add a license to the branding repo?
2. Do we want to add something to the readme that indicates that this work was done by the met office ?

[jacobtomlinson]

Yes and yes! I'll get that sorted when I'm back after Easter.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it had not seen recent activity. The issue can always be reopened at a later date.

[rsignell-usgs]

I think this was mentioned before, but what do folks think about making the logo on the splash screen smaller (say half the size) to cut down on all the white space and allow for more description? This is how it currently loads on my computer -- doesn't even get the first sentence in there...

[rabernat]

My hours as a web designer have been thoroughly exhausted...I welcome any pull requests with changes to the site design. I was hoping that the met office folks (e.g. @meganfitzsimons) might take a stab at this once this site was launched.

[rsignell-usgs]

@rabernat , okay I'll try to figure out where to put:

<img src="pangeo_logo.png" style="width: 50%; height: 50%"/>​

and submit a PR.