wiki:org/teams/UxTeam/StyleGuidelines

Style Guidelines project:

  1. Creative brief
    1. Initial discussion on how to write a successful brief, written up here.
    2. After the Tor Dev meeting in Valencia and growing momentum for the UX group, we came up with a process for co-creating a Creative Brief.
    3. In March and April 2016 we discussed on the mailing list and IRC, with two cycles of feedback requested.
    4. After feedback and iteration, we finalized a version of the Creative Brief.
    5. Note: some members of the UX team advocating more extensive body of work to create a full-brand architecture and corporate design. However, the team decided that this was a small first step toward that eventual goal.
  2. Publicizing the call
    1. We shared it to the Tor UX mailing list.
    2. Shared the call on Open Source Design’s github page at the end of March.
    3. Ame reached out directly to her network of designers and design agencies via Facebook groups, designer mailing lists.
  3. Applicants
    1. We received 7 applications and narrowed that down to top 4.
  4. Evaluation criteria
    1. Portfolio showing depth in branding and example style guides
    2. Professional experience managing the process of working with multiple, distributed stakeholders on open-source projects, ideally on projects with large, globally distributed users
    3. Knowledge of open-source typography
    4. Knowledge of Tor and the Tor community, support of open-source values and, compfort with open-source tools, and IRC. Note: For future projects, Ame would suggest relaxing the IRC constraint and consider the importance of prior knowledge of the Tor community.
  5. Selection
    1. One of the submissions was from an LA-based design agency, from outside the Tor and open source design communities. Ame did a video conference with them to understand more about their background, and point of view. Their portfolio was minimal and did not closely relate to the criteria above.
    2. Finalists Elio and Philip did well on all the criteria.
    3. Because Elio had previously worked with Mozilla, and had prior work specifically addressing the challenge of multiple open-source projects needing to come together under one, well-documented set of brand guidelines, we decided to make him the lead designer
    4. Philip has been involved with the Tor UX effort, so we suggested he act as a reviewer to provide some context around the history of design at Tor.
  6. Scope
    1. This initial style guide is a small step towards a complete re-design or re-brand.
    2. Elio will spend ~20 hours on the guide
    3. Phillip will spend ~5 reviewing
  7. Creating the guidelines
    1. Designer will share with the team versions of the guidelines that will go under review
      1. Feedback cycles with new versions released ( See review log below for more details)
  8. Internal launch
    1. Email to tor-project list explaining the project and sharing the guidelines
    2. Propose a process for adoption
  9. Discussion at Tor's meetings f2f in Berlin and Seattle
    1. Define adoption process (Tier 1 and Tier 2 of adoption)
  10. Execute adoption process
    1. Work on Tier 1 products and sites
    2. Work on Tier 2 products and sites

Review log:

Date Version url comments url
June 29 http://elioqoshi.me/owncloud/index.php/s/gQ6OqV3XYMP1p6E http://meetbot.debian.net/tor-project/2016/tor-project.2016-06-29-17.10.log.html
July 06 http://elioqoshi.me/owncloud/index.php/s/DtZBYB78l8ZqQ4I http://meetbot.debian.net/tor-project/2016/tor-project.2016-07-06-18.00.log.html
July 13 just feedback on previous version https://lists.torproject.org/pipermail/ux/2016-July/000173.html
http://meetbot.debian.net/tor-project/2016/tor-project.2016-07-13-17.13.log.html
July 27 https://dl.dropboxusercontent.com/u/62482708/Tor%20Styleguide%20Draft%20v3.pdf
https://dl.dropboxusercontent.com/u/62482708/Tor%20Styleguide%20Draft%20v4.pdf
https://lists.torproject.org/pipermail/ux/2016-July/000177.html
http://meetbot.debian.net/tor-project/2016/tor-project.2016-07-27-17.00.log.html
July 29 https://dl.dropboxusercontent.com/u/62482708/Tor%20Styleguide%20Draft%20v3.pdf http://meetbot.debian.net/tor-project/2016/tor-project.2016-07-29-15.09.log.html
Sept 07 https://trac.torproject.org/projects/tor/attachment/wiki/org/teams/UxTeam/StyleGuidelines/styleguide-with-comments.pdf http://meetbot.debian.net/tor-project/2016/tor-project.2016-09-07-17.04.html

Launch Version:

You can find the final version that was shared on our internal launch here:

https://trac.torproject.org/projects/tor/attachment/wiki/org/teams/UxTeam/StyleGuidelines/Styleguide%201.2.pdf

Style Guidelines v1.2 Page 1 Style Guidelines v1.2 Page 2
Style Guidelines v1.2 Page 3 Style Guidelines v1.2 Page 4

Internal launch and adoption process:

Step 1: Present style guide to the Tor Community

Step 2: Define Tier 1 and Tier 2 projects - where Tier 1 will adopt the guide and Tier2 will be left open to do it or not

Step 3: Start applying the guide for Tier 1 projects

Step 4: Apply the guide for Tier 2 projects that would like to adopt them

Step 5: Make sure that new projects know of the guide, and that new Tier 1 projects start out using it from the beginning

Collected feedback:

  • Existing Inconsistence: It needs to be clarified more precisely where we are inconsistent beyond the fact that stem.torproject.org and torproject.org don't look the same. Elio pointed to the existing variety of logos, colors and fonts being used for tor-related media. Furthermore, Orfox is violating Mozilla trademarks by using and remixing the Firefox logo (we need to change that asap). There are other small inconsistencies which need to be updated.
  • App Icons vs. Subbrand Logos: There is a confusion about the subbrand logos, which are not app icons. When to use the subbrand logo then in case a product icon exists? Where does it replace existing subbrand logos?
  • Subbrands: Who Must, Should, Can Use The Guide?: Historically there has been confusion about what is allowed to be “official Tor” with things like Ricochet or Stem as examples. Sub-projects were encouraged to avoid use of the official tor logo and this has caused them to adopt iconography of their own. How will the roll-out plan clarify the priorities. For example: user installable software should be consistent. Dev tools are potentially secondary. Long standing challenge: some projects want to be separate, and some want to be official. What about language like: “Powered by Tor?” with categories: 1) Tor endorsed, paid staff 2) Tor community, volunteer-driven. Tor Labs? 3) Powered by Tor, but totally separate. Consider how to clarify membership in which group via the Style guide. Examples: Whonix and TAILS aren’t endorsed by Tor.
  • Tier 1 vs 2: Confusions about subdividing projects into tiers were clarified as milestones for the UX team that need to be defined in conversation with the whole community at the dev meeting in Seattle 2016.
  • Subbrands: Logo Aesthetics: Replacing existing logos might not go without resistance as some projects have nice logos that can't compete with the design of the proposed subbrand logo. Examples: Stem, Ooni, Metrics. Isabela stated that the guideline is a living document. The sub-projects logos can be improved based on the feedback we get.
  • Internationalization: Fonts For Non-Latin Scripts: There is a need for defining preferred fonts for Arabic, Cyrillic, Chinese, Japanese etc. It is added that for internationalization we should also have a font-size specification for minimum font sizes.
  • Typography: It is asked whether there are reusable implementations of the style guide, e.g. CSS stylesheets.
  • Documentation to Explain Rationale: There is an interest for „scientific evidence” in the documentation. We already clarified that this is not typically in design, because many design decisions depend on its context and there is never only one best solution. Nevertheless designers justify decisions with rationales that we can document without references.
  • Extent Of The Style Guide: There is a confusion about the name “style guide”, because for now it only concentrates on the basic elements (“logo guideline”). Isabela clarified that besides the logo usage it also contains colors and fonts. The document is described as limited. Further changes proposed by the UX team are still unclear, so it is expected to run with this for a few projects to see how it goes.
  • Branding/Rebranding: As the style guide is still very basic, there is a need to define more elements–especially for layouts where the core elements are in use, e. g. the website or presentation sheets. Philip described the need for a redesign, because the lack of quality affects further designs. The actual necessity needs to be discussed. Officials from the tor team need to get involved.
Last modified 12 months ago Last modified on Sep 22, 2016, 9:17:39 PM

Attachments (6)