How do you design a great user interface? What is the best layout for your app? What makes an app easy and intuitive to navigate?
Ask these questions to kick start the design phase of your app's development. Then, learn how to implement your design.
Using guidelines, best practices, and examples, we'll help you take full advantage of the UI capabilities of Windows 8.1. You can define your app's UI so that it's intuitive, beautiful, consistent with other Windows Store apps, and also unique to your brand.
The following sections are an outline of tasks to help you design the UI for your app. They follow the best practices as described in the UX guidelines.
The Controls and layout gallery sample includes all the UI elements we talk about here. We'll refer to this companion sample often and point you to the places in it where specific features are implemented.
The sample app is a gallery of Windows Store app controls. With the sample, you can browse the controls and the code for implementing each control. You can also see how we implemented each of the steps in the below sections.
Before you start to design and develop your app, make sure you do the planning. Take the time to think about what your app is great at, who your audience is, what scenarios you want to implement, and what features you'll support. For more info about how to plan your app, see Defining Vision.
Start by deciding what navigation strategy you want your app to use. In this tutorial, we start from the Hub template. To design and develop the UI of your app, you can download the template and try things out as you follow the outline.
Or, if you want to jump right in and explore the code, skip directly to the Controls and layout gallery sample.
What goes where in a Windows Store app? Learn the guidance for laying out the UI.
In the sample, here's how we used this guidance:
Adding controls and laying out your app go hand-in-hand. You need to know what controls to add, and you need to design your layout before you choose controls. Understanding how controls work helps you make good layout decisions.
In this tutorial, we'll first look at individual controls. In step 3, you'll learn how to arrange them in a layout. If you prefer to learn about designing the layout first, you can skip ahead to the next section and come back to controls later.
Check out the sample code to see how we added each control in the gallery.
Familiarize yourself with the complete list of controls that are available and the purpose of each, and choose the controls you need for your app.
Add controls, such as the Button control and TextBox control, set properties on controls, and create event handlers that enable you to respond to actions from the user.
Learn about the grid system, headers, margins, and spacing, and how these create a consistent experience for the users.
A user can resize an app from the minimum width to full screen and can display it on different size screens, with different resolutions, and in different orientations. You can design your app to look great at any size.
In the sample, we used the default minimum width of 500 pixels, and we used the Grid control that reflows content automatically.
Create a fluid UI that looks good and functions well at any size.
Learn how to change the minimum width of an app from 500 pixels to 320 pixels and change your design so that the app looks good and functions well at narrow widths. Learn how to design a horizontally panning app to change to a vertical layout any time the app height is greater than the width.
As the pixel density of a display device increases, the physical size of objects on screen get smaller. When UI would otherwise be too small to touch and when text gets too small to read, Windows scales the system and app UI to a scale percentage. Learn how to ensure your app looks great when scaled.
Learn where to put commands - on the screen, in pop-ups, in dialogs, or in app bars.
Learn about grouping commands, consistent placement, styles and icons, and other important guidance for command app bars and navigation app bars.
In the sample, we implemented a top app bar for navigation. On the detail pages, we implemented a bottom app bar and adding a command for learning more about the specific control on the page.
Use context menus for immediate access to actions, like Cut and Paste. Keep context menus short and relevant to the selection.
Learn when to use the in-app search box control and when to use the search contract.
If your app has content to share, it's a share source. If your app can receive content from other apps, it's a share target.
Be smart about how you use the Settings charm. Keep your settings simple and few. Know the right settings for the Settings pane.
Learn when and how to implement app Help in the Settings pane and learn when to use other means to provide help, such as tips, demos, or redesigned UI.
Recommended. Running the certification kit helps you make sure your app fulfills Windows Store requirements, so you should do this when you've added major functionality to your app.
You’re finished! Now that you've considered the UX guidelines and designed the UI, your app should reflect the best practices to provide a great experience for users.
Now that you understand the basics, take a look at some of the other examples in the App features, start to finish series.
Browse the full list of user experience guidelines.
Follow the start to finish story for designing the user interaction experience for your app.
Follow this tutorial series if you're new to Windows Store app development and want to get started with your first app.