Where should I start for designing the UI of an application?


Sorry if this is a stupid question but I have very little to no knowledge about developing desktop applications. I’m a backend developer and I have a little understanding of what is what etc. I want to develop GNOME-first applications but I’m having trouble as I cannot understand the relationship between different widgets.

I’m planning to create an application similar to Beekeeper Studio or Jetbrains DataGrip where you can query databases, export data etc. Main application window will be split into 3 main views. On the left, there should be a widget like GtkStackSidebar where I’m planning to show database objects like tables etc. On right at the top there will be a SQL editor where you write your queries. And on the bottom, there will be a table like view for query results. I also want to place horizontal bars below these to place a button for exporting data.

Even if I have a basic understanding of what a widget does by looking its name, I can’t understand how they relate, how I should place them. Previously, I’ve used Glade to place containers or grids and then place widgets inside them. Now I think grids mean grids for images like in File Manager. In short, I can’t understand how I should lay widgets as you’d place HTML tags inside <body> tags. I try to look at some existing applications such as GNOME ToDo but I can’t easily see the answer.

I’m trying to use Cambalanche for laying out widgets but couldn’t figure out how to divide the screen and place widgets. Is there a document or tutorial that I can follow?