# UI Design suggestions? **URL:** \ **Category:** General Discussion\ **Created:** [October 1, 2018, 11:21am UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907 "2018-10-01T11:21:03Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![StefanGronberg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/stefangronberg/32/6288_2.png) [@StefanGronberg](https://forum.inductiveautomation.com/u/StefanGronberg)\ **Post date:** [October 1, 2018, 11:21am UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/1 "2018-10-01T11:21:03Z")
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? 😃 The red part is to leave out the customer name and logo. ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/fa2d8bd20d27272917c6ed0c3febf525e6bcb559.png) ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/8378d8ce3f709b2a766347c57f74c4788798424f.png) ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/b84a575be3e1927ecbe334fa847963e864ca9552.png) ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/54f664017b114a08dfc3b96ec7d77fb286ec3c3e.png) ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/1e6cd253c87a16d4c1ab2a54eea2963fc458fb3e.png) ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/4207eccbbe36158d470f35ab6f5587b6ab9c17de.png) ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [October 1, 2018, 5:24pm UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/2 "2018-10-01T17:24:56Z")
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. ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/4483e1e12e9409a97e20d953cc2954926bd0e9b7.png) * * * 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. ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/e8ca63f64836e708378eb32753e07f131835fc57.png) Finally – adding small icons to the buttons could help to reinforce their purpose: ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/2f25cc742a1bfee5bc29e750724a232bf7564903.png) ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [October 1, 2018, 5:29pm UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/3 "2018-10-01T17:29:17Z")
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. ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a678b8cde063669c5fac2167009c6f3ebff01995.png) ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [October 1, 2018, 6:23pm UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/4 "2018-10-01T18:23:14Z")
@ray How did you find the right shades for this header color? ---
**Author:** ![StefanGronberg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/stefangronberg/32/6288_2.png) [@StefanGronberg](https://forum.inductiveautomation.com/u/StefanGronberg)\ **Post date:** [October 4, 2018, 8:21am UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/5 "2018-10-04T08:21:11Z")
Hi, i did some changes and the menu now looks like ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/0/0d28149510b0e6a36eb44ea95eae27d940b49399.png) 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. ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/19c5656c6217da9d69102fbff1098f676d81957e.png) ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [October 4, 2018, 11:33am UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/6 "2018-10-04T11:33:00Z")
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. ---
**Author:** ![Paullys50](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paullys50/32/3324_2.png) [@Paullys50](https://forum.inductiveautomation.com/u/Paullys50)\ **Post date:** [October 4, 2018, 9:23pm UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/7 "2018-10-04T21:23:29Z")
> [@zxcslo](#): > > How did you find the right shades for this header color? 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](http://coolors.co) to generate various color shades that work with the color you grabbed with the eye dropper. ---
**Author:** ![StefanGronberg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/stefangronberg/32/6288_2.png) [@StefanGronberg](https://forum.inductiveautomation.com/u/StefanGronberg)\ **Post date:** [October 5, 2018, 6:26am UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/8 "2018-10-05T06:26:15Z")
@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. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [October 5, 2018, 12:32pm UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/9 "2018-10-05T12:32:47Z")
> [@StefanGronberg](#): > > I wish there was a way to copy or apply the same style to several objects As long as the properties and bindings are present, you can just copy and paste the `styles` dataset from one component to the others. ---
**Author:** ![StefanGronberg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/stefangronberg/32/6288_2.png) [@StefanGronberg](https://forum.inductiveautomation.com/u/StefanGronberg)\ **Post date:** [October 8, 2018, 6:31am UTC](https://forum.inductiveautomation.com/t/ui-design-suggestions/19907/10 "2018-10-08T06:31:20Z")
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 😃 After some changing in the UI, i feel the UI is looking better. ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/94f2410f750d3b90551b4720dab1a91abdacf497.png) ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/5bf1535e7b0a57242ad7b8697fffee0e4ce60510.png) ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/bad17399b3126331081cf00de302570121603694.png)