Skip to content

Styleguide(ish)

Jump to bottom
Nina Eleanor Alter edited this page Nov 7, 2021 · 21 revisions

Welcome!

Communication about the UX for the SDW Client has been split 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? Welcome! We are in the process of migrating all design specs into Figma, from Zeplin. The below sentence has been depreciated, but will remain visible until the migration is complete. See guide written for the SD team, about how we are using Figma.

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!) NOTE: With Figma, high quality SVGs may be directly generated from "final" mockups; but those mockups need to be linked-to in an issue, and noted as containing production ready art.

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 abundance of hues? See Joseph Albers' observed behavior of color in context. TL;DR, please follow the values shown in linked-to specs (Figma or Zeplin)—and when in doubt, ask. :) Client Palette

Design System

📣 Components, buttons, and states for allthethings are being formalized in a design system in Figma. 🎉

At the time of this writing the Design System is in progress and this page will be updated when it is complete. Most components will have both a static design spec (as a group in the above Figma design file), and will also be included in an interactive thingy that is viewable as a "Prototype," for viewing hover/active/press states. Look for the interactive previews in the "Flows" section of the "Interactive" panel/tab on the far-Right pane, just below the big blue "Share" button. Do note, that the "Press" state is intended to only show to users in a fraction of a second—but because of limitations with Figma, show until your mouse leaves the component.

Look for comments throughout the Figma file, both using its "Comments" feature and Pink or Orange or Green annotations throughout (most will just be pink. See guide for author color coding of Annotations in the Client Colors page above).

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 bits pasted into GH issues, and through interactive prototypes. We are working towards migrating all prototypes into Figma, but some may remain in prior media. Below sentence depreciated, but will remain until migration complete.

Invision is what is used for most prototypes, but Studio and UXPin have 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 & Print Functionality

Interaction model for all export/print functionality: image

Please see »» Invision Thingy «« for further interactivity details, or ping Nina.

  • Overlay windows never re-position from opening placement, when sizing changes
    • Standard pattern = top edge will remain fixed, with bottom edge moving up or down to accommodate for more/less content w/ new window states
    • When errors flash, the bottom edge will remain fixed with the window scaling UP (so the top-edge moves)
    • When a user elects to show Help content, the top-edge of the window will remain fixed with the bottom edge moving to accommodate the new text.

Replies

— section tbd, design completed —

Network Failure

— section tbd, design completed —

Getting Started w/ Zeplin

  • Zeplin and Sketch are both relatively new products, young in their product maturity. Therefore, both have a few shortcomings—yet both remain the best to facilitate communicating CSS and pixel-perfect positioning needs, between devs and designers. Hence, a few little process hacks.
    • Please only reference a styling attribute as the canonical source of truth on a mockup, if that attribute's category is tagged to the screen. Example: This Screen carries the tags Text Styles and Color. Therefore, its elements may be referenced as source-of-truth/canonical for those things. Need to work on the Client's grid in QT? That screen will not work. However, this other one, will—but you should not use it as a canonical reference for text styles or color. Make sense? If not, ask Allie or Nina.
    • 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!
  • 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.
  • Tags! There are many...
    • Preliminary Means, just that—and to code at your own risk of needing to make updates, later, as things may change.
      • Anything could be preliminary: color, typography, layout, specific verbiage, or the concept as a whole. Best to ping nina to check first.
    • PostBeta means that if we're not actively in Beta, don't pay attention to this mockup—cuz it's got things in it that are out of scope for Beta.
    • offline means that all attributes of a screen reflect state-changes for when the Client is offline. Namely the gradient on the top bar, the Auth Widget, and the Reply Box change, and ideally the timestamp will pull from a different library to be formatted differently. The ability to download files from the server will also change, and static text changes in the files pane will reflect that.
    • ActiveState is one of the most under-utilized button states out there. Usually it's done with a dotted-line around a button that colorizes as disabled; most e.commerce and payment sites do it. It's important to tell the user "Hey, we're processing something... don't hit the button again, or freak-out that nothing's happening." More generally for this project however, any screens in Zeplin tagged with it will also reflect where a spinner/dot-dot-dot may go, what guiding text there may be, etc. Global Network Activity Indication has not yet been completed, so that is not currently (10 May) reflected in what's on Zeplin.
    • Still working on this section—got a tagging question? Ask nina. 😸
Clone this wiki locally