[ux] Seattle notes on the styleguide

[Sara Sinclair Brody]

Hi, folks!

Here are my notes from the Seattle meeting. They include a summary of
findings and recommendations for the styleguide in the immediate term, and
a long list of other things that members of the community requested might
be included at another point in the future.

Also: I want to note that I haven't forgotten about Phillip's excellent
email before the Seattle meeting about a bigger effort on Tor's brand
identity. I think this is a worthy effort and something I would like to see
move forward (although I don't have the cycles/funding to tackle it right
now!).

I'm sorry to miss the meeting tomorrow, but Ame will be there!

My best,
Scout

PS: these notes should make their way onto the meeting wiki, too. Can
someone remind me where that is, or put them up there directly?


---------------
0. EXCEPTIONS AND AMENDMENTS

The styleguide could be a little more explicit in its instructions on what
to do if 1) the style question at hand isn't covered, or 2) the solutions
offered in the styleguide don't work for the reader's current situation. It
also doesn't mention a process for expanding the guide to include more
material over time.

RECOMMENDATION 1: Rephrase the wording on page two to make this more
explicit, and (for now) encourage people to reach out to the UX team for
guidance. (==> Scout volunteers to provide this wording.)

RECOMMENDATION 2: We need to have a discussion as a community about our
process for amending the style guide in the future. Simply Secure's formal
involvement in creating this initial version is drawing to a close, and we
want to make sure there is good ownership and process in place!

---------------
1. FONTS

Folks requested a serif font for print materials and a monospace font for
code or command-line text (e.g. in documentation). The Berlin meeting also
revealed the need for standard international font(s) for text systems that
Open Sans doesn't cover. Elio said that he had some in mind that he thought
would work well – IIRC, Noto for Serif and International versions, and
Source Code Pro for monospace.

RECOMMENDATION: verify with the group that these serif, international, and
monospace fonts will work (or identify alternatives) and add them to the
styleguide with guidance on when/how to use them.

---------------
2. DARK BACKGROUND

In cases where the logo is to appear on a dark background, what color
should it be?

RECOMMENDATION: provide visual and textual guidance on what the logo should
look like on a dark background. The simplest option would be to recommend
always using monochrome white on a dark background.

---------------
3. TRADEMARK

In the past, using the Tor logo required the (R) symbol. Is that still the
case?

RECOMMENDATION: consult with Tor admin staff and add to logo portion of the
styleguide if the answer is "yes".

---------------
4. SUBBRANDS & ICONS

As revealed in Berlin, the subbrands and icons section of the guide is
problematic because there is a legitimate need for different projects to
have visually distinct icons, and therefore to an extent distinct brands.
In the longer term (and from a visual design perspective only) I think we
should think of Tor as sort of like Google, where there are many different
applications – each with their own icon. The goal of the styling is to make
them visually coherent and harmonious rather than conformant to a narrow
standard. (Google achieves this using a well-defined color palette and
Material Design forms and shadows.) There was broad agreement that we need
a larger effort to map out and harmonize logos/icons across the projects
and come up with a harmonizing design language for them.

RECOMMENDATION 1: Tone down the wording in the subbrands section of the
guide. Observe that if a project wants to use the full T(onion)r logo in
their logo, they should create a logo that adheres to the subbrand standard
by default – but that they do not have to change an existing logo to do so,
especially if their logo harmonizes with an existing application icon.

RECOMMENDATION 2: Create horizontal versions of subbrand logos.
RECOMMENDATION 3: Consider all-caps subtitles in subbrand logos and switch
to mixed-case.
RECOMMENDATION 4: Include fewer subbrand logos overall in the guide.

RECOMMENDATION 5: In the logo and icons section, encourage teams to reach
out to the UX team for guidance in creating or altering their logo and/or
icon.


---------------
5. ANDROID ICON

It's not clear what app this is for, and many community members didn't find
it visually appealing.

RECOMMENDATION: Remove the Android icon from the style guide at this time.



============
OTHER NOTES FROM COMMUNITY MEMBERS
For action in the longer term

+ Meta: many of these comments are about online/digital styling, but others
are about print as well. Bear both in mind while reading!

+ As we think about icons, perhaps we could take inspiration from the
GitHub Octopus? It's the same standard character who appears in different
dress/aspects for different contexts. Is there a version of the onion that
this could work for?

+ The roots logo – folks like it and don't want to abandon it out of hand.
Where should it be used?

+ Titles and subtitles – for desktop and mobile websites, would it be
possible to have sizing and spacing for ~4 layers of
titles/subtitles/headers? (With the understanding that the sizing and
spacing for print materials would likely be different.)

+ Would it be possible to have examples of the styleguide in action – a
simple mocked-up slide deck, blog post, documentation page, etc.?

+ Accessibility standards – what are Tor's goals? Note some countries (e.g.
Canada) have regulations that get triggered when you have a certain number
of users in that country.

+ RTL versions!

+ For international UX, need more time/energy put into standard phrases
(e.g. "pont" doesn't work for "bridge" in French).

+ Would it be possible to have secondary and neutral colors in addition to
the purple and green? E.g., alternatives to pure black text, off-white
backgrounds, etc.

+ Bullets for bullet lists: what shape/size and color?

+ Indents, especially WRT bullet lists.

+ Social-media icons.

+ Materials to download and make your own t-shirts and stickers.

+ Interface components (e.g. toggles and radio buttons) – with the
understanding that that's a big bite of work to tear off!

+ Styling guidance on source code or command-line text. In addition to a
monospace font, should it get a specially-colored background?

+ Idea: go through apps and identify style elements or patterns that can be
re-used.

+ Styling for footnotes and footers. (Or endnotes.)

+ HYPERLINKS. What color? (For all states: neutral, active, visited.)
Underlined?

+ Tor on/off, in use / not in-use – folks were interested in learning more
about the green/red onion work that Elio did.

+ Pull quotes

+ A CSS bootstrap with all these things would be very helpful!

+ Columnized text recommendation
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/ux/attachments/20161011/293e695c/attachment.html>