How do you plan UI/UX?
Dear fellow indie hackers,
I was wondering how you approach building your user interfaces? At the moment I just start to build them without a lot of planning. In the past, a bit more planning and some wireframes would have saved me hours and the result would have been better. So I'm looking for tools and a process.
Do you plan your UI / UX before building? If yes, how does your process look like and which tools can you recommend?
Trending on Indie Hackers
Designer POV: It's always better to build a design first and set the direction though it, then move to the development.
In fact, it makes the development easy, coz devs have a reference they can always look upto.
About planning, Yes it should be planned. For some complex parts/screens of the app, a low-fidelity version is a better choice before building the final design, because iterations can be done lot faster in it. However, for simple screens like login, verification, there's no need for low fidelity designs, just ship the actual design in Figma.
So basically, the first draft of designs is a mix of designing some final screens and some low-fidelity ones.
Best tool rn is Figma but if Mac native preferred then Sketch is good.
That's exactly why I want to start planning. Additionally, I'm hoping to have more thought through UI before iterating on it with user feedback / research.
Thank you for sharing your thoughts ♥
Great question—this is something I’ve been trying to get better at myself. I used to jump straight into code too, and it always led to a lot of rework and messy interfaces
Lately, I’ve been following a simple 3-step flow:
Sketch on paper or use Excalidraw for fast wireframes (super low-pressure).
Create mid-fi mockups in Figma once I’m happy with the structure.
Then I’ll build the UI using a component library like Tailwind + DaisyUI or Chakra UI.
I’ve found that spending even 30–60 mins upfront sketching saves hours later. And it helps me catch UX issues early—like weird flows or missing states.
Would love to hear what process you end up settling into—always curious how others tackle this!
Always better to have design in place before developing anything. But I have seen devs starting with coding and then improving the design too. Figma is a good option.
I am not frontend dev, I do it because I have to for my project, so I buy Vue3 prebuilt templates (I bought 75 different pages for like 15$, it has all flows, login, contact, terms, blog etc.) that looks good, that has everything I need already and change what I need.
Having boilerplate for standard UI stuff is great. I'm reusing my components / hooks etc. all the time. How do you approach non-standard interfaces and chained interfaces for flows etc.?
Well, I try to do the same, I pick parts of other components that I like and create a new one. At least for now)
If ChatGpt was a good help at the start, but now I use it less and less.
I've tried few different tools, but discovered that a quickly sketched handdone wireframe works best for me.
Yes, i've done that a couple of times. I started working on a non-solo project. In that case collaborating is maybe easier when using tools.
In general, no I just build my UI/UX directly from my brain into code. Obviously, I have UI/UX rules and principles that I follow. And I have pre-built components and color palettes that I re-use.
If there is a UI that's more complex that I need to think about first, I just use pencil and paper to sketch it out.
I have tried planning UIs in tools like Figma or Adobe XD, but for me that's been a waste of time. I did find those tools useful though when working with other people, for example, if I need to create a design to hand off to a developer to implement.
Yeah exactly. I had the same thought on collaboration. And I think it is a great thing to do in collaboration, because the result is usually better when you have 4 eyes working on that.
My problem with sketching when the UI gets complex is, that I realize that I should have done some sketches when it is too late. Hence, I want to get in the habit of planning my UIs. Maybe I will do it on paper instead of using figma.
If you are a figma expert, then perhaps there's no difference between paper and figma, but I'm just okay at figma, so I find that paper is much faster with less overhead
UX is the biggest challenge for me right now. Usually I start with a mock-up, but as things progress the real product shifts away from the original idea pretty quickly.
I guess that is quite common 😄
Yes, I always plan, design, and then build. It might help to think of UX and UI separately, because these are really two different disciplines (although most folks lump them together).
Here's my process:
UX (User Experience)
UI (User interface)
Development
As far as tools go:
Awesome, thank you for sharing your process 👍
Everything is it depends I guess, but as a solo developer, solopreneur, startup, I think user interface matters but doing figma works or drawing wireframe is quite too heavy work. It's not sure whether your product is gonna hit or not and at first, giving too much effort on UI/UX thing is useless. But UI/UX design is still very important, so I try to keep me eyes high referencing good design from platforms like behance, dribbble, instagram and else.
Thanks 😊 Looking for inspiration is a very good idea. I guess I want to get into the habit of planning my interfaces. Even if it's just a pen and pencil sketch. And searching for inspiration upfront sounds like a great first step for that habit.
mobbin, dribbble, behance, pinterest, arena
Here's some design reference sites that I can recommend you(maybe you might already know). mobbin has bunch of screenshots of web/app UI/UX.
I do download and look around good apps a lot! Hope this help you :)
Thanks, checked out mobbin for the first time. Great for App UI inspiration 👍
Definitely do UI/UX planning before building. It serves as the blueprint for what you're building. As mentioned, Figma is a powerful tool to do this + I'd also recommend prototyping key flows/features of your design so you can see it in motion.
Thanks! Do you use a special tool for prototyping or do you code it already?
You can actually prototype in Figma! That way you design first, then connect the elements of your design with the prototyping tool & you have everything in one place.
Also, if you aren’t that familiar with Figma, they’re having a virtual conference (Config) this week starting tomorrow. I’m sure it could be helpful for you in picking up some tips.
Thanks. Figma sounds like valuable tool to learn.
Did you use any resources learning it, or learning by doing?
I definitely learned mostly by doing and by Youtube videos. I'd also recommend following Zander Whitehurst on LinkedIn who frequently shares quick tutorials on how to prototype.
Thank you. I'm checking out YouTube and Zander Whitehurst.
Hey there fellow indie hacker!
I totally understand where you're coming from. Planning your UI/UX before diving into development can save you time and result in a better end product. Personally, I find it helpful to start with wireframes using tools like Figma or Sketch. They allow you to visualize the layout and flow of your interface before writing a single line of code. Once the wireframes are in place, I iterate and refine them based on feedback or user testing. It's all about finding the right balance between planning and flexibility. Good luck with your UI/UX process, and don't hesitate to reach out if you have any more questions!
Thanks for the advice 👌 I guess I'm going to test using figma for wireframes. When the feature is live, I kind of have a process for improving (posthog + user feedback).
Think in terms of your customer journey.
What's the most important feature?
In most cases, it's not the login or onboarding flow, which is where most people waste a lot of time.
I plan in two week sprints and focus on breaking down what matters.
Can you make an example? I don't quite understand the first part of your answer. Do you mean that planning a login screen is a waste of time (I agree) and that I should only plan the more complicated / non standardized parts?
This comment was deleted 8 months ago.
The UI Components are not my problem. My problem is, that I'm loosing a lot of time (and quality) by just starting to build the whole interface (even when all UI-Components are ready). And sure, for standard interfaces (auth etc.) I'm not reinventing the wheel. But the UI for the core value of an application is rarely an off-the-shelf UI. And there is a lot of value if you get the UX / UI right for that.
I've used UI-Libraries and Templates in the past but switched to React + Tailwind.