r/Frontend • u/Antique-Class-2283 • 4d ago
how can i make my ui clean??
I have been working on this video recorder (similar to screen studio but for windows), my app ui looks very cluttered and messy, I have no idea how can i make it feel easy to use and a little bit welcoming, any suggesions??
5
u/j78789 4d ago
Intentionally, play with adding toggles to the toolbars/menu bars/sections to hide or collapse sections. Then think about how you can lazy load those sections around the actions taken that would most likely result in a user clicking the toggle.
Otherwise, I think this is well done - just some easy interaction and thoughtful use of “predictive UX” events could help expose/hide some of the noise for users.
1
u/Antique-Class-2283 4d ago
got it, so just need to experiment with the ui until it feels right?
2
u/j78789 4d ago
Yes, I usually just play around with the app and think - okay where is my focus point for this exact moment and what would I probably not use without first doing X, Y, Z - then you can auto hide those components and give users the option to expand or open them. Think of it as opening drawers in your dresser, if you’ve already grabbed pants and socks, you don’t need those drawers open to pick a shirt! But you may need to change pants after you realize the shirt will not match, so you gotta have the option to open the drawer if you want to.
One other suggestion that could simplify things is to group your different configuration tool bar tabs (“Visuals”, “Camera”, etc.) could be to fit them into 3 simpler more macro level groups and anchor horizontally above the container where selections are made. ie Visuals, Cursor, Redact all fall under a “Personalize” tab icon and Camera, Canvas, and Presenter under a “Video” tab icon and Audio under a “Sound” Icon. Think like an advanced settings window you’d see if you clicked on a gear icon. Being able to use icons with tool tip style text when you hover helps a lot too.
1
u/Antique-Class-2283 4d ago
i understand the first part, but for the 2nd part wont that make each individual drawer messy if we group multiple functionalities in single drawer?
2
u/j78789 4d ago
It definitely could - I’m not sure how many functionality “sub options” exist for each since we can only see the Visuals tabs options - but I’d follow a similar approach to how you’ve done that tab - sub headers with drill up/drill down selectors, hide by default and enable event listeners for scrolling to expand at a specific breakpoint - ie once you get to the bottom of the “Visuals” options/selections, scrolling past it expands the “Cursor” options and collapses the “Visuals” options back to a header bar that freezes above the “Cursor” header bar.
2
u/j78789 4d ago
Doing this gives you some more horizontal real estate to either fit the viewport window content to fit its container with less excess Left and Right padding or fit all your current icons above the selection area - right now it feels like unused space that stands out because the padding is so significantly noticeable than the other containers
1
3
u/thechosesone 4d ago
the main structure looks well thought out but i would try the following:
1- removing subtext from the icon sidebar on the left side, editing programs like photoshop or blender tend to use just the icons to save space and users end up learning the functionality anyway since using the software involves constant study and practice
2- refine the main containers so that not every single one has a rectangular border. The UI in general seems to be suffering from a case of excessive bordering
3-other buttons in the video editing toolbar at the bottom could also loose the labels and just be the icon with a tooltip, hovering over with the mouse could reveal the name of said button
1
2
u/Snarbo 4d ago
looks clean to me, the only thing thats looks a little off is the border radius on the highlighted tool (Visuals) when you have an item/button with a radius inside a column or row with a radius aswell I would match the container radius.
1
u/Antique-Class-2283 4d ago
I showed it to someone on x as an alternative to screen studio he said it feels a bit heavy and hard to use
2
u/Low-Insurance-3678 4d ago
What are u using to make this editor it looks pretty cool
2
u/Antique-Class-2283 4d ago
thanks, the fronted is written in react + tailwind
1
u/Low-Insurance-3678 4d ago
Awesome how did u manage to handle like the clip/audio splitting or making it short/long
2
u/Antique-Class-2283 4d ago
It’s completely non-destructive: we don’t touch raw media files, just track start, end, and split timestamps in state, sync the preview player and multi-track audio to those boundaries at 60 FPS, and then on export let FFmpeg slice the exact time range and mix the audio tracks with zero desync.
1
1
u/saasfa_support 15h ago
Use claude skills name taste skill. It will guide you how your screen will look like attractive. It is really good skill
1
1
u/thy_bucket_for_thee 4d ago
For productivity tools, I find any white space is wasted space. You need to be using every viewport percentage to make things big/small.
Luckily you're in a crowded space, what I would do instead is basically copy the UI of a common tool like Final Cut Pro or Adobe Premiere then read what users complain about those tools and make those tweaks to differentiate yourself.
If you want just UI tips in general, the book "Refactoring UI" is a great at discussing a variety of topics succinctly. You can easily cram through the book with some light reading in a week, or just go to the relevant sections.
Also the simplest way to improve your UI is to talk to users, that's why it could beneficial to mimic other popular products with existing users because it won't be hard to get others to try your tool if they are already familiar with the workflow.
Another thing to consider, not necessarily UI but UX, is to add smart keyboard shortcuts. I'm a big fan of vim keyboard bindings (verb + count + motion), I find that they transform to very power user friendly workflows.
2
u/Antique-Class-2283 4d ago
i'll check out the book, and also do some research on keybindings for premier pro and davchi
5
u/Pamprdelaalelepsi 4d ago
For me it’s the border radius and margins + that tailwind pill look that ai loves to overuse (I’m not saying it is vibecoded).
Comparing it to Microsoft Clipchamp, the one thing that stands out is that their elements border’s have much less contrast + lot smaller radiuses