Visual Essay Design System

The Visual Essay Design System is a collection of modules that add variety and visual interest to long-form articles.

July 03, 2021

Introduction

The following design guidelines are what I use to remind myself of design decisions while I have my developer hat on.

Goals

The templates used for photographers or graphic designers I found on popular website builders focus more on purely visual work that speaks for itself. Unlike that type of site, I wanted a template that would allow me to say more and dive deep into topics (like a design process), while maintaining web readers’ interest and support scannability.

I started down the path of creating this “Visual Essay” to achieve the above goals to deliver a clear visual hierarchy and a high amount of typographical variation.

Modular Approach

The Visual Essay embodies a small-scale design system, a modular system of textual “idioms” that I could draw upon while writing, including

  • Titles, headers, and subheaders: Signifiers of information hierarchy and aid skimmability
  • Lists: A sequential collection of concepts or ideas
  • Galleries: A collection of visuals, with annotations
  • Figures: A visual element with a label and supporting text
  • Tables: 3 variations depending on usage

(And, yes, the very article you are reading right now uses the Visual Essay design system!)

Testing the System

Check out the Visual Essay Test Page, which holds examples of the modular elements mentioned above. I’ve been using that for testing and to track my progress in implementing the designs.

Colors

The extensive color palette shown here is meant to add visual interest by supplying subtle distinction while remaining visually consistent.

I documented the color revamping process for this, latest iteration.

Overview

ColorPurpose
whitePrimary background.
blackPrimary foreground.
turquoiseEmphasis
graySupplementary text, icons
grayBlueDarkInformation Hierarchy
blueDarkInformation Hierarchy. Complementary to grayBlueDark
navyInformation Hierarchy. Complementary to blueDark
redDanger
redDarkEmphasis, clickable things
silverBackgrounds
silverDarkBorders, lines

The following tokens use (or are derived from) the above colors:

Backgrounds

Token NamePurpose
bg.primaryText for the main part of the screen.
bg.secondaryUse for navigational components, like sidebar or topbar
bg.calloutExpandable regions, callouts, zebra rows in tables
bg.reverseText selection
bg.warningHighlight draft sections (development only)

Text

Token NamePurpose
Abc
text.primaryText for the main part of the screen.
Abc
text.secondaryOf slightly lower importance than text.primary. <figcaption> text. In a list of items, the item’s description.
Abc
text.emphasisDraw attention to keywords within paragraphs. <strong> text.
Abc
text.interactive.primaryShow clickable links, with extra emphasis. Call-to-action links.
Abc
text.interactive.primaryHover
Abc
text.interactive.secondaryShow clickable links contained in paragraphs.
Abc
text.interactive.secondaryHover
Abc
text.accent.primaryFor special text. <blockquote> text
Abc
text.accent.secondaryFor accompanying special text. <cite> text
Abc
text.hierarchy.primaryMain headers
Abc
text.hierarchy.secondarySubheaders
Abc
text.hierarchy.tertiaryList Counters
Abc
text.brandBrand identity
Abc
text.reverseBrand identity
Abc
text.warningWarning
Abc
text.codeCode

Graphics

Token NamePurpose
icon.enabledEnabled
icon.disabledDisabled
border.primaryBorders associated with primary content
border.calloutBorders associated with callout content
dividerDividers <hr>

More to come

More will be coming as I further refine and define the design.


Jay Liu
Written by Jay Liu, interaction designer.
https://jayliu.design
© 2021, Jay Liu