SecureDrop UX Style Guide


#1

Hi there, first post here :slight_smile:

You might know me from Gitter and/or Open Source Design. After talking with @dachary and @saptaks about creating a style guide for SecureDrop, I’d like to get your thoughts on a proposal we are creating to get the work funded through OTF Usability Lab: https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab

In the following you can find a proposal which we are planning to send to OTF for approval with a timeline of delivering the style guide by September:

This would pick up again on the work introduce in: https://github.com/freedomofpress/securedrop/issues/1552

Have a look at the proposal and send feedback our way!


June SecureDrop Community Monthly Meeting, Online
July SecureDrop Community Monthly Meeting, Online
#2

Thanks for sharing, really exciting prospect :slight_smile:

powered by Jekyll pages

Would it be a problem to have that in RST to leverage the current documentation workflow?

https://identihub.co/

Wow, super nice project :+1:

CSS files to make the import of the style guide in any given project straightforward

It would be useful to clearly document the current conventions used to organized CSS files (the name of which escapes me right now … and I can’t find it because we don’t have a style guide :-P).

Git Repo with instructions and the source code of the style guide

IMHO the deliverable should be a merge into the docs section of the main repository

Looking forward to this!


#3

Thanks @dachary :slight_smile:

What is RST? In general a style guide should use structures and tools which compliment its purpose. As Documentation in general and a style guide have different purposes (although overlapping) it would compromise one or the other. Hence I’d suggest not mixing those two. The style guide is generally a separate living thing which of course can be linked in the documentation.

That would be best indeed.

Kind of related to my response in regards to the docs infrastructure suggestion.


#4

I took a closer look at https://styleguide.torproject.org/ and https://reproducible-builds.org/style/ and it would indeed be difficult to do the same with RST and include it in the SecureDrop documentation.

One more question: unless I’m mistaken https://styleguide.torproject.org/ does not use https://identihub.co/. What would be the benefit of using it? Browsing https://reproducible-builds.org/style/ it sounds like this is used as a backup only but maybe I’m missing something.

I would suggest the style guide is hosted in a repository at https://lab.securedrop.club/. We can then run Jekyll and publish on the website virtual machine which already hosts another static website. The benefit of doing that would be that it is entirely self hosted and community maintained.


#5

Totally agree. We generally prefer working with GitHub pages and once the work is done migrate it to whatever infrastructure you prefer.

It’s more of a bonus thing at this point, but even now it has the advantage that it allows to download assets in any format and resolution without touching a design tool. Also it allows to direct link SVG’s and update them later on which updates all place it has been used in as well. In the future Identihub will be synced with git both ways which makes it easier for designers and developers to collaborate. It’s still an Alpha version (and developed by us internally). AGPL of course.


#6

As long as I don’t have to use GitHub myself to comment I do not mind.

Understood. I personally enjoy learning new tools. But in the end it’s up to @saptaks and @harris really :wink:


#7

Just checked out the proposal (cc @eloquence), very much looking forward to a style guide for SecureDrop! In terms of deliverables, GitHub pages sounds good to me.

As Documentation in general and a style guide have different purposes (although overlapping) it would compromise one or the other. Hence I’d suggest not mixing those two. The style guide is generally a separate living thing which of course can be linked in the documentation.

:+1:

It would be useful to clearly document the current conventions used to organized CSS files (the name of which escapes me right now … and I can’t find it because we don’t have a style guide :-P).

Ah that’s BEM: http://getbem.com/

I do also want to point everyone towards the modified design and modified color palette on the new SecureDrop website (https://securedrop.org) - this is design work that @harris and some of his former colleagues worked on, and imho it is a much more modern look for the SecureDrop project. Anyway, I’m sure we’ll discuss this much more in the coming weeks in the UX meetings once the proposal is :+1:'d by OTF :slight_smile:


#8

This looks great, thanks for taking this initiative, @elioqoshi! I am glad you are emphasizing the need to coordinate via our weekly UX meetings. Provided this gets funded, we will need to chat about language to include regarding trademark usage, regardless of where these guidelines are hosted, especially for pages that enumerate assets such as the SecureDrop logo. But we can figure that out through the UX meetings and the forum.


#9

Good news: the proposal has been approved! I look forward to working with you and the rest of our team. See you in the next UX meeting :slight_smile:


#10

Good news indeed :slight_smile: Is the approved proposal the one listed in the first message of this topic? Or was it amended?


#11

It’s that one, yes :slight_smile:


#12

Hea @elioqoshi the link for the proposal is 404’ing. Is it possible to see it?

I’m curious to what level the style guide goes - visual, interaction, content, …?

Thanks!


#13

Not sure why it was moved. Here it is again:

Definitely Visual and Content. I’d like to establish a Tone of Voice and some Copywriting rules. The one by Mailchimp is quite impressive: https://styleguide.mailchimp.com/


#14

Hi everyone,

I’m Anxhelo, Elio’s colleague, also working at Ura Design as a frontend designer. We’re excited to work with you on the styleguide and more.

See you at the UX meetings.

Cheers,
Anxhelo


#15

Here is a quick draft of the current state of the SecureDrop Logos, Colors and Font based on the new website. As the changes are not documented yet, I tracked them down myselves and introduced them here. Feedback is welcome:

https://demo.identihub.co/project/securedrop


#16

I suppose someone from FPF needs to sign off on these at some point (since they own the trademark). Who is the best person for that?


#17

Hi everyone,

The current draft version of the SecureDrop Style Guide is available at this link: https://uracreative.github.io/securedrop-styleguide/

Any feedback is welcome and we can also discuss it in the upcoming UX meeting call.

Cheers,
Anxhelo


#18

That includes also a draft for the Voice and Tone, please review that as well :slight_smile:


#19

Folks, we would appreciate feedback on this so we can stay within the project timeline promised :slight_smile:


#20

@elioqoshi and @anxhelo, thanks for the update! It would definitely be great to have you both at the next UX meeting to discuss this in detail. Some initial observations:

  • Bug: The sidebar navigation in https://uracreative.github.io/securedrop-styleguide/ has a small but annoying bug that has confused me several times when browsing this document: If you click on the label (e.g., “Components”), the page changes, but if you only click on the space next to the label, the highlight changes but the content does not.
  • Voice and Tone: Great to have some SecureDrop-specific content here! I don’t substantively disagree with anything stated here, although I think it would be useful to have some examples. The text itself could use some copyediting (there’s no such thing as a “high threat model”) – happy to help if you point me to repo for PRs, or a GDoc/Etherpad or whatever.
  • Overall content: This still appears to be very much driven by the design of the SecureDrop website, and doesn’t directly relate to the components of the actual SecureDrop web UI. I would love to see you take a stab at applying this style guide to components of the web UI, such as the table of submissions/replies in the journalist interface, the “select files” component in the source interface, or other non-standard elements like the “Remember, your codename is” progressive disclosure. The overall content should also be organized a bit more neutrally – right now all the examples relate to SecureDrop website content.

Great to see this coming along. Happy to talk through this in more detail at the UX meeting and also looking forward to getting @ninavizz, who has just started with FPF as a UX contractor, involved in these discussions. :slight_smile: