Friday, September 18, 2015

Windows 10 App Design

I recently started moving one of my Windows 8 XAML apps to Universal Windows Platform (UWP) and was looking for some guidance on design and interaction. In previous versions, Visual Studio contained templates for Windows Apps including a Grid and Hub layout for Metro. But for the new Windows 10/UWP design, there are no templates included in Visual Studio 2015 at this time.

To see the drastic design differences between Win8 and Win10 apps, you don't have to look farther than first party apps, such as the News app...

Windows 8 News App

Windows 10 News App

As you can see, the metro-like concepts such as horizontal scrolling, slide-out menu options and mandatory full screen have been abandoned for vertical scrolling and *ahem* hamburger menu navigation.

So, as an App Developer, where do you go to get a "quick start" or guideline for UWP? Here are a few resources that I found useful.

  • UI basics for UWP apps breaks down the parts of an app from a high level, but stops short of code examples. Still a good idea to read through this though!
  • Navigation menu (XAML) sample is a concrete example of the Hamburger Menu integrating with navigation. I used this as a starting point for porting my app.
  • Template 10, while I chose not to use it, offers a more fleshed out starting point for a XAML-based UWP app. I started poking around with this, but it appears to be still a Work-in-progress at this point and had a bit more than I needed for my app conversion.