Cornerstone.js: A New Look

Cornerstone.js has come a long way in the last couple of years. To celebrate our achievements and to mark a new beginning, we’ve adopted a new look, feel, and logo. Keep your eyes open, lots of great stuff is on the way ^_^

For those not aware, I became a core team member of Cornerstone.js in late 2017. Since then, I’ve actively worked to improve the cornerstone.js libaries and grow its community.

Today, as a part of those efforts, we have developed a style guide and adopted a new logo. Here’s a piece on how we found our way.

From One to Many

From early 2014 to late 2017 Cornerstone’s face was Chris Hafey’s face. The Cornerstone repositories were owned by his personal GitHub account, and most major changes (unofficially) required his blessing. By late 2017, the bulk of Cornerstone’s maintenance efforts had fallen squarely on the shoulders of OHIF’s Erik Ziegler. Ziegler worked dilligently to cultivate academic and commercial collaborators (including me 👋).

Together, having identified community growth as a top priority, we made the following changes:

  • Creation of GitHub Organization “cornerstonejs”
  • Creation of NPM Organization “cornerstonejs”
  • Creation of Slack Group for active contributor discussions
  • Purchase of cornerstonejs.org
  • Founding of “Core Team” charged with charting Cornerstone.js’s path

Branding the Cornerstone libraries Hafey created as the “Cornerstone.js Organization” was an important step. It created a shift in thinking from Cornerstone.js: “the work of one or two individuals” to “a community effort”.

Growing a Community

Why do individuals volounteer their time for organizations? What motivates people to contribute?

We volounteer when we believe our values align, when we are uniquely qualified to help, and when our efforts will have impact. To give would-be-contributors a chance to evaluate statements like these, we first need to clearly demonstrate our own values and efforts.

How do we do this? By:

  • Providing consistent, cohesive, and helpful documentation
  • Being responsive, helpful, and approachable (re: GitHub issues and pull requests)
  • Creating opportunities to share knowledge, take ownership, and have impact
  • Displaying an identity and culture that community members resonate with

Adopting a logo, branding, and consistent style helps move a few of these bullet points forward.

Sourcing Logo Designs

I originally reached out to the Slack Group to see if any organizations or individuals could provide design resources. insert cricket sounds here

Failing that, I ventured over to Fiverr.com to see what < $100 of my own personal funds could make happen. Surprisingly, a lot. I provided some rough guidelines and example look-and-feel logos to the very talented Artfeel_. She came back with the following concepts:

$72 worth of logo concepts.

Erik Ziegler, James A. Petts, and myself discussed the above options. We ultimately settled on “The Blob” (as we endearingly named it). After playing a bit of word association, we believe it reinforces:

fluid, liquid, malleable, volume, adaptable, “part of”

With the ultimate goal that it reminds our libraries’ consumers that cornerstone.js is a “core building block” for larger applications and medical image viewers – even as our landscape (and the library’s purpose) shifts and changes.

We then played with a few different color variations:

Color variations of "The Blob" when shifting the hue of the three main colors that comprise its gradiants.

We decided to stick with the original green for now, but believe the gradiant and alternative colors could allow for some interesting use cases and animations at a later time.

Our last stick point revolved around usage of “.js” in the logo’s design.

Finalized Cornerstone.js "The Blob" Logos

Reinforcing “cornerstone.js” over “cornerstone” is of prime importance. Cornerstone, on its own, is less descriptive and can be difficult to locate us by. Our rule of thumb is:

  • When included alongside the text cornerstone.js, the .js may be absent from “The Blob”
  • When displayed solely as “The Blob”, the .js should be present to reinforce “cornerstone.js”

Assets and Usage Guidelines

You can find our current style guide on GitHub

It includes assets you can use in your own projects, and serves as a reference for our own repositories.

Disclaimer

This post is purposely brief. Cornerstone’s history is long, rich, and filled with countless contributors that have helped it grow to where it is today. If you feel something is innacurate or requires updating, please don’t hesitate to reach out to me directly or in the comments below.


© 2019. All rights reserved.