UI Design suggestions?

Hi, i have this project that i created in 2015-16-ish.
The old view was not good, but functional (See img 1)

I have re-designed the UI (img 2+) a bit, and not i think it looks quite alright, but not over done.
But there is still some things that annoys me, its mainly the navigation buttons i have, they looks so out of place sort of.

Any ideas how i can make is look little better but not flashy like latest scifi movie with all cgi stuff? :smiley:

The red part is to leave out the customer name and logo.




Hi Stefan – Without really understanding your application I can give some general guidance.

For your navigation I’d recommend trying tabs instead of simple buttons. This allows your user to understand which page they’re on at any given time, as well as what the other top-level pages are.

Also moving the back button out of the content navigation and into a separate “page title bar” area could help improve the usability.


If you’re talking about just visual design, not the page’s structure – you might try adding some styling to the buttons to make them look more “clickable/touchable” like a subtle drop shadow, background gradient, rounded corners and borders.

Finally – adding small icons to the buttons could help to reinforce their purpose:

2 Likes

Just a quick note on colors – notice I’m using shades of your header color for the button styles, instead of plain black, white and grays. This trick adds a subtle bit of design polish to any UI.

5 Likes

@ray How did you find the right shades for this header color?

Hi, i did some changes and the menu now looks like

In Customizing properties i have an integer.
And in style customizer i use that integer as a driving property.
The problem i now get is that i only want the style applied when the integer is = buttons id, but other times i dont want the full orange style applied, so far it does not seem to have only a style applied with the only id, without having to add several styles to match every single integer in the tag it possible would hold.

Use one more custom property with that very condition you’re looking for to give you a boolean (1 or 0). Then you use that to drive two styles.

2 Likes

I typically use the ‘Eye Dropper’ Chrome extension. Allows you to get the color code from any web page. Then plug that color into a color pallet website like coolors.co to generate various color shades that work with the color you grabbed with the eye dropper.

2 Likes

@JordanCClark: Thank you, i have now put an if x=y, 1, 0 and then i can now just put option 1 and 0 to style all buttons the same way.

I wish there was a way to copy or apply the same style to several objects, because the way i see it now, i have to re-do all the work for all buttons.
Sure, if this was done i could just done it in 1 button and copied the button as many times i needed it.

I guess there is no style template one can apply, like CSS to objects in html.

As long as the properties and bindings are present, you can just copy and paste the styles dataset from one component to the others.

2 Likes

Hi, i was trying to mark the whole lines/columns, now i saw the copy to/from clipboard buttons in the dialog. Every now and then you learn a new thing or two :smiley:

After some changing in the UI, i feel the UI is looking better.



1 Like