Show HN: Subform, a UI layout tool | Hacker News Reader

Show HN: Subform, a UI layout tool

subformapp.com

219 pointslynaghk61 comments

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

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

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.

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/) is a great starting place for thinking about this kind of thing.

The layout engine looks really cool!

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.

How is the cost for iOS/Android integration?

We don't have a license fee or anything like that.

Right now we're working directly with everyone in the beta to understand their process and make things work.

We've added specific features like CSS/HTML export that people wanted for their workflow, and we've also spent a lot of time on Skype with folks to help them change their "throw pictures over the wall" process to ones that help them better bring their designs to production.

I'm exploring in build a UI (https://talk.remobjects.com/t/potential-way-to-do-almost-cro...) that probably will benefit for have a custom layout engine. I have looked at yoga, but the example in your site look more compelling.

The use case is "simply". I need something that do the layout calculations for me and I take care of call the controls...

You can play around with the engine in code here: https://github.com/lynaghk/subform-layout but the best way to get a sense of things is to use it from within Subform.

Curious to hear more about your use case and what you think of the existing API/demos --- definitely open a Github issue or start a topic on the Subform discussion board after you get a chance to try things out.

Would you consider this to be direct competition for something like Sketch?

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.

The runtime engine already free for non-commercial usage: https://github.com/lynaghk/subform-layout/blob/master/LICENS...

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.

The demos and engine are free to use and modify for non-commercial use right now. The repo is here: https://github.com/lynaghk/subform-layout

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.

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

[•] OP's point confirmed.

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

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.

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/

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.

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

Shoutout to you for responding graciously to criticism. It's such an important skill.

A thought experiment:

1+ left/top 50% + transform with x/y -50%

2+ No, it's absolute positioned. Oops, unless you mean with flexbox, then no, it's fine.

3+ (first answer, or flexbox centering) Why is this thing 50% wide/high? Seems an odd choice (or a setup to prove a point?)

4+ I use box-sizing: border-box, not a problem, same as #2.

5+ None of them? (does not seem physically possible, probably just crop/hide inside element. Or tell the user they are holding it wrong)

After doing this, it appears that list was just to force a point...

Wow, well said.

display: flex; margin: auto;

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

They already raised 112k on Kickstarter https://www.kickstarter.com/projects/298226251/subform-a-mod...

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

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

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

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.

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/

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

[3] https://framer.com/

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.

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.

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.

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 [2] https://reactstudio.com

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.

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.

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.

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.

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

I love this attitude. I backed the Kickstarter last year, because I feel the industry is greatly lacking in quality tools.

What you guys have built is worth far more than $25.

In lieu of shelling out $25, I took the engine for a spin to get an idea of the layout model. For others that might be interested:

https://paul.bluereboot.net/subform/

Reminds me of HTML tables and GroupLayout. Wasn't sure how to specify min/max sizes.

That's a fair perspective, but that doesn't ring true for me.

I've spent money on Spotify, Prime, Patreon (to support local podcasters and niche YouTube content), Twitch streamers, software (Sketch, Lightroom), Marvel/Invision... all because I got to sample the software or produced content and want to support the artist/developers.

Anyways, good luck. Competition and subsequent innovation is always a good thing.

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.

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

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.

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.

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?

I'm wandering the same as well

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.

Is this similar to Pagedraw ? https://pagedraw.io/

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/

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.

Thanks, Nick. You're not the first person to mention this, we'll take a crack at reworking it. ;)

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

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!

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

iOS only?

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.

What language did you write it in?

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.

Reply on news.ycombinator.com