
Show HN: Subform, a UI layout tool - lynaghk
https://subformapp.com/
======
lynaghk
Hi HN, author here (along with RyLuke).

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](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](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...](https://medium.com/subform/dynamic-layout-at-design-
time-91d3bbda64e3)

~~~
aidanhs
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...](https://www.deconstructconf.com/2017/kevin-lynagh-choosing-
features), 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.

~~~
lynaghk
Thanks!

I should also say that I think CSS is great --- there's nothing like trying to
come up with your own solution to make you appreciate the tradeoffs that other
folks have made.

We had the advantage of starting from scratch in a more constrained problem
space of UI layout, rather than CSS's reflowable documents + UI sometimes + 20
years of backward compatibility.

Daniel Jackson's work on conceptual design
([http://sdg.csail.mit.edu/projects/conceptual/](http://sdg.csail.mit.edu/projects/conceptual/))
is a great starting place for thinking about this kind of thing.

------
TheAceOfHearts
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.

~~~
lynaghk
The runtime engine already free for non-commercial usage:
[https://github.com/lynaghk/subform-
layout/blob/master/LICENS...](https://github.com/lynaghk/subform-
layout/blob/master/LICENSE)

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.

------
iambateman
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.

~~~
switz

      display: flex;
      justify-content: center;
      align-items: center;

~~~
jonahx
[•] OP's point confirmed.

~~~
switz
He's been a frontend dev for 7 years -- he can learn _three_ new CSS
properties that he claims would solve a major problem of his.

Beyond that, all of the CSS that he writes on a daily basis would become more
robust once he learns a few more values (space-between, space-around, space-
evenly, flex: 1;, etc.).

~~~
lynaghk
Please give the OP the benefit of the doubt and assume that he or she is a
competent professional.

Here are some situations where _you_ may want to test your understanding of
centering in CSS:

\+ Center an absolute positioned element whose width and height are unknown
(e.g., it's an <img>).

\+ Does anything change if the parent element has padding?

\+ Create an element that's width 50%, height 50%, and center it in a parent
of unknown size.

\+ Do any of these solutions still work if all elements have a 10px border?

\+ Which of these solutions will remain centered if the parent has smaller
width/height than the child?

How confident are you in any of these solutions without being able to run
them?

CSS is quite complex. It was built up incrementally by reasonable, intelligent
people trying to solve hard problems.

If you're convinced that things are easy or that other people struggle simply
because they are lazy, then you'll never be able to learn and grow your own
skills.

<3

~~~
switz
You are right. My answer was lazy and not representative of real-world
scenarios. For that I apologize.

The article OP mentioned[0] is from 2011 and antiquated unless you're writing
for IE8 or below (which, of course, could still be a requirement).

I was merely trying to point out a better solution to OP's face-value problem
and suggest a new CSS pattern that I personally have grown to love.

@iambateman - feel free to email me if you want some help learning some of
these CSS techniques. I'll gladly walk you through them and answer any
questions that I can.

@lynghk - cheers, thanks for your comment.

[0] [https://css-tricks.com/centering-in-the-unknown/](https://css-
tricks.com/centering-in-the-unknown/)

~~~
iambateman
Thanks for this. The discussion has been fascinating. Just wanted to add that
the tweak-save-check-repeat pattern is awfully tedious and probably the bigger
issue.

Making changes directly on an element in a way that makes sense is the holy
grail, and remains an unsolved problem in my opinion. Browsersync can help,
and Webflow (et al) is trying to help, but none of the tools allow real direct
manipulation.

~~~
teleclimber
I also found this thread very interesting, and then I got here and thought I
recognized your username. Turns out you asked to try the alpha of my own tool
Cicerone ([http://cicerone.co](http://cicerone.co)). Hi!

Cicerone doesn't yet do the kind of thing discussed here because it is
originally designed to be a rich structured content editor with customizable
HTML/CSS components, as opposed to a design tool. However the more I use it
myself, the more I find that designing anything in CSS is the biggest PIA, and
it would be really cool if I could bring a little sanity there. So I've been
thinking a lot about how to do this. Stay tuned (but don't hold you breath,
it'll be a while.)

PS: and if you do get around to poking around with Cicerone, do let me know
your thoughts: good, bad, or random, I'm happy to nerd out on tools. Cheers
Stephen.

------
vogt
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

~~~
Breefield
They already raised 112k on Kickstarter
[https://www.kickstarter.com/projects/298226251/subform-a-
mod...](https://www.kickstarter.com/projects/298226251/subform-a-modern-tool-
for-digital-product-designer)

Note: I wish the kickstarter video was on the website linked here. The video
is very compelling.

~~~
tabdon
There is a video still on that page. You just have to scroll down. It's on the
second image.

------
huula
Nice, [https://huu.la](https://huu.la) implements a similar idea, but for web
pages -- for anyone that's interested.

------
news_to_me
Looks super cool!

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
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

[1] [https://www.sketchapp.com/](https://www.sketchapp.com/)

[2] [https://www.figma.com/](https://www.figma.com/)

[3] [https://framer.com/](https://framer.com/)

~~~
slama
The issue is that Subform is 3x the price of Sketch (which lets you keep your
current version when your license runs out) and 2x as expensive as Figma Pro
and Framer.

Subform is in beta, and the others are finished and offer free trials.

~~~
pavlov
Subform is more niche than Sketch or Figma. It's natural that the pro tool for
a limited audience is more expensive, just like AutoCAD costs 10x what
Illustrator does.

Also, Figma and Framer are backed by venture capital. They're going for
marketshare and don't need to make any money from licenses. I appreciate that
the Subform authors are upfront about their position on the order page:
they're two people who need to make a living, and you can choose to support
that or go elsewhere.

~~~
Bishonen88
Still, having the whole adobe suite costs ~$25/month (if you wait until a
promotion) Having the whole Jetbrains Suite costs ~$25/month Sublime costs
~$70 Leonardo (a drawing program similar to photoshop) $39 (paid once) -
developed by 1 person.

The cost of subform is truly on the higher side. I understand that it's
catered to a niche target group - how niche is it though? if it's managed by 2
people, 1000 customers would bring in $25.000 monthly before tax. I cannot
imagine that they aim for 1000 customers only, though.

~~~
pavlov
The market for tools that bridge design and development is large in theory,
but quite difficult to reach in practice. Designers are busy and overworked
already — they don't have the time nor interest to learn new tools that would
require major workflow changes. Developers are accustomed to all dev tools
being free, and they're deeply suspicious of anything that would tilt their
creative freedom over to the design side.

I tried — and failed — to make a living in this market with two products,
Neonto Studio [1] and React Studio [2]. Reaching one thousand subscribers was
a distant dream. Nowadays we just give away the base product, and the real
business is focused purely on customizing the software for enterprise in-house
development where the pain is much greater than with what one might call
"competent teams" (i.e. practically anyone reading HN).

[1] [http://neonto.com/nativestudio](http://neonto.com/nativestudio) [2]
[https://reactstudio.com](https://reactstudio.com)

------
jbryson3
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.

~~~
lynaghk
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.

~~~
austinkhale
Why not open it to a free trial? I’d like to try it out as well. I don’t like
the whole refund song & dance game.

~~~
lynaghk
We need to focus on folks who're sufficiently motivated to solve this problem.
If a refundable $25 is too high a hurdle, it's unlikely those folks will
actually attempt to use the tool, reflect on their workflow, or otherwise help
us build a compelling product.

~~~
ccleve
Disagree.

First, I won't say your product is a commodity, but there are many, many, many
layout and design tools out there. I'm not going to pay $25 to evaluate each
one. It's as much about the sign-up-and-hand-over-the-credit-card process as
it is about the money.

Second, the fact that it's refundable doesn't matter. I'm never going to ask
for a refund. The hassle and the back-and-forth isn't worth $25 to me.

Third, I'm willing to pay _way_ more than $25 if your tool actually solves my
problem. There are tons of UI tools out there, but I haven't found the _one_.
It's totally worth it to me if you save me hours of work.

So don't add any friction to the process. Feel free to time-limit or cripple
the tool so I have to pay to do any real work, but don't waste my time, and
don't make me pay you for the privilege of sinking a bunch of my time into
determining if your product works or not.

Find a way to do free trials, and do it in such a way that your costs are
minimal. It's worth it.

~~~
subatomic
I don't understand the downvoting going on here. Even if you don't agree with
the comment, it's still a valid point.

------
myguysi
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.

------
acmecorps
So, what's the difference between this and Webflow?

~~~
lynaghk
Webflow is an web-specific IDE.

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.

~~~
deltron3030
Webflow is only useful for landing pages and classic websites and blogs, but
even landing pages are gaining interatcive app like features, like integrated
checkout or onboarding features. It doesn't make much sense seperating web and
app development from a design perspective anymore going forward. A landing
page is an app.

With this in mind, how could Subform fit into a modern workflow, or how would
a end to end workflow that leverages Subform on all platforms (web, mobile,
desktop) look like?

What I'm looking forward to is a living stylable styleguide that includes
layouts and translates into code, like a visual Babel.

------
porker
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.

------
sandGorgon
Is this similar to Pagedraw ? [https://pagedraw.io/](https://pagedraw.io/)

------
kowdermeister
Kudos for releasing it on Windows too, too many desing / UX tools simply
exclude it.

Also, I appreciate the honesty here: [https://subformapp.com/why-not-
subform/](https://subformapp.com/why-not-subform/)

------
nickreese
Looks super useful. Great work.

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
Thanks, Nick. You're not the first person to mention this, we'll take a crack
at reworking it. ;)

------
dustingetz
[https://github.com/lynaghk/subform-
layout](https://github.com/lynaghk/subform-layout) (with CodePen link!)

------
_mhr_
I've been subscribed to your newsletter for a long time - years, I think - and
it's wonderful to see your hard work pay off!

------
rail4you
Any education discount? It looks like a good tool for teaching UX. Sketch and
other many UX tools have education discount.

------
asdsa5325
iOS only?

~~~
lynaghk
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.

~~~
jakejscott
What language did you write it in?

~~~
lynaghk
The desktop app is mostly Clojure, with a handful of Rust for OS interop for
things like the clipboard access and file watching. The embeddable engine is
written in Rust.

