Laying out an app page
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
You can use the layout pattern described here to lay out UI elements on your app pages. Following a consistent pattern for margins, page headers, gutter widths, and other such elements maintains unity across apps and helps people easily understand interactions across the system.
The user interface in Windows 8 strives to maintain a consistent silhouette across its apps. The signature characteristic of the silhouette is a wide margin on the top, bottom, and left edges. The wide margin helps users understand the horizontal panning direction of the content.
See these features in action as part of our App features, start to finish series: Windows Store app UI, start to finish
Using the grid system
Before we talk about the Windows 8 silhouette, you should know a little about using the Windows 8 grid system. The grid system is a design tool that helps achieve visual unity across different apps, while providing a structure for variation and maintaining user interest. The grid system is built into the developer templates and we designed our controls and collections with the grid system in mind.
The grid is made up of units and sub-units. The basic unit of measurement is the unit. One unit equals 20 × 20 pixels. Each unit is further divided into sub-units of 5 × 5 pixels. There are 16 sub-units per square unit. The image below depicts the grid in the upper-left corner of a screen. The image is enlarged to show pixels, sub-units, and units.
.png "Illustration of the grid system")
Page header
The baseline of the page header should be 5 units, or 100 pixels from the top. The left margin for the page header is 6 units, or 120 pixels. The Windows 8 page header is SegoeUI Stylistic Set 20, light weight. For more information about Stylistic Sets, see Guidelines and checklist for text and typography.
Note In Windows 8.1 Update, users can move the mouse to the top edge of the screen to reveal a title bar. Users can also move the mouse to the bottom edge of the screen to reveal the task bar from the desktop. When the user moves the mouse away from either edge, the title bar and the task bar are hidden. Users can't reveal the title bar or task bar with touch. When displayed, the title bar and the task bar my occlude your app's UI or command elements, so consider this when you define the position of elements in your app layout.
.png "Illustration of page header")
Content region
The content region has a top margin of 7 units, or 140 pixels. The left margin is 6 units, or 120 pixels. The bottom margin is flexible. For horizontally panning content, it should be no more than 6.5 units (130 pixels), and no less than 2.5 units (50 pixels). For vertically panning content, the top and left margins remain the same. There is no specified bottom margin because the content scrolls off the screen.
.png "Illustration of content region")
Horizontal padding values
Horizontal padding between content items varies depending on the items. Hard-edged items (like images and user tiles) have 2 sub-units, or 10 pixels, of padding between the tile and accompanying text. Lists have 2 units or 40 pixels of padding between columns. Hard-edged items have 2 sub-units, or 10 pixels, of padding between columns.
.png "Illustration of horizontal padding values")
Vertical padding values
Vertical padding between content items also varies depending on the types of items. Tile and text lists have 1 unit, or 20 pixels of vertical padding between items in a row. Hard-edged objects have 2 sub-units, or 10 pixels, of padding between items in a row.
.png "Illustration of vertical padding values")
Horizontal padding between groups
The padding between groups is 4 units, or 80 pixels. This padding is generous to allow enough separation to easily distinguish one group from the next when the user is panning.
.png "Illustration of horizontal padding between groups")