Windows Store app UI, start to finish
[This documentation is preliminary and is subject to change.]
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. 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.
Coming soon: We'll be adding a sample app that demonstrates the principles and of UI design, and how to implement them. With the sample, you'll be able to see how we put this guidance into practice to develop an app. For now, you can read the guidance and view some code snippets. Check back soon for the sample app!
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.
If you're new to Windows Store app development or are unfamiliar with app layout, navigation, controls, and commands, you might find it helpful to review each step. Otherwise, feel free to browse around. We've grouped related aspects of app UI development. The guidelines, tasks, and sample code here are specific to developing Windows Store apps with C#/VB/C++ and XAML. For the JavaScript and HTML version, see Design and create a Windows Store app UI.
Step 1: Get set up and learn what goes where
Before you start designing and developing your app, make sure you have done 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 planning your app, see the Planning section.
 |
Start by deciding what navigation strategy you want your app to use. In this tutorial, we start from the Basic flat navigation template. You can download the template and try things out as you follow the outline to design and develop the UI of your app. For more information, see Navigation patterns. |
 |
What goes where in a Windows Store app? Learn the guidance for laying out the UI. In the sample, we'll show how we used the guidance to design our app.
|
Step 2: Choose controls to add
Adding controls and laying out your app go hand-in-hand. You need to know what controls to add, but you need to design your layout before you add 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.
 |
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. |
|
Quickstart: Adding HTML controls and handling events 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. |
|
Customize the look and feel of controls to give your app personality, infuse your brand, and make your app stand out. |
Step 3: Build the layout
|
Learn about the grid system, headers, margins, and spacing, and how these create a consistent experience for the users. |
|
Guidelines for window sizes and scaling to screens 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. |
|
Create a fluid UI that looks good and functions well at any size. |
|
Quickstart: Designing apps for different window sizes Design your app to adapt to any window size, down to the minimum width. |
|
Guidelines for scaling to pixel density 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. |
Step 4: Choose where to put commands and how to use charms
|
Learn where to put commands - on the screen, in pop-ups, in dialogs, or in app bars. |
|
Guidelines and checklist for app bars Learn about grouping commands, consistent placement, styles and icons, and other important guidance for command app bars and navigation app bars. |
|
Guidelines and checklist for adding context menus How to add a menu to an app bar Use context menus for immediate access to actions, like Cut and Paste. Keep context menus short and relevant to the selection. |
|
Guidelines and checklist for search Quickstart: Adding search to an app Learn when to use the in-app SearchBox control and when to use the search contract. |
|
Guidelines for sharing content 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. |
|
Quickstart: Adding app settings 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. |
Step 5: Customize your tile and splash screen
|
Guidelines and checklist for tiles and badges Quickstart: Creating a default tile Quickstart: Sending a tile update Your tile represents your app on the Start screen. You want it to be appealing. Learn about branding, live tiles, tile sizes, and clean design. |
|
Guidelines and checklist for splash screens Quickstart: Adding a splash screen Every Windows Store app must have a splash screen. Learn to customize your splash screen image and background color, and learn to display an extended splash screen. |
Step 6: Wrap it up
 |
Run the Windows App Certification Kit. Recommended. Running WACK helps you make sure your app fulfills Microsoft 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. |
Want to know more?
Browse the full list of user experience guidelines.
User interaction: Touch input... and beyond
Follow the start to finish story for designing the user interaction experience for your app.
Create your first Windows Store app using C# or Visual Basic
Follow this tutorial series if you're new to Windows Store app development and want to get started with your first app.
Build date: 6/20/2013
