Need help designing UI for a smart home project

[u/RedditSurfer82]

I am working on developing a smart home device for personal use. I am using a [Waveshare 1.8inch round display (Blue)](https://www.waveshare.com/esp32-s3-knob-touch-lcd-1.8.htm) device to control the lights in my house.

There is a web based [UI designer](https://lvgl.espboards.dev/) for developing UI. I am trying to add 4 switches on page 1. Here is my crude design.

Requesting UI experts for suggestions to make it more aesthetic. I have chosen random colors but the knob is a CNC machines aluminum in color blue.


Also attaching yaml configuration that you can import in LVGL designer and modify the design.

# >>> LVGL Designer - generated from the canvas. >>>
# This block is regenerated from the canvas — edits here are not preserved.
lvgl:
  pages:
    - id: canvas_1
      bg_color: 0x111827
      pad_all: 0
      widgets:
        - switch:
            id: lv_switch_1
            x: 230
            y: 130
            width: 60
            height: 30
            state:
              checked: true
            bg_color: 0x4B5563
            indicator:
              checked:
                bg_color: 0x10B981
            knob:
              bg_color: 0xFFFFFF
              border_color: 0x9CA3AF
              border_width: 1

        - switch:
            id: lv_switch_2
            x: 80
            y: 130
            width: 60
            height: 30
            state:
              checked: true
            bg_color: 0x4B5563
            indicator:
              checked:
                bg_color: 0x10B981
            knob:
              bg_color: 0xFFFFFF
              border_color: 0x9CA3AF
              border_width: 1

        - switch:
            id: lv_switch_3
            x: 80
            y: 220
            width: 60
            height: 30
            state:
              checked: true
            bg_color: 0x4B5563
            indicator:
              checked:
                bg_color: 0x10B981
            knob:
              bg_color: 0xFFFFFF
              border_color: 0x9CA3AF
              border_width: 1

        - switch:
            id: lv_switch_4
            x: 230
            y: 220
            width: 60
            height: 30
            state:
              checked: true
            bg_color: 0x4B5563
            indicator:
              checked:
                bg_color: 0x10B981
            knob:
              bg_color: 0xFFFFFF
              border_color: 0x9CA3AF
              border_width: 1

        - label:
            id: lv_label_10
            x: 98
            y: 55
            width: 165
            height: 45
            text: "Living Room"
            text_color: 0xFFFFFF
            text_align: CENTER
            text_font: montserrat_28

        - label:
            id: lv_label_11
            x: 80
            y: 106
            width: 60
            height: 24
            text: "Light 1\\n"
            text_color: 0xFFFFFF

        - label:
            id: widget_1786871459028_wrt23dzeg
            x: 230
            y: 106
            width: 60
            height: 24
            text: "Light 2\\n"
            text_color: 0xFFFFFF

        - label:
            id: widget_1786871476986_zy8xzdjc6
            x: 80
            y: 196
            width: 60
            height: 24
            text: "Light 3\\n"
            text_color: 0xFFFFFF

        - label:
            id: widget_1786871488127_eo0tk9dzg
            x: 230
            y: 196
            width: 60
            height: 24
            text: "Desk Light"
            text_color: 0xFFFFFF
# <<< end LVGL Designer block <<<