16

AMA: Ryan Lucas, Subform

almost 7 years ago from , Currently working on @subformapp

Hey, DN. I'm Ryan Lucas, co-creator of Subform—a new tool for digital product design.

Kevin Lynagh and I have been developing the app over the last year, exploring and testing lots of ideas. We're excited about what we've come up with. Of course, everybody's process and workflow is a little different, so it's been great to have so much interest and feedback from designers all over the world.

You can read more about Subform and check out some demos on our website. We're also regularly writing articles with some of our thoughts on building the next generation of digital product design tools. And there are some fun quick demos on our Dribbble account.

And, of course—compulsory plug—if you're interested using Subform, please consider backing it on Kickstarter.

I'll start answering questions at 8:30am PST tomorrow (October 26th). Ask me anything!

27 comments

  • Anthony MoralesAnthony Morales, almost 7 years ago

    I produce most of my designs and prototypes in code. I'll start in Sketch but I don't stay there for very long. I'd love to use a visual tool and I've tried many. Often I find the curve for learning the models of apps like these is just as high as learning HTML/CSS and a little Javascript. With code I get the added bonus of an interactive prototype I can hand to a client, tester or developer to work with. Is this something you've experienced, or heard before? If so, is it something you addressed in designing Subform? Or Is Subform aimed at a different segment? Thanks - btw, I'm really excited about Subform.

    8 points
    • Ryan Lucas, almost 7 years ago

      It's a great question, Anthony. I think that is definitely an issue with high-fidelity prototypes or mockups. It's easy to spend a ton of time building and tweaking things. You end up with an artifact that isn't really useful, because it'll still have to be rebuilt in a production environment. For all that time, you could have just gone to code in the first place.

      I've done a lot of front-end development. To me, designing in code/the browser is always lacking that visual, experimental direct manipulation element. But direct manipulation tools don't work like the actual production products do and they are really slow for making a lot of iterations.

      This has all definitely been on our mind as we've developed Subform. We're trying to unite the worlds a bit, but without trying to be a WYSIWYG tool or code generator. We want to strengthen the communication pathways between designers and engineers and reduce product development time. Ultimately, Subform is just creating artifacts that are more useful to that process, rather than entire facsimiles of an app like prototyping tools are capable of.

      3 points
      • Anthony MoralesAnthony Morales, almost 7 years ago

        Thanks Ryan!

        "We want to strengthen the communication pathways between designers and engineers" - Yes please.

        I agree, WYSIWYG/Code generation is not the answer. Now I'm curious about the artifacts Subform generates to facilitate communication. In my dreams it would spit out not only the screens but a catalog of the system. Fonts, colors, widgets, rules.

        0 points
        • Ryan Lucas, almost 7 years ago

          Yeah, that's the goal. And make it useful to teams (not just designers and developers, but PMs, marketers, etc) in the process.

          1 point
  • Taurean BryantTaurean Bryant, almost 7 years ago

    In the (hopefully unlikely) event of the Kickstarter not meeting its goal, will you still pursue building this app through some other means? Subform hits almost every single pain point I have.

    5 points
  • Jon MyersJon Myers, almost 7 years ago (edited almost 7 years ago )

    Ryan, thanks for taking the time.

    It's an exciting time to be a digital product designer with the number of tools emerging to support our work.

    Two questions.

    Aside from responsive design and designing with data, I'm curious about what differentiates Subform from other design and prototyping tools.

    Why another design tool?

    The biggest gap in my current workflow is interactive prototyping. There is currently, the great divide. Some use Principle, Flinto, Invision, Composer, etc.,

    Are there plans for interactive prototyping?

    Thanks again for taking the time and I am about to back this project right now.

    4 points
    • Ryan Lucas, almost 7 years ago

      Hey Jon! Thanks for the questions.

      Some others have asked about prototyping, so I'll cover that in another response. In terms of what differentiates Subform from the current options:

      1. I know you mentioned this, but having a true layout engine is definitely the biggest differentiator. It's difficult to get right in a visual tool—and I think that's why the prior art has been pretty underwhelming. So that alone has been a lot of work and testing.

      2. Composable style classes. Shared styles in Sketch, for example, are an all-or-nothing affair. So you end up having to create a million duplicate styles, e.g. error border, default border, selected border, disabled border. Classes in Subform work more like CSS, so you can say something like: "all my form inputs should have this border and corner radius" and then add another style class that says "element in the error state should always have a red border." When you're working with big design systems, this makes things way easier to manage. And it's also closer to how things work in production.

      3. More realistic components. Components in Subform can have state and it's super quick to toggle between states. They also work closely with the layout engine, so the same component can be a fixed width, automatically resize to its content, or have a width based on its parent. You can imagine a button that should be fixed width on large displays, but full width when it's on a mobile device or in a modal window. Thinking about all the data in the app as datasets also opens up a lot of flexibility with component reuse. Again, we're really focusing on making design systems not just easier to create, but also easier to manage and iterate on.

      3 points
    • Ryan Lucas, almost 7 years ago (edited almost 7 years ago )

      Forgot to mention: we've been putting together quick little demos that show some of the differences between Sketch and Subform like these:

      https://dribbble.com/shots/3036081-Resizing-a-Component-Sketch-vs-Subform

      https://dribbble.com/shots/3031269-Resizing-an-element-Sketch-vs-Subform

      You can check them all out on our Dribbble account: https://dribbble.com/subform

      1 point
  • Rory Smyth, almost 7 years ago

    You've shown a lot of the end results on your site and demos.

    Here's how you resize and object with constraints Here's how you randomise data once the table has been created Here's how you select a class to use

    This is great and all, but it's not showing the work needed to get to that point. Which is the bulk of the design process.

    If I want to make something responsive, add classes, make data tables - How much effort is required to do that?

    Why not make a video on that? That's the part i'm actually interested in. How quickly can I iterate on these components i'm seeing on your site.

    3 points
    • Ryan Lucas, almost 7 years ago (edited almost 7 years ago )

      Rory, agree 100% percent. We're just two guys right now and we have limited time to tackle everything, so we decided to focus on shorter demos to start with. The Internet has a short attention span, so that felt like the best way to quickly communicate some of these big ideas.

      That said, we really want to get some more longer screencasts up. We're working on it. And if you haven't yet, take a look at https://subformapp.com/learn/ — there's 30 minutes of screencasts there right now.

      If you want a notification of when we post that stuff, follow our Twitter and join our mailing list (in the footer of https://subformapp.com). We always announce new articles etc. there first.

      3 points
  • Brian HintonBrian Hinton, almost 7 years ago

    What about bezier tools? Are any shape building capabilities planned for Subform?

    2 points
    • Ryan Lucas, almost 7 years ago

      Right now, we're a team of two—so we had to be careful about scope and focus on getting a product out the door. So some things that we'd really like to have in the app, vector drawing tools being one of them, aren't in there right now.

      Being able to crank out some quick beziers with a pen tool is definitely a part of UI work. But we wanted to spend our time exploring the ideas that no one else was working on. So for now, you can draw vector stuff in an external app like Illustrator and drop in an SVG into Subform.

      That’s not optimal, but as any product designer knows, you have to make trade-offs, ship product, and iterate quickly.

      1 point
      • Anthony MoralesAnthony Morales, almost 7 years ago

        As much as I'd like to draw in the app, I 100% agree with this. I am most excited by design tools that are willing to step away from recreating HTML/CSS in panels and look at new ways of describing layouts, etc.

        1 point
      • Brian HintonBrian Hinton, almost 7 years ago

        I do think a design tool without the ability to create assets beyond boxes, circles, text, etc. is more akin to something like FramerJS. But since Subform doesn't animate it ends up being more of....a static prototyping / design system tool?

        All of that said will their be some sort of linked assets capability? If you handle things like icons as SVGs, and if I were to utilize symbols (and if Subform can handle that) where I can edit a file, save it, and Subform just updates it as needed I'd be ok with that over the medium term. I mean that's essentially what we have done in Photoshop + Illustrator with Smart Objects for many years.

        2 points
  • Sean WoodSean Wood, almost 7 years ago

    I think there are a lot of thing's Subform has right. The comment in the promo video that resonated with me was "The interfaces we are designing aren't just screen-shots, they're systems". And the features of the tool go to supporting that statement. I don't build small sites. I build platforms that are complex and require prototyping before they can be developed or deployed. Any tool that allows me to get there faster and in a more cohesive way is worth evaluating.

    1 point
  • Ben Thompson, almost 7 years ago (edited almost 7 years ago )

    Hi Ryan, really excited with what I've seen from Subform.

    How would you describe the difference between how Subform handles reusable elements and an app like Sketch handles ‘symbols’?

    Are you guys designing Subform with an early version of Subform?

    What does the design/build process look like. How do you and Kevin collaborate? For example division of responsibilities, expertise, handoff, etc.

    1 point
    • Ryan Lucas, almost 7 years ago

      1. Some of this I addressed in my response to Jon, but the tl;dr is: one component can change layouts quite dynamically, more useable/flexible data override system than Sketch, composable style classes mean you can make style changes across the different states of a component.

      2. We're not quite fully incepted yet! But yes, I try to do as much in Subform as possible.

      3. I'm the designer, Kevin's the developer. We split the business duties. Except that I do a little development and Kevin is secretly an industrial designer/architect in a physicist's clothing. We both really like coffee and sandwiches.

      Seriously, though, we've done product consulting work together for a number of years, so our process and business relationship was in place before we started working on Subform.

      (Full disclosure for DN: Ben and I went to industrial design school together. ;) Oh, and he's working on GitPrime and you should check it out: https://www.gitprime.com/)

      2 points
  • Adam Hopwood, almost 7 years ago

    Hi Ryan,

    I'm really interested in Subform, I totally get what you're trying to do and see the need for it. We need tools which treat interfaces as living movable, ever changing things rather than static images.

    I like how you've tried to take inspiration from other disciplines (industrial design, architecture ect.) who have been dealing with some of the problems we face in digital product design today for decades.

    What other techniques or processes, apart from tools, do you think we could take from other disciplines which would benefit the design of digital products?

    As a separate question, how big do you think the market for Subform is? And what kind of designer in what context do you think it's most useful?

    I really hope you guys get the backing you need.

    Good luck!

    1 point
    • Ryan Lucas, almost 7 years ago (edited almost 7 years ago )

      In terms of process, I don't think digital product design is wholy different than traditional product/industrial design. Maybe more time in front of the computer than in the metal shop. But the basic process is and has always been: sketching and ideation, user research and testing, iteration and prototyping, understanding your media and manufacturing/development processes.

      Some process-oriented books I like are "Designing for People" by Henry Dreyfuss and "Creating Breakthrough Products" by Jonathan Cagan and Craig Vogel.

      Market size is really a tough one to get a handle on. There are a lot of UI/UX designers in the world, but I don't think there are really any hard numbers on exactly how many. It's still a relatively young field and growing rapidly.

      With Subform, we're trying to build something more aimed at the digital product design professional... a little more powerful and complex than a basic drawing tool. That, by nature, limits the market somewhat. I think there are some analogs in other professional design tooling, like 3D, CAD, compositing, etc. Kind of tangentially related, but I really liked this juxtaposition of other creative tools to web tools that Vlad Magdalin put together: https://medium.com/@callmevlad/a-cheeky-guide-to-creative-tools-e5e3388c4614#.3c9f8s8uw

      1 point
  • Gavin McFarlandGavin McFarland, almost 7 years ago

    Hi Ryan, thanks for sharing your time.

    One area I think about when designing digital products is how a designer dips in and out of conceptual design to focused detail. The trade off with my workflow at the moment is that although tools like Sketch and Photoshop don't offer the best features which cater for responsive designs I am able to explore a lot of concepts in them and then move my work into a prototyping app like Framer or even directly into the product, using the product as a test bed for the user interface.

    With a tool like Subform the line starts to get a bit blurry. This is not necessarily a bad thing because the benefits are blurring the lines could provide exponential rewards from not only efficiency but also new insights gained from play and experimentation. I'm conscious though if my thinking can shift from one process to another. When we build products and their respective user interfaces we have the job of defining a design system. Although we can create style guides and mockups to explain the system, in reality, it's defined in the product itself. Therefore if we move more of that thinking and definition into something like Subform how does it migrate into our product? A lot of people are asking questions about how to export designs to HTML and CSS, but I wonder if the only way to achieve a sustainable way of managing a design system is to abstract our design thinking from what's underneath. This leads me to thinking that Subform would benefit from being part of a bigger tool that allows you to also explain and document your design system so it can be used as a living styleguide of sorts.

    I would love to hear your thoughts.

    1 point
    • Ryan Lucas, almost 7 years ago

      Gavin, great insight. Agree that creating visual artifacts is really only one step in the product design process, no matter how sophisticated the tool.

      "How do we define and manage design systems?" is a big question. I don't think we have the answer more nailed down than anyone else, Subform's really just a first step in thinking about what it might look like.

      Strategically, I think you are right in that we need to"abstract our design thinking from what's underneath." Tactically, it's hard to know exactly what it looks like. We're excited to throw a bunch of things against the wall and see what sticks.

      Kevin (co-creator of Subform) wrote an article that covers some potential ideas here: https://medium.com/subform/disrupting-design-interns-comps-and-redlines-b2ecdc07604c#.2xn8xxx5p

      Code export's always an interesting idea, because it diffs really easily and is more useful to a developer than a stack of redlines jpegs. But it's not a perfect story, because the production languages and layout systems aren't always the same (CSS/HTML/JS? What JS, React? React Native? Obj-C? Java? AutoLayout? ConstraintLayout? Etc.)

      It's also a two-way street. When changes are made in the production product because it's faster, or more convenient, how do they make their way back into our design documentation and visual design tools?

      3 points
  • Kilian Valkhof, almost 7 years ago

    Love how Subform looks! However with similar tools I quite often run into limitations where I know how to achieve a certain layout using HTML/CSS, but that the design tools makes impossible (such as transforms or backdrop-filters, or ligature control). Do you guys plan on supporting an "escape hatch" for situations like this?

    1 point
    • Ryan Lucas, almost 7 years ago

      We do actually have a CSS escape hatch in the app right now, where you can just override the panel settings and go straight to code. We'll probably keep that around for awhile for this exact reason.

      This works both ways, though, and there are always some things you might want to do that CSS doesn't support. (Like, say, multiple borders) So TBD on the long term viability of mapping 1:1 to CSS in a visual design tool.

      2 points
  • Shina Memud, almost 7 years ago

    Silly question but why your logo icon looks like sidebar?

    0 points
  • Sven SapelsonSven Sapelson, almost 7 years ago

    Do you know Antetype?

    0 points
    • Ryan Lucas, almost 7 years ago

      Hey Sven, we're familiar with it. Some hardcore Antetype users reached out to us during our development process and were kind enough to share their likes/dislikes about the product.

      1 point