Shopify.dev, May 2021— May 2022
Official announcement video showcasing the new dark mode UI (2021)
Liquid references overview page
Liquid references overview page in dark mode
REST Admin API references overview page
REST Admin API references overview page in dark mode
REST references overview in responsive web
GraphQL Admin API references overview page
GraphQL Admin API references overview page in dark mode
GraphQL references overview in responsive web
Introducing basic concepts of Liquid
Tables, interactive code blocks, and code examples helped developers understand basic concepts and easily reference them
Liquid references in responsive web
By putting the content first, we found it easier to reorganize navigation and introduce elements like anchor tags for finding things faster
Side-by-side code blocks established clear relationships between the code and output that was generated
We even worked in (HEALTH POTION) examples to elevate our design language and brand further
A flexible system of layouts allowed us to effectively design for both languages and APIs, integrating visual examples where appropriate
Our references were designed to work on any screen size