Help for a beautiful design

Good evening group, I’m making the draft of this window, there is the data entry, the listbox with the list of my data, and on the right a window that I will probably make disappear, where the user can choose the category, the line color and the font color. Any ideas to make it more readable?

If you feel you really must have such colors in the list box then you need to at least change them up you never should go hard green or hard red.

Bellow is example of softer palette

It is 2025 also where screens have a lot more pixels than in 1990 so you might want to increase the row height of the rows which again will increase readability.

I would also ditch all the icons you have on the buttons since its not 1990. Go monotone icons or very low color icons.

There are plenty of free vector icons you can find where you can put any mono shade on them you want and generate in any size.

Example of such pages:

Hope this helps (and hope it don’t sound harsh, you did ask so I figured you wanted good answer)

4 Likes

Hi , and how do I get this palette?

You just grab it from the screen where I posted it it even has the color codes on it.

(Its jut example of softer palette might not be “the correct one for you”, you would need to experiment with it.

in my code i use: b = Color.SelectedFromDialog(c, "Scegli il colore ")

PLEASE, PLEASE do not use those “modern” pastel colors! Many people (me, included) with reduced or failing vision have a VERY hard time with those colors. And the pastel text colors (and low contrast text, generally) are even worse. Do your users a favor and avoid them like the plague!

Jim Wagner
Oregon Research Electronics

Which pastel colors do you mean? Björns colors are not pastel colors. The original design you give me eye cancer.

2 Likes

Referring to the “softer palette” in second message. The image in the first message was REALLY hard on my eyes, almost unreadable. It genuinely does need redesign, but more than just colors.

Jim

You should use WebAIM: Contrast Checker to compute the contrast between the background and foreground colors. Shoot to pass WCAG AAA. This will allow you to pick softer colors, with sacrificing legibility.

For example, even pure white on cell 9 (#CC6666) is only 3.71:1 and fails all except WCAG AA large text. Switching to pure black on the same color improves to 5.65:1 and passes more tests, but still fails WCAG AAA normal text. You need at least 7:1. So #CC6666 should be tossed right out, since there’s no color that will pass. You’d need to brighten the color to #D47D7D and use a text color of #000000 to pass. But while that becomes technically legible, I don’t think the color combination would look particularly good.

Picking UI colors requires a lot of thought.

2 Likes

Help for a beautiful design

instead of row color, maybe use a status text/icon single column.
the icons in toolbar are very big.
mandantory fields just with a symbol or border color?

In my software, the colors are completely customizable :slight_smile: My idea is to go beyond personal tastes.

Sorry, my English translation is not very good. I understand that you don’t like big icons, but otherwise I don’t understand what you would suggest.

There is something wrong with your monitor colors … Ow wait … :face_with_peeking_eye:
You definitaly need to read about modern UI. The screenshot is more or less Windows95-ish which you should avoid if you want to attract users.

4 Likes

here is a example i found in web using a status column.


i would make the toolbar less dominant, smaller buttons.
somehow the input should be for touch screen or mouse user.

4 Likes

obviously, everyone’s tastes are different, so, take this as if i was an arrogant design snob.

  • tone down the icons. they’re obnoxious. the many colors don’t make that better, and the gradients don’t, either.
  • make the icons smaller - maybe half the size
  • increase font and line sizes, even though that means that some fields, e.g. Dettagli will be truncated
  • agree with @Björn_Eiríksson: adjust the color pallet: less intense colors will give you more contrast with the text
  • contrasting text colors should be more consistent: maybe one light and one dark color (which you can get if you tone down the hilight colors
  • agree with @MarkusR: hilighting entire lines can also be distracting, so only do it if there’s a reason to do it. you can have badges/toast columns that convey the same information. if need be, you can use alternating row colors with (slightly) different hues to help the user read across the form.
1 Like

Every OS has GUI guidelines to follow. So it’s not a matter of different personal taste. Especially macOS users are very aware of this. The main reason why an macOS needs to look like a … macOS app. If you like it or not.

3 Likes

it’s a guideline, not a commandment. literally every platform has long discussions about designs that don’t comply with the HIG. on this forum, there’s an active thread about colored buttons on macOS.
going back 35 years, i can’t think of a single app i have ever worked on for a big firm that complied - at all - with a platform HIG. each team develops their own, and some teams have multiples, even inventing different ones for each app.
don’t get me started on how material has invaded ios or swiftui has invaded android.

1 Like

Here’s some handy design guidelines! :wink:

3 Likes