Design and UX November 21, 2019

Quick/Easy UI Tool

Simon Le Pine @Lakebed_io

Does anyone have any feedback on any UI/UX tools to really quickly build a web app? I'm a developer and will have to build the backend for my idea but I'm terrible with UI/UX and would like to get this idea up and running really quick.

If no one has any feedback/thoughts, this might be an idea for someone to work on. I'm thinking a web app that let's the user select "components" that are dropped into the page in the best UI/UX way. The necessary HTML/CSS/JS can then be downloaded to start plugging in the backend. Essentially a modern WYSIWYG editor for web apps.

Thanks!

  1. 3

    @volkandkaya Would Versoly be able to help?

    1. 2

      I have seen it done :)

      If you know bootstrap you can literally import login and sign up pages in it.

      You should also be able to add dashboards and start editing them. I would have one dashboard page where, then all subpages I would just have the inner content.

      If you wanted to go even further you could add chart.js and start putting charts in a dashboard.

      https://login-example.versoly.com/

      On paid plans you could then export all the code.

      I don't recommend it though :)

  2. 2

    Personally I'm a huge fan of landen.co for landing pages. I believe it's been built by a fellow indie hacker.

  3. 2

    TL;DR

    1. Try Bubble: https://bubble.io/ but it might not be able to do everything you need.
    2. Try using a design tool like XD even before using a WYSIWYG

    I like where you're coming from, because even with a few years of react experience, I would also love a WYSIWYG that provides all of the power of React. What you're going to want to look into is no-code tools. I've looked into a few at this point (bubble and webflow are good ones, and it seems like divjoy is another option created by someone else on this post that seems cool), and most apart from Bubble seem to be limited to things like blogs and online stores (i.e. no user sign in).

    Bubble actually gives you the ability to sign users up, and do some more advanced things, like news feeds, etc., but I don't see any option for allowing chat or messaging. You might be able to build it, though. But then you're locked into bubble as your front end and it's a bit steep, price wise.

    However, I would actually recommend you become familiar with a tool like XD before you even get to the WYSIWYG bit. You can iron out how your site would work without getting into the details of making it function. XD will even allow some interaction like buttons clicks to other pages. Then you can get a potential user to do some actions to see if it's actually intuitive.

    1. 1

      Thanks, not sure how/why but I think I had come across Bubble after posting this. I will continue looking at options. As you said, I probably need to take a step back and map my app, workflows, data flows, menu's, etc before going into UI.

  4. 2

    My product divjoy.com does this for React apps. Has a built-in editor and component library for quickly putting together your UI. Would love to hear your thoughts (critical feedback welcome).

    1. 2

      Thanks, it does look good. I'll dig in a bit deeper and see if I can make this work. Although I prefer PHP I'm sort of thinking this project could be a good motivation to learn a new language, which is part of why I'm looking to get the UI up and running fast so I can focus on the more enjoyable stuff.

      1. 1

        Great! You can also use PHP on the backend, if you prefer, and have a React app with client-side routing on the frontend. Happy to walk you through how you might do this as well as hook you up with a IndieHackers discount if interested.

    2. 2

      I like it. Wish it had more elements though. If there was a ready-made chat page, a "feed" style page, a profile page, and payment pages I would think about using this. Right now though it's a bit easier just to do from scratch for my current idea.

      1. 2

        Look super promising though! Even better if I could manage some state and connect forms to it.

        1. 2

          You can actually edit any component’s code in the built in editor and add state with useState. Would love to figure out a nice UI for that though that’s higher level. As of now most users opt to make those kind of changes after exporting.

      2. 1

        Thanks, this is good feedback. Going to be focused on growing the library soon. Feed, profile, and payment pages are definitely coming. What do you mean by chat page exactly? Like an in-site chat interface?

        1. 1

          Yeah, like two users chatting with one another.

          1. 2

            Okay makes sense, will add this to the list of components to make :)

  5. 2

    Webflow should be an option.
    Haven't tried it personally, but from what I see/hear it's quite good.

    1. 1

      Not sure you can connect webflow code to a backend easy.

  6. 2

    As a non-designer and non-tech person I really like Mockflow.

    1. 1

      Sadly I don't think this is what he really needs. Trying to prototype your app's UI/UX and appearance using code is really hard, and what you're giving him are ui-toolkits and javascript frameworks, not WYSIWYG editors. You would be using these once you know what you want to build.

      1. 1

        That's the OP haha