Apply Tor style guide to redesigned Tor Metrics website

Let's try to apply the Tor style guide even more to the redesigned Tor Metrics website. We already applied parts of it by using the colors and fonts suggested there. But we're still using our old logo rather than the redesigned onion and sub-brand qualifier.

Two questions to the designers and/or UX people:

• How would we make the purple logo work with the purple banner? I fear that the inverted purple logo looks a lot less official on the main Tor Metrics website, but I'm also afraid that giving up on our purple banner requires a bigger redesign than we can do without a web designer. What do you think?
• Where would we obtain the original image file of the redesigned logo? I'd rather avoid grabbing it from the PDF file if there's a PNG file or similar available.
• Do you have a web designer available in your team to make this hopefully minimal change? If not, and if it's more than we can do, we could probably ask the web designer who did the redesign last year, but that might require a bit of paperwork that I'd like to avoid, if possible.

Thanks in advance!

added component::metrics/website owner::metrics-team priority::medium resolution::implemented severity::normal status::closed type::enhancement ux-team labels

Karsten:

I think it's a great idea to update the Metrics website again. To answer your questions:

• I am also a fan of not using the purple inverted logo, but just the onion logo. We also have a volunteer designer on the team now (antonela, cc'ed), who can help us with the design. We'll triage this ticket next week and get back to you!
• I don't know if this question still applies if we use the regular onion logo. We have an official repo of images somewhere though, and I think isabela/stephw have added it to a repo somewhere. I'll try to find it and let you know.
• Unfortunately, we do not have a web developer on our team yet. But it is on our list of people to acquire! We just need some grants to go through, and they are taking longer than we thought (you know, the usual).

Yay, hope to get this going soon.

Trac:
Cc: linda to linda, isabela, antonela, stephw

Thank you, Linda! :)

Trac:

Just came to mind that we'll also want to update the *tile.png files like this one which are displayed, for example, in Chrome's "Most Visited" sites page on iOS. We can very likely use the vertical version of sub-brands from the style guide. I could probably put that together myself if I have the original logo files.

Karsten, I made a mockup to show how the logo should work. https://share.riseup.net/#2GdUbDtOzAsriUiOZiXcSQ

Also, the assets are here, both white and color versions (.png, .svg,) https://share.riseup.net/#JkYCWtrCmBy3OJ4rru_qyw

let me know if you need anything else :)

antonela, thanks for making that mockup!

My initial reaction is that I feel that the white-on-purple makes the website look a little less official than the colored Tor onion does. Do you have any ideas how to change that towards using the colored Tor logo?

However, even if not, I could imagine that we use this version for now to conform more with the style guide and at the same time avoid to redesign more parts than necessary. And when the other Tor (sub)sites are redesigned, or when we do the next Tor Metrics website redesign, we switch to the colored onion. However, I'd also like to hear what linda and iwakeh think before moving forward in this direction.

Karsten:

I think that using the white version of the logo is the best step for now.

I do agree that the all white looks different than the other official logos (https://blog.torproject.org/). And at some point, we want all of the websites to look the same. And while we want to do that slowly to some degree, trying to make other sites look like the blog isn't the best idea, since the Tor Blog arguably doesn't follow all the style guidelines, and needs some attention. We also didn't decide that that was how we wanted all sites to look, it was just an improvement to the old blog styling.

(additional side rant: I don't like that the purple letters don't have an outline, but the onion does. And the onion does, but not its leaves. These are things that design people have brought up to us and we want to fix our logo so it doesn't have the stylistic inconsistency. And the all-white version kind of gets rid of that eyesore, so I'm personally a bit happy about this.)

Replying to antonela:

Karsten, I made a mockup to show how the logo should work. https://share.riseup.net/#2GdUbDtOzAsriUiOZiXcSQ

Also, the assets are here, both white and color versions (.png, .svg,) https://share.riseup.net/#JkYCWtrCmBy3OJ4rru_qyw

let me know if you need anything else :)

These are great, thanks for your work! :)

antonela, do you think you could put together new *tile.png files like the one mentioned in comment 3 above? I think we'll need the following five resolutions:

• 310 x 310
• 196 x 196
• 152 x 152
• 150 x 150
• 70 x 70

Thanks!

Karsten, I made 2 versions, with a purple background and with a white one. Let me know if you need something else!

https://share.riseup.net/#HpFui8JIkPIJJu5rusOQYg

Thanks

Trac:

antonela, I think I like the white-on-purple one better, also in combination with the white-on-purple on the website.

But do you think you could do another version with only half as much free space? For example, see the attached edited version where I cut off 30px on each side. (I could probably scale that down to the lower resolutions, but I'm not sure whether that would look a bit ugly; and scaling that up to 310px would for sure look ugly...) Thanks!

Karsten, here are the assets without padding. You have both, white and color versions.

https://share.riseup.net/#l8PBypRPd4RJV8c1Z1NoXA

Thanks!

antonela, sorry for bothering you yet once more, but I'm not sure how I'd use the versions without padding that you made. Do you mind making a white-on-purple version with roughly half as much padding as previously? Like attached this one, but based on a version with much higher resolution or based on an SVG and then scaled down to the five resolutions listed above (310^2^, 196^2^, 152^2^, 150^2^, 70^2^)?

Oh, and here's another ask: Can you also make a new widetile.png with resolution 310 x 150 which probably uses the horizontal logo and text that we also put on the website? (Turns out I totally forgot this format earlier, but we'll need it, too.)

Thanks so much!

Trac:

Alright, with the friendly help by Raphael Bergmann I now have a patch and a screenshot. I'll rebase, push, and deploy together with the new tile files.

Turns out it was not too hard to create the new tile files myself based on what I got from antonela earlier. Rebased, pushed, and deployed everything. That concludes this ticket. Thanks to everyone involved!

Trac:
Resolution: N/A to implemented
Status: new to closed

Replying to karsten:

Turns out it was not too hard to create the new tile files myself based on what I got from antonela earlier. Rebased, pushed, and deployed everything. That concludes this ticket. Thanks to everyone involved!

o/

closed