Blueprint.js

blueprintlogo.png
 

Tags
Design Systems
Front-end Development

Tools
Sketch
GitHub

Project Timeline
Nov 2018 - Present
Personal Project

 
blueprintjsx.png

about

Blueprint.js x Sketch is a personal project to transform Blueprint.js’ Sketch UI core kit into a fully comprehensive UI library and develop UX guidance documentation.

 

project summary


 

Introduction

Designers and developers need a shared language. This need has not only been apparent in my own experience of working as one of two designers in an all-dev team, but it continues to arise in my conversations with designers of all levels.

In general, the lack of constraints in software design can often lead to disconnected user experiences. What’s more, an insufficiency of agreed-to UI component patterns contributes to this disjunction. When looking specifically at React, these issues seem to be more prevalent in web space compared to native apps.

If designers didn’t have to scramble around for components to create mockups, they could spend more time actually designing.

Coming to agreements on patterns between designers and developers and getting the components together can be a tedious and challenging process — developers don’t think in patterns like designers do. And especially in a multi-dev environment where people step away from their work and come back, having documentation and pattern/component library is essential.

 
 

Why Blueprint.js?

Blueprint.js is a robust framework best suited for developing complex, data-heavy web applications. Unlike other popular frameworks such as Semantic UI or Material UI which are css wrappers, Blueprint.js offers more flexibility in composing UI components.

 

While Blueprint.js can have its inconsistencies on mobile because it was developed mainly for web applications, I feel that its focus on reusable components aligns perfectly with the work that I want to be doing. So choosing Blueprint.js for my project is a no-brainer.

 
 

Project Goal

My goal is to streamline the design to development process for teams working with Blueprint.js, a React-based open-source framework by:

  1. Building a fully usable UI components Sketch library, and

  2. Developing documentation with UX guidance.

 

project plan


 

UI Kit (as Components + Patterns Library)

The latest version of Blueprint’s UI kit, updated August 2018, includes the Light and Dark themes and mouse cursors. Each theme has essential components such as colors, typography, progress bars, forms, buttons, etc.

 
 

The biggest issue with the current UI kit is that while the components are grouped and labeled accordingly, they are not made into reusable symbols. This makes it difficult for designers to quickly create mockups using the kit, or to refer to specific components with ease.

 
Screen Shot 2018-12-19 at 4.11.21 PM.png
 
 

UI Kit Process

To show my process, here is an example with the Button component. For Button, I began by reviewing the documentation and source code to take note of important properties. Specifically, I’m learning the various intent labels so that I can classify and organize Buttons in Sketch accordingly.

edited.jpg
 
 

Here, I’ve given intent labels to each group of Buttons with various states. I’vs noted that Buttons should be classified in the order of Button/Intent/States — for example, Button/Primary/Hovered.

Each Button component is now a usable symbol, with labels consistent with Button properties.

 
 

Currently, I am in the process of converting components into Sketch symbols.
Next steps include:

  • Adding layer styles, detailed typography, icons, and style guide

  • Organizing items into components/assemblies

  • Replicating the library in Figma

  • Creating 1-3 “themes”

 
 

Documentation

While Blueprint’s documentation has details about UI components, it is rather developer-focused. It does not provide UX guidance about UI patterns, and is not documented “pattern library” style (see Bootstrap).

 
 

Now compare to iOS documentation, Human Interface Guidelines, which provides guidance on when to use certain UI patterns along with links to documentation for developers.

 

This is what I will be doing for Blueprint: providing human guidelines via UX/UI pattern focused documentation.

 

That’s all for now, but not to worry —

I will be reporting back right here as my project progresses. In the meantime, feel free to reach out to me and ask questions, if you have any.