Design issueshttps://gitlab.torproject.org/tpo/ux/design/-/issues2024-03-27T17:26:04Zhttps://gitlab.torproject.org/tpo/ux/design/-/issues/70Update VPN designs to reflect recent style guide work2024-03-27T17:26:04ZdonutsUpdate VPN designs to reflect recent style guide workVPN pre-alpha 07donutsdonutshttps://gitlab.torproject.org/tpo/ux/design/-/issues/39Replace the onion glyph with distinct icons, where appropriate2023-05-01T21:29:18ZdonutsReplace the onion glyph with distinct icons, where appropriateHistorically, we've used the Onion Glyph (a flattened version of the Tor Browser logo) wherever we've required an icon to accompany anything Tor related in Tor Browser. This includes:
- In the identity block, referencing Tor Browser its...Historically, we've used the Onion Glyph (a flattened version of the Tor Browser logo) wherever we've required an icon to accompany anything Tor related in Tor Browser. This includes:
- In the identity block, referencing Tor Browser itself.
- torconnect (i.e. [Connect to Tor](https://gitlab.torproject.org/tpo/applications/tor-browser/-/issues/40780) and the upcoming [Connection Assist](https://gitlab.torproject.org/tpo/applications/tor-browser/-/issues/40781) feature, as also seen in the [torconnect figma file](https://www.figma.com/file/Vsh1aPOZGneDX4Zp27mjsK/torconnect?node-id=531%3A2047)).
- The Tor Network – mainly within Tor [Network] settings, soon to be renamed [Connection settings](https://gitlab.torproject.org/tpo/applications/tor-browser/-/issues/40782).
- Onion sites and their associated icon states (i.e. mixed and broken), as seen in the [Proton design library](https://www.figma.com/file/RtZ0fqkNMRc7GOjK3FLclz/Tor-Browser-(Proton)?node-id=611%3A55).
Although this will also come in handy for the [VPN work under Sponsor 101](https://gitlab.torproject.org/tpo/ux/design/-/issues/36), we should do it to support the torconnect and `about:preferences` work happening for Sponsor 96 first – in the following steps:
- [x] Evaluate all the places in which the onion glyph is used, and determine which instances it should be replaced.
- [x] Sketch new concepts for each replacement icons (these may be either completely unique, variations of one-another, or a mixture of both).
- [x] After review and selection, draw the winning concepts as SVGs in the [Proton](https://dribbble.com/signup/new) [icon style](https://dribbble.com/signup/new) and add them to the [icon suite in Figma](https://www.figma.com/file/RtZ0fqkNMRc7GOjK3FLclz/Tor-Browser-(Proton)?node-id=610%3A464).
- [x] Produce new mockups featuring the new icons in the browser chrome and content
- [x] Pass across to the Applications team for implementation (@duncan)donutsdonutshttps://gitlab.torproject.org/tpo/ux/design/-/issues/26Update our browser design files, icon library and source new style guides2021-10-01T19:47:25ZdonutsUpdate our browser design files, icon library and source new style guidesAs of [Firefox 89](https://www.mozilla.org/en-US/firefox/89.0/releasenotes/), our internal design files, main reference guide for Photon ([design.firefox.com/photon](https://design.firefox.com/photon/)) and Firefox's icon library ([desig...As of [Firefox 89](https://www.mozilla.org/en-US/firefox/89.0/releasenotes/), our internal design files, main reference guide for Photon ([design.firefox.com/photon](https://design.firefox.com/photon/)) and Firefox's icon library ([design.firefox.com/icons](https://design.firefox.com/icons)) are obsolete.
In order to support the transition onto the Firefox 91 ESR as best we can, the UX team will need access to:
- Updated design files/libraries for Figma (preferred, but not essential) or Sketch
- An updated pattern library/style guide or other reference material (if not included in the above)
- The new icon suite in vector format
It would also be great (although not critical) if we could discuss some way to stay in sync with any changes to the above too.donutsdonutshttps://gitlab.torproject.org/tpo/ux/design/-/issues/36Design the user interface for v01 of the VPN pre-alpha2023-05-17T19:50:27ZdonutsDesign the user interface for v01 of the VPN pre-alphaHigh-fidelity visual designs based on the wireframes are required for development. This stage of the design can be broken down into the following activities:
- [x] Design exploration, to establish a general look and feel for the applica...High-fidelity visual designs based on the wireframes are required for development. This stage of the design can be broken down into the following activities:
- [x] Design exploration, to establish a general look and feel for the application
- [x] Initial interface design, to produce high-fidelity visual designs of each key screen covered in the wireframes
- [x] Production of a design prototype to approximate the true look and feel of the application on Android devices
- [ ] Creation of a comprehensive, rules-based library of components complete with the relevant properties and states for each element
- [x] Packaging of the Figma file for developer handoff
This ticket relates to the following objectives:
* O1.3: Create wireframes and potential user flows for the VPN client based on research conducted in O1.1 and O1.2.Sponsor 101 - Tor VPN Client for Androiddonutsdonutshttps://gitlab.torproject.org/tpo/ux/design/-/issues/59Create a graphic for a roll-up banner2023-08-24T22:49:40ZIsabela FernandesCreate a graphic for a roll-up bannerHello,
could we create a graphic similar to the one we already have for our roll-up banner (see photo) so I could order another one for Tor?
Here is where I am planning to order, it has the sizes information:
https://www.printi.com.br/ba...Hello,
could we create a graphic similar to the one we already have for our roll-up banner (see photo) so I could order another one for Tor?
Here is where I am planning to order, it has the sizes information:
https://www.printi.com.br/banner-roll-up
I need to order this banner soon so it is delivered before I leave to Europe on September 5th.
Current banner:
![roll-up-tor-banner](/uploads/20dc0e2df36122cc9bbfdba789765be6/roll-up-tor-banner.jpeg)https://gitlab.torproject.org/tpo/ux/design/-/issues/65Request access to Firefox's icon libraries for @nicob2024-01-16T19:30:14ZdonutsRequest access to Firefox's icon libraries for @nicobdonutsdonutshttps://gitlab.torproject.org/tpo/ux/design/-/issues/62Set up a new icon library based on Phosphor2024-03-25T19:21:52ZdonutsSet up a new icon library based on PhosphorAt present, we use a mixture of Font Awesome and custom icons on our websites. However Font Awesome is freemium, and while the free set is extensive, I'd like to switch to a truly FOSS icon set.
There are three main contenders:
- [Boot...At present, we use a mixture of Font Awesome and custom icons on our websites. However Font Awesome is freemium, and while the free set is extensive, I'd like to switch to a truly FOSS icon set.
There are three main contenders:
- [Bootstrap icons](https://icons.getbootstrap.com/)
- [Material Symbols](https://fonts.google.com/icons)
- [Phosphor Icons](https://phosphoricons.com/)
Ura Design previously redrew several custom icons of ours in the rounded Material Symbols style at a weight of 400: [Ura Design Styleguide / Custom Icons](https://www.figma.com/file/ruiyH9Q9LDIy1reuXqlr6T/Ura-Design-styleguide?type=design&node-id=708%3A243&mode=design&t=hGoXAzbwSofLIbRp-1).design-dot MVPnicobnicob