Overall UX suggestions

[leandrocp]

From a discussion with Thomas Cioppettini in Elixir Slack #beacon-cms

Thomas Cioppettini

We need to stack things vertically instead of side by side. Horizontal space is at a premium for every web app.

If you're going to have buttons move them into the top nav on the right hand side.

You don't need the fake browser window for the visual editor

Ideally I want the entire page below the top nav to be the preview page.

It's not immediately clear to me what the difference between an element and a section is.

Drag and drop should be from an offscreen canvas.

Thomas Cioppettini

This looks a million times better

You really want to avoid horizontal scrollbars at all cost.

Leandro Pereira

> Ideally I want the entire page below the top nav to be the preview page.
what about the components and properties sidebar? add a button to hide/show them?

> Drag and drop should be from an offscreen canvas.
can you expand a bit more on this?

Thomas Cioppettini

I had a similar problem that I had solved with our note taking app. Here's a short video of the solution we came up with.

Screen.Recording.2024-11-20.at.4.39.37.PM.mov

Thomas Cioppettini

Panel is hidden behind a button and then slides out you can click to add and then rearrange later.

The "Import Template" button at the top also opens the panel.