Design Case Study: Website to Metro Style App

The food truck website and app

The basis for this article is a food truck website that lets users browse food trucks in their area, stay up to date with the latest news, and provide user reviews of food trucks. In the design oriented case study that follows, we explore ways to reimagine the core functionality of the site and extend it as a Metro style app.

The Contoso Food truck app

Our goal in migrating to a Metro style app was to highlight the best features of the website while maintaining parity with core functionality of the site. We determined that the Metro style app is best at letting users browse and find nearby trucks. The next figure shows the anatomy of the food truck website UI. Here we show how to translate each of these UI components to Metro design style.

Elements of the Contoso Food truck app

  • Layout and navigation
  • Commands and actions
  • Contracts: search, share, and settings
  • Touch
  • Scaling and views
  • Notifications

Read More

Source: msdn.microsoft.com

Design Case Study: iPad to Metro Style App

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 the Metro design style.

The Photo journal iPad app.

  • Layout and navigation
  • Commands and actions
  • Contracts: search, share, and others
  • Touch
  • Orientation and views6. Notifications

Read More

Source: msdn.microsoft.com

Top