Building an experimental UI design tool
Back in December, I lamented the lack of social interaction and collaboration that is inherent in the design tools that we use everyday.
In contrast to our toolset we use to make our apps, designing together on Photoshop, Sketch, Affinity or whatever else you’re using, is essentially impossible.
The root of this problem is version control. Git just doesn’t work for our binary files that our tools create. If you move a single pixel in a Sketch document and commit the change to Git, it acts as if you’ve created a whole new file and can’t discern the change you’ve made. There’s other problems as well, most of these tools allow us to layout an interface but only with a fixed, bitmap representation. We can’t easily try them out and see how they feel without coding them up into prototypes.
In my spare time, I’ve been working on a new design tool that’s different. I’m calling it Bind.
Building Bind
It started as a shopping list. I wrote down a list of features that I’d ideally have if true collaborative, version controlled design was going to work.
Let me explain…
Priority #1 is that the implementation must be easy to version with Git. I want to harness the power of pull requests, branching and rewinding that Git gives us and apply it to design documents.
#2 — the focus of this tool is interface design. Not photo manipulation, not prototyping animation, just purely something to handle “how should we arrange this interface”. There’s plenty better tools for animation out there already.
#3 — native. For me it’s a dealbreaker if this is app that lives in the browser. The browser does not make a good environment for focussed, task intensive work and not just because Twitter is one tab away at all times.
#4 — GSS?! Yeah, you read that right. Grid Style Sheets is a project that uses the Cassowary Constraint Solver algorithm to lay stuff out. It was originally proposed in 2001 as an alternative to CSS but its origins go way back to the dawn of User Interfaces in the 1960s. It’s mostly employed today under the guise of Autolayout, the layout engine Apple uses for iOS apps.
GSS is radically different to CSS. Rather than floating objects together, wrangling with obscure flexbox rules and defining things like margins, padding etc to layout objects, you create relationships between elements and then let the constraint solver handle the rest.
This is it
Here’s a screenshot of the development build of Bind, demonstrating a simplistic version of something UI designers do a lot: lay stuff out in a grid.
I’ve got the basics working at the moment. You can (mostly manually) write HTML & GSS, you can save files into a .bind format which can be version controlled. At the moment, it feels very much like designing in the browser but with the added speed of using GSS.
The next big step is to automate as much of the constraint writing as possible so that you can build them incredibly quickly using an Interface Builder-like UI (shown below).
Once the constraint making interface is V1 complete, I think Bind will begin to become a viable thing to design your next UI in. It’s not for every scenario, it’s not a Sketch, Framer or Photoshop competitor at all — it’s for a pretty specific design process, but I’m excited about it and I think there’s a whole load of interesting things you could do with it.
I’ll be continuing to work on it in my spare time and hope to release something in the next few weeks, follow me on Twitter for updates.
Thanks for reading.
