Skip to content

Header banner for YEC '21

👋 @kez, we're planning on launching this year's Year End Campaign (YEC) in the next few weeks – exact date TBC. Last year, we had a banner positioned above the site header on torproject.org, donate.torproject.org, community.torproject.org and support.torproject.org (you can see it on the wayback machine, for example).

Here's a mockup of this year's "Privacy is a human right" campaign banner:

torproject-banner

The file can be viewed here: Figma link

Main illustration asset downloaded here: yec-activist-en.svg

And PNG fallbacks downloaded here:

(It looks like we use @3x fallbacks for the main illustrations on torproject.org, but I've included @2x too as the filesize is smaller)

Would you be able build it for us some time in the next couple of weeks please? Don't worry about having to take time out of either the main donate project or the bridges style update for this :)

Fonts are as follows:

  • Corben
  • Source Sans Pro (for the button)

Other notes as follows:

  • If you create a Figma account using your torproject.org mailing list you'll be able to inspect the file for styles and dimensions.
  • Everything will need to be localizable. I've given emmapeel a heads up of the strings on the corresponding ticket for the browser: tpo/applications/tor-browser#40617 (comment 2753258)
  • The minimum height of the banner should be 360px, but it will need to expand to accommodate extra lines of text when translated.
  • I think it would work best if the button anchor links down to the main content area of donate.torproject.org
  • We'll need a breakpoint at an appropriate width, whereupon the illustration should stack below the text.
  • The text in the placard is part of the SVG. Can I produce different assets for each language version? If not, I can either swap the text for an icon, or we can leave it untranslated.

I've mocked up a few localization examples using Google Translate – based on the languages the torproject.org homepage has been translated into – to test font sizes and layouts. These obviously aren't usable strings, but handy for reference!

Localization mockups: Figma link

Once you've had the chance to review the above, let me know if you have any Qs!

Edited by donuts