Opened 12 months ago

Closed 8 weeks ago

Last modified 8 weeks ago

#25702 closed defect (fixed)

Activity 1.1 Update Tor Browser icon to follow design guidelines.

Reported by: isabela Owned by: antonela
Priority: High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, TorBrowserTeam201901R
Cc: tbb-team, akrey Actual Points:
Parent ID: Points:
Reviewer: Sponsor: Sponsor17

Description

update the globe and any other old icons - download page and website icons will be updated with the redesign work. this is just about the icons at the product.

Child Tickets

TicketStatusOwnerSummaryComponent
#22654closedpospeselrFirefox icon is shown for Tor Browser on Windows 10 start menuApplications/Tor Browser
#26280closedpospeselrIcon in applications switching on Gnome is blurry/pixelatedApplications/Tor Browser
#28111closedpospeselrFor about:tor, use a Tor Browser icon in identity boxApplications/Tor Browser

Attachments (18)

25702 - TorBrowser Icon - Explore-min.png (2.1 MB) - added by antonela 8 months ago.
25702-0.1.png (1.8 MB) - added by antonela 7 months ago.
25702-0.2.png (1.9 MB) - added by antonela 7 months ago.
sketches.jpg (2.4 MB) - added by antonela 7 months ago.
tb-icon-survey.zip (1.9 MB) - added by antonela 4 months ago.
TB-icon.png (1.3 MB) - added by antonela 4 months ago.
103.png (17.0 KB) - added by antonela 4 months ago.
assets.zip (2.9 MB) - added by antonela 4 months ago.
macos-stable.png (268.8 KB) - added by pospeselr 4 months ago.
windows-alpha.png (447.3 KB) - added by pospeselr 4 months ago.
linux-nightly.png (320.6 KB) - added by pospeselr 4 months ago.
alpha.png (130.7 KB) - added by antonela 4 months ago.
nightly.png (135.7 KB) - added by antonela 4 months ago.
cropped_browser.png (6.5 KB) - added by gk 3 months ago.
open_windows_unselected.png (4.2 KB) - added by gk 3 months ago.
open_windows_selected.png (4.4 KB) - added by gk 3 months ago.
pixelated_identity_box_icon_linux.png (3.6 KB) - added by gk 2 months ago.
pixelated_identity_box_icon_linux2.png (2.2 KB) - added by gk 2 months ago.

Change History (59)

comment:1 Changed 11 months ago by gk

Priority: MediumHigh

comment:2 Changed 9 months ago by antonela

Some of this process happened at https://trac.torproject.org/projects/tor/ticket/25693 but we would like to make it open with the participation of the community.

So, we will not have this update for alpha, but we are working toward to have it for stable Tor Browser 8. More news soon.

Last edited 9 months ago by antonela (previous) (diff)

Changed 8 months ago by antonela

comment:3 Changed 7 months ago by antonela

Hi all! We get back to work on this task. We'll be documenting all the process here.

The steps we'll follow are outlined here:

  1. Research concepts/ideas based on people perception of the product. Explore paths to follow.
  2. Research with TPI internal what we want to communicate. Explore concepts that can coexist.
  3. Develop three or four concepts from the paths that emerged from explorations. Colors, applications, variables, etc.
  4. The community will speak loud. Open blog/comments discussion.
  5. Assets creation - Update all sources with new icons.

If you are a visual designer or/and someone who like to play with colors, shapes, and meanings, this line is to encourage you to add your ideas here! I can't promise that we are going to pick your option, but it will help us to think divergently about our next Tor Browser icon.

If you don't have graphic design skills, but you have opinions, please share them in a way that they can start a conversation. Yes! Here is the place to do it now.

comment:4 Changed 7 months ago by antonela

Step 0

The first thing I did was to explore and list

  1. current Browsers Icons
  2. current "Tor Browsers" Icons

https://trac.torproject.org/projects/tor/attachment/ticket/25702/25702%20-%20TorBrowser%20Icon%20-%20Explore-min.png

The number of unofficial aka no related to Tor Project, Inc. apps is huge, and I wanted to explore what people "improved" making their version. The first question that came to my mind is: Why we have a globe and not an onion there? Then: Does Tor Browser want to present itself in a way that people can relate it with a Privacy/Security tool? Should Tor Project, Inc visual style, and colors be related with Tor Browser Icon?

I'd like to collect our community feelings and/or ideas about what Tor Browser means for you.

So, I made a little survey that will be collecting feelings for two weeks:

http://bogdyardcfurxcle.onion/index.php/844392
https://survey.torproject.org/index.php/844392

Last edited 7 months ago by antonela (previous) (diff)

Changed 7 months ago by antonela

Attachment: 25702-0.1.png added

Changed 7 months ago by antonela

Attachment: 25702-0.2.png added

Changed 7 months ago by antonela

Attachment: sketches.jpg added

comment:5 Changed 6 months ago by antonela

Step 1 - status: pending
Step 2 - status: update

Hi! a few visual metaphor patterns emerged from my exploration and I developed two of them:

1 - Onions. From illustrations to abstract views, from left side perspective to front view all the onions you can imagine had been used to talk about Tor. I tried a minimal, geometric but still recognizable onion here. It works ok on small sizes, and we can use it with and without leaves, which makes everything easier when we need squared radio icons to use.
https://trac.torproject.org/projects/tor/attachment/ticket/25702/25702-0.1.png

2 - Connected World. A current sliced world is the Tor Browser icon. Let's gets real here: I don't know why we have a sliced world, but I feel how people can relate it with Tor Browser. With this scenario, I tried a version with three slices (for the three nodes that people know they need to make a successful tor connection) and a simple circle as a world.
https://trac.torproject.org/projects/tor/attachment/ticket/25702/25702-0.2.png

During this process, I found a lot of cool Tor Browser icon redesigns around the web.
Here is my pick:

https://dribbble.com/shots/1537947-Tor-for-Mac-Icon-Replacement
https://dribbble.com/shots/2212264-Tor-Project
https://dribbble.com/shots/1107341-Tor-Project

Could we include those concepts as a part of this process?

comment:6 in reply to:  5 Changed 6 months ago by gk

Replying to antonela:

Could we include those concepts as a part of this process?

I guess so, why not?

Changed 4 months ago by antonela

Attachment: tb-icon-survey.zip added

comment:8 Changed 4 months ago by antonela

Hi! The Survey ended and here are the results:

Total ----- 165
Leveled ----- 64
Harvest ----- 62
Horizon ----- 19
Orbit ----- 11
Sliced ----- 09

https://trac.torproject.org/projects/tor/raw-attachment/ticket/25702/103.png

The winner version is Leveled!
Attached to this ticket are all the survey options, for the records.

Last edited 4 months ago by antonela (previous) (diff)

Changed 4 months ago by antonela

Attachment: TB-icon.png added

comment:9 Changed 4 months ago by antonela

I made different versions for each release channel. If is ok, i'll create the assets we need to implement it. Thanks!

https://trac.torproject.org/projects/tor/raw-attachment/ticket/25702/TB-icon.png

Last edited 4 months ago by antonela (previous) (diff)

Changed 4 months ago by antonela

Attachment: 103.png added

comment:10 Changed 4 months ago by onvisibilitychange

What?! In what way is Leveled better than Harvest?

comment:11 Changed 4 months ago by mcs

It is exciting to have a new Tor Browser icon! One thing that I missed when taking the survey is that for Leveled and Harvest the actual application icon that will be used is a modified form of the largest that was presented. While my eyes saw the smaller "app icon in a dock" images (included below the larger icons), my brain did not really register them. My feedback is that the next time we conduct this kind of survey we should make sure this is clear.

Changed 4 months ago by antonela

Attachment: assets.zip added

comment:12 Changed 4 months ago by mcs

(answering a question from #tor-dev) The macOS "installer" is just a mountable disk image (.dmg file) which contains Tor Browser.app, a symlink to /Applications, and a background graphic. The icon that is shown is pulled out of Tor Browser.app by the Finder the same way it is when you have a copy of Tor Browser.app on your desktop. In other words, if you put the new icon in the .app the installer should pick it up automatically.

Changed 4 months ago by pospeselr

Attachment: macos-stable.png added

Changed 4 months ago by pospeselr

Attachment: windows-alpha.png added

Changed 4 months ago by pospeselr

Attachment: linux-nightly.png added

comment:14 Changed 4 months ago by pospeselr

Keywords: TorBrowserTeam201811 added
Status: assignedneeds_review

comment:15 Changed 4 months ago by gk

Keywords: TorBrowserTeam201811R added; TorBrowserTeam201811 removed

Changed 4 months ago by antonela

Attachment: alpha.png added

Changed 4 months ago by antonela

Attachment: nightly.png added

comment:16 Changed 4 months ago by antonela

Richard looks awesome! What we are going to do with:

  • 1. the orange Tor Browser in about:tor? I think you already have a patch from #28111.
  • 2. the 'Tor Browser' name on the about windows. Could we simply have text? The typography is already loaded so we don't need an image there.

I think we are groot here Thanks!

comment:17 in reply to:  16 Changed 4 months ago by pospeselr

Replying to antonela:

Richard looks awesome! What we are going to do with:

  • 1. the orange Tor Browser in about:tor? I think you already have a patch from #28111.
  • 2. the 'Tor Browser' name on the about windows. Could we simply have text? The typography is already loaded so we don't need an image there.

I think we are groot here Thanks!

The color change should be easy enough, and I've created a ticket (#28561) to track that dialog's migration from torbutton to tor-browser (I'll update the text at the same time).

comment:19 Changed 4 months ago by pili

Do we need a child ticket to update the icons for TBA? I can't see it linked above.

I can create it if not.

comment:20 Changed 4 months ago by gk

Keywords: TorBrowserTeam201812R added; TorBrowserTeam201811R removed

Move review tickets to Decemeber.

comment:21 in reply to:  13 Changed 4 months ago by gk

Keywords: TorBrowserTeam201812 added; TorBrowserTeam201812R removed
Status: needs_reviewneeds_revision

Replying to pospeselr:

tor-browser-build: https://gitweb.torproject.org/user/richard/tor-browser-build.git/commit/?h=bug_25702&id=a041dce6e7f2253573fa3b9fe4934ba25b2965b1

There is no need to define something extra for the alpha channel. We can put that part into the default var declaration, maybe below torbrowser_update_channel: alpha grouping the default alpha settings together.

The Torbutton change looks okay to me. I am still going over all the tor-browser changes and testing them... Marking this as needs_revision for work on the tor-browser-build part meanwhile.

Last edited 4 months ago by gk (previous) (diff)

comment:22 Changed 4 months ago by gk

For the SVGs please remove all the meta information which we don't need. As far as I see it that means all the Sketch references.

comment:23 Changed 4 months ago by pospeselr

Keywords: TorBrowserTeam201812R added; TorBrowserTeam201812 removed
Status: needs_revisionneeds_review

Updated patches per gk's feedback; removed svg metadata and removed explicit 'alpha' var declaration. Haven't verified the builds, on my laptop atm but will verify asap.

tor-browser: https://gitweb.torproject.org/user/richard/tor-browser.git/commit/?h=bug_25702_v2&id=c2a9b56bf0539a171c82f9abc1b4e8ce412b75b1

tor-browser-build: https://gitweb.torproject.org/user/richard/tor-browser-build.git/commit/?h=bug_25702&id=3256bb8df709b0db0fa005c86e31bcca860c92bd

EDIT: Builds are good with these patches :)

Last edited 3 months ago by pospeselr (previous) (diff)

comment:24 Changed 3 months ago by gk

Cc: akrey added

Closed #25023 as duplicate.

Changed 3 months ago by gk

Attachment: cropped_browser.png added

Changed 3 months ago by gk

Attachment: open_windows_unselected.png added

Changed 3 months ago by gk

Attachment: open_windows_selected.png added

comment:25 Changed 3 months ago by gk

Keywords: TorBrowserTeam201812 added; TorBrowserTeam201812R removed
Status: needs_reviewneeds_revision

Sorry for the delay. I made bundles and looked closer at them. Overall they look good to me (I just tested Windows and Linux, though) but there are some small things we should fix.

1) The icon is cropped at the upper left corner and on the URL bar (the latter is visible on your screenshots in comment:13, too) (and actually on my Linux task bar, too)


2) On my Linux box when I am cycling through my open windows I see a cropped (and kind of ragged at the borders) image if the window is not selected


but an uncropped one once it is selected


Not sure if we need adapted icons for that but it might be the case.

comment:26 Changed 2 months ago by pospeselr

Status: needs_revisionneeds_review

new tor-browser revision:

https://gitweb.torproject.org/user/richard/tor-browser.git/diff/?h=bug_25702_v2&id=6c0fea8b000518ffbc421d994abaa4df9bedbec6&id2=0b188f1fd0349fc76f8cc5663279a67b283d3b68

Added 8px of margin to source svg when rendering out the various defaultN.png files. Also added a default512.png which I'll change the .desktop launcher to point to the larger icons in tor-browser-build. These file are used in Linux and are used to create the .ico used in Windows. Also updated the favicon svg viewbox to include 8px of margin which fixes the edge clipping in a local linux build. Doing some full builds now to verify everything looks nice now.

comment:27 Changed 2 months ago by gk

Keywords: TorBrowserTeam201901R added; TorBrowserTeam201812 removed

comment:28 Changed 2 months ago by pospeselr

updated the amount of margin on the source svg on a per-scale basis to minimize the squashed flat edges when rendering out the defaultN.png files and use these files to generate the ico for windows, rather than using the icon:auto-resize option.

https://gitweb.torproject.org/user/richard/tor-browser.git/diff/?h=bug_25702_v2&id=bug_25702_v2&id2=0b188f1fd0349fc76f8cc5663279a67b283d3b68

comment:29 Changed 2 months ago by gk

Could you rebase your patches against latest tor-browser-60.4.0esr-8.5-1 and squash them where you see fit?

comment:31 Changed 2 months ago by gk

Keywords: TorBrowserTeam201901 added; TorBrowserTeam201901R removed
Status: needs_reviewneeds_revision

As discussed on #tor-dev:

1) the change in the nightly brand.ftl file is not needed as we use tor-browser-brand.ftl anyway. Additionally:

19:10 <+GeKo> okay, the other two items i have are: metadata is still in tor-watermark.svg
19:10 <+GeKo> and the new tor-browser-build branch seems to miss the fixup you made to address my previous comment

antonela:

18:51 <+GeKo> 1) why do we have different background colors depending on alpha/nightly vs. stable for the VisualElements?
18:51 <+GeKo> mozilla seems to just use #000f40 for any of its releases

(that's for #22654)

Changed 2 months ago by gk

comment:32 Changed 2 months ago by gk

The icon on my identity box (and in my tab bar which probably uses the same size) is kind of pixelated. This works for me now...


comment:33 Changed 2 months ago by gk

Looking over your force-pushed changes: let's not touch the */en-US/brand.ftl files and just ship what Mozilla ships. We don't use those and less changes are good here.

comment:34 Changed 2 months ago by gk

Here is the icon result for the force-pushed branch. It seems we are closer? I am not sure.


comment:35 in reply to:  31 ; Changed 2 months ago by antonela

Replying to gk:

antonela:

18:51 <+GeKo> 1) why do we have different background colors depending on alpha/nightly vs. stable for the VisualElements?
18:51 <+GeKo> mozilla seems to just use #000f40 for any of its releases

(that's for #22654)

1) we have different background colors because the contrast looks better over the light colors we have on the alpha and nightly versions. If we should go with the same background color everywhere because it is necessary for better, then let's do it.

comment:36 in reply to:  35 Changed 2 months ago by gk

Replying to antonela:

Replying to gk:

antonela:

18:51 <+GeKo> 1) why do we have different background colors depending on alpha/nightly vs. stable for the VisualElements?
18:51 <+GeKo> mozilla seems to just use #000f40 for any of its releases

(that's for #22654)

1) we have different background colors because the contrast looks better over the light colors we have on the alpha and nightly versions. If we should go with the same background color everywhere because it is necessary for better, then let's do it.

No need to go with the same background color, I was just curious about the deviation from Mozilla. Thus, let's go here with what we have.

comment:37 Changed 2 months ago by pospeselr

Keywords: TorBrowserTeam201901R added; TorBrowserTeam201901 removed
Status: needs_revisionneeds_review

Ok, reverted change to official's brand.ftl, removed tor-watermark.svg's metadata, fixed some of the border weirdness in the alpha and nightly svg's and regenerated icons (and updated icons in #28546)

torbutton: ​https://gitweb.torproject.org/user/richard/torbutton.git/commit/?h=bug_25702_v2&id=6a69d724bee840e2281d907a3dd48b794b724337

tor-browser (squashed and rebased): ​https://gitweb.torproject.org/user/richard/tor-browser.git/commit/?h=bug_25702_v3

tor-browser-build (rebased): https://gitweb.torproject.org/user/richard/tor-browser-build.git/commit/?h=bug_25702&id=9965e0710f5f5a78a5a8b0961c5cc10a8454d00b

comment:38 Changed 2 months ago by gk

Keywords: tbb-mobile removed
Resolution: fixed
Status: needs_reviewclosed

Thanks! I think we are done here. The most important bits remaining are #28546 (which is in needs_review and #28622 which I moved onto our TBA-a3 radar.

The Torbutton patch got applied to master (commit 0c52aa0a90de3c98938d583c2faae0a9f8a11c58). The tor-browser-build one is on the respective master branch, too (commit 1f83faba6016d988303a125abcee67aff63a7142). The tor-browser repo on tor-browser-60.4.0esr-8.5-1 has the browser changes (commit 7f7a40f907f74a531642a5cb4982f2d762316d38).

I filed #29142 for a branding clean-up we should do.

comment:39 Changed 8 weeks ago by gk

Resolution: fixed
Status: closedreopened

comment:40 Changed 8 weeks ago by gk

Resolution: fixed
Status: reopenedclosed

comment:41 Changed 8 weeks ago by antonela

\o/

Note: See TracTickets for help on using tickets.