Company
GitHub — The world’s leading AI-powered developer platform.
Context
In 2019 GitHub reached a design maturity milestone in which several projects that would change the interface significantly lined up. As a result, the need for a simpler and more modern visual language became very apparent. Component refresh was part of a greater visual redesign in which, under the leadership of Diana Mounter, we shipped the redesign of the code tab in repositories and the redesign of the Primer Octicon library.
Highlights
Bluesky explorations.
Fresh eyes and no constraints. First buttons and then how those inform other decisions.
What feels like GitHub?
After all the explorations, we started adding constraints in order to find direction. We started working on three different directions to consider. I like mentioning this because it’s become a pattern for my design process: explore one option that makes sense and can be implemented cost and time efficiently, a solution that can serve us as a north star and a middle ground one that feels like stepping stones towards the north star.
Visual language in context
In the beginning, we developed all the explorations on a small subset of core components. At times we even focused only on the primary buttons. Once we had some certainties on the directions we wanted to test, we tested those primitives and styles in context, as much context as possible. Another positive thing that came of this part is that we discovered so much we could add to the backlog and was also the perfect prelude to working on what later became the dark mode project.
Resolution
Summer 2020 — Primer update
In the summer of 2020 we finally shipped the full visual refresh and released a major library update on all the implementations of Primer, GitHub’s open-source design system. Below is the final sticker sheet with all the redesigned core components and a video of Diana Mounter’s talk talking about this project.
