UI design suggestions after 1.3.5.0

[asuetin]

Is your feature request related to a problem? Please describe.
I feel like the UI design in 1.3.5.0 is a little confused between the classic UWP two-pane aesthetic and the Chromium Edge aesthetic with more solid grays, which results in the app being just kind of a gray mess where everything blends together.

Describe the solution you'd like
Stick to the UWP two-pane aesthetic with an acrylic/gray sidebar and white content area. I think it works and looks better in a file manager where all pages have a uniform background color, unlike Edge where each page is unique.

Also, the preview pane button and the overflow menu having a whole row to themselves seems very strange. Either move them to the same row as the address bar, or fill the row with the commands from the overflow menu, only showing the three dots when the window isn't wide enough.

I've made some mockups:

[SOI7]

Agree on the icons being on the same row, but the different shades of white/grey help a lot at separating each part of the container, and the old, full white layout made the app also harder on the eyes

[asuetin]

the different shades of white/grey help a lot at separating each part of the container

Does it need further separation though? The address bar spanning nearly the entire width of the window and the vertical spacing between the bar and the content already serve the separation needs well IMO. The border isn't needed for resizing either.

Painting the area gray just seems like ruining the two-pane look for no tangible benefit.

and the old, full white layout made the app also harder on the eyes

That's fair. I find white backgrounds both easier on the eyes and better-looking. That's all subjective of course, but I think my case is helped by the fact that white backgrounds are standard practice nowadays, and breaking from that requires strong justification.

[yaira2]

That's fair. I find white backgrounds both easier on the eyes and better-looking. That's all subjective of course, but I think my case is helped by the fact that white backgrounds are standard practice nowadays, and breaking from that requires strong justification.

@asuetin This practice is starting to change, you can expect to see inbox apps and other apps start to adapt similar style over the next few months to what we are doing in Files.

[asuetin]

@asuetin This practice is starting to change, you can expect to see inbox apps and other apps start to adapt similar style over the next few months to what we are doing in Files.

@yaichenbaum Really? Is there an article/design spec where I can read about this? This is not a gotcha, I'd genuinely love to know.

[yaira2]

@asuetin It's still in the experimental phase and it's not final, but you can find the pull request from WinUI over here microsoft/microsoft-ui-xaml#3898.

[asuetin]

@asuetin It's still in the experimental phase and it's not final, but you can find the pull request from WinUI over here microsoft/microsoft-ui-xaml#3898.

@yaichenbaum Huh, okay then. Thanks for the info.

Still, even if the grays have to stay, I think the design could be improved:

1. Removed the unnecessary row with the details button and the overflow menu
2. Added an Edge-like slight drop shadow around the address bar
3. Added an Edge-like 1px border between the top bar and the content
4. Added a drop shadow between the sidebar and the main content area to better separate them
5. Removed the gray background on the bottom bar for a cleaner and more File Explorer-like look

[asuetin]

Could also do this for a more uniform right pane (I like this one the most):

[asuetin]

Another option is ditching the acrylic altogether and going full Edge (but I'm in favor of retaining at least some acrylic):

[yaira2]

Removed the unnecessary row with the details button and the overflow menu

This row is necessary, we are still working on it, but we plan on adding more buttons there in the future.

Added an Edge-like slight drop shadow around the address bar

Great feedback! This is something that we plan to do.

Added a drop shadow between the sidebar and the main content area to better separate them

There is already a shadow there, but it looks like it's hard to see. Can you open a new issue for this?

Removed the gray background on the bottom bar for a cleaner and more File Explorer-like look

This is something we can explore, can you open a seperate issue to start a discussion?

[asuetin]

Added a drop shadow between the sidebar and the main content area to better separate them

There is already a shadow there, but it looks like it's hard to see. Can you open a new issue for this?

#3850

Removed the gray background on the bottom bar for a cleaner and more File Explorer-like look

This is something we can explore, can you open a seperate issue to start a discussion?

#3851

[yaira2]

@asuetin Thank you for opening those issues, I am going to close this issue since we are tracking the other issues separately.