8 Traits of Great Metro Style Apps

Notes from http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

8 Traits of Great Metro Style Apps

Bonny Lau

1. Metro design style

  • Content before chrome
    • Leave only most relevant stuff on screen
    • Remove gradients
    • Use typography to shore hierarchy
    • Controls can be in app bar (Win-Z or swipe)
    • Use project templates

2. Be fast and fluid

  • Animation illustrates what is happening
  • Many built into controls
  • Animation library–standard animations
  • Touch-first
    • Windows 8 touch language
      • Press/hold to learn
      • Tap for action

3. Snap and scale beautifully

  • Screen sizes: 1024×768 on up
  • Larger screens, show users more content
  • Snap state

4. Use the right contracts

  • Share, Search, File Picker
  • Any app can share data with other apps
    • Source app provides something to share
    • Target app
  • Every app can be share source
  • Search contract
    • Search app from within Windows
    • Results displayed in app
  • File picker contract
    • Pull files from app or push
  • Invest in good tile

5. Invest in a great tile

  • Front door
  • Highlight content & brand personality

6. Feel connected and alive

  • Dynamic/relevant/personal content on tiles

7. Roam to the cloud

  • Every app gets per-user cloud storage for settings, state, etc.

8. Embrace the Metro design principles

  • Do more with less
  • Pride in craftsmanship (typography matters)
  • Be fast and fluid
  • Authentically digital (connected)
  • Win as one – contracts to work w/other apps

Windows 8 Developer Preview Install Screenshots

Microsoft released a Developer Preview version of Windows 8 at the BUILD conference on 13 Sep 2011.

Here are all of the the screenshots from a clean install of this build of Windows 8.  (Windows 8 M3, build 8102 – pre-beta Milestone 3).

When you power up the machine, the process of booting from the DVD begins.

The Developer Preview announces itself.

You get to the first install screen, where you get to select the language. Under the “Language to Install” option, English was the only choice.

After clicking Next, you get a screen giving you the option of doing the install or starting a repair operation.

After clicking the “Install now” button, the install starts.

The first thing you’ll see is the license agreement.

You then get the option to upgrade or do a clean install.  Note that, according to the keynote, you can not upgrade Windows 7 to Windows 8, but must do a clean install.

Clicking on the Custom button to do a clean install gets you to a page where you select a partition to install Windows 8 to.

The install process then starts.

Things proceed quickly, with the “Expanding Windows files” step taking the longest.

Once the basic install steps have completed, Windows tells you that it’s going to reboot before continuing.

Windows 8 now boots from the hard drive for the first time.  It announces itself once again as the Developer Preview and says that it is “Preparing”.

It then says that it is “Getting Devices Ready”.

When this step is complete, we see that Windows is “Getting system ready”.

And Windows will reboot once again.

After the reboot, we do some more “Preparing”.

And finally, we see the first configuration screen and the first appearance of a Metro style user interface.

In the first step, we give the PC a name.

We then see a Settings page, where we can accept the default recommended settings, or choose “Customize” to set things up explicitly.

When you select “Customize”, you’ll first be asked whether to turn on sharing.

You’ll then see some security-related settings (shown below as two separate screen captures).  It’s actually a little disappointing that they’ve made the text so large that you’re required to scroll to see everything on this page.  They should have either split this into two pages, or used a smaller font so that you could read everything without scrolling.

You’ll then be asked questions about what information you’re prepared to share with Microsoft.  It’s nice that they ask our permission for all of this, but you should note that these options are all ON, by default.

You’ll then see a settings page related to updates.

You now see a Log on screen, where you can log into Windows using your Windows Live ID.

You enter your e-mail address and Windows Live password.

Windows goes off and does something will all of these settings.

You get one more “Preparing” screen.

And Windows does a little more work in configuring your settings.

At this point, you’ll get a brief glimpse of the Windows 8 desktop.

Finally, the Metro user interface shows up, listing all of the apps that you can launch from Metro.

As you scroll to the right, you can see the full set of apps that show up in Metro in this developer preview.

At this point, Windows 8 is up and running.

Note that you can switch to the classic Windows desktop by clicking on the “Desktop” app in the Metro interface, or by pressing the Windows key on your keyboard.  You’ll see the familiar Windows desktop.

Clicking on the Windows icon at the lower left will switch you back to the Metro user interface.

BUILD Conference Notes #2 – Keynote, part II – Building Applications

BUILD conference keynote.  13 Sep 2011, 11:30AM CST.

  • Today

  • Windows 8 platform for Metro apps

  • Windows kernel – brought forward – robust, scalable
  • Windows Runtime – Win RT – APIs
  • WinRT – over 1800 objects
  • Application Model – natively built into Windows; all native code
  • Is .NET Framework gone?  Where does it live in this picture?
  • You pick the language that you want to use
  • Antoine Leblond – building apps

  • New Project, pick language

  • Templates are fully-functioning metro-style apps

  • Adding some HTML5 elements

  • Writing some code (Javascript)

  • Run the app – browser launches

  • Ugh, back to procedural code.  Step backwards, if you talk to a XAML developer

  • Sharing to social network

  • Blend 5 has support for HTML5

  • Using new CSS layout Grid

  • Previewing app at different resolutions and screen orientations

  • 58 lines of code for basic little HTML5 app

  • Packaging app into app store

  • Set price for your app

  • Built-in licensing model, including trialware option
  • App certification process.  Shows you where your app is in the process

  • Technical Compliance – developers can run tests in advance using MS-supplied tools
  • App Store, Spotlight section

  • Games in App Store

  • App Store is itself a metro-style HTML5 app
  • Steven is excited

  • App listing page in App Store

  • What about Win32 apps?
  • Start screen can list Win32 apps as well (e.g. Quicken)

  • Developers are NOT forced to use new Microsoft licensing model
  • Old apps can just be listed in App Store
  • XAML – where does it fit in?
  • Silverlight apps can run in new browser in Windows 8
  • Works the same way as in Windows 7, but not Metro app
  • Converting Silverlight app into Metro-style app
  • Converting from Silverlight environment to Windows 8 – only requires a handful of changes (e.g. namespaces)
  • Ported Silverlight now allows touch, full Metro app.  But it’s still XAML.

  • Change view in XAML to Windows 8 GridView.  Still XAML.
  • And can connect to Search Charm in Windows 8
  • We now can run Silverlight app with new Windows 8 grid view

  • New APIs/tools to build Metro apps
  • Rapid/scalable development
  • Your choice of languages and development tools
  • Apps automatically run on all the hardware that Windows 8 supports