Fluent design layout

Since rumors of the evolution of the guidelines for Windows and some leaks, I’ve been making some concepts based on what we’ve seen so far.

Now that the Fluent Design System is out with some tools (depth, material, light, motion and scale) showed to devs and designers, there are already some devs who are building their apps based on those guidelines (myTube, Reddunt, Newsflow, Soundbyte, etc.)

But, there are also other devs who need more structure from guidelines to be able to implement the changement in their apps.

So here we are, based on: apps and concepts I’ve seen, and redesigns I’ve made ; I will show here some examples of layout to be used with the acrylic material and depth.

The classic ‘three-column layout’

Maybe one of the most seen layout (can be seen on the mail app for example), the tree-column layout allows to create horizontal hierarchy for the content. From the left (menus) to the right (content).This means that the most important part of the app (content) is the right area, and need to have the better visibility and contrast for the user.

In other word, if we want to use acrylic on a tree-column layout the right part of the app needs to be opaque, and the more we navigate to the left, the more the background is translucent.

Following the same goal, the right part needs to contrast more, we can use depth to improve the layout by giving some shadows to the right area.

So here a quick layout:

Three-column layout

The Two-column layout with compact hamburger-menu

This is a really long title for a small variant of the three-column-layout. Here we can imagine that there is no need more than icons to understand the navigation, so we can compact the left-area and only show icons.

This layout was used for a contact app in one concept. As you will see, the content area (right side) doesn’t go to the top of the window. This hint helps to understand the place of the title bar area (where the user can grab to move the window) without filling it with a different color.

Two-column-layout with compact hamburger-menu

The Two-column layout with pivot-control

This one is a lot like the precedent layout, except there is one column less and the navigation works by using the pivot-control.

In this layout, there are also three layers:

• the content area
• the navigation area
• the context area (the bottom layer)

The two first areas don’t need explanation, but the context area maybe.

In this case it serves to give some context to the app by using this small area to display the user-account and settings.This layout allows to access the account menu for example (which can be display above the window) without losing the location in the app we were before going to the account menu. It helps removing the rupture in the navigation when we need to quickly go to the account or setting menu (or any other menu that don’t need to be part of the navigation in the app).

Two-column-layout with pivot-control

The two-column layout with home-area

This is an other variant of the two-column layout, except in this one there is more room for the context area.This new space is used to display more elements, and can be used as a home area with common buttons as: home, search, account.

The content area (with a small pivot control in this example) is still linked to the navigation area on the left, And the home-area allows to go to the account or setting without losing the navigation (as the precedent layout), but also can be used for example, to search for content in all the app (without thinking about where we are in the navigation).

Also, this example has two navigations:

• one in the navigation area (in the left)
• the other is the pivot-control in the content-area

One of those navigation tools could be removed. For example, if you remove the navigation area by choosing to use only the pivot-control, the layout will look a lot like the windows store app.

Two-column-layout with home-area

And a variant with a different kind of content in the content area and a detail pane in it.

Two-column-layout with home-area bis

Three-layer layout with context-aware-area

Even if this one doesn’t seem really different from the precedent, it is.

In the precedent layout we’ve used:

• the bottom layer for the home area
• the middle layer for the navigation area
• the top layer for the content area.

In this layout

• the bottom layer will be used for the navigation area
• the middle layer for the context-aware area
• the top layer for the content area

So what is the context-aware-area? and what is it used for?Maybe it will be more easier to understand after displaying the picture:

Three-layer-layout with context-aware-area

In the precedent layout, the home area allows to search throughout all the app without thinking about the navigation.This layout is its contrary, the context-aware area gives controls that only work for the content area.

So this context-aware area can be used to put:

• search control that only works for in content area
• details about the content area
• settings for the content area

This is a more complexe layout, where each content area (link to the navigation) needs its proper controls for search, settings, tools, etc.

The ruban-menu layout

Because MS uses a lot of ruban-menu for their apps (Office, Windows explorer, etc.), a layout using some tools of the Fluent Design System was needed.

This layout will take a lot from the precedent layout with the context-aware area. In fact, this is the exact same layout when removing the navigation area.The context-aware area is used for the same purpose: to display controls that impact the content area.

Ruban-menu layout

By taking inspiration from the ruban-menu of Office, here the context-aware area organizes all the control under a ruban-menu.

The Vertical layout

The last but not the least, after showing some layouts ordered by their complexity, the final layout is one of the simpler.

This is the layout also used in the photo app.

Vertical layout

This layout is great to display visual content when there are few navigation options and no needs for many controls.

Final words

I want to remind that those layouts don’t come from Microsoft, they were built from designs I’ve seen and made. I’ve wrote this article to help developers who are beginning in the Windows platform or the ones who need more structured guidelines, and not to dictate anything to anyone.

I hope those layouts will be usefull for you if you are a dev looking for guides to develop your app or to anyone looking to develop Windows app.

Thanks for reading, and feel free to leave a comment!

And here you can read the next story about “Layering Structure”.

PS: sorry for the English, I’ve surely made spelling mistakes or weird sentences, I’ve tried to do my best, and I will keep improving.