For solopreneurs with experienced in backend distributed system, what do you do about the UX/UI and frontend for your idea?

I usually build the backend, some crappy landing page, and then abandon it and move to my next project /s

As a back-end-centric guy myself, the best advice I can give is to learn. Learn at least some basic UI patterns that you can repeat and adapt. Use those skills to build your MVP. Use popular component libraries whenever possible. Don't put too much effort into styling anything besides just setting your brand colors or whatever. Do what you can to insulate your front-end code from even caring about the styles outside of whatever your base library is (e.g. tailwind, bootstrap). It doesn't take a lot of effort, just awareness.

If you do this, and if you ever get big enough to need an overhaul, then not only will you have a functional UI, but you've also just done your future UI/UX expert a huge favor because they'll recognize everything they're looking at and can just do their job. And if you end up needing to white-label then you've done yourself another huge favor.

As for determining the user flows and whatnot, even a great UI/UX designer won't be able to help you there (and much less so any AI tool) if you lack vision and empathy for your users. You need to put time and thought into what makes for a pleasant (or at least not unpleasant) experience with your product.

Try Webflow with libraries (https://webflow.com/libraries)

In the beginning, the best thing you can do is just copy. Copy good design and note down any good UX patterns you see.

I still don't have the perfect setup but lately, I have been using TailwindCSS + https://flowbite.com/ and ChatGPT helps a lot, especially with generating TailwindCSS components. I use Django on the backend btw

I use the react-admin framework. Perhaps that was wrong for me as a BE guy. React is very different than what you'd expect but somehow I manage. Perhaps what other people suggested or an Angular framework is better. Way back I used a backend only technology, something similar to php that you output templates. No javascript manipulations. I think that is the best. If you are a java guy, perhaps a JSP pages with some theme/template. You save tons of time if you learn something like that, but you have to let go of the reactiveness and this is fine for a lot of applications. I made a mistake to go straight to react, I believe.

You just take one frontend framework and learn it. It will take some time but you will figure it out since you have knowledge in backend. That's exactly what I did.

I am a full-stack engineer. From my side, I use the integrated front-end and back-end web framework, for example, phoenix in Elixir, so I could buidl Apps by myself without front-end engineer and UI/UX.
And now there are lot of CSS framework( like the tailwind) are good enough, you could buidl your app by them so quickly.

As a UI/UX designer, I don’t think you need to be so talented and original but just try to learn some basics and common pattern.

I understand that diving deep into study can be time-consuming, but it’s often worth the investment. One exercise I frequently recommend to budding designers is to replicate websites they admire. This hands-on approach helps in grasping the intricacies of how UI elements interact and function. Paying meticulous attention to every minute detail can be enlightening.

In general, if you are seeking simpler solutions, I’d lean more towards utilizing established design libraries rather than relying on AI tools, which, in my experience, can sometimes produce less-than-desirable results.

bootstrap babyyy!

It'll honestly get you so far with the very minimum of effort. Once the idea is validated, then I can devote actual time to the project (or hire someone who's much better than me), but bootstrap gets me to the point where it's useable.

I think the single most important thing when it comes to UI/UX is proper navigation. If you skimp on navigation because you think, "I'll ever need sub-pages here", etc., you'll regret it. Figure out a slightly more comprehensive set of workflows than what you think you needed initially, and design your navigation to be able to handle this. Imagine yourself using the navigation.

As much as poeple say UI is not important, I believe you need to have good UI but not overkill UI.

Your UI need to be appeal enough for people to come and think your product is legit and good. People judge a book by its cover. Of course after that the product should be useful and solving the person problem.

Good UI make customer try and good product make customer stay.

I tried and experiment this somehow the more common looking UI you have, the more trust people have for your website. So if you have some fancy fancy stuff it might negatively impact your product.

There is more on this how good product with good looks is important, checkout this article : The Importance of good product

Build and make the UI as best you can, but don't dwell on it. It's going to be ugly. That's okay.

Prove that the underlying functionality works, and find users to validate your product has value.

Ever use Craigslist? It's 2023. It has pretty much the same UI as when Craig launched it in 1995: going on 28 years, now. And, according to this page, Craigslist did USD $660M in revenue in 2021. Yeah.

If your product is valuable, people WILL use it, as long as the UI is functional and usable, even if it's primitive or sparse. If people aren't using your product, it's highly unlikely the primary reason is because of the quality of the UI, so don't try to use that as an explanation or excuse.

Once you have validated your product's value, then you can decide how much money it makes sense to spend/invest in hiring a professional designer to improve the UI, if at all.

I just started learning bubble. Even though folks say it is no-code I am realizing there is a steep learning curve to it. I will check out uizard

Marketing sites, multipage themes I have built www.lexingtonthemes.com, which are templates made with Astro and Tailwind CSS

uizard.io is really good to get started on UX designs. I recommend their AI as its good value for money if you want to do quick prototypes for validation.

The AI only helps with designing the UX. The UI code will still be an issue. I am a backend developer as well and have always been afraid of front end code especially CSS. Padding and margins give me nightmares TBH. But recently I started helping my co founder in the front end code using github co pilot and GPT 4. The paid version is really powerful. There are times when I just upload the entire tsx file and ask GPT 4 to fix the layout and paddig for me. Also I have learnt way more about front end from GPT 4 then I have in the past with google.

In the past, I used to get stuck with some CSS issue and I would google it. I would be sent down this rabbit hole of CSS options which would confuse me further and I would end up giving up on front end. With GPT and copilot I am stuck with something and I get the answer and the explanation instantly.

The key thing to note is my custom instructions in GPT 4 to be "I like short & direct responses. I do not like any niceties" Because of this my GPT 4 responses are very short and sweet as if I am talking to my peer front end developer who is helpful but does not have lot of time to go in details. Sometimes its even rude 😄

Honestly I'm the opposite lol. I am professional ux designer working at a decent tech startup atm. UX is fairly easy but I struggle with the engineering!

I would suggest mapping out your user journey with something like Miro or even on pen and paper. Most likely what youll find is the idea in your head doesnt exactly match an experience. So youll have to work through that using a different part of your brain than is used most of the time for programming.

If you need help reach out! Always looking to collaborate. Best of luck :D

Wow, you're in my same shoes. I have resolved (somehow) adopting Phoenix/LiveView (it's now 6 years I work with Elixir, so the framework comes out of thin air for me). LiveView, in particular, gives me the chance to create rich, persistent and super reactive UIs, but the main problem persists, and there's an additional one:

• UI/UX is not my cup of tea, after two decades of backend and the last 5/6 as an architect
• I still make the mistake to start with something simple and make it so complex to end up in some dead end which backstabs my motivation

The first point is actually mitigated by Tailwind, which ships with Phoenix now. But it's not a silver bullet :D

This doesn't fully get to the core of your problem (not being comfortable with UI development), but for me it softens some of the parts that I dislike about building frontends.

I built this template for myself to remove some of the decisions about building sites, whether they're static or dynamic applications: https://github.com/acaloiaro/hugo-htmx-go-template

I use it as the starting point for all sites now. Of course, your mileage my vary with this "template", but for me, these are the problems it solves:

1. Making decisions about how to build my frontend. Hugo solves this problem. It's a full-fledged site-generation tool and It tells you how Hugo sites are built. And with its extensive assortment of themes, you can get away with not being great at design for a long time.
2. Not wanting to write frontend Javascript. I know Javascript well, but the Javascript frontend development scene is a bit of a mess, in my opinion, and I'd rather generate HTML from the backend. HTMX solves this problem.
3. Having a language I like on the backend. I tend to choose Go for my backends, as the name of the template indicates. But the backend code is a very small part of this collection of tools. The backend code can be written in any language, even though "go" is in the template name.

The problems this won't solve for you are:

1. Design. You can of course use Hugo Themes, but if they're not exactly what you want, you still need some sense of design to achieve the visual feel you want.
2. CSS. This template does nothing to solve your CSS problems. My advise is to learn the CSS you need to achieve the results you want. There are few shortcuts around this that I'm aware of.
3. Graphic/Icons/visual elements. Few commercial sites have no graphical element. Eventually you'll want a source of graphical assets.

I was kinda in the same boat as you. Frontend always seemed hard but I was interested in it so I trudged along and learnt it. I do my own design + frontend now and have a simple React + tailwindcss setup to quickly test ideas.

great question. What do you not like about all the availble "templates" out there? Like.. when you say not fully rich, what's missing for you?

I'm mostly backend and I usually reach for an easy to use "UI framework"... still requires a lot of JS but gets me quite far without having to think too much....

What do you mean by "backend distributed system" ?