Subform - The new kid on the block in the digital design world

Posted by Toby Burkill

Toby Burkill

Toby Burkill

Share This

What is Subform?

If you follow me on any social media channel you’ve probably heard of Subform (I’ve not stopped banging on about it). For those of you that haven’t, Subform is a new piece of design software that popped up on Kickstarter back in October, with the rather grand aim of revolutionising digital design.

I should state right now that this is not a comprehensive review of Subform, merely an introduction to it and its potential. I hope to post further updates as I delve deeper into the app and share my experiences into this new software.

Subform is a completely different way of thinking and working within digital design, which is more aligned with CAD packages and how web developers code rather than how current design tools work - many of which were initially created for print based graphic design - i.e. not for designing digital products. Rather than following the industry norm of designing for multiple fixed screen sizes, Sublime’s key concept is about designing components with rules. These rules are things like padding around the parent object or the margins that surround it that defines how it is placed on screen.

Digital products (websites, apps etc) are no longer designed with a “one screen fits all”. They appear on multiple screens at varying sizes but are expected to deliver the same experience and customer journeys while often all being from the same code-base. Given that it is 2016, it’s scary how many designers haven’t grasped that digital design is, let’s face it, entirely different to print and graphic design. Websites are no longer static designs that will look exactly as they created them in Sketch or, God-forbid, Photoshop (the *photo-editing* software!)...but this blog post was not intended as a rant aimed at other creatives’ workflows (honest)...so let’s get back on point. So, Subform.

Features

Responsive layout engine

The main feature of Subform is its Layout Engine. This enables artboard sizes and content to be easily changed, which in turn updates the design automatically, no need to push pixels around or update every page individually, as elements are designed with rules that tell Subform how the component should interact with other objects around it. Where this kind of functionality really comes in handy for our digital agency workflow is during client feedback loop, where a design can go through multiple changes. Rather than having to delete an element and then manually move up every other element on every page that’s affected by the change, with Subform we now only have to do it once and let Subform handle the rest. This feature is the one that I’m most excited about and will have the biggest effect on my own workflow.

Datasets

Subform makes heavy use of datasets - a fancy word for structured content/data - and introduces designers to the notion of storing content outside of design file. An entire design can be updated from within Subform’s data panel, external JSON file or even Google Sheets (Subform developers are currently in discussion with alpha testers as to which input method would work best - more on this below).

Dynamic content updates will enable things like button names, product descriptions or even menu items to be updated instantly, across all pages and components. When this is coupled with the layout engine, even if the content length changes the design will expand/shrink itself to accommodate the new content without having to worry about shifting everything around again! How awesome is that!?

Stateful components and classes

The stateful components feature is where Subform really outshines other design software. Take for instance a blog card, each one will have different content and potentially different categories requiring different styling or colours.

With a current design tool such as Sketch, you’d have to design a tile for each of the different categories. If you wanted to change the overall styling of the tile, it would require going through every design component and updating them one by one - what a pain! But with Subform, you only need to design the base tile style once and then add on different classes for each of the categories.

These classes simply override any parts of the base style that are different and if the card design needs updating in the future you’ll only update the base styling and let Subform update any components and pages affected.

Live preview across multiple devices

Something I used to love about Sketch3 in its first releases was the ability to live preview designs at 100%. This was great when working with two monitors as I could work up close and in detail (at 200%) and watch in real time, updates being propagated on my second screen at 100% - just as a user would see them.

Since Sketch released the companion Mirror app (which I personally find frustrating) and also removed the much loved original live preview functionality I’ve been waiting for something to fill the void. Subform looks to fulfil this role with a feature that synchronises designs to multiple devices simultaneously – for instance like our device wall.

Early access to Subform while it’s under development

As one of the Kickstarter backers I’ve had early access to Subform in its current Alpha state. The Subform team are really keen to get input from the Kickstarter community who helped fund the project, so they created a backer-only forum where everyone is chipping in with ideas, bugs, and workflow ideas.

Even though “too many cooks can spoil the broth”, it’s great to have hundreds of users coming together to really push Subform to its limits and explore new ideas. It will be down to Kevin and Ryan (Subform creators) to pick and choose features that will make it to the final release version, whilst still staying true to its core concept.

Where I see Subform fitting into my workflow

Workflow

Currently I’m still relying on Sketch as my main design software but as new releases of Subform become more and more stable and features are added I can see this falling into a post initial-designs step. Even though the early phases of designing a website are focused on content, IA and user journeys, many clients want to see some form of visuals and initial ideas to help them imagine the end product. Subform feels like a great app to speed up consistent designs but not as an experimenting workspace like I use Sketch for with my discarded elements of earlier designs scattered to the sides of the artboards. 

My wish for what Subform can become and some key hurdles for the app

Things I’d love to see Subform include is the ability to write plugins that will allow smarter users than myself to create extra functionality to really finesse a user’s niche workflow. A great start would be adding the functionality to export designs to prototyping tools, like Sketch and Invision already do.

One major hurdle for uptake I can foresee is its user interface. Although it’s already quite stripped back it’s also a very big change to what designers are currently used to. Even when Sketch3 was released a lot of the UI was very similar to Adobe CC as that’s what they’re target audience was used to. To get the new users they needed to make it as easy a transition as possible so designers felt comfortable at making that leap.

When I first used Subform it was a steep learning curve and I’m still learning new things everyday but the difference for me is that I’m already invested in it. Being an original Kickstarter backer I’m more likely to give this a serious chance to become my new design tool. Whereas to someone looking at it after it’s released in the future it would be a big ask to make them learn a whole new interface just to do simple tasks such as create a square or change a colour. Regardless of how great the rest of the features are if people struggle to accomplish simple tasks it could be make or break for them.

Subform still has a long way to go before it’s ready to be released to the big wide world but so far it’s had a very promising start and I’m looking forward to exploring more ways I can incorporate it into my core tools for digital design.

More reading

The creators of Subform have written a few great posts: https://medium.com/subform