Description
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—