We launched Subform on Kickstarter in 2016, but are just now opening up our beta to the public.
Subform's focus is on layout. Dynamic layout systems are pretty functionally complex, but creating them is more of a visual process that really benefits from direct-manipulation and a tight feedback loop. (Rather than the endless tweak-reload/recompile-tweak-reload/recompile cycle)
We started with flexbox, but ended up designing our own layout system, which is both simpler and more expressive.
This seems like a good place to say I really enjoyed watching the video of your talk from Deconstruct Conf 2017 (https://www.deconstructconf.com/2017/kevin-lynagh-choosing-f..., referenced in your medium post) about your design process in removing CSS - gave me some nice insight into the thought that should go into the complexities you expose to users.
Definitely worth a watch for people interested in designing software for use by other people.
I personally think we're long overdue for a Yoga alternative that implements CSS Grid like semantics consistently across Web and React Native. Being able to reuse the same fluid, declarative 2d layout for your responsive website to implement your native mobile/tablet UIs would be a killer feature IMO.
I'd love to see the project turn into an actual open source project with a compatible license though, as opposed to just a tech demo with strict licensing requirements. Part of this is me just wanting to use it for free, but I do also believe building an open-source community around your layout engine can drive adoption of your product and help you improve the layout engine itself at a much faster pace than if it remained closed.
Not in the target demographic, but it certainly looks interesting. Over the years I grew used to CSS, and generally find it's good enough for my needs.
I find it incredibly refreshing to see you guys openly point out use-cases where the tool might not be a good fit.
Any plans to license the layout engine? If you decide to go down that path, I'd ask you to consider allowing free non-commercial usage. I probably wouldn't consider paying for a library unless I got to try it first, but if it's a good fit it can be well worth the cost. e.g. At my previous job we ended up buying a Highcharts license by my suggestion, since I'd had positive prior experiences and it was a good fit for our problem.
Here's one complaint I have with some designers: they always design for the perfect scenario. They don't consider what should happen when a value is too long or short, as well as what should happen when dealing with an empty collection, or worse, a large one. Having a way to specify all those kinds of variations would be absolutely amazing.
Re: designing for the perfect scenario, I'd say devs are guilty of that too --- I'm in Australia right now, and it's obvious when an app or site has only been tested on localhost =)
Specifying dimensions in the "application state space" along which to vary is a tricky problem. It's not clear to me how much of that can work in a GUI tool vs. programming languages and stuff like Clojure.spec, property-based testing, concolic testing, etc.
The happy path issue is definitely one of the big pain points in the "designer throws mockups over the wall" workflow. Simulation of the production medium in the visual design tool can help a bit, but the real solution is to get designers working in the production medium. That's easier said than done, of course. (And ultimately more of an organizational/practice issue than a tooling one.)
First, this tool is brilliant. I’ve been a Front end dev for 7 years and I still google “centering in the unknown” every time because it’s easier than remembering the properties. The whole process of being expressive in HTML and CSS is so broken and the tools today are broken right along with it. Thanks for trying to make it better!
Second, charging for a beta...what a great idea. I’ve signed up for 7 competitors this week and can’t remember their names and will never again login. But if I have to decide this problem is big enough to make a monthly commitment, I’m damn sure going to log back in to get my money’s worth. I hope y’all crush it. Thanks.
I consider myself a big fan of design tools. I really want to try yours, but I can't bring myself to pay for a beta. I might consider a paid trial ($5/2 weeks) or something, since I appreciate your transparency and cause. Just some feedback is that despite the transparency and your willingness to refund no questions asked, I still am having trouble getting over the mental barrier
I'm curious why you decided on a monthly subscription model. Apart from support and updates, what is the ongoing value? Other desktop tools like this I've seen (Sublime Text, Paw, xScope) are available for a bit higher, one-time price.
I believe they're aligning themselves to revenue models similar to Sketch[1], Figma[2], Framer[3], and a quite a few other competitors in the same space
Looks like a well thought out tool. Though to get me or my team to adopt it I'd need at least a sprint or two of a free trial. I hope it gains adoption. It probably says more about me than the business strategy, but I don't think I've ever bought a tool that I couldn't try or play with first for free.
What I'm not sure it does, and would hope it does, is provide a WYSIWYG way of CSS layout. I.E. under the hood it's using css3 to layout, but in a way I don't have to think about it, and could output it after I get the design the way I want.
Check it out, and if it doesn't work for your team we'd be happy to issue a refund.
Re: WYSIWYG CSS, we initially started w/ flexbox but things like the difference between margins, padding, and absolute positioning confused tons of designers coming from Photoshop/Sketch.
We ended up implementing our own layout system, which can be used directly in production (if you want to ship a runtime), otherwise it's possible to map layouts to something like flexbox+grid or native engines if your designers stay away from things that are hard to implement on those platforms (e.g., aspect ratio).
Our goal is to help people think about layout directly, not try to hide the inherent complexity from them.
At the end of the day, most all digital products require close collaboration between designers and implementors.
Looks great and I may well give it a try. I have one question though which I can't seem to find any mention of from the site - is there any way to define breakpoints for responsive layouts?
Speeding up laying out elements is really nice but it's difficult to communicate responsive designs to production without having to duplicate artboards.
It's great for production work where you are explicitly targeting the web --- we've actually pointed some of our Kickstarter backers to Webflow after they explained their needs and we realized it'd be a better fit for them.
Subform doesn't target a specific platform.
Its focus is to help folks explore layouts and design ideas easily.
If you are familiar with industrial design, an analogy would be that Subform is somewhere between SketchUp or Inventor/SolidWorks, and Webflow is closer to a CAM tool.
Realistically, how is it any different than any of these types of tools? How does Subform differ from Webflow and why should Webflow users switch? Or is it more of a "hope the customer doesn't know the other options yet" approach?
Very pleased to see something come out of the Kickstarter. I was very impressed by the demo at the time but didn't back it having been burned by too many projects that went nowhere.
This doesn't look like it does everything in the Kickstarter video, but keen to be proven wrong!
Edit: Also re your website, a comparison with other tools to highlight what Subform can do that others (Invision Studio etc) can't would be very helpful.
From a copywriting perspective, I think you can you to find a more descriptive/useful sub headline. I've read the page and I get and need what your service does, but I still have no idea what the sub headline means.
Subform is a desktop app, it works on Windows and OS X.
The runtime layout engine is very low-level and essentially just does arithmetic, it can probably be made to run easily on any platform w/ an LLVM backend.
[+] [-] lynaghk|8 years ago|reply
We launched Subform on Kickstarter in 2016, but are just now opening up our beta to the public.
Subform's focus is on layout. Dynamic layout systems are pretty functionally complex, but creating them is more of a visual process that really benefits from direct-manipulation and a tight feedback loop. (Rather than the endless tweak-reload/recompile-tweak-reload/recompile cycle)
We started with flexbox, but ended up designing our own layout system, which is both simpler and more expressive.
For HN folks who like thinking about conceptual design: https://medium.com/subform/why-not-flexbox-ddbe60396163
Or if you just want to check out the layout system in code, there's a WebAssembly build: https://github.com/lynaghk/subform-layout
Beyond the layout semantics, we've also spent quite a bit of time on the user experience for adjusting layout and hierarchy in the app: https://medium.com/subform/dynamic-layout-at-design-time-91d...
[+] [-] aidanhs|8 years ago|reply
Definitely worth a watch for people interested in designing software for use by other people.
[+] [-] lewisl9029|8 years ago|reply
I personally think we're long overdue for a Yoga alternative that implements CSS Grid like semantics consistently across Web and React Native. Being able to reuse the same fluid, declarative 2d layout for your responsive website to implement your native mobile/tablet UIs would be a killer feature IMO.
I'd love to see the project turn into an actual open source project with a compatible license though, as opposed to just a tech demo with strict licensing requirements. Part of this is me just wanting to use it for free, but I do also believe building an open-source community around your layout engine can drive adoption of your product and help you improve the layout engine itself at a much faster pace than if it remained closed.
[+] [-] mamcx|8 years ago|reply
[+] [-] tootie|8 years ago|reply
[+] [-] TheAceOfHearts|8 years ago|reply
I find it incredibly refreshing to see you guys openly point out use-cases where the tool might not be a good fit.
Any plans to license the layout engine? If you decide to go down that path, I'd ask you to consider allowing free non-commercial usage. I probably wouldn't consider paying for a library unless I got to try it first, but if it's a good fit it can be well worth the cost. e.g. At my previous job we ended up buying a Highcharts license by my suggestion, since I'd had positive prior experiences and it was a good fit for our problem.
Here's one complaint I have with some designers: they always design for the perfect scenario. They don't consider what should happen when a value is too long or short, as well as what should happen when dealing with an empty collection, or worse, a large one. Having a way to specify all those kinds of variations would be absolutely amazing.
[+] [-] lynaghk|8 years ago|reply
Or am I misunderstanding your question?
Re: designing for the perfect scenario, I'd say devs are guilty of that too --- I'm in Australia right now, and it's obvious when an app or site has only been tested on localhost =)
Specifying dimensions in the "application state space" along which to vary is a tricky problem. It's not clear to me how much of that can work in a GUI tool vs. programming languages and stuff like Clojure.spec, property-based testing, concolic testing, etc.
[+] [-] RyLuke|8 years ago|reply
The happy path issue is definitely one of the big pain points in the "designer throws mockups over the wall" workflow. Simulation of the production medium in the visual design tool can help a bit, but the real solution is to get designers working in the production medium. That's easier said than done, of course. (And ultimately more of an organizational/practice issue than a tooling one.)
[+] [-] iambateman|8 years ago|reply
Second, charging for a beta...what a great idea. I’ve signed up for 7 competitors this week and can’t remember their names and will never again login. But if I have to decide this problem is big enough to make a monthly commitment, I’m damn sure going to log back in to get my money’s worth. I hope y’all crush it. Thanks.
[+] [-] switz|8 years ago|reply
[+] [-] wunderg|8 years ago|reply
[+] [-] vogt|8 years ago|reply
[+] [-] Breefield|8 years ago|reply
Note: I wish the kickstarter video was on the website linked here. The video is very compelling.
[+] [-] huula|8 years ago|reply
[+] [-] news_to_me|8 years ago|reply
I'm curious why you decided on a monthly subscription model. Apart from support and updates, what is the ongoing value? Other desktop tools like this I've seen (Sublime Text, Paw, xScope) are available for a bit higher, one-time price.
Just curious what your guys' thought process was.
[+] [-] kidfiji|8 years ago|reply
[1] https://www.sketchapp.com/
[2] https://www.figma.com/
[3] https://framer.com/
[+] [-] jbryson3|8 years ago|reply
What I'm not sure it does, and would hope it does, is provide a WYSIWYG way of CSS layout. I.E. under the hood it's using css3 to layout, but in a way I don't have to think about it, and could output it after I get the design the way I want.
[+] [-] lynaghk|8 years ago|reply
Re: WYSIWYG CSS, we initially started w/ flexbox but things like the difference between margins, padding, and absolute positioning confused tons of designers coming from Photoshop/Sketch.
We ended up implementing our own layout system, which can be used directly in production (if you want to ship a runtime), otherwise it's possible to map layouts to something like flexbox+grid or native engines if your designers stay away from things that are hard to implement on those platforms (e.g., aspect ratio).
Our goal is to help people think about layout directly, not try to hide the inherent complexity from them. At the end of the day, most all digital products require close collaboration between designers and implementors.
[+] [-] myguysi|8 years ago|reply
Speeding up laying out elements is really nice but it's difficult to communicate responsive designs to production without having to duplicate artboards.
[+] [-] acmecorps|8 years ago|reply
[+] [-] lynaghk|8 years ago|reply
It's great for production work where you are explicitly targeting the web --- we've actually pointed some of our Kickstarter backers to Webflow after they explained their needs and we realized it'd be a better fit for them.
Subform doesn't target a specific platform. Its focus is to help folks explore layouts and design ideas easily. If you are familiar with industrial design, an analogy would be that Subform is somewhere between SketchUp or Inventor/SolidWorks, and Webflow is closer to a CAM tool.
[+] [-] tsumnia|8 years ago|reply
[+] [-] swaggyBoatswain|8 years ago|reply
[+] [-] porker|8 years ago|reply
This doesn't look like it does everything in the Kickstarter video, but keen to be proven wrong!
Edit: Also re your website, a comparison with other tools to highlight what Subform can do that others (Invision Studio etc) can't would be very helpful.
[+] [-] sandGorgon|8 years ago|reply
[+] [-] kowdermeister|8 years ago|reply
Also, I appreciate the honesty here: https://subformapp.com/why-not-subform/
[+] [-] nickreese|8 years ago|reply
From a copywriting perspective, I think you can you to find a more descriptive/useful sub headline. I've read the page and I get and need what your service does, but I still have no idea what the sub headline means.
[+] [-] RyLuke|8 years ago|reply
[+] [-] dustingetz|8 years ago|reply
[+] [-] _mhr_|8 years ago|reply
[+] [-] rail4you|8 years ago|reply
[+] [-] asdsa5325|8 years ago|reply
[+] [-] lynaghk|8 years ago|reply