is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe, Design Chair at Wildcard and co-founder of Kidpost. Previously, Khoi was co-founder and CEO of Mixel (acquired by Etsy, Inc.), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children. Refer to the advertising and sponsorship page for inquiries.+
Last year I wrote briefly about BoxBox, a new design tool then still in development with a focus on responsive layout of UI elements. That project has now become Subform, and it’s raising money over at Kickstarter. Here is their video:
The team behind Subform is notable for their ability to express their mission in uncommonly lucid, relatable language. A few worthwhile quotes that capture their aim and scope, first from their Kickstarter campaign:
Subform empowers designers to create responsive layouts, enforce consistent styles, build stateful components, and work with real content—all inside of a familiar, desktop-based visual design environment.
And second from this Medium article about the shortcomings of static design comps in contemporary digital product design.
Subform is emphatically a design tool, not a WYSIWYG code editor like Dreamweaver.
Subform’s focus is not on exporting production code (although it does export well-organized classes). Rather, code export is a way to create a standardized, versionable record of a UI design that preserves the designer’s intent, while making implementation and change-tracking easier for the developer.
We’ve started with HTML and CSS because they are mature, widely-used structural and styling languages.
So, essentially, the work product that Subform produces is not static PNG or JPG files like Sketch or Adobe Xd, or even a clickable prototype composed of constituent static images, like InVision or Principal. Instead Subform produces code, but for specification purposes, not for development purposes. Its goal seems to be to confer on designers the benefits of working in code—the ability to specify real values and behaviors that can be cleanly translated into the language of development—without having to write code. The user interface looks reasonably close to other design authoring tools, but its controls are heavily focused on the behavior of the design elements on the canvas. There seem to be a lot of values to input and controls to set.
The team makes prominent mention of drawing inspiration from CAD programs, which both intrigues and worries me. I’m not deeply familiar with that category of software, but I’ve never heard anyone say, “I wish our tools could be more CAD-like.” That said, allowing designers to be explicit about the behavioral intent of our designs is the next frontier for design authoring, so I’m excited to see how Subform solves this problem. (I’ve backed the project, but I have not been able to play with a working build yet.) At the very least, Subform looks set to broaden the conversation about the amount of control and specificity that designers should have at our disposal. That in itself will be a valuable contribution.+