Activity 1.2: Make sure Firefox Photon UI works with our style guidelines

added TorBrowserTeam201812 component::applications/tor browser ff60-esr owner::antonela priority::very high resolution::fixed severity::normal sponsor::17 status::closed type::defect ux-team labels

Trac:
Keywords: N/A deleted, ux-team added

Ccing the tbb-team.

Trac:
Cc: N/A to tbb-team

Trac:
Priority: Medium to High

This activity scope includes this related tickets:

#25151 (moved) - Update installation brand #21183 (moved) - Making toolbar icons visible #25697 (moved) - Onion icon for Tor Button #25023 (moved) - Different icon from Stable and Alpha, Nigthly versions #23547 (moved) - Toolbar UI update #25649 (moved) - UI update #23151 (moved) - UI Toolbar update

Trac:

Antonela, please consider #23547 (moved) as well for the Tor Browser UI. Thanks!

Trac:

Hi! I have been working on this activity. The comment above includes some different deliverables which I'm trying to achieve here:

Tor Browser Icon - Brand Update

Icon.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20Icon.png)

I made some options for the new icon. This is the first idea and for sure could change based on your feedback. I used the same onion icon we have now. What do you think?

Tor Browser Installer + Launcher - Brand Update

UI.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20UI.png)

Here I just updated the TorBrowser logos. Could we replace them? Which format do you need the assets? .svg/.png?

Tor Browser - Tor Button Icon

UI.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20UI.png)

This is a proposal to update the outdated onion we have right now as a Tor Button.

I'm aware of the problem we have with the onion icon working pretty bad at small sizes. And how it looks like a bomb too. We don't want it. The Community and the UX team are working together to promote a design sprint during Mexico Dev Meeting, so we can have a reliable option for using in all the places Tor's icon should live! ^____^

Feel free to comment, I'd like to iterate this ticket this week and next. Thanks!

Replying to cypherpunks:

Antonela, please consider #23547 (moved) as well for the Tor Browser UI. Thanks! Is a great ticket! Thanks! We could keep the URL Bar centered and flexible, with a minimum width of 550px. It has room for a long certificate name and a V3.

Trac:
Priority: High to Very High
Keywords: N/A deleted, ff60-esr, TorBrowserTeam201806 added

Replying to antonela:

Is a great ticket! Thanks! We could keep the URL Bar centered and flexible, with a minimum width of 550px. It has room for a long certificate name and a V3.

It's not just about the cert but also about subdomains and room for the rest. Here's my example test (using the default flexible space, the "compact" density, and placing HTTPS Everywhere near the menu in place of the SecuritySlider in your design, all using Menu>Customize): [By the way you forgot to add the reload button in the design ;-]

Trac:

We just briefly discussed how other icons should be placed at the top nav during Rome Dev Meeting. I didn't forget the reload icon; we have by FF60 default a bunch of other icons, and I didn't want to make noise discussing other topics at this ticket.

But, since you mentioned it, maybe now is a good time to talk about them. I made two mocks, A and B.

https://trac.torproject.org/projects/tor/attachment/ticket/25693/TBB8-UI.png

A moves all the menu icons to the right side, leaving the left side for browsing control icons. B keeps the Tor Button at the left side, while the security indicator and the hamburger menu keeps at the right side.

What do you think?

Replying to cypherpunks:

Replying to antonela:

Is a great ticket! Thanks! We could keep the URL Bar centered and flexible, with a minimum width of 550px. It has room for a long certificate name and a V3.

It's not just about the cert but also about subdomains and room for the rest. Here's my example test (using the default flexible space, the "compact" density, and placing HTTPS Everywhere near the menu in place of the SecuritySlider in your design, all using Menu>Customize): [By the way you forgot to add the reload button in the design ;-]

Replying to antonela:

We just briefly discussed how other icons should be placed at the top nav during Rome Dev Meeting. I didn't forget the reload icon; we have by FF60 default a bunch of other icons, and I didn't want to make noise discussing other topics at this ticket.

But, since you mentioned it, maybe now is a good time to talk about them. I made two mocks, A and B.

https://trac.torproject.org/projects/tor/attachment/ticket/25693/TBB8-UI.png

A moves all the menu icons to the right side, leaving the left side for browsing control icons. B keeps the Tor Button at the left side, while the security indicator and the hamburger menu keeps at the right side.

What do you think?

B) seems good to me. If we want to discourage users clicking on the onion button and change settings behind it we should do A), though. I am fine with either, I think.

Replying to gk:

B) seems good to me. If we want to discourage users clicking on the onion button and change settings behind it we should do A), though. I am fine with either, I think. I agree as well.

Replying to antonela:

Hi! I have been working on this activity. The comment above includes some different deliverables which I'm trying to achieve here:

Tor Browser Icon - Brand Update

Icon.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20Icon.png)

I made some options for the new icon. This is the first idea and for sure could change based on your feedback. I used the same onion icon we have now. What do you think?

Tor Browser Installer + Launcher - Brand Update

UI.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20UI.png)

Here I just updated the TorBrowser logos. Could we replace them? Which format do you need the assets? .svg/.png?

I think .png works definitely but I have to check how it looks like with .svg. But my assumption would be that that's okay as well.

Tor Browser - Tor Button Icon

UI.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20UI.png)

This is a proposal to update the outdated onion we have right now as a Tor Button.

I'm aware of the problem we have with the onion icon working pretty bad at small sizes. And how it looks like a bomb too. We don't want it. The Community and the UX team are working together to promote a design sprint during Mexico Dev Meeting, so we can have a reliable option for using in all the places Tor's icon should live! ^____^

Feel free to comment, I'd like to iterate this ticket this week and next. Thanks!

Could you explain how you arrived at the different colors for the nightly/alpha/stable? There is not much purple as we know it and no green as we know it anymore. What's e.g. the reasoning for that?