Splashes1@2x.png

Schema Wireframing Library

Schema Wireframing Library

Designing a flexible Sketch library for the firm that tackles everything

Schema Design is a research and design firm based in Seattle. Their clients range from startups to Fortune Three companies. One week might be spent working on a site widget. The next, a display for an installation of 60 monitors.

I thought it was a great challenge to deliver a component library for wireframing that’s as flexible as they are.

 
A sample of components in the library.

A sample of components in the library.

 

CONTEXT

Schema Design
Visual | UI/UX

Three weeks, July 2018

 

Starting Vision

 

CASE RESEARCH

To begin, I performed an audit of Schema’s wireframe boards to look for shared colors, components, and icons. I was able to identify several commonalities between projects, such as actions that were typically demonstrated and recurring layouts and components.

I had access to nearly five years of wireframes generated by many different designers, and synthesizing an appropriate-fidelity visual language out of them proved a challenge. The use cases were exceptionally broad.

I also discovered another function of the wireframes: communicating concepts to clients. With this in mind, I knew I had to stay faithful to the Schema brand.

 

ONLINE RESEARCH

Starting out, I found these knowledge bases helpful:

  1. Brad Frost—Atomic Design. He wrote the book on component libraries.

  2. Evon Tay—Let’s Start A Sketch Library! Friendly tutorial.

  3. Pattern Lab. Atomic design in action. You can see a library come together by scrolling.

 

DESIGN PRINCIPLES

Atomic
Sketch’s nested symbols is one of the main reasons it’s such a powerful tool. A scalable, flexible library would have to be made out of modular parts.

Workflow-Conscious
Schema has a way of doing things and swears by several plugins. Notably, the library would have to respect run-line adding of symbols.


Big and Small
All nested components would need to resize correctly with wide . Not only is this handy for design, but makes sense given the context of Schema’s work: many windowed applications. I also wanted to design them to shrink correctly, too, with appropriate overflow boundaries.

Feature-Rich
Schema deals largely in data visualization and specialized tools. The inclusion of specific features like symbolized graphs and charts would be appreciated. Too many overrides would be preferable to too few.

 
New_New_Splashes1@2x.png
 

Visual Design

 

COLOR “PARTICLE” SHEET

Basic document colors and combinations—these are representations of the colors and styles that will be in the later design symbols.

Basic document colors and combinations—these are representations of the colors and styles that will be in the later design symbols.

 

VISUAL RULES

  • For the most part, most components share an edge. Strokes lie on the middle to avoid weight confusion.

  • Typeface: Graphik (Schema’s branding typeface).

  • Static components have a black fill and a white stroke. Disabled components have a dark gray fill and a medium gray type fill. Active components have a medium gray fill and a white type fill.

  • No rounded corners except on chip components.

  • Icons are constructed from 2pt white strokes. Icon target size is 24 pixels.

 

TYPE STYLE SHEET

Type hierarchy

Type hierarchy

 

ICON DESIGN

New_Splashes2 copy@2x.png
 

PANELS—BUILDING BLOCKS OF PAGES

New_Splashes2 copy 3@2x.png
 

Technical Design

 

PIXEL CONCERNS

I designed the component library on an 8pt grid for improved legibility, consistent scalability, and better visual hierarchy.

Additionally, the screen template used in Schema’s presentation decks is 1440p. Knowing this, I used divisible component measurements (120p, 160p, etc) that would allow for maximum modularity and minimal resizing with the intention of cutting down on decision fatigue while designing.

Small components designed on the 8pt grid, when assembled, require few if any modifications to fit the rule system.

 

MARKUP

New_New_Splashes2 copy 4@2x.png
 

SCALING BEHAVIOR

Scaling Up
All nested components have appropriate width or height freezes and are anchored to scale up logically (corners or axes).

Scaling Down
Symbols scale down well and generally have appropriate clipping fields. In some special cases, the clipping is a feature. For example, the symbols meant to represent body copy and headlines will clip upward to allow for easy staging of any length.

New_text@2x.png
 

ADDITIONAL FLEXIBILITY

Sketch features symbol overrides that allow any component made of nested components to be fully modular. But from my own experience, the more modular a symbol, the more time spent tweaking and concealing unwanted components. That’s not to mention the lengthy override list, which itself poses a usability issue.

I addressed this by introducing a new class for all higher-level complex symbols: /Prime.

/Prime is a naming convention suffix that denotes a symbol has all its overrides intact. Keeping highly modular symbols separate allows users to work more effectively by default while still having options. All /Prime symbols and default symbols are interchangeable.

 

THE FINAL LIBRARY

New_Splashes2 copy 2@2x.png