The problems with design-code hand-off are still manifold. I’ve been doing this for like 20 years and the process of turning visual direction into interactive applications is still fraught. Here are a few hints and principles to help you understand where this problem space has evolved lately.
I’ve been a fan of user-friendly user-configurable information management web apps for a long time. I love AirTable, I loved (the now defunct) FieldBook even more. I’ve enjoyed the power of Notion.so, Quip, Slab, and Confluence as team wikis and collaborative spaces. I wrote an article a while about about putting your design system in a wiki which was all about creating organization structures and page templates to make your team’s product design system great inside of a wiki — a tool that is simple for non-developers to use.
I’ve worked on a few different design systems over recent years, and they all have unique properties that affect how we organized them. Specifically the most technically-ambitious design systems lived directly next to the code that consumed it, and the most design-ambitious systems needed to include hundreds of prototype page templates and variants of those pages for user testing and stakeholder review.
First let’s clarify definitions. I believe a Design System, a Component Design System, and a Pattern Library are all good names for the same thing, a web-based, documentation site that shows designers and developers what UI components are…
I build design systems for my clients. One recent project involved taking a couple static CSS and JS files and refactoring them into a flexible, well documented system composed of many individual components.
Why create a design system?
I find myself in the position of choosing many products for managing web development work in a small team. The goal is to prepare this team for scaling, but I don’t want to fall into the trap of over-optimization. This team should be able to effectively balance design and development. Sometimes I get really focused on choosing the absolute best solution and software for each problem. I regularly create spreadsheets comparing all the competitors in a solution space. So I thought I might share what I’ve come up with lately.
The risk of doing that level of research and planning…
I needed to figure out how to build a router for a single page app. I’ve used vue-router many times and it works really well for vue projects, but for my custom framework I needed to find a more imperative and functional approach. In my framework I am avoiding all configuration objects. So, I added two functions to the main app class:
navToRoute()— I also added a couple helper functions:
Design systems are a way of progressing, in stages, from concepts and prototypes to implementation and functionality. The modern app design process is one of delivering an interface in layers.
I personally do most of my work on responsive web apps, so I can’t really speak to iOS or Android layout code. When you build a web interface there are particular capabilities of the platform that are inherently limiting on design. The good news is that we have a ton of capabilities now on the web platform for building attractive and complex layouts, but you don’t really use those capabilities…
As a freelance designer who develops — I find myself having to cross multiple stacks and design and build products across many disciplines, apps, architectures and languages.
So, here are some of the web app “stacks” I’ve worked in over the past 2 years.
Let’s look back at a few decisions that I made when I started my freelance business and how they have turned out. I offer this as a long term review of the tools I’ve chosen as well as a little bit of historical accounting for future me.
I researched a lot of different options. I have a whole spreadsheet from last year when I researched the options.
Senior Software Engineer at Invisible Technologies, UX Design, Front-end developer, and world-travelling toddler-wrangler.