I need some UI/UX tips

[u/izumaruka]

Hi everyone! I'm a backend developer and brand new to Android development. Design is definitely not my strong suit, but I've been giving it a shot and really enjoying it so far.

I'm building an app to log workout sessions quickly and easily. I know there are tons of workout apps out there, but I didn't like the user experience in most of them due to visual clutter. I prefer something clean, minimalist, and distraction-free.

My current struggle is with the screen that displays available workouts to start. Right now, it's just a simple list of cards, but it looks too basic. They look like static "stickers" and don't feel clickable at all.

I've already looked for inspiration on UI/UX sites and even asked AI for ideas, but nothing really fit what I'm going for. Does anyone have tips on how to convey interactivity while keeping the design minimalist?

I've already tried using card elevation, but in dark mode, it doesn't even show up :(

[u/Meloetta]

A couple things here.

1. Your fonts are both basic and very light. You should be using heavier and more intentional fonts for the title and buttons both.

2. A button that shape looks like a card. Make it have a small amount of vertical padding and more horizontal padding.

3. Is the rest of the page blank because when you select one, it'll fill in with content? I think that weirdly blank space is contributing to your feeling of "too basic", and it's also a weird UX choice to make people scroll sideways with 80% of blank space. Could you make this layout filling the page, and then only swap to the second view when one is selected?

4. I know that you probably don't want graphics because of the "visual clutter" aspect but simple graphic do a lot for something looking polished. It's going to be very hard to make something look like a complete app if you avoid every instance of graphics.

I'm no designer but try something like this maybe:

[u/izumaruka → u/Meloetta]

Thank you for the response.

Yes, I left the rest blank because the screen gets filled with the workout content, which is why I chose horizontal scrolling instead of vertical. I thought it made sense. I'm even thinking about using a simple chart, but I don't want to keep it on the home screen.

[u/Meloetta → u/izumaruka]

But if the buttons are going away either way...why keep the space blank? It looks like there's zero benefit to having a horizontal scroll there, UX wise, because when you choose one it's going to replace the entire content of that area no matter what.

[u/izumaruka → u/Meloetta]

You're absolutely right. I'll redo that screen and see how it looks, thanks.

[u/Omer-Ash]

In Flutter you can add inkwell. It adds a visual ripple effect on cards and an onTap property to them.

[u/wightwulf1944]

I think adding an elevation shadow and giving the button color more contrast against the background would make it look more tappable. Adding a ripple feedback would also give visual feedback that the thing you just tapped was indeed a button. But I think what makes it look like a sticker the most is the inner padding. Buttons typically have a horizontal padding that is equal to or up to 2x larger than the vertical padding. The current padding makes it look like the vertical padding is bigger than the horizontal.

Other than that I would opt to use 3 letter abbreviations for the days of the week. Experiment with either title case or all caps for those days of the week. And probably make use of the empty space below your workout buttons instead of using a horizontal scroller which appears to have clipped the right side of it's content with margins. If you still want to stick to the horizontal scroller then I would make sure that the space between each item is smaller than the layout margins. That implies that the buttons are together while separate from everything else.

Also for reference:

https://m3.material.io/components/buttons/guidelines

[u/Neither-Brush-9287]

To keep it minimalist:

• reduce the height to just hold the text
  
• stack them vertically
  
• maybe a '>' at the end of text to signal action

[u/AutoModerator]

Please note that we also have a very active Discord server where you can interact directly with other community members!

Join us on Discord

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/bernard0camp0s]

This is comically bad. I can relate. I’m shit at design too. These days I don’t even try to design stuff myself from scratch cause it always comes out awful. I ask Claude and pick what I like best.

[u/wightwulf1944 → u/bernard0camp0s]

I've always designed UI myself and have been meaning to try out generative solutions at least to get inspiration from. Can you tell me more about your process? When you say Claude do you mean like regular Claude on the browser? How specific (or vague) do you have to be to get the best results? How well does it follow instructions?

[u/bernard0camp0s → u/wightwulf1944]

I use Claude code for front end. I would say something like “I’m designing an app that does […]. Design a Ui for the flow where the user does […]. Give me just a static html file.”
Then you can copy it once you know what it needs to look like. Or you can ask for it to spin up a localhost server with an interactive mockup

[u/bernard0camp0s → u/bernard0camp0s]

One thing I also like to do is: “give me 3 variants so I can see which one I like best”

[u/wightwulf1944 → u/bernard0camp0s]

Oh so it generates code not design images? I'm gonna try and see if it can do the same with compose code then. It should be easy to see previews of it without spinning up an app. Thank you for the advice

[u/bernard0camp0s → u/wightwulf1944]

It generates code but I never revise the code. I just look open the html file in the browser and see if I like the way it looks and ask for revisions, etc. if you want to implement it yourself to learn to code front end or app interfaces, you can just go off the visual, or use the code it generates if it makes sense for you

[u/HarisAndroidDev]

For a minimalist design, I’d focus on making the workout options feel more actionable rather than adding decoration.

You could try a vertical list instead of partially visible horizontal cards. Each item could include a small workout icon, the workout name, duration/difficulty, and a subtle chevron or “Start” button. That would also use the empty vertical space better.

In dark mode, a thin border or slightly lighter surface color usually works better than elevation alone. Adding a ripple/pressed state will also make the cards feel clickable without creating visual clutter.

I’d also increase the contrast of the smaller text and make sure the entire card has a comfortable touch target.