Design system, Beckon

UX/UI, specs

Role

UX/UI Designer

Team

Product Team @ Beckon

Duration

2012-2017

I was responsible for writing, maintaining, and circulating Beckon’s style guide and pattern library. The style guide encompassed everything from logo usage, to designated color palettes, to Beckon’s editorial tone. The pattern library detailed every element on the screen that underpinned Beckon’s core design philosophy, from the layout of each page type, to navigation, to typography, to color schemes, to the use of tabs and icons.

Beckon pattern library overview

Some examples follow. Note that specs often reference each other — e.g. page titles require a knowledge of standard text sizes — so are seldom meant to be seen in isolation.

On top of the base grid, but underlying every other aspect of the workspace is the page. For each page type, I wrote specs for the sizing, positioning, and style of each content cluster. In addition, individual elements — like the horizontal navigation bar — required their own breakout supplementary specs.

Beckon page layout specs

Where an item like navigation is concerned, the specs must account for dynamic behaviors, like modes, states, and the responsive behavior of elements.

Beckon navigation specs

Similarly, button specs must account for state with regard to user action, and dynamic state with regard to background processes.

Beckon button specs

Dialog boxes aren’t grounded within the underlying page grid, but must follow many of the patterns set forth by the page layout specs.

Beckon lightbox specs

Charts and graphs have unique requirements, to account of interactivity, and clarity of data visualization. They usually feature a range of colors beyond the requirements of the rest of the interface, and must remain legible as they scale, maintaining the fidelity of the underlying data.

Beckon graph specs