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

1

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.

bartclaeys

Bart Claeys

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.

2 3 4 5 6 7 8 9 10 11 12 13 14

15

Update, 2:55 p.m.: Here’s the full video of the presentation.

PreviouslyMicrosoft’s hits and misses: Insights from a prolific maker of Windows 8 apps

More from Build …

 

  • Vroo (Bruce Leban)

    I don’t understand what half of these steps have to do with iOS vs W8. Sure, some of it makes sense, like style changes and switching from paging to panorama. But W8 users want to see a few large thumbnails while iOS users prefer to see more smaller ones!? Users on iOS don’t want to see comments!??

    And the part I really don’t understand: apparently iOS users have square photos while W8 users have rectangular ones. I don’t think so.

    • Guest

      Instead of being a negative and condescending prick, why didn’t you look up the presentation on line and listen to it in full with accompanying audio description?

      • Vroo (Bruce Leban)

        Sorry you’re having a bad day. There was no link to the presentation in the article or in your comment. I found it and it’s an hour long and I don’t have time for that right now. http://channel9.msdn.com/Events/Windows-Camp/Windows-Store-App-Development-for-iOS-Developers/Design-differences-between-iOS-and-Windows-8 The message in those slides seems to be that Bart thinks he should show different data to W8 users and iOS users as I pointed out. Did Todd misrepresent Bart in choosing which slides to excerpt?

        • http://geekwire.com Todd Bishop

          Thanks, Bruce. I thought your questions were good ones. I do think these slides are a good representation of the basic principles that Claeys laid out, but I’ve added a link in the post to the full video for anyone who wants to get the full context. It was a very good talk and worth watching.

        • Guest

          Calling out your negative comment != me having a bad day. And why would I provide a link to something you could look up yourself in less time than it took to critique the presentation w/o benefit of the context? I don’t think your characterization is an accurate summary of his thinking at all. But then I actually listened to some of what he had to say, in context, instead of thinking I could glean the entire message from a small subset of slides. Go figure.

          • Guest

            Calling somebody a “negative and condescending prick” because you don’t like what they said is far more of a reflection on you than them. Like many talks at developer conferences, this talk and the slides presented above have a slant to them. And, yes, Apple is guilty too, and so are third parties like Ratio who present at the conferences.

            The fact is that there are plenty of iOS apps that look very similar to the final Win8 app. And there are also brand new Win8 apps that look very similar to the initial iOS app.

            The presentation would have been both better and more neutral had it been a side-by-side comparison of differences in platform design philosophy rather than structured as a “here’s how you fix an iOS app to make it fit Windows 8″.

          • Bart C

            Hi guest, Bart here. The rest of the presentation is a side-by-side comparison of the differences. What you see in this article is just a subset of the whole presentation. I never intended to ‘fix’ an iOS design, rather show how you can translate between the iOS and Windows 8 design language.

  • Guest

    “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.”

    Interesting wording. Had it occurred in reverse it would have been called wholesale ripped off.

  • Guest

    Maybe I’d watch this presentation Microsoft if you didn’t make me use your shitty Silverlight player.

    This isn’t converting me or anyone-and attempting to take stabs at iOS for visual elements is stupid as hell considering iOS7 improved many of the above mentioned issues.

    Besides that-iOS has well over ten times as many apps as Windows which means you have many many alternatives if you really care about UI/UX.

    • Guest

      The presentation referenced in the article occurred at /build, Microsoft’s recent developer event in SF. The link in the update seems to be similar, but actually references a December presentation on MS’s Channel 9. The latter predates any recent iOS7 announcements, and the video itself is downloadable is a variety of formats for those who can’t watch it directly – which is more than you can say for most Apple equivalents. Also, you realize the presenter isn’t from MS, right?

      • Bart C

        Bart here, the presenter. I’m working at Ratio Interactive, a cross-platform development and design agency in Seattle. Besides Windows 8 we also develop and design apps for iOS (eMarketer, iCookbook, Allrecipes Video, Pirq,…) and Android (iCookbook, Pirq,…).

        You are right, I was speaking at Build earlier today. The video recording of that session isn’t available on Channel 9 yet. The link in this article refers to an older session from last year. Thanks for pointing that out.

        • Guest

          No problem. I got a lot out of your presentation and thought it was great btw.

    • ninjacut

      How does that matter? The article is about the UI differences and how to approach them if you are ‘interested’ in developing for Windows and coming from iOS. It has nothing to do with how many Apps are available on iOS or its market share
      If you think Windows is insignificant, then so was OSX for decades but that did not stop people taking interest in developing for it.

    • SilverSee

      Whoa… bad day?
      Silverlight is just a plug-in like any other. Have you tried navigating Apple’s web sites without using QuickTime lately?

  • http://stonekline.drupalgardens.com/content/ipad-applications-might-prove-useful-your-important-work TadMiles

    changing site platform from iOS to window 8 is really nice thing for developer.because its not easy to design and developing.great work.