Windows Store app UI, start to finish
[This documentation is preliminary and is subject to change.]
How do you make 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 of UI design, and how to implement them. With the sample, you'll 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. It follows the best practices 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 JavaScript and HTML. For the C#/VB/C++ and XAML 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 then choose the set that you'll need for your app. |
|
Quickstart: Adding HTML controls and handling events Use HTML controls, such as buttons, check boxes, and drop-down lists. |
|
Quickstart: Adding WinJS controls and styles Use controls in the Windows Library for JavaScript, such as the ListView control, rating control, and flyout control. |
|
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. |
|
Quickstart: Defining app layouts Create a fluid UI that looks good and functions well at any size. |
|
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 - and decide where your app's commands should go. |
|
Guidelines and checklist for app bars Quickstart: Adding an app bar with commands Learn about grouping commands, consistent placement, styles and icons, and other important guidance for app bars. |
|
Guidelines and checklist for adding context menus 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. |
|
Quickstart: Adding a splash screen Guidelines and checklist for splash screens 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
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
