For up-to-date information on Subform, please visit our website. 

You can also follow us on Twitter, Facebook, and Dribbble.

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.

Spend more of your time designing—instead of juggling multiple artboards and tediously propagating changes everywhere. The fact is, you’re creating complex interfaces, not print campaigns. It’s time to move beyond illustration and photo manipulation software.

 

 

Modern UIs aren’t static, they have to smoothly adapt to a slew of different device and screen sizes. But our current tools were built for designing fixed-size layouts: magazine spreads, posters, etc. Not surprisingly, simulating a digital product in print-oriented tools is a nightmare. You can create multiple artboards to represent different screen sizes, but that’s a ton of extra work.

Instead of duplicating artboards and pushing pixels for every screen size, let Subform do the drudge work with its automatic layout engine. Think of it like a paragraph’s “left”, “center”, “right”, and “justify” settings, but applied to everything in your design.

When the artboard changes size—or you add or remove elements—Subform follows your instructions to automatically adjust the layout in real-time. You can resize the artboard on the fly and instantly see how your design adapts to different screen sizes.

This also means that Subform can live preview your design on multiple devices at the same time, with each device rendering the layout appropriate for its size.

 

Interfaces often have design elements that need to be similar, but not exactly the same. Imagine a typical form: every field should look alike, but errors need a unique border stroke color, disabled fields need a different opacity, and so on. 

This is tough do to with current design tools. Elements can typically share all of their styles—every border, opacity, fill, etc.—or none of them. In practice, this means spending a lot of time trying to manually keep style changes consistent across different elements.

In Subform, elements can have multiple style classes. A class can define a bunch of different style properties—or just a single one. You can stack classes together on an element to compose any combination of styles.

Like a living style guide, classes let you define universal properties for a UI in one place. When you make a design change, Subform does the hard work of instantly propagating that change everywhere the class is used.

With only static symbols or smart objects in your toolset, it’s tough to design components that behave realistically. Subform’s component system is a leap forward: with multiple states, variable content, and responsive layout, components in Subform work just like they do in production. 

Expressive states. Components aren’t exact copies. They might have stylistic variations: like a background color that adjusts to show an “active” or “disabled” state. They might have structural variations: like a dropdown menu that show/hides.

Subform components can have an unlimited number of different states. Instances can be toggled between states with a single click or hotkey, so you can explore and edit states in the context of your design.

Variable content. Individual component instances often need to vary their default content. Think of a button that needs to change labels, or a bunch of table row components, each showing unique results.

In Subform, text and image data can vary individually, without affecting any other component instances. Any style changes still propagate everywhere.

Responsive layout. It’s not uncommon for a component to change dimensions or layout properties depending on where it’s placed. Maybe it should be full viewport width on mobile, but a fixed size on the desktop.

Components in Subform work hand-in-hand with the layout engine. Layout properties can change based on external parameters, like the width of it’s parent element or the length of a text string.

When creating design mockups, you’re stuck manually varying placeholder content. This is tedious, especially for data-dense UIs like lists and tables. What’s worse, it’s all too easy to cherry-pick idealized content that masks problems with a design. 

Subform makes it easier and faster to work with real-world content. Every text box and image can draw from a collection of data, more like how digital products actually work. The content inside of an element can be varied with a single hotkey, making it easier to check a design before it goes to production.

In Subform, your layout updates with content. When content changes, elements adapt—like a button that gets wider to accommodate longer text.

Reusable components like buttons, menus, and tables preserve their design integrity, even as the data changes in their individual instances.

 

Professionals need reliable, trustworthy tools. That’s why Subform is a desktop application that can be used offline. Stay in control of your workflow—update to new versions of Subform (or don’t) only when it’s convenient for you.

Subform doesn’t lock your work behind a subscription fee, either. You can always export your designs as HTML/CSS or static images, whatever fits best into your workflow.

 

 

Ryan Lucas (@ryanlucas) has over 20 years of experience in human-centered product design. Among other things, he has designed a digital music service, an event platform for competitive sport, and an analytics interface for wind farms. His work has been featured by the New York Times, Fast Company, and Wired. Ryan holds a B.S. in Industrial Design from Virginia Tech.

Kevin Lynagh (@lynaghk) has built technical interfaces for bioinformaticians, weather analysts, and diabetes specialists. He has been invited to speak about data visualization and functional programming on four continents (Antartica + Africa, plz get in touch). Kevin has a B.S. in Physics from Reed College.