Step by step: Watch an iPad app transform for Windows 8

SAN FRANCISCO — One of the most interesting sessions this morning at Microsoft’s Build conference was on “Design Differences Between iOS and Windows 8,” led by Bart Claeys, the creative director from Seattle’s Ratio Interactive.

As the title suggests, it was a deep dive into the nuances of the user interface and design principles of Windows 8, as contrasted with the iPad. As we noted in our past profile of Ratio, the company focuses not only on Windows 8 but also on Android and iOS, so it has a view across the platforms.

With iOS7, Apple is going more in the direction of Windows 8 with a flat design that sheds the skeuomorphism and complex shading of iOS6 with a flatter design. But many people who have been developing and designing apps for the iPad have the legacy iOS design as their context. And these are exactly the people Microsoft hopes to refocus on Windows.

In that spirit, Claeys’ presentation included a step-by-step transformation of a hypothetical iPad app into a Windows Store app, showing the removal of “chrome,” the emphasis on the panorama view, and other elements of Windows 8 design.

One of his key messages: “You can just purely give emphasis to the content and get rid of all those distracting elements.”

It was instructional and interesting enough that I asked Ratio for a copy of the slides, and we’re reprinting this portion of them here with permission of the agency. Without further ado, here Claeys’ recipe for transforming an iPad app for Windows 8.