Since rumors of the evolution of the guidelines for and some leaks, I’ve been making some concepts based on what we’ve seen so far. Windows Now that the is out with some (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.) Fluent Design System tools 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 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. tree-column layout In other word, if we want to use on a the right part of the app needs to be opaque, and the more we navigate to the left, the more the background is translucent. acrylic tree-column layout Following the same goal, the right part needs to contrast more, we can use to improve the layout by giving some shadows to the right area. depth 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 to understand the navigation, so we can compact the left-area and only show icons. icons This layout was used for a app in one concept. As you will see, the (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. contact content area 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 (the bottom layer) context area The two first areas don’t need explanation, but the maybe. context area In this case it serves to give some to the app by using this small area to display the and .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. (or any other menu that don’t need to be part of the navigation in the app). context user-account settings It helps removing the rupture in the navigation when we need to quickly go to the account or setting menu Two-column-layout with pivot-control The two-column layout with home-area This is an other variant of the , except in this one there is more room for the .This new space is used to display more elements, and can be used as a with common buttons as: home, search, account. two-column layout context area home area The (with a small pivot control in this example) is still linked to the on the left, And the 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). content area navigation area home-area Also, this example has two navigations: one in the (in the left) navigation area the other is the pivot-control in the content-area One of those navigation tools could be removed. For example, if you remove the by choosing to use only the pivot-control, the layout will look a lot like the windows store app. navigation area Two-column-layout with home-area And a variant with a different kind of content in the and a detail pane in it. content area 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 ? and what is it used for?Maybe it will be more easier to understand after displaying the picture: context-aware-area Three-layer-layout with context-aware-area In the precedent layout, the allows to search throughout all the app without thinking about the navigation.This layout is its contrary, the gives controls that only work for the . home area context-aware area content area So this can be used to put: context-aware area 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 (link to the navigation) needs its proper controls for search, settings, tools, etc. content area 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 . In fact, this is the exact same layout when removing the .The is used for the same purpose: to display controls that impact the . context-aware area navigation area context-aware area content area Ruban-menu layout By taking inspiration from the ruban-menu of Office, here the organizes all the control under a ruban-menu. context-aware area 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 , they were built from designs I’ve seen and made. I’ve wrote this article to developers who are beginning in the Windows platform or the ones who need more structured guidelines, and not to dictate anything to anyone. don’t come from Microsoft help 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 you can read the next story about “ ”. here 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.

Microsoft

Too Long; Didn't Read

Making security fun one episode at a time

Fluent design layout

Too Long; Didn't Read

Company Mentioned

Maël Navarro Salcedo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Fluent design layout

Too Long; Didn't Read

Company Mentioned

Maël Navarro Salcedo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES