Workstation Client Content Inventory + Design #17

ninavizz · 2018-11-08T07:03:11Z

Content design is the writing/styling of written content, and all final icons and illustrations. For the interaction design and user testing, placeholder icons are used to evaluate semiotics in comprehension. Placeholders may or may not graduate to final design.

Final text composed to employ human-centered vs technology-centered verbiage, brevity, and a consistent tone/voice.
Decided-upon nomenclature for entire SecureDrop ecosystem put into place
Coordination with Training to ensure everything maps to how they setup users at the get-go
Final icons
- Semiotics verified in testing
- Stylistically consistent with established visual design

DEPRECIATION NOTICE

Hii! All artwork delivery in Q4-2021 and moving forward, will be happening from wireframes and prototypes in Figma. Furthermore, "current" icons are all to be documented in the Design System in Figma. The below are already out of date, as of this writing.

Please see the Getting Started In Figma guide Nina has created. There is also a long Figma In SecureDrop introduction I'd like to encourage all new team peeps to watch & take notes from, as well a shorter how to get art assets refresher video.

Content Inventory + Status

Background SVGs

Animations

GIF Ring animation ...by me, for downloading files.
- Would also like to include versions of this, atop buttons in other places. Looking forward to scaling Active States in the client! This is VERY easy to re-create in other sizes or colors.
Connection Activity indicator animations, included with static art—links in table below!
In Progress or TBD
Qubes "Q" animation, I have yet to make a nicer version of. In the interim, this is a .mov file.
Pure CSS Loaders site has loaders I like (Ripple, Ellipses, Ring), but we needed to use GIFs

Icons

Note: Raster previews of icons in table below, look hella crummy—SVGs delivered for use in code.

In Use

Name	Looksie	Status
Arrow		Delivered
Delete "x"		Delivered
Download		Delivered
Eye, Hidden		Delivered
Eye, Visible		Delivered
Globe, Languages Selector		Delivered
Inbox Envelope		Delivered
More...		Delivered
Connection/Activity		Online, Static Online, Sync begun Online, Downloading
Offline		Delivered
Paperclip		Delivered
Printer		Delivered
Save To Disk		Delivered
Star		Delivered
"Send" Airplane		Delivered
Messaging: Error Bang		Delivered
Messaging: Hand		Delivered
Messaging: Circle Check		Delivered
Tor Guard		Delivered

Published but obsolete or not yet in a spec

Name	Looksie	Status
Briefcase		Delivered
FFR Source Flagged		Delivered
File-Seen Checkmark		Delivered
Refresh Static		Delivered
Refresh, Active		Delivered
Trashcan		In Progress

FYI: Nina's go-to source for common UI icons, is Google's Material Design library. For more esoteric/bespoke needs, NounProject.

Google's Materiao.io library is extensively tested & all open-source
All minimize down to very small sizes, much more elegantly and consistently than FontAwesome's do... and are not stylistically different enough to notice.

UI iconography is much harder than many realize, especially when things need to be scaled up and down while maintaining proportions and w/o wonkery.

Nomenclature

—tbd—

Contextual Help content

— Tracked in its own issue —

ninavizz · 2018-11-08T19:00:49Z

Messaging audit, begun by @eloquence https://docs.google.com/spreadsheets/d/1JTZ6XTSmtMmoiXEcgnxnHtQczAnjLuRdajbYQxpO2-U/edit#gid=0

ninavizz · 2019-02-06T07:59:05Z

Cross-referencing this to #31 Epic

ninavizz · 2019-02-20T01:18:06Z

@eloquence @creviera @redshiftzero @heartsucker See table above...

All icons shd be library'd up top with their status shown.
- Don't see something you think is needed? Request it in the comments, here, or "@" me in another Repo's Issue. I'll try to keep on top of this list w/ Allie and Erik, primarily.
All pages /states & dialogs I'd like to have inventoried in the above designated table, eventually.
- Feel free to also contribute to a list of those, here.

ninavizz · 2019-03-07T15:39:57Z

BUMP @creviera @heartsucker @eloquence @redshiftzero (see OG comment for table of assets inventory & progress/status)

ninavizz · 2019-03-11T21:11:40Z

BUMP Client Peeps! Added animations into OG comment, above. FYI.

ninavizz · 2019-03-11T21:16:09Z

LDS Ring Animation

.lds-ring { display: inline-block; position: relative; width: 64px; height: 64px; } .lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 51px; height: 51px; margin: 6px; border: 6px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent; } .lds-ring div:nth-child(1) { animation-delay: -0.45s; } .lds-ring div:nth-child(2) { animation-delay: -0.3s; } .lds-ring div:nth-child(3) { animation-delay: -0.15s; } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

ninavizz · 2019-03-11T21:17:34Z

LDS Ellipsis Animation

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}

ninavizz · 2019-03-11T21:18:54Z

LDS Ripple Animation

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

ninavizz · 2019-03-12T20:16:33Z

Star

States: ON #102781, OFF #D8D8D8

<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
    <title>Starre</title>
    <desc>Created with Sketch.</desc>
    <g id="Spex" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ICONZZZ" transform="translate(-299.000000, -182.000000)" fill="#000000">
            <polygon id="Starre" points="307.5 182 310.038595 187.386801 316 188.111457 311.607535 192.165336 312.753289 198 307.5 195.118632 302.246711 198 303.392465 192.165336 299 188.111457 304.961402 187.386801"></polygon>
        </g>
    </g>
</svg>

ninavizz · 2019-03-12T20:18:42Z

Refresh, Active

Note: Pls to animate rotating at a pleasingly elegant pace... nothing frenetic or sluggy. 😄

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
    <title>Fill 1</title>
    <desc>Created with Sketch.</desc>
    <g id="Spex" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ICONZZZ" transform="translate(-131.000000, -103.000000)" fill="#000000">
            <path d="M139.055645,117.435029 C135.745645,117.435029 133.055645,114.745029 133.055645,111.435029 C133.055645,110.425029 133.305645,109.465029 133.755645,108.635029 L132.295645,107.175029 C131.515645,108.405029 131.055645,109.865029 131.055645,111.435029 C131.055645,115.855029 134.635645,119.435029 139.055645,119.435029 L139.055645,122.435029 L143.055645,118.435029 L139.055645,114.435029 L139.055645,117.435029 Z M139.055645,103.435029 L139.055645,100.435029 L135.055645,104.435029 L139.055645,108.435029 L139.055645,105.435029 C142.365645,105.435029 145.055645,108.125029 145.055645,111.435029 C145.055645,112.445029 144.805645,113.405029 144.355645,114.235029 L145.815645,115.695029 C146.595645,114.465029 147.055645,113.005029 147.055645,111.435029 C147.055645,107.015029 143.475645,103.435029 139.055645,103.435029 Z" id="Fill-1" transform="translate(139.055645, 111.435029) scale(-1, 1) rotate(-45.000000) translate(-139.055645, -111.435029) "></path>
        </g>
    </g>
</svg>

ninavizz · 2019-03-12T20:20:12Z

Refresh, Static

UPDATED 01 May, and optimized

ninavizz · 2019-03-12T20:28:55Z

Offline

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
    <title>Fill 1</title>
    <desc>Created with Sketch.</desc>
    <g id="Spex" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ICONZZZ" transform="translate(-186.000000, -102.000000)" fill="#000000">
            <path d="M187.27,102 L186,103.27 L188.1,105.37 C186.79,107.07 186,109.19 186,111.5 C186,115.2 188.01,118.42 190.99,120.15 L191.99,118.42 C189.61,117.03 188,114.46 188,111.5 C188,109.74 188.57,108.12 189.53,106.81 L190.96,108.25 C190.36,109.18 190,110.3 190,111.5 C190,113.72 191.21,115.65 193,116.69 L194,114.95 C192.81,114.25 192,112.98 192,111.5 C192,110.85 192.17,110.25 192.44,109.71 L194.02,111.29 L194,111.5 C194,112.6 194.9,113.5 196,113.5 L196.21,113.48 L196.22,113.49 L203.73,121 L205,119.73 L188.27,103 L187.27,102 Z M201.384,105.582 C202.991,107.045 204,109.154 204,111.5 C204,112.85 203.65,114.12 203.05,115.24 L204.52,116.71 C205.46,115.19 206,113.41 206,111.5 C206,108.613 204.774,106.011 202.816,104.185 L201.384,105.582 Z M198.6,108.459 C199.457,109.193 200,110.283 200,111.5 C200,111.71 199.98,111.92 199.95,112.13 L201.56,113.74 C201.84,113.05 202,112.29 202,111.5 C202,109.729 201.229,108.135 200.006,107.036 L198.6,108.459 Z" id="Fill-1"></path>
        </g>
    </g>
</svg>

ninavizz · 2019-03-12T20:30:54Z

Inbox Envelope

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="19px" viewBox="0 0 24 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
    <title>Group</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0.173911111 0.242087238 3.9739389 0.242087238 3.9739389 7 0.173911111 7"></polygon>
        <polygon id="path-3" points="0.232423529 0.08976 23.9971294 0.08976 23.9971294 17.762472 0.232423529 17.762472"></polygon>
        <polygon id="path-5" points="0 0.242107484 3.79997778 0.242107484 3.79997778 6.99994815 0 6.99994815"></polygon>
    </defs>
    <g id="Spex" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ICONZZZ" transform="translate(-347.000000, -182.000000)">
            <g id="Group" transform="translate(347.000000, 182.000000)">
                <g id="Group-3" transform="translate(18.000000, 15.500000) scale(-1, 1) translate(-18.000000, -15.500000) translate(16.000000, 12.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Clip-2"></g>
                    <path d="M3.71024444,6.69241481 C3.34668889,7.10256296 2.77691111,7.10256296 2.41335556,6.69241481 L0.498244444,4.44385926 L0.437577778,4.37308148 C0.0860222222,3.96293333 0.0860222222,3.29845185 0.437577778,2.87378519 L2.41335556,0.55497037 C2.76491111,0.144822222 3.34668889,0.130822222 3.69824444,0.55497037 C4.0618,0.965118519 4.0618,1.6296 3.71046667,2.05400741 L2.36491111,3.62356296 L3.71046667,5.19311852 C4.0618,5.60352593 4.0618,6.28226667 3.71024444,6.69241481" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
                </g>
                <g id="Group-9" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) ">
                    <mask id="mask-4" fill="white">
                        <use xlink:href="#path-3"></use>
                    </mask>
                    <g id="Clip-8"></g>
                    <path d="M19.9213647,2.053272 L4.32301176,2.053272 C3.79007059,2.053272 3.31477647,2.249592 2.96912941,2.563752 C2.72442353,2.786232 2.55148235,3.048072 2.47924706,3.349272 L11.0778353,8.978232 C11.3947765,9.174552 11.7550118,9.279432 12.1293647,9.279432 C12.4896,9.279432 12.8639529,9.174792 13.1808941,8.978232 L21.7648941,3.362232 C21.5486588,2.603112 20.7997176,2.053272 19.9213647,2.053272 Z M2.39289412,5.718792 L2.39289412,9.868632 C2.39289412,10.405272 1.9176,10.850472 1.31265882,10.850472 C0.722305882,10.850232 0.232423529,10.405272 0.232423529,9.868392 L0.232423529,3.807432 C0.247011765,1.752072 2.07618824,0.089592 4.32301176,0.089592 L19.9213647,0.089592 C22.1394824,0.089592 23.9394824,1.712952 23.9971294,3.702552 L23.9971294,3.715752 L23.9971294,3.807432 L23.9971294,3.925272 L23.9971294,14.044392 C23.9971294,15.065352 23.5507765,16.008072 22.8161882,16.675752 C22.0816,17.343432 21.0444235,17.762472 19.9208941,17.762472 L12.1293647,17.762472 C11.5241882,17.762472 11.0491294,17.317032 11.0491294,16.780392 C11.0491294,16.230552 11.5241882,15.798552 12.1293647,15.798552 L19.9213647,15.798552 C20.9870118,15.798552 21.8371294,15.026232 21.8371294,14.044392 L21.8371294,5.731752 L14.4338353,10.575432 C13.7423059,11.020632 12.9359529,11.243112 12.1293647,11.243112 C11.3230118,11.243112 10.5018353,11.020632 9.81054118,10.575432 L2.39289412,5.718792 Z" id="Fill-7" fill="#000000" mask="url(#mask-4)"></path>
                </g>
                <g id="Group-6" transform="translate(22.000000, 15.500000) scale(-1, 1) translate(-22.000000, -15.500000) translate(20.000000, 12.000000)">
                    <mask id="mask-6" fill="white">
                        <use xlink:href="#path-5"></use>
                    </mask>
                    <g id="Clip-5"></g>
                    <path d="M3.53631111,5.1933 C3.88786667,5.60344815 3.88786667,6.28218889 3.53631111,6.69233704 C3.18475556,7.10248519 2.60297778,7.10248519 2.25142222,6.69233704 L0.312088889,4.42978148 L0.263644444,4.3730037 C-0.0879111111,3.96285556 -0.0879111111,3.29837407 0.263644444,2.87396667 L2.25142222,0.554892593 C2.60297778,0.144744444 3.17253333,0.131003704 3.53631111,0.554892593 C3.88786667,0.965040741 3.88786667,1.62952222 3.53631111,2.05418889 L2.19075556,3.62348519 L3.53631111,5.1933 Z" id="Fill-4" fill="#000000" mask="url(#mask-6)"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

ninavizz · 2019-03-12T20:38:20Z

Paperclip

NOTE: Updated 16 Nov 2020 w/ moderné 90° vertical paper clip

<svg width="11" height="17" viewBox="0 0 11 17" xmlns="http://www.w3.org/2000/svg"><title>  Group 3</title><defs><polygon points="0 0 11 0 11 17 0 17"/></defs><g fill="none"><g transform="translate(-496 -9)translate(496 9)"><mask fill="white"><use xlink:href="#path-1"/></mask><path d="M0 4C0 3.8-0.1 2.2 1 1 1.4 0.5 2.2 0 3.5 0 5.7 0 7 1.7 7 4.3L7 10.4 4.9 10.4 4.9 4.3C4.9 2.9 4.4 2.1 3.5 2.1 2.8 2.1 2.6 2.4 2.5 2.5 2.1 2.9 2.1 3.6 2.1 3.9L2.3 11.5C2.5 13.8 3.6 14.9 5.7 14.9 6.7 14.9 7.4 14.6 7.9 14.1 9 13 8.9 11.1 8.9 11.1L8.9 5.9 11 5.9 11 11C11 11.1 11.1 13.8 9.5 15.5 8.5 16.5 7.3 17 5.7 17 2.8 17 0.2 15.3 0.2 11.8L0 4Z" mask="url(#mask-2)" fill="#353535"/></g></g></svg>

ninavizz · 2019-03-12T20:40:33Z

Globe, Languages Selector

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
    <title>Group 3</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0.0004 0 20 0 20 19.9996 0.0004 19.9996"></polygon>
    </defs>
    <g id="Spex" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ICONZZZ" transform="translate(-408.000000, -181.000000)">
            <g id="Group-3" transform="translate(408.000000, 181.000000)">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <g id="Clip-2"></g>
                <path d="M15.9004,15.3896 C15.6394,14.5796 14.9004,13.9996 14.0004,13.9996 L13.0004,13.9996 L13.0004,10.9996 C13.0004,10.4506 12.5494,9.9996 12.0004,9.9996 L6.0004,9.9996 L6.0004,7.9996 L8.0004,7.9996 C8.5494,7.9996 9.0004,7.5496 9.0004,6.9996 L9.0004,4.9996 L11.0004,4.9996 C12.0994,4.9996 13.0004,4.0996 13.0004,2.9996 L13.0004,2.5896 C15.9294,3.7796 18.0004,6.6496 18.0004,9.9996 C18.0004,12.0796 17.2004,13.9696 15.9004,15.3896 Z M9.0004,17.9296 C5.0494,17.4406 2.0004,14.0796 2.0004,9.9996 C2.0004,9.3796 2.0804,8.7896 2.2104,8.2096 L7.0004,12.9996 L7.0004,13.9996 C7.0004,15.0996 7.9004,15.9996 9.0004,15.9996 L9.0004,17.9296 Z M10.0004,-0.0004 C4.4804,-0.0004 0.0004,4.4796 0.0004,9.9996 C0.0004,15.5196 4.4804,19.9996 10.0004,19.9996 C15.5194,19.9996 20.0004,15.5196 20.0004,9.9996 C20.0004,4.4796 15.5194,-0.0004 10.0004,-0.0004 Z" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
            </g>
        </g>
    </g>
</svg>

ninavizz · 2019-03-12T20:41:41Z

Error, Messaging Pane

Updated w/ optimized code 25 May

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title> Fill 1</title><desc> Created with Sketch.</desc><g id="Spex" style="fill:none;stroke-width:1;stroke:none"><g id="ICONZZZ" fill="#000"><path d="M10 18C5.6 18 2 14.4 2 10 2 5.6 5.6 2 10 2 14.4 2 18 5.6 18 10 18 14.4 14.4 18 10 18ZM10 0C4.5 0 0 4.5 0 10 0 15.5 4.5 20 10 20 15.5 20 20 15.5 20 10 20 4.5 15.5 0 10 0ZM9 11L11 11 11 5 9 5 9 11ZM9 15L11 15 11 13 9 13 9 15Z" id="Fill-1"/></g></g></svg>

ninavizz · 2020-01-18T00:54:07Z

Save to disk

Note: Icon is grimace blue, and is above a white-outlined square. The square was only created so that the SVG would have perfectly square dimensions, which has been flagged as a QT issue. It should be changed to match the background color, wherever it is used—or, preferably to be hidden. Whichever makes QT break, the least. :D

ninavizz · 2020-01-18T00:56:44Z

Printer

Note: Printer icon is grimace blue, and is above a white-outlined square. The square was only created so that the SVG would have perfectly square dimensions, which has been flagged as a QT issue. It should be changed to match the background color, wherever it is used—or, preferably to be hidden. Whichever makes QT break, the least. :D

ninavizz · 2020-01-18T00:59:11Z

Hand

Note: Hand icon is black, and is above a white-outlined square. The square was only created so that the SVG would have perfectly square dimensions, which has been flagged as a QT issue. It should be changed to match the background color, wherever it is used—or, preferably to be hidden. Whichever makes QT break, the least. :D

ninavizz · 2020-01-18T01:59:14Z

Circle Check

Note: Delivered art uses correct Success Green for the client.

ninavizz · 2020-01-24T22:35:00Z

Connection Indicator — Connected, no activity.

When there is no activity to demonstrate and the network connection is solid, this is the updated screen.
Art created at 400%, and at 100% shd display at 20x24

ninavizz · 2020-01-24T22:37:11Z

Connection Indicator — Connected, metadata sync begun.

Art created at 400%, and at 100% shd display at 20x24
Animated GIF that should ONLY PLAY ONCE connectivity-ind-metasync
GIF was created w/ single-play specified w/in file; pls echo this in code, so that each time a sync initiates this plays only once. Otherwise, my fear is that this thing will just be animating more than 50% of the time, which wd not be good. Doing it this way, my expectation is that it'll do the subtle 'lil heartbeat thing once every 30sec as the user can see it.

ninavizz · 2020-01-24T22:39:28Z

Connection Indicator — Connected, things are being downloaded to the client.

Art created at 400%, and at 100% shd display at 20x24
Metadata from client to server, does not qualify for this. Only new stuff being sent to the client from the server.
Animated GIF that will LOOP INFINITELY connectivity-ind-downloading
- GIF was created w/ infinite-loop specified w/in file, so that throughout the duration of this "state" it is subtly pulsing. So, so very subtly pulsing.

ninavizz · 2020-01-24T22:43:07Z

Connection Indicator — Connection dropped, whomp-whomp!

Static, single-frame GIF to replace existing vector art, so we don't get weirdness w/ GIF-to-SVG
Art created at 400%, and at 100% shd display at `20x24'
GIF ripped to be transparent, but has background-dither pixels included that assume a background gradient on the barre that matches offline-mode.

ninavizz · 2020-01-24T22:51:31Z

File Downloading

Art created at 400%, and at 100% should display at 16x16
Animated GIF set to loop infinitely
GIF ripped to be transparent, and has backround-dither pixels included that assume the Convo Pane background.

ninavizz · 2021-04-22T02:34:55Z

Right-Tear For Conversation Pane

Context: For message at top of pane when all files and messages previously, have been deleted

ninavizz · 2021-04-22T03:19:07Z

Sparkles (for Safe Delete)

Sparkles 1
<svg width="79" height="82" viewBox="0 0 79 82" xmlns="http://www.w3.org/2000/svg"><title> Fill 33</title><g style="fill:none;opacity:0.4"><g fill="#E3E8F8"><path d="M24.6 0C37.4 35.5 34.2 43.2 0 56.5 34.2 43.2 41.6 46.5 54.4 82 41.6 46.5 44.8 38.8 79 25.5 44.8 38.8 37.4 35.5 24.6 0"/></g></g></svg>

Sparkles 2
Group 3</title><g style="fill:none;opacity:0.3"><path d="M169.9 20.2C107.2 90.9 98.1 88.6 68.4 0 99.2 88.6 93.5 95.4 0 76.3 93.5 95.4 95.8 103.2 33.1 172.8 95.8 102.1 103.8 104.4 134.6 193 103.8 104.4 109.5 97.6 203 116.7 109.5 98.7 106.1 90.9 169.9 20.2" style="fill:#D3D8EA;opacity:0.7"/><path d="M85.4 57.9C98.2 93.6 95 101.4 61 114.8 95 101.4 102.4 104.7 115.2 140.4 102.4 104.7 105.6 96.9 139.6 83.5 105.6 96.9 98.2 93.6 85.4 57.9" style="fill:#A5B3E9;opacity:0.8"/></g></svg>

Sparkles 3
<svg width="79" height="82" viewBox="0 0 79 82" xmlns="http://www.w3.org/2000/svg"><title> Fill 35</title><g style="fill:none;opacity:0.3"><g fill="#A5B3E9"><path d="M24.6 0C37.4 35.5 34.2 43.2 0 56.5 34.2 43.2 41.6 46.5 54.4 82 41.6 46.5 44.8 38.8 79 25.5 45.9 38.8 38.4 35.5 24.6 0"/></g></g></svg>

ninavizz · 2021-04-22T03:24:29Z

Big Tear (for Safe Delete)

Note: Sorry, I couldn't optimise this SVG without it breaking!

<?xml version="1.0" encoding="UTF-8"?> <svg width="576px" height="8px" viewBox="0 0 576 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Fill 1</title> <g id="•••-Current-Screens-To-Zeplin" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Menu—PostDataPurge" transform="translate(-1006.000000, -534.000000)" fill="#A5B3E9"> <polygon id="Fill-1" points="1408.496 534 1402.744 540 1396.992 534 1391.238 540.001 1385.48 534.001 1379.725 540.001 1373.967 534.001 1368.211 540.001 1362.455 534.001 1356.698 540.001 1350.941 534.001 1345.186 540.001 1339.43 534.001 1333.672 540.001 1327.916 534.001 1322.161 540.001 1316.405 534.001 1310.647 540.001 1304.893 534.001 1299.137 540.001 1293.382 534.001 1287.625 540.001 1281.87 534.001 1276.115 540.001 1270.36 534.001 1264.606 540.001 1258.849 534.001 1253.093 540.001 1247.338 534.001 1241.584 540 1235.831 534.001 1230.076 540.001 1224.32 534.001 1218.564 540.001 1212.809 534.001 1207.055 540 1201.303 534 1195.55 540.001 1189.795 534.001 1184.04 540.001 1178.283 534.001 1172.529 540.001 1166.776 534 1161.023 540 1155.27 534 1149.518 540 1143.765 534.001 1138.01 540.001 1132.254 534.001 1126.499 540.001 1120.745 534 1114.993 540 1109.242 534 1103.491 540 1097.739 534 1091.987 540 1086.233 534 1080.479 540.001 1074.723 534.001 1068.969 540 1063.216 534 1057.464 540 1051.713 534 1045.963 540 1040.212 534 1034.461 540 1028.71 534 1022.959 540 1017.207 534 1011.452 540.001 1006.057 534.377 1006 535.732 1011.452 541.445 1017.207 535.445 1022.959 541.446 1028.71 535.445 1034.461 541.446 1040.212 535.445 1045.963 541.446 1051.713 535.445 1057.464 541.446 1063.216 535.445 1068.969 541.446 1074.723 535.445 1080.479 541.445 1086.233 535.445 1091.987 541.446 1097.739 535.445 1103.491 541.446 1109.242 535.445 1114.993 541.446 1120.745 535.445 1126.499 541.445 1132.254 535.445 1138.01 541.445 1143.765 535.445 1149.518 541.446 1155.27 535.445 1161.023 541.446 1166.776 535.445 1172.529 541.445 1178.283 535.445 1184.04 541.445 1189.795 535.445 1195.55 541.446 1201.303 535.445 1207.055 541.446 1212.809 535.445 1218.564 541.445 1224.32 535.445 1230.076 541.445 1235.831 535.445 1241.584 541.446 1247.338 535.445 1253.093 541.445 1258.849 535.445 1264.606 541.445 1270.36 535.445 1276.115 541.445 1281.87 535.445 1287.625 541.445 1293.382 535.445 1299.137 541.445 1304.893 535.445 1310.647 541.445 1316.405 535.445 1322.161 541.445 1327.916 535.445 1333.672 541.445 1339.43 535.445 1345.186 541.445 1350.941 535.445 1356.698 541.445 1362.455 535.445 1368.211 541.445 1373.967 535.445 1379.725 541.445 1385.48 535.445 1391.238 541.445 1396.992 535.445 1402.744 541.446 1408.496 535.445 1414.25 541.445 1420.009 535.445 1425.763 541.445 1431.516 535.445 1437.273 541.445 1443.029 535.445 1448.785 541.445 1454.54 535.445 1460.299 541.445 1466.054 535.445 1471.813 541.445 1477.569 535.445 1483.327 541.445 1489.085 535.445 1494.844 541.445 1500.602 535.445 1506.361 541.445 1512.121 535.445 1517.881 541.445 1523.641 535.445 1529.399 541.445 1535.154 535.445 1540.912 541.445 1546.673 535.445 1552.434 541.445 1558.195 535.444 1563.956 541.445 1569.716 535.444 1575.479 541.445 1581.247 535.444 1581.247 534.002 1575.479 540.001 1569.716 534.002 1563.956 540.001 1558.195 534.001 1552.434 540.001 1546.673 534.001 1540.912 540.001 1535.154 534.001 1529.399 540.001 1523.641 534.001 1517.881 540.001 1512.121 534.001 1506.361 540.001 1500.602 534.001 1494.844 540.001 1489.085 534.001 1483.327 540.001 1477.569 534.001 1471.813 540.001 1466.054 534.001 1460.299 540.001 1454.54 534.001 1448.785 540.001 1443.029 534.001 1437.273 540.001 1431.516 534.001 1425.763 540.001 1420.009 534.001 1414.25 540.001"></polygon> </g> </g> </svg>

ninavizz mentioned this issue Nov 8, 2018

Nomenclature Scrub #14

Closed

ninavizz added this to the Beta milestone Nov 9, 2018

ninavizz added the UxD User Experience Design (content, visual, interaction) label Jan 21, 2019

ninavizz changed the title ~~Client Content Design~~ Workstation Client Content Design Feb 20, 2019

ninavizz added the Workstation Beta label Feb 20, 2019

ninavizz mentioned this issue Mar 7, 2019

UX parity between prototypes & coded client freedomofpress/securedrop-client#261

Closed

7 tasks

sssoleileraaa mentioned this issue Aug 6, 2019

Source widget polish freedomofpress/securedrop-client#522

Merged

ninavizz mentioned this issue Aug 7, 2019

Add branding image to left pane and polish styling freedomofpress/securedrop-client#520

Merged

ninavizz mentioned this issue Oct 25, 2019

[ui polish] Star colors freedomofpress/securedrop-client#590

Closed

6 tasks

ninavizz mentioned this issue Dec 22, 2019

Hide/Show Password on Login Screen freedomofpress/securedrop-client#659

Closed

sssoleileraaa mentioned this issue Jan 3, 2020

Fixes #659 Adds a show password options for login freedomofpress/securedrop-client#679

Merged

3 tasks

ninavizz mentioned this issue Jan 8, 2020

Implement download/decryption activity indicator (first iteration) freedomofpress/securedrop-client#288

Closed

This was referenced Jan 18, 2020

Login super-duper polish freedomofpress/securedrop-client#710

Closed

Update branding barre SVG freedomofpress/securedrop-client#711

Closed

Update Text/Icon/Behavior of "Sync button" area #97

Closed

sssoleileraaa mentioned this issue Jan 29, 2020

update file-download animation freedomofpress/securedrop-client#731

Merged

eloquence mentioned this issue Feb 5, 2020

Add animation to sync area during message download freedomofpress/securedrop-client#775

Open

ntoll mentioned this issue Feb 10, 2020

Update login screen to latest design. freedomofpress/securedrop-client#789

Merged

6 tasks

eloquence mentioned this issue Mar 5, 2020

Align star -> source name -> paperclip in source list item. freedomofpress/securedrop-client#872

Merged

6 tasks

ninavizz removed this from the Beta milestone Apr 1, 2020

ninavizz mentioned this issue Oct 16, 2020

Consider replacing FontAwesome glyphs with PNGs freedomofpress/securedrop#5546

Closed

ninavizz mentioned this issue Apr 22, 2021

"Safe Delete" parity with JI freedomofpress/securedrop-client#1202

Closed

ninavizz added SDW Client and removed Workstation Beta labels Jul 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Workstation Client Content Inventory + Design #17

Workstation Client Content Inventory + Design #17

ninavizz commented Nov 8, 2018 •

edited

Loading

ninavizz commented Nov 8, 2018

ninavizz commented Feb 6, 2019

ninavizz commented Feb 20, 2019

ninavizz commented Mar 7, 2019

ninavizz commented Mar 11, 2019

ninavizz commented Mar 11, 2019 •

edited

Loading

ninavizz commented Mar 11, 2019 •

edited

Loading

ninavizz commented Mar 11, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Jan 18, 2020 •

edited

Loading

ninavizz commented Jan 18, 2020 •

edited

Loading

ninavizz commented Jan 18, 2020

ninavizz commented Jan 18, 2020 •

edited

Loading

ninavizz commented Jan 24, 2020

ninavizz commented Jan 24, 2020

ninavizz commented Jan 24, 2020 •

edited

Loading

ninavizz commented Jan 24, 2020

ninavizz commented Jan 24, 2020 •

edited

Loading

ninavizz commented Apr 22, 2021

ninavizz commented Apr 22, 2021

ninavizz commented Apr 22, 2021 •

edited

Loading

Workstation Client Content Inventory + Design #17

Workstation Client Content Inventory + Design #17

Comments

ninavizz commented Nov 8, 2018 • edited Loading

DEPRECIATION NOTICE

Content Inventory + Status

Background SVGs

Animations

Icons

In Use

Published but obsolete or not yet in a spec

Nomenclature

Contextual Help content

ninavizz commented Nov 8, 2018

ninavizz commented Feb 6, 2019

ninavizz commented Feb 20, 2019

ninavizz commented Mar 7, 2019

ninavizz commented Mar 11, 2019

ninavizz commented Mar 11, 2019 • edited Loading

LDS Ring Animation

ninavizz commented Mar 11, 2019 • edited Loading

LDS Ellipsis Animation

ninavizz commented Mar 11, 2019 • edited Loading

LDS Ripple Animation

ninavizz commented Mar 12, 2019

Star

ninavizz commented Mar 12, 2019 • edited Loading

Refresh, Active

ninavizz commented Mar 12, 2019 • edited Loading

Refresh, Static

ninavizz commented Mar 12, 2019 • edited Loading

Offline

ninavizz commented Mar 12, 2019

Inbox Envelope

ninavizz commented Mar 12, 2019 • edited Loading

Paperclip

ninavizz commented Mar 12, 2019

Globe, Languages Selector

ninavizz commented Mar 12, 2019 • edited Loading

Error, Messaging Pane

ninavizz commented Jan 18, 2020 • edited Loading

Save to disk

ninavizz commented Jan 18, 2020 • edited Loading

Printer

ninavizz commented Jan 18, 2020

Hand

ninavizz commented Jan 18, 2020 • edited Loading

Circle Check

ninavizz commented Jan 24, 2020

Connection Indicator — Connected, no activity.

ninavizz commented Jan 24, 2020

Connection Indicator — Connected, metadata sync begun.

ninavizz commented Jan 24, 2020 • edited Loading

Connection Indicator — Connected, things are being downloaded to the client.

ninavizz commented Jan 24, 2020

Connection Indicator — Connection dropped, whomp-whomp!

ninavizz commented Jan 24, 2020 • edited Loading

File Downloading

ninavizz commented Apr 22, 2021

Right-Tear For Conversation Pane

ninavizz commented Apr 22, 2021

Sparkles (for Safe Delete)

ninavizz commented Apr 22, 2021 • edited Loading

Big Tear (for Safe Delete)

ninavizz commented Nov 8, 2018 •

edited

Loading

ninavizz commented Mar 11, 2019 •

edited

Loading

ninavizz commented Mar 11, 2019 •

edited

Loading

ninavizz commented Mar 11, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Mar 12, 2019 •

edited

Loading

ninavizz commented Jan 18, 2020 •

edited

Loading

ninavizz commented Jan 18, 2020 •

edited

Loading

ninavizz commented Jan 18, 2020 •

edited

Loading

ninavizz commented Jan 24, 2020 •

edited

Loading

ninavizz commented Jan 24, 2020 •

edited

Loading

ninavizz commented Apr 22, 2021 •

edited

Loading