Quantcast
Channel: Digital Satisfaction - User Experience Blog and Portfolio Site of Brad Zabroski » touch
Viewing all articles
Browse latest Browse all 2

Design case study: iPad to Windows 8 Metro style app

$
0
0

Found this article on the Windows Dev Center written by Bart Claeys and Qixing Zheng. Extremely useful in re-imagining your iOS app for use on the Windows 8 platform using metro style design.

————–

iOS is a popular platform for creating apps that are touch first, fun, and engaging. With the introduction of Windows 8 Consumer Preview, designers and developers have a new platform to unleash their creativity.

In this case study we want to help designers and developers who are familiar with iOS to reimagine their apps using Metro style design principles. We show you how to translate common user interface and experience patterns found in iPad apps to Windows 8 Metro style apps. We draw on our experience building the same app for the iPad and for Windows 8. We use common design and development scenarios to show how to leverage the Windows 8 platform and incorporate Metro style design principles.

To learn more about the business opportunity of Windows 8, see Selling apps. For more info about the features used to build Metro style apps, see the Windows 8 Product Guide for Developers.

The app

The app we are developing is a connected photo journal where users can view and manage their photos and videos online using a timeline view.

The Photo journal Metro style app.

The app was first created for the iPad. The next figure shows the anatomy of the iPad app. Let’s now see how each component translates to Metro style design.

The Photo journal iPad app.

  1. Layout and navigation
  2. Commands and actions
  3. Contracts: search, share, and others
  4. Touch
  5. Orientation and views
  6. Notifications

 

Layout and navigation

Focus on content, not chrome

The Photo journal app needs to be great at showing user’s photos and recent social activities for those photos. When creating the Metro style app, our first goal was to remove all UI elements that were not directly relevant to the core functionality of the app. For example, the top navigation bar, pagination controls, and the bottom control bar can all be removed. In the next section, we talk about how users can bring up chrome when needed using the app bar.

Continue reading full article –>

Design case study: iPad to Windows 8 Metro style app originally appeared on Windows Dev Center – Metro style apps on March 15, 2012 and was written by Bart Claeys and Qixing Zheng.


Viewing all articles
Browse latest Browse all 2