Expand Citation page to add a brand style guide

[marcozimmermannpm]

This issue describes the expansion of the citation page on the bokeh website (https://bokeh.org/citation/).

What should be added:

• [ ] Change page name to Branding & Citation
• [ ] Add logo usage guidelines
• [ ] Logos
• [ ] Favicons
• [ ] Color palette
• [ ] Typography
• [ ] Presentation template (https://docs.google.com/presentation/d/1d_HkuNUfXbCGJ3L3NbYRGN2FUntRYpC74qk1XIw-3Fk/edit?usp=sharing)

Use https://pandas.pydata.org/about/citing.html as a reference.

Resources: https://drive.google.com/drive/folders/1k3Me1fB3uXbBiNDsK660wH7E6OuVYKPb?usp=sharing https://drive.google.com/drive/folders/1cYoy6zbfXwjM9wzGlneDhs6_naN33A8f?usp=sharing

[danielavrella]

• Add logo usage guidelines
• Change page name to Branding & Citation

[marcozimmermannpm]

• Add logo usage guidelines
• Change page name to Branding & Citation Added to the description.

[danielavrella]

Adding the proposal for the Branding & Citation page at bokeh.org.

• Logos and their versions for light and dark backgrounds, for print and web in several sizes;
• Logo usage guidelines
• Color palette
• Typography and pairing
• Citation

[marcozimmermannpm]

@bryevdv please take a look at Danel's proposed design.

[bryevdv]

cc @pavithraes @hyles-lineata @tcmetzger for any input they may have

@Daniel-Mietchen This all looks really great, my only few small comments:

• Is there a single word that sufficiently captures "Branding & Citation" ? I'm not sure there is but would be nice if there's a simple link text we can use

• IIRC the fonts used on the current sites are Lato and Roboto, not Montserrat and Roboto

• Suggest tweaks to guidelines text for parallel structure::

When using the branding materials, please adhere to the following guidelines:

• DO make the logo large enough: at least 1 inch (2.54 cm) for print at least and 72 px for web
• DO leave enough margin around the logo: ...
• Do NOT apply transparency to the logotype
• Do NOT change the logo proportion by distorting it
• Do NOT place text or other elements over the logo

[danielavrella]

Thanks for the inputs @bryevdv.

• Just "Branding" could do the job?
• I've changed the guidelines;
• About the font: actually, bokeh.org is using Work Sans + Robot which is totally fine. Montserrat + Robot is a suggestion because I have the impression the logotype was based on Montserrat (it has it's typical rounded format) and that would create visual consistency. But again, it's just a suggestion.
• Added the Template section which was left out in the first version.

[ghost]

This looks so good. Thanks, Daniel! All I have for feedback is that there's a typo (againts) under the white-background logo.

[tcmetzger]

Excellent, thank you! Just one small idea: in the very last sentence, the words "contribute any changes back" could link directly to the developer docs: https://docs.bokeh.org/en/latest/docs/dev_guide.html Also, the word ".svg" is moved down a little bit under the dark logo, whereas under the white logo, ".svg" is in line with the other file endings.

[bryevdv]

@danielavrella Looks good, I guess I am thinking of the main docs site which definitely uses Lato+Roboto, but we have definitely not gotten to a level where our fonts are standardized across our properties. Now that I think about it more, I might suggest we just remove the Typography section altogether. Outside users will use whatever fonts their organization or needs dictate, regardless of what we put here. I am not sure we need to make suggestions in this matter.

[bryevdv]

@hyles-lineata I just noticed the new "bokeh" palette only has 7 colors in it:

https://docs.bokeh.org/en/dev/docs/reference/palettes.html?highlight=palettes#bokeh-palette

Is the API palette missing the bluish color?

@danielavrella once the next release is made this could also link to that palette in the reference guide (under en/latest instead of en/dev) I also think the black swatch can be removed? i.e. the palette is just the "iris" colors

[bryevdv]

@danielavrella @marcozimmermannpm as soon as you can let me know the file hierarchy you want under https://static.bokeh.org/branding/ then I will start moving files over.

[ghost]

It is missing one of the blues, and I remember that this was a deliberate choice at the time, but I can't remember the details on why. Probably something to do with them being so close together. Do you want to change it? (I think the likelihood of it being a breaking change for people's projects is low.)

[pavithraes]

This page looks awesome! Thank you!

I just noticed the ©️ here, we need to update to 2021 everywhere. :)

[danielavrella]

@bryevdv, I've applied the changes to the file and am sending the suggestion for the file hierarchy.

Update: didn't manage to make the file hierarchy just with text, so I'm sending a print:

[bryevdv]

@danielavrella I've attached a branding.zip here. A few notes:

• The pngs all have transparent backgrounds
• The svgs and jpgs have white/black backgrounds
• The inverted jpgs appear to have a border artifact
• We don't actually seem to have files for plain icon from the latest master file

So, I have also attached the raw Illustrator files for the icon and logo. If it is simple for you to generate the plain icons and/or make any edits to the jpgs from those, if necessary, please re-upload a zip file here and I will upload it to the CDN. Alternatively I can contact our original designer about changes, but that may have a longer turn-around time. Just let me know.

branding.zip

Other comments:

• I think the black swatch can be removed from the colors section

[danielavrella]

@bryevdv Thanks for the files.

About the logos

I've updated and minified them all, I think we're good to go.

A few notes:

• The pngs are for web so they should have transparent backgrounds;
• The jpgs are (mainly) for print, they can't have transparent backgrounds;
• I've removed the border artifact on the inverted images;
• I've created the images with the icon.

You can unzip the attached file and upload the files in a "logo" directory, and upload this original "bokeh-branding-2021.zip" so they're available.

bokeh-branding-2021.zip .zip file.

About the page

I'm working on the HTML page, hope to have it ready by the end of the day.

[bryevdv]

@danielavrella do you mind if I split these files into branding/logos and branding/icons ?

[bryevdv]

@danielavrella I've gone ahead and done that, e.g

https://static.bokeh.org/branding/logos/bokeh-logo@3x.png https://static.bokeh.org/branding/icons/bokeh-icon.jpg

[danielavrella]

@bryevdv no problem at all.

About the sizes: I've just used a regular size, 2x, and 3x that size for the images, and 5x for the icon.

[bryevdv]

About the sizes: I've just used a regular size, 2x, and 3x that size for the images, and 5x for the icon.

I deleted my comment, I was looking at the inv image and did not immediately realize the space was all the white text on a white background

[danielavrella]

@bryevdv the page is almost ready, but we have 1 small issue, and I have 2 questions:

1) There are 2 files missing in the zip file, sorry about that. I'm attaching the file again, now including the previously missing:

• bokeh-icon.png
• bokeh-icon@2x.png

Could you also share the link to the zip file so I can add it to the button?

2) About the presentation we created for Bokeh: how would you like to share this? My suggestion is to add it to Bokeh's Google Drive, share the link, and restrict the access to View Only. This way whoever opens it won't be able to edit the template. If they want to make changes, they'll need to make a copy. We can add these instructions to the first slide.

3) With the icon files updated, with the correct link to the presentation and to the zip file, the page is ready for review and deploy. Would you like me to share a print of the page or should I make a pull request?

Changelog:

• _includes/links.html: changed "Citation" to "Branding";
• _includes/branding.html: new branding page according to the mock, including the information for citation;
• css/main.sass: added some classes for the branding page.

[bryevdv]

@danielavrella the files did not seem to attach above, can you send them to me on slack? I will upload them and make a tarball with both directories.

My suggestion is to add it to Bokeh's Google Drive, share the link, and restrict the access to View Only.

This sounds perfect

Would you like me to share a print of the page or should I make a pull request?

Let's just get a PR started

[bryevdv]

Implemented, thanks @danielavrella !