[{"data":1,"prerenderedAt":225},["ShallowReactive",2],{"company:\u002Fpixel-and-tonic":3},{"company":4,"projects":23},{"path":5,"title":6,"description":7,"role":8,"period":9,"location":10,"logo":11,"monogram":12,"body":13},"\u002Fpixel-and-tonic","Pixel & Tonic","I led the design of Craft CMS and the products around it: Craft Commerce, the Plugin Store, Craft Console and Craft Cloud. I took them from sketches to high-fidelity prototypes in Figma, and built much of their front-end myself: CSS, JavaScript, Twig and PHP for Craft, and Vue.js and Nuxt for the Plugin Store and Craft Cloud.","Founding Designer","2015 → 2024","Bend, Oregon, USA (Remote)","\u002Fassets\u002Flogos\u002Fpixelandtonic.svg","P&T",{"type":14,"value":15,"toc":19},"minimark",[16],[17,18,7],"p",{},{"title":20,"searchDepth":21,"depth":21,"links":22},"",2,[],[24,82,125,160,201],{"path":25,"title":26,"description":27,"images":28},"\u002Fpixel-and-tonic\u002Fcraft-cms","Craft CMS","My journey started with ExpressionEngine around 2010, making websites and plugins, including Analytics, the plugin that got me invited to join Pixel & Tonic’s team of three to lead the design of Craft. Over the years I’ve worked on every major iteration of the control panel, from v2 to v5, alongside accessibility improvements and features like the Field Layout Designer, which is how content is modeled in Craft.",[29,35,42,48,54,60,66,70,76],{"src":30,"width":31,"height":32,"alt":33,"caption":34},"\u002Fassets\u002Fwork\u002Fcraft-cms@4x.webp",1888,1132,"The Craft CMS logo among enlarged pieces of its interface: buttons, a checkbox and a dashed add button","The Craft logo among pieces of its control panel: buttons, a checkbox, and the dashed add button.",{"src":36,"width":37,"height":38,"alt":39,"caption":40,"frameClass":41},"\u002Fassets\u002Fwork\u002Fmore\u002Fee-and-craftcms.webp",1924,1452,"ExpressionEngine and Craft CMS logos stacked together","Where it started: from ExpressionEngine plugins to Craft CMS.","bg-zinc-900 p-10 md:p-14",{"src":43,"width":44,"height":45,"alt":46,"caption":47},"\u002Fassets\u002Fwork\u002Fmore\u002Fcraftcms-v1.webp",2560,1440,"Craft 1, with its navigation in a horizontal bar at the top","Craft 1 (2013)",{"src":49,"width":50,"height":51,"alt":52,"caption":53},"\u002Fassets\u002Fwork\u002Fmore\u002Fcraftcms-v2.webp",1920,1141,"Craft 2.5, with its navigation in a vertical sidebar","Craft 2.5 (2015)",{"src":55,"width":56,"height":57,"alt":58,"caption":59},"\u002Fassets\u002Fwork\u002Fmore\u002Fcraftcms-v3.webp",2770,1820,"The Craft 3 dashboard, with the vertical sidebar","Craft 3 (2018)",{"src":61,"width":62,"height":63,"alt":64,"caption":65},"\u002Fassets\u002Fwork\u002Fmore\u002Fcraftcms-v4.webp",2600,1400,"The Craft 4 dashboard, with the vertical sidebar","Craft 4 (2022)",{"src":67,"width":62,"height":63,"alt":68,"caption":69},"\u002Fassets\u002Fwork\u002Fmore\u002Fcraftcms-v5.webp","The Craft 5 dashboard, with a lighter vertical sidebar","Craft 5 (2024)",{"src":71,"width":72,"height":73,"alt":74,"caption":75},"\u002Fassets\u002Fwork\u002Fmore\u002Fsketch-fld.webp",2048,1536,"Notebook sketches exploring the control panel layout system","Field Layout Designer: early sketch.",{"src":77,"width":78,"height":79,"alt":80,"caption":81},"\u002Fassets\u002Fwork\u002Fmore\u002Ffield-layout-designer.webp",2400,1363,"The drag-and-drop Field Layout Designer in the Craft control panel","Field Layout Designer: final design.",{"path":83,"title":84,"description":85,"images":86},"\u002Fpixel-and-tonic\u002Fcraft-plugin-store","Craft Plugin Store","The store for Craft plugins: one inside the control panel, to install and buy plugins without leaving Craft, and one online, for discoverability and SEO. I designed the experience and implemented the store’s front-end with Vue.js and Nuxt. In beta in 2017 with 125 plugins and launched with Craft 3 in 2018, it now hosts around 1,000, with over $9,000,000 paid out to developers through September 2025.",[87,93,97,103,109,113,120],{"src":88,"width":89,"height":90,"alt":91,"caption":92},"\u002Fassets\u002Fwork\u002Fmore\u002Fcraft-directory.webp",1472,920,"The Directory plugin listing popular Craft plugins with install buttons","Directory, my 2014 plugin for browsing and installing plugins from the control panel, three years before the Plugin Store.",{"src":94,"width":72,"height":73,"alt":95,"caption":96},"\u002Fassets\u002Fwork\u002Fmore\u002Fsketch-plugins.webp","Notebook sketch of a redesigned plugin index with icons and descriptions","Early sketch for managing plugins in Craft, taking inspiration from existing marketplaces.",{"src":98,"width":99,"height":100,"alt":101,"caption":102},"\u002Fassets\u002Fwork\u002Fmore\u002Fpluginstore-inapp.webp",2954,1990,"The Plugin Store embedded inside the Craft control panel","The in-app Plugin Store: install and purchase plugins without leaving the control panel.",{"src":104,"width":105,"height":106,"alt":107,"caption":108},"\u002Fassets\u002Fwork\u002Fmore\u002Fpluginstore-online.webp",2000,1250,"The online Plugin Store with plugin discovery sections","The online Plugin Store, improving plugin discoverability and SEO.",{"src":110,"width":105,"height":106,"alt":111,"caption":112},"\u002Fassets\u002Fwork\u002Fmore\u002Fpluginstore-plugin-details.webp","The SEOmatic plugin page in the online Plugin Store, with screenshots, pricing, and installation instructions","A plugin's page: screenshots, pricing, documentation, and installation instructions.",{"src":114,"width":115,"height":116,"alt":117,"caption":118,"frameClass":119},"\u002Fassets\u002Fwork\u002Fmore\u002Fpluginstore-plugin-activity.webp",886,1808,"Plugin page sidebar showing active installs, compatibility, and repository activity","Install counts and GitHub metrics instead of ratings, to show how active and popular a plugin is. Ratings and reviews came later, in October 2024.","max-w-[280px] mx-auto",{"src":121,"width":50,"height":122,"alt":123,"caption":124},"\u002Fassets\u002Fwork\u002Fmore\u002Fworkshop.webp",1279,"Three people laughing around laptops during a hands-on workshop","Helping developers publish their first plugins in Portland, where the Plugin Store beta launched.",{"path":126,"title":127,"description":128,"images":129},"\u002Fpixel-and-tonic\u002Fcraft-console","Craft Console","The companion to the Plugin Store: a place where customers manage their Craft and plugin licenses, order history, and billing info, and where plugin developers publish their plugins, connect their Stripe account to get paid, and track their sales.",[130,135,140,146,150,155],{"src":131,"width":31,"height":132,"alt":133,"caption":134},"\u002Fassets\u002Fwork\u002Fmore\u002Fconsole-login.webp",1840,"The Craft Console sign-in form over a colorful gradient background","Signing into Craft Console.",{"src":136,"width":50,"height":137,"alt":138,"caption":139},"\u002Fassets\u002Fwork\u002Fmore\u002Fconsole-licenses.webp",770,"Craft CMS license management table in Craft Console","Where customers manage their Craft and plugin licenses, orders, and billing info.",{"src":141,"width":142,"height":143,"alt":144,"caption":145},"\u002Fassets\u002Fwork\u002Fmore\u002Fcraft-console-plugins.webp",2514,1600,"Developer dashboard listing published plugins with installs and ratings","Where developers publish their plugins, connect Stripe, and track sales, keeping 80% of the revenue.",{"src":147,"width":78,"height":45,"alt":148,"caption":149},"\u002Fassets\u002Fwork\u002Fmore\u002Fconsole-orgs.webp","Account switcher in Craft Console listing a user's organizations","Organizations let agencies manage their projects, licenses, plugins, and billing as a team.",{"src":151,"width":50,"height":152,"alt":153,"caption":154},"\u002Fassets\u002Fwork\u002Fmore\u002Fconsole-orgs-billing.webp",810,"Organization billing screen with payment methods and order approval toggle","Organizations: billing.",{"src":156,"width":50,"height":157,"alt":158,"caption":159},"\u002Fassets\u002Fwork\u002Fmore\u002Fconsole-orgs-permissions.webp",1329,"Invite members modal comparing member and admin permissions","Organizations: inviting members with different levels of permissions.",{"path":161,"title":162,"description":163,"images":164},"\u002Fpixel-and-tonic\u002Fcraft-cloud","Craft Cloud","Hosting tailored for Craft, from the team behind it, so customers can publish their projects without worrying about DevOps. Announced in 2019 as a headless-only platform, customer feedback sent us back to the drawing board, and Craft Cloud became a scalable hosting solution for every kind of Craft site. I designed the experience from sketches to high-fidelity prototypes and implemented the front-end with Vue.js. Five years in the making, Craft Cloud launched in the summer of 2024.",[165,169,174,180,186,191,195],{"src":166,"width":78,"height":45,"alt":167,"caption":168},"\u002Fassets\u002Fwork\u002Fmore\u002Fcloudlogo.webp","Craft Cloud logomark drawn as a dashed outline","The dotted logo teasing Craft Cloud, announced in September 2019.",{"src":170,"width":50,"height":171,"alt":172,"caption":173},"\u002Fassets\u002Fwork\u002Fmore\u002Fcloud-v1.webp",1200,"Take #1: a grid of Craft Cloud project cards tagged Serverless or Self Hosted, grouped under Personal and Pixel & Tonic","Take #1: the headless-only concept, before customer feedback sent us back to the drawing board.",{"src":175,"width":176,"height":177,"alt":178,"caption":179},"\u002Fassets\u002Fwork\u002Fmore\u002Fconsole-v3.webp",2876,1478,"Take #2: the Craft Cloud projects index in Craft Console, with domains, production deployment status, environments and estimated cost for each project","Take #2: hosting tailored for Craft, plugins included, with each project’s deployment status and environments at a glance.",{"src":181,"width":182,"height":183,"alt":184,"caption":185},"\u002Fassets\u002Fwork\u002Fmore\u002Fcloud-deployments.webp",2880,2156,"Craft Cloud deployments for a project’s production environment: commits deployed on push from the main branch, with deploy times and statuses","The shipped deployments experience: push a Craft project to the Cloud with no DevOps.",{"src":187,"width":105,"height":188,"alt":189,"caption":190},"\u002Fassets\u002Fwork\u002Fmore\u002Fcloud-variables.webp",1251,"The Craft Cloud variables screen: system variables with no edit action, a masked sensitive value, editable variables, and new rows being added","Per-environment variables, with sensitive values kept secret.",{"src":192,"width":72,"height":73,"alt":193,"caption":194},"\u002Fassets\u002Fwork\u002Fmore\u002Fsketch-project-access.webp","Notebook sketch of the Craft Cloud project access screen, with database credentials and a button to request 24-hour access to an S3 bucket","Notebook sketch exploring the project access screen: database credentials and S3 access.",{"src":196,"width":197,"height":198,"alt":199,"caption":200},"\u002Fassets\u002Fwork\u002Fmore\u002Fprototype.webp",3024,1890,"Figma canvas with dozens of screens wired together with prototype arrows","The Figma prototype, borrowing ideas from products like Vercel, Netlify, and DigitalOcean.",{"path":202,"title":203,"description":204,"images":205},"\u002Fpixel-and-tonic\u002Fcraft-commerce","Craft Commerce","As the company and the team grew, I kept designing for Craft’s new products, like Craft Commerce, a powerful ecommerce platform built exclusively for Craft CMS, where merchants manage their products, orders, and store right alongside their content.",[206,210,215,220],{"src":207,"width":78,"height":79,"alt":208,"caption":209},"\u002Fassets\u002Fwork\u002Fmore\u002Fcraft-commerce.webp","Craft Commerce sales dashboard with revenue charts and recent orders","The Craft Commerce dashboard.",{"src":211,"width":105,"height":212,"alt":213,"caption":214},"\u002Fassets\u002Fwork\u002Fmore\u002Fcommerce-products.webp",1159,"The Craft Commerce products index listing bikes with prices, variants, attributes, and stock","The products index: prices, variants, attributes, and stock at a glance.",{"src":216,"width":105,"height":217,"alt":218,"caption":219},"\u002Fassets\u002Fwork\u002Fmore\u002Fcommerce-product-edit.webp",1084,"Editing a product in Craft Commerce, with the recent revisions menu open","Editing a product, with drafts and a full revision history.",{"src":221,"width":105,"height":222,"alt":223,"caption":224},"\u002Fassets\u002Fwork\u002Fmore\u002Fspoke-and-chain.webp",1253,"The Spoke & Chain demo bike store's Bikes page, with type and color filters next to product cards","Spoke & Chain, the demo bike store showcasing what a Commerce front-end can be.",1794580508140]