The layout of your app, both the content and the navigation between pages, is essential to the overall design and feel of the app. The layout can create a hierarchy, organize your content, and reflect your brand. A user's experience with an app depends on the structure of pages and content.
Windows layouts are authentically digital. They embrace the digital medium and avoid real-world metaphors that are often unnecessary or misleading in the digital world. The freedom of unconstrained digital layouts can create powerful, beautiful apps and experiences for users.
Windows layouts have a clean, unobstructed feel and attempt to reduce visual clutter on the canvas. You can choose to move controls to the app bars on the edges of the app. The key features of an app can then take a prominent place on the canvas, improving the usability of your app.
Depending on the content of your app, you might wish to create a light, airy composition with large interactive pieces, or a more dense experience that feels rich with content and commands to explore. For example, the Reading List app has an open, minimal layout. Consider what’s visible in your app and what you move off the canvas, and how your layout choices affect the experience and usage of your app.
The Xbox Music app uses a nontraditional vertical grid and vertical panning to show a large range of content all at once. The persistent app bar at the bottom ensures that frequently used controls are always available so that users can quickly move through their playlists while they explore other areas of the app.
Songza, a music app that changes based on the user scenario, uses a minimal, horizontal layout. Since the majority of the user’s time with this app will be listening rather than actively navigating, less is really more.
Many apps use a hierarchical system of navigation. The hub, or landing page, is the user’s entry point into the app and to additional levels of content. It displays content in a rich, panning view that lets users get a glimpse of what’s new and exciting, and then dig deeper into your app’s content. The hub control gives you a framework and gives you the flexibility to customize your app to fit your brand.
Hierarchical navigation is only one model of app layout and your app should take advantage of the layout and navigation model that best suits your brand and creates the best experience for app users. Composition and layout are open for creativity and provide a huge opportunity for creators to make something unique.
Consider both portrait and landscape orientations for your app. Decide if the grid on which content is arranged is most effective in a vertical or horizontal format. As more and more apps take advantage of the modern design language of Windows, the approaches to app layout and design evolve to fit each app’s individual needs and brand. Layout is the ideal place to innovate and make your app stand out. See Laying out an app page for more detail on the Windows grid system.
Facebook uses a strong grid-based layout to organize its multitude of content and commands on the canvas to let users engage right away with all the services Facebook provides.
Foursquare is an app all about location and new experiences. The layout of the app reflects this mission with bold imagery that showcases each featured location. Ratings and reviews are anchored below the image, creating a unified composition that lets users assess a location in a glance and tap to delve further.
The layout of Foursquare is dynamic and restructures itself to fit the content best on each area of its app. Panning all the way to the left of the app produces a map of popular spots nearby. Tapping on a location displays a detailed page with all check-ins and comments from users. Tapping on any of these shows a snippet of the recommendation.
The NOOK app by Barnes and Noble uses the fundamental concepts of a hierarchical, hub-based model, but customizes it deeply to make a distinctive, NOOK-branded experience. The faint shadow below each book gives a subtle nod to the physical quality of the books instead of just displaying cover images. In this case, a suggestion of the real-world analog enhances the user’s experience.
- Guidelines for the hub control
- Navigation patterns
- Laying out an app page
- Laying out your UI (Windows Runtime apps)
- Laying out your UI (XAML)