Skip to content

Styleguide(ish)

Jump to bottom
Nina Eleanor Alter edited this page May 1, 2019 · 21 revisions

Welcome!

We have split communicating about UX for the Qubes Workstation Client into two segments: Styling and Behavior. Styling references visual design things, whereas behavior references interactivity. Between the two, are states.

We have also split the UI into various named components and sections.

New to working on the Client? Hooray! Read a bit about how we're working with Zeplin, a collaboration utility for Sketch. CSS specs and mockups can be found, there. I know, they spell it wrong.

Styling

Placed art

»» Content Inventory ««

Also: Peter Collingridge's SVG Optimiser (nina's fav!)

Color

A broad spectrum of hex values are used to bring color into the Client. Below is the palette of targeted colors. What's up with the tertiary hues? See Joseph Albers' observed behavior of color in context. TL;DR, please follow the CSS values shown in Zeplin—and when in doubt, ask. :) Client Palette

Typography The two fonts used in the client are Montserrat and Source Sans Pro Montserrat + SourceSansPro

  • Both are open sourced to the SIL Open Font License, via Google Fonts.
  • All text in the client is styled with a unique color, size font-family, font-weight, character-spacing, line-spacing, margins, and padding. We've been told the UX Kid™ is rather fussy wrt well implemented typography.
    • There are many grays, and many font weights. This is to distinguish subtle UI hierarchies, for usability. Some of these details may not seem that significant, though it is expected that when in use, they will help ease the cognitive burden of things.
  • QT rendering of strong and italic styling as text decoration are to be avoided.
    • Both font families have unique italic fonts, and a variety of font weights.
    • In each instance of bolding, a unique weight has been specified; pls to look-up on the mockup's CSS in Zeplin

Behavior

TL;DR: please carefully follow the click-through instructions listed with each prototype!

About Behavior section Behavior is spec'd in two ways: through Gherkin blabs pasted into GH issues, and through interactive prototypes. Invision is what is used for most prototypes, but Studio is used for a few. Invision is a utility that enables designers to export our wireframes from Sketch, as clickable/navigable artifacts. Which is great! But, all "states" are fudged as static screens that need to be navigated to... and other limitations. Hence, they look shiney/pretty, but are very limited.

Export Functionality

Currently there are 2 solutions for Export; our preferred Briefcase flow, and a possible alternative to make Beta simpler to get out the door. See its prototype/synopsis at the linked page.

Briefcase · Invision Link

  • General
    • Mind the tiny pink-arrows at the very top left and right of each screen's desktop
    • The whole prototype may be navigated with these, or with on-screen items (see below clickthru)
    • At any point within this prototype, you may click on the Briefcase files/icon lockup in the Top Bar, or on the Briefcase Pane's "Close" button, to hide/show its pane.
  • Begin: Within Benign Artichoke...
    • Add grinder.mov
    • Add transcript.doc
  • Select: Cuddly Antelope
    • Add file
  • Select: Benign Artichoke
  • Remove files
    • Note: Briefcase incorrectly shows count of files at this point to be empty; functionally w/in this prototype, clicking on "Remove" just kicks you back to the first screen.
  • Repeat above steps within Benign Artichoke and Cuddly Antelope to re-populate Briefcase to contain 3 files
  • Click "Export Files"
  • Click pink-arrows to step-through stills that speak to anticipated activities via user feedback in UI
  • Concepts demonstrated in this Invision prototype:
    • Toggling of Briefcase pane with button in Top Bar
    • The "Add" button is greyed-out as disabled, upon each file being added
    • Briefcase widget in the Top Bar reflecting the number of items queued for Export
    • Option to remove files from Briefcase, contextually, in each Source's File panel
    • Delete functionality implied (but not executable) from the Briefcase pane
    • What the Briefcase pane looks like, when the authenticated user has...
      • ...not yet used Briefcase in the current session
        • Dummy hyperlinks here assume there might be nifty documentation to link-out to
      • ...already executed one Export in the current session
      • ...populated the Briefcase, both before and after the first Export of the session
      • ...hit the Export button, and Things Are Happening!
        • How the widget's styling reflects the Active State, too.
    • Not prototyped
      • What error messaging might look like
      • What exactly the opening of a new disposable-VM might look like
        • Custom/discernible name option?
        • Same VM for all exports, or would it need to be new ones for each export?

Getting Started w/ Zeplin

  • All SVG Assets are in this issue in the UX repo.
    • Zeplin does technically offer the option to download vector or raster format elements mockups in it. Pls to not use!
    • Because the mockups may have inconsistencies in elements across different pages, please do not pull SVGs from Zeplin.
  • Public Zeplin link
    • For a very high-overview quick-reference on global color and text styles.
    • Mockups can be viewed and zoomed-into from this link, but no CSS values are available, here.
  • Private Zeplin link
    • For detailed CSS values, you'll need access to this. Ping Nina, if you don't have an invite. ninavizz at gmail or on Slack/Gitter.
    • Webpage includes 2 primary nav items: Dashboard and Styleguide
    • Dashboard shows full-page mockups for many pages
      • Use the tags at the top of the page, to navigate.
        • Styling a Login page? Great, all screens that show when you click on the Login tag, will be relevant. Styling things to do with Reply functionality? Same. Page components are broken-down by states and in more detail in the Components section, though (sorry, the UX Kid did not design Zeplin's UX!).
      • Click on any object within a mockup, and its CSS displays in a far-right column.
      • If something appears to be in greyscale, it is not yet final. Ping Nina.
    • Styleguide has within it 2 nav sections: Colors & Text, and Components. This nav is to the far left of the screen, at the top.
Clone this wiki locally