Microsoft releases its design guidelines for the Universal Windows Platform (UWP)

A couple of hours after Build, Microsoft is fast away offering up their Universal Windows Platform app development design guidelines. For app developers interested in getting into the new Windows Store, they now have some official design guidelines. These guidelines are being issued by Microsoft to help developers better optimize their apps for presentations on Windows 10-based devices like phone, tablets, PCs and Surface Hubs so far.

Design Basics

When establishing a basic design for (UWP) apps, Microsoft encourages:

“When you design a UWP, you create a user interface that suits a variety of devices with different display sizes. To make that easier, we give you a set of universal controls that automatically work well on all devices. The platform does the work behind the scenes to ensure that text and visuals scale between devices and are always legible. You can use the same code and design for all devices, and you can also tailor the user interface for specific screen sizes. For example, you can design an interface that works great for tablets and PCs and create a customized experience for mobile devices while still reusing most of your code.”

The more important bits about phones, phablets and tablets are buried in the design docks. While the UWP is designed to span across various form factors, for app developers seeking a form-factor specific experience may find the breakouts useful.

UI considerations for phones and phablets

• The small size of a phone’s screen allows only one frame at a time to be viewed in both portrait and landscape orientations. All hierarchical navigation patterns on a phone use the “drill” model, with the user navigating through single-frame UI layers.
• Similar to phones, phablets in portrait mode can view only one frame at a time. But with the greater screen real estate available on a phablet, users have the ability to rotate to landscape orientation and stay there, so two app frames can be visible at a time.In both landscape and portrait orientations, be sure that there’s enough screen real estate for the app bar when the on-screen keyboard is up.

For tablets

• In both landscape and portrait orientations, tablets allow two frames at a time.
• System back is located on the navigation bar.

For PCs and laptops

• Apps can have a windowed view, the size of which is determined by the user. Depending on window size, there can be between one and three frames. On larger monitors, the app can have more than three frames.
• When using an app on a desktop or laptop, the user has control over app files. As an app designer, be sure to provide the mechanisms to manage your app’s content. Consider including commands and features such as “Save As”, “Recent files”, and so on.
• System back is optional. When an app developer chooses to show it, it appears in the app title bar.

For Surface Hub

• Apps on Surface Hub will appear in 4 states – fill (fixed 449:236 aspect ratio view that occupies the available stage area, full (standard full-screen view 16:9 aspect ratio), snapped (variable aspect ratio view that occupies the right or left sides of the stage) and background (hidden from view while the app is still running, available in task switcher).
• In snapped mode or fill modes, the system displays the Skype sidebar and shrinks the app horizontally.
• System back is optional. When an app developer chooses to show it, it appears in the app title bar.

For Windows IoT

• “Headless” devices have no screen.
• Display for “headed” devices is minimal, only showing what is necessary due to limited screen real estate and functionality.
• Orientation is most times locked, so your app only needs to consider one display direction.

Guidelines

• Designers also need to take into account a list of possibilities that make the (UWP) a very impressive and pleasant experience. The list of items include animations, contracts, controls and patterns, files, data, and connectivity, globalization and localization, help and instructions, launch, suspend, and resume, layout and scaling, text and input, tiles and notifications, and user interactions.

For some die-hard Windows fans of Windows 8.1 and Windows Phone, the metro-esque design language is still in effect. Designers can now download design decks, controls and layouts for UWP apps. Hopefully, developers will take these considerations when developing or porting their apps to the Windows 10 platform in the future.

You can head over to design.windows.com to check out the new guidelines.