Update SD logos on Twitter & Website

[ninavizz]

This is a child issue w/in the epic #72

---

Problem

With the 1.0 deployment of SecureDrop, a number of UI updates will also be pushed. The goal with these updates is bring more alignment to the SD brand, to promote trust and credibility in the product and in all product touchpoints.

SD.org is a primary product touchpoint, and use of the SD logos on it should reflect those used by the product, as well. Within the 1.0 UI updates, an updated version of the logo will be pushed in the footer, in the favicon, and in the default-ship logo (that we hope most Sources will never see, but because FPF governance is still in early maturity stages, is likely to be exposed).

Sought Solution

Below are screenshots that identify the areas on SD.org that show the logo/text lockup. Each instance will need to be updated to align more closely with the cleaned-up logo we'll be pushing with the website.

Version to standardize against

Versions across website to create updates for

Favicon

Homepage

Footer

Secondary-Page Header(s)

[ninavizz]

08 Aug UX Meeting Notes:

• Logos themselves
  • Yes, monochromatic FTW
  • Favicon shd be monochromatic
• Banner colors
  • Gunmetal grey shd be neutralized, or updated to align w/ updated color schema
• Directory pages
  • Design guideline to be crafted for co-branded social media cards for each org's page, so that on Twitter and other promotional sharings the news org and SecureDrop logos both show-up in previews.

[ninavizz]

Need feedback on this; Twitter is the priority for Tuesday, but feedback on both the website options and the Twitter stuff, wd be appreciated! https://drive.google.com/open?id=1ep__GPRg7tBquMs0hfGzztXieOq4wxCK

/cc @harrislapiroff @huertanix

[ninavizz]

My own $.02 on the above: Kapowww Dark feels bold and courageous, whereas Transparent Cube and Trans-Par-En-Cyyy feels unsure of itself and timid. The prior is a better reflection of what I see the SD brand as standing for, but we have not yet had that discussion.

The flipside of the above, is that Trans-Par-En-Cyy as the HP logo update, would be the least significant change possible to the website. Which is probably best for a change made w/o Jen's feedback.

For the minimized header, the knockout version is my fav; and for the footer, the transparent cube is my fav. Twitter imho should descend then, from what we do on the website. The backgrounds can be any of the options, initially I'd like a decision on which "User Icon" to go with for Twitter. If folks have a different preference for the background than what corresponds with the icon in that icon's presentation in the PDF, pls say which background u prefer? Thx!

[harrislapiroff]

1. Header

   I think Trans-Par-En-Cyy being the least change makes it the most attractive option for this week, but I'd definitely like to explore the other options in the future. I like Kapoww Dark quite a lot but might want to play with tweaking it a bit. (I might play with having the outer stroke be solid black, to avoid the interplay of transparency with the striations. It also might make it a little bolder and extra superhero comic-y, for better or worse?)

2. Mini Header

   I like the knockout here a lot. I think I'm fine switching to that immediately

3. Footer

   I don't think I have a strong preference here. I think either looks fine to my eye.

[eloquence]

I think Trans-Par-En-Cyy being the least change makes it the most attractive option for this week

Agreed. As I understand it, we'll need to replace these two files, correct?

https://github.com/freedomofpress/securedrop.org/blob/master/common/static/images/_logo_transparent_white.svg
https://raw.githubusercontent.com/freedomofpress/securedrop.org/master/common/static/images/logo_transparent_white.png

@ninavizz, I can spin up a securedrop.org dev env for you to test these changes once you provide me with assets.

I like the knockout here a lot. I think I'm fine switching to that immediately

That's the "k/o cube", correct? One clarifying question regarding that one, Nina: is the top surface of the cube meant to be transparent? It's solid in the "icy cube" variant.

For the footer, I have a soft preference for the "icy cube" variant if we go with the "k/o cube" for the header.

[ninavizz]

@harrislapiroff YES!!! I also love the direction of Kapoww Dark the most, too—and fully agree it would need polishing; especially where the rays and the stroke get wacky together. These were done with haste, to bang-out a first rev of sketches. :)

I also have found the comic-y conceptual direction to be very favorable towards the SD brand, as I've been playing around with lots of ideas for tee-shirts & this. Would love to chat more, at the retreat (yay, meatspace!). Courage and Boldness both seem like SD values that allusions to comics could speak well to; but obvs WITHOUT that one font this designer won't even name, and without too much playfulness.

Sooo... I think a consensus is starting to emerge, then:
1. Header: Trans-Par-En-Cyy this week, and later discussions to be had wrt future improvements.
- @rocodes really doesn't like this one, tho—and longer-term it's also my own least fav... but for now, I think it's the least-significant which behooves such a last-minute decision (and, without our JEN).
2. Mini-Header: Knockout
3. Footer: Let's go with Trans-Par-En-Cyy to keep things consistent, for now? I'd also like to revisit the SD.org site's footer, with a global system for all FPF projects.

Anyone else? @conorsch? @eloquence? @huertanix? How'z about the Twitter options? Of those, Trans-Par-En-Cyy is my least fav, because of how easily the cube is lost in the blue-dot in TweetDeck (where I imagine most customers will be seeing SD Tweets). My most fav is Closeup followed by Kapowww Light w/o the rays (which I'd rather not do unless we're also doing it on the website—and that's a bigger discussion).

Not sure how much positioning control we can have on the background image for that top-rectangle on Twitter's web experience, and if the answer is "Not Much," then the background for Closeup is what I'd recommend.

[eloquence]

My overall preference for Twitter is also the "closeup" variant. Personally, I don't think the "kapow" visual direction is a great fit for the SecureDrop brand, which I view as a bit more understated and serious. But I understand that we may want to do something to set the logo apart a bit more clearly from the website background, so I would favor some continued design explorations around that.

[ninavizz]

@eloquence @harrislapiroff @rocodes Updated PDF to correctly show the TWO knockout variants in the footer... pls to pick one?

Also, working on applying the Closeup Twitter schema to my own profile (same handle), atm (I'm a Twitter nobody, so nobody gonna see). Will ping in Slack once that's ready to look at.

[eloquence]

Updated PDF to correctly show the TWO knockout variants in the footer... pls to pick one?

All the single color variants currently published in https://github.com/freedomofpress/securedrop-ux/tree/master/SD%20Branding have a transparent top surface, except on the single color background. If that's what you're recommending for single color uses of the logo, then let's be consistent with that for the mini-header and footer.

[ninavizz]

Incorrect—at their smallest-size, the lockups are restricted to the transparent top. At a larger size, it can work either way. The difference needs to be spelled-out more explicitly in a TBD brand use guidelines document tho, I agree.

At a larger size, context imho determines which works better. I did the two separate explorations here, to get team feedback. :)

[eloquence]

You're right, I missed that subtle distinction in the PDF! In that case, my preference is for the solid top surface for the larger version in the footer. (In general, I prefer a solid top surface because the keyhole is in the top surface -- you need a key to see what's inside, it should otherwise be opaque. Yes, I'm being very literal. ;)

[ninavizz]

LOL, you funny! I also prefer the "solid top" conceptually, because the top of the cube is always the brightest side—to give the most contrast to the keyhole. I love how we both agree on the idea, yet articulate that agreement in completely different ways. :)

Unfortunately tho, when the top is solid and the sides are transparent, the whole thing feels very "top heavy," which in the wrong context can look odd. Which is why I wanted to have options, for the larger rendering. At a small size, everything just blobbs-up which is why I wanted to prohibit that option.

How would you feel about using the transparent-cube in the footer, until we resolve this? I also really want to see that footer redone to something that can be standardized across SD, Secure The News, and US Press Freedom Tracker (that would have uniform FPF branding, and a system to then show each project's unique brand assets and informational particulars).

[ninavizz]

Twitter assets delivery

Ohai! Per the README, all artwork has been prepared to be plop-and-play; no scaling or repositioning necessary. There is a little bleed on either side in the background image, but that's fine. » GDrive Link

[ninavizz]

SD.org assets delivery

Goal: Replace all branded assets here, with new ones.

• »GDrive New Art«
• Favicon: (ugh, tbd)
• HP Header: pls use TransparentWhite_HappyKeyhole
• Footer: pls use TransparentWhite_HappyKeyhole
• Mini Header: pls use SolidWhite_HappyKeyhole
  • Pls also include the below tweeks to the CSS to vertically center-align the logo:

.nav-menu__logo {
  margin-right: .6rem;
  padding-top: .5rem;
}

[ninavizz]

(yet to link to art—this is placeholder text... wishing GH had a "Drafts" option to save in-progress comments!)

support.freedom.press assets

• Only needing a new favicon, here. Pls us »This Art«
• If possible, updating the blues to the below, that could be extra swell, too.
  • #628DB6 to button_blue (#045FB4)
  • #3E5B76 to deep_blue (#000C6C)

[eloquence]

HP Header: pls use TransparentWhite_HappyKeyhole

Trying the SVG, just a note that the SVG dimensions for this file are currently significantly smaller than the existing logo, so it just renders it as a tiny image in the existing location. Am resizing manually, will need to poke a bit more to ensure it fits snugly into its hexagon space.

[ninavizz]

"Design" work was completed for this in 2019, closing—and moving delivery work to sd.org repo. :)