> For the complete documentation index, see [llms.txt](https://steijn.gitbook.io/devlogs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://steijn.gitbook.io/devlogs/blewscreen/everlake/ui.md).

# UI

![UI design that i was given](/files/Y1KJmrRPFbCcZZm4Tv8o)

For my placement system, I of course need to have a UI system that allows the user to select the furniture. While I was developing the placement system, we also had to implement the redesign listed above, which took part later. I’ve learned a lot about UI masking, anchoring and positioning in this one.

For the UI, I required all buttons to pass on a furniture object. The furniture list required repositioning and reformatting. I made this feature my starting point.

Each furniture item needed a ChatroomAssetObject script, a furniture layer / tag  for identification, collider for collision detection and a navmeshObstacle. I changed all furniture to follow this setup.

It required me to look more into how these scroll views are set up as I haven't worked with these before. They are surprisingly difficult to set up properly. My biggest issue was getting the scroll bar at the required position while also scaling properly.

The result matched the design, and the project manager was satisfied with the results.

![Final result](/files/nRSkRUtCJYoTZK8VQGhh)