BUILD 2012 Notes – The Microsoft Design Language – Tschumy

BUILD 2012, Redmond, Day 1, 30 Oct 2012, 2:15PM – 3:15PM

Will Tschumy

Principal user Experience Advisor




Why I joined Microsoft

  • In 2003, Microsoft made strategic investment in design
  • User experience thinking, re-design of Microsoft Word
  • Results: Office 2007 was fastest selling, most critically acclaimed version of Office
  • $20 billion / year bet on design


Next: Launch of Windows Phone 7


In 2007, same design language on XBox

  • Single consistent design language across all screens: phone, desktop, XBox


For Microsoft, our design principles are the language for our experiences

  • For customers–confidence, comfort & familiarity
  • Brings us together


Windows 8 start screen:


Weather app:


No chrome, edge to edge, all about content


The core idea

  • Content before chrome


Windows 8, did a lot of research

  • Asked Windows & OS X users what they remembered about using Windows
  • They drew the chrome
  • Then play with Win 8 prototype
    • Drew content in rectangles
  • With Windows 8, main thing users remembered was the content
  • Get OS out of the way of the users so that content can come through


Edges are important


Easy to get to edges, so we put controls there (charm bar, application bar)

  • Helps get chrome out of the way


Started thinking about monitors being sold

  • Most are widescreen
  • So flow content horizontally
  • Semantic zoom–no extra navigation for user


Five principles of Microsoft design

  • Pride in craftsmanship
  • Be fast and fluid
  • Authentically digital
  • Do more with less
  • Win as one


Pride in craftsmanship

  • Attention to detail: Every pixel counts
  • Safe/reliable – behave properly on other devices
  • Balance, symmetry, hierarchy
    • Built on 20×20 pixel grid
    • Skeleton on which to hang content
    • Placement on grid shows hierarchy
    • App will scale properly, no sub-pixel rendering
  • Tiles don’t need to be uniform
  • Doesn’t have to be rectangles
  • Can cheat margins, but do it deliberately
  • Sample apps  (Hulu Plus pushes off margins)



Be fast and fluid

  • Design for touch – touch first
  • Responsive – important when touching, must be responsive
  • Intuitive interaction – because of touch
    • Drag things in, drag things out
  • Immersive and compelling
  • Delight with motion
  • Life is mobile


Demo – Start experience, Netflix, Photos


  • Start Screen is very responsive; stuck to finger



  • Animation library – lots of little subtle gestures
  • Arrow drops down menu


Photos app

  • Very responsive
  • Pinch out, get to larger view, see more photos
  • Ghost effect
  • Sense of quality, elegance


Authentically digital

  • Embrace the medium
    • What is the role of design?
    • What is the role of the designer?
    • Is design inherent, or surface?
  • Modern
    • High Modernism, or International Style
    • Bauhaus
    • Designer should be offered no refuge in the past but should be equipped for modern world in its various aspects, artistic, technical, social, …
    • Icons – what value is there in having icons look like real objects, or shaded
    • E.g. Windows Explorer – most stuff in there is chrome
    • Semantic zoom in file explorer in Modern
    • Genesis of live tiles & semantic zoom
  • Cloud connected
  • Bold, vibrant colors
  • Motion


Do more with less

  • Be great at something
    • App fantastic at one specific thing
  • Focused and direct
    • Help users focus on what matters
  • Content before chrome
    • Only show secondary stuff (e.g. photo info) on swipe
    • E.g. Web browser, everything other than content is off screen
    • You see a bunch of widgets on each element, for discoverability.  Remove them and only show when relevant
  • Inspire confidence


Win as one

  • Work together to complete scenarios
    • ~45 separate contracts
  • Fit into the user experience model
  • Leverage the platform


Demo – Search, All recipes and People, IE and Wikipedia



  • Don’t need search charm; just start typing
  • Good example of contracts
  • Allows: surfacing your app in other contexts
  • App that you search most often will bubble up to the top



  • E.g. allrecipes
  • Share, People app, Facebook (from allrecipes app)
  • You avoid APIs to all these other services (e.g. Facebook)
  • “Catching” application worries about its API



  • From News app, select text, Share to Wikipedia–looks up that topic in Wikipedia


Think about how your app gets embedded in the user’s broader workflow


Windows reimagined

  • “The beginning is a delicate time…” –David Lynch, Dune, 1984
  • Asking us to reimagine our apps


How will your apps be reimagined?

How can you be authentic to the medium

Where will your app become alive?

What do your users need to focus on?

Integrate with the ecosystem?



  • (9 hrs of training)


Q&A  (33:47)


Wikipedia–Share vs. Search

  • Share: lets data get looked up from within the other apps
  • Even within Wikipedia, just start typing to search


How complex is sharing?  Data models passed between apps?

  • Yes, you can pass structured data, data types (e.g. URL, picture, etc)
  • The more esoteric the data, the more reliant you are on the catching app to interpret


Sharing text, interpret as URL, if not URL it fails and have to display to user

  • Probably a better result if you just accept URLs


How should devs refer to “Metro style”?

  • Won’t get into details of why no longer “Metro”
  • “Windows 8 Store Applications”


In what users remembered from Windows 8, were they remembering content?

  • Yes, they remembered images–rectangles were the content


This design language works great for content consumption.  What about creation, wouldn’t we want chrome like toolbars to be there?

  • Take a look at painting apps
  • Evernote Sketch – quick annotations
    • App bars pinned open
    • Users typically doing a lot of interactions
  • At other end of the spectrum, e.g. Sketchbook
    • Almost all canvas
    • Only need app bar when you change tool, which is less often
  • So think about the goal that you’re trying to solve
  • If user will spend a lot of time on the content, then worth focusing on content and get the rest of the stuff out of the way
  • But be very careful about pinning app bars open


Snap and fill view–design rationale for being able to snap out, but not snap in?

  • Keep user in control–risk in going into snap of having it snap unexpectedly
  • Coming out of snap–they know they are already in snap view


Interaction design pattern library for Windows 8?

  • Look at
  • Navigation styles, app bars, commanding
  • Human interface guideline document (280 pgs)
  • Photoshop templates for mocking up
  • Visual Studio 2012 Ultimate installs some prototyping tools in Powerpoint


For HTML, should sites be designed the same way?  Any guidelines?

  • You can use HTML5/JavaScript to build app or to build web experience
  • You’re starting to see tile-like interfaces on web sites


Discoverability–is it a tradeoff, where users don’t know how to do something?  E.g. Mom/Dad

  • We have looked at that
  • Devs should follow patterns that Microsoft is establishing
  • Following these patterns leads to consistency
  • Then users learn this stuff faster


Font size – 42 pts for headlines.  How do you decide how big to make font on various devices?  For largest display, when you’re further away, the font doesn’t look large enough

  • You can use brand fonts, but you should follow “type ramp”
  • Various ratios between font sizes and screen
  • Scaling–two strategies for an app
    • Everything gets bigger proportionately  (e.g. Photos)
    • OR You show more content  (e.g. Maps)
  • Depends on your scenario
  • With bitmap images, you should provide multiple images
    • 140%, 180%
    • Windows 8 will automatically pick appropriate resolution


Recommendations for designing app that does a lot of data input?

  • There are relatively few apps right now that do this
    • E.g. Credit card terminal apps
  • What’s important?  Quick, vs. entering data correctly


What kind of impact will design principles have on desktop applications?

  • You’ll already see this, e.g. Office 2013 preview, animations
  • The animations let you know where on screen to focus
    • Biologically, we notice motion / movement
  • Reader experience in Word–fast/fluid
  • Powerpoint, slide transition
  • Entire company (Microsoft) is behind this, pushing these principles


Difference between Microsoft design principles and Windows store apps?

  • Same thing


BUILD 2012 Notes – Developing a Windows Store App – Sheehan / Mockford

Build 2012, 30 Oct 2012, 11:45AM – 12:45PM


John Sheehan, Kieran Mockford

Building sample app in JavaScript/HTML


Windows 8 platform & changes made for Windows Store apps

  • Kernel – security, etc.
  • WinRT APIs
  • MVC layers
    • Can now do XAML with C++
    • For super high perf with C++, using DirectX
    • For JavaScript, use HTML for presentation layer
  • This new stack is for Windows Store apps



Desktop apps still possible

  • HTML in IE
  • C++ on Win32
  • C#/VB on .NET


Upgrade Win 7 box to Win 8

  • Better performance
  • All desktop apps will continue to run


Win RT

  • Old dev experience was kind of dated (programming to Win32 API)
  • Needed to rethink how devs built apps
  • New modern API surface, used for building Windows Store apps
  • LOTS of APIs in Win RT
  • Supports all sorts of languages (C++, C#, VB, JavaScript)



Developing Windows Store app

  • Code and markup – All starts with your code
  • Make it an app – Your app has unique value and identity
    • Publish to store
    • Needs tile
    • Splash screen
  • User expectations
    • Live tile – show latest info on the tile
    • Search – search within your app
    • Capabilities
      • Apps need to be trustworthy
    • PLM


Demo – From code to app



Weather app

  • Service up in Azure – returns blob of JSON with weather info
  • App will be JavaScript / HTML
  • Concept of “promise” in WinJS
    • Being standardized
    • xhr – change results into a promise, asynchronous
  • He gets object back with his data, can drill down into the data in debugger
  • Can take data, bind to HTML template
    • data-win-control=”WinJS.Binding.Template” (on <div>)
    • Assigning data to HTML elements, e.g. data-win-bind attribute to assign data to text element
    • template.render
  • Drop in CSS to format the page


Displaying additional weather data, in list

  • Will display it in a tile-based UI
  • Adding new elements to the namespace that we bind to
  • Now create template to render the list
  • Open app in Blend
  • App actually running within designer
  • Live DOM shown as you move around in designer
  • Assets panel, get ListView
  • Drag into Live DOM view
  • Set itemDataSource on ListView


Video in background

  • <video> element
  • Add video and play



  • No tile, no splash screen
  • In Visual Studio, you have logo.png, smalllogo.png, splashscreen.png, etc.
  • Replace these with your own logos and images
  • Two images for tile–logo and wide logo
  • In .appxmanifest, can specify that you have wide logo
  • Can turn off showing name on tile
  • Also set background color for app


Need to make tile live

  • Several different ways to do live tiles
  • createTileUpdaterForApplication
  • Call startperiodicUpdate method
  • Periodic service, returns XML document with some basic data
  • Can pass in argument to your service (e.g. for location)
  • E.g. Ping service each hour to update tile
  • Can make tile re-poll by turning tile off and then on again



  • Windows has Geo-Location API that lets you ask where user is located
    • If device has GPS, it’s accurate
    • Otherwise, it can use IP address to estimate location
    • Fairly close, e.g. town but not building
  • You need to specific that your app will use geo-location
    • Check Location on Capabilities tab
  • System then asks user if it’s okay for the app to use location
  • Strange error–where they are (Redmond), geo-location says they are in Texas


Search contract, so user can use Search charm

  • Declarations tab in manifest, you declare to Windows that you support Search
  • Write code to respond to Search request
  • Search is a “contract”




App Execution Environment

  • App Container – container where your app runs
    • You do everything by calling WinRT APIs
    • Most calls are direct API calls
    • Some calls, e.g. user location, are sensitive
      • Brokered API calls
      • Runtime Broker – makes sure you have access to what you’re calling
      • Uses your AppXManifest
      • So app needs capability in manifest AND user having granted permission


Process State transitions

  • Running
  • Suspended
    • When user is not using app, app is suspended
  • Terminated



As developer, you need to

  • Save things at suspension time, so you can remember where you were


Demo – Giving your app a memory


oncheckpoint event

  • WinJS.Application.sessionSate[“lastQuery”] = lastQuery
  • E.g. store last query done by user
  • Debugger has mechanism for triggering suspend/shutdown
  • Add code when app is reactivated after suspension


Be Better Together (work well w/other apps)

  • Pickers
  • Sharing
  • Protocols





  • Allows picking from places other than just a file system
  • Add to filters (FileTypeFilter.Add)
  • async on Button Click handler
  • await on call to PickSingleFileAsync within handler method
  • async/await – allows you to write code that behaves asynchronously, but looks synchronous
  • Can have multiple await decorated calls within the same method
  • Can pick data from files on SkyDrive


Demo – manipulate image and re-save to SkyDrive

  • Browsing samples
  • New Project – Online – Samples – Language
  • Can search for stuff within samples
  • E.g. WIC Image editor
  • Creates new WicImage object
    • Wic = technology for reading/writing different image formats
  • ImageEditor object, instantiated with WicImage
    • BeginDraw/EndDraw pair
    • DrawText, etc.
  • Their library contains these classes–WicImage, ImageEditor
  • Using Direct2D to do image stuff
  • C++/CLI => Cx
    • Still native code, but Cx controls object lifetime, memory
    • ComPtr<> – smart pointer
    • Need this for classic COM code
  • E.g. Use ComPtr for Wic interface APIs
  • In memory representation of Wic image doesn’t map exactly to Direct2D image
    • ID2D1Bitmap.CreateBitmapFromWicBitmap


To share something from your app

  • DataTransferManager.GetForCurrentView().DataRequested += (yourmethodhere)
  • Data packet that you send via data transfer manager
  • App can say–yes, I support sharing, but no data available yet
  • E.g.
    • Request.Data.SetBitmap(RandomAccessStreamReference.CreateFromStream(shareStream))



  • Starts with your code
  • Add character
  • Support user expectations
  • Sharing with other apps

BUILD 2012 Notes – Keynote Day 1 – Ballmer

BUILD 2012, Redmond

Keynote Day 1 – Ballmer

30 Oct 2012, 9AM – 11AM


Nice Windows Phone commercial, showing Steve’s phone

Steve Ballmer, Chief Executive Officer



  • Sold conference out in 53 mins
  • “Bigger venue next year”
  • Perfect time to get together
    • Windows 8
    • Windows Phone 8
    • Microsoft Surface
  • “How are they doing”?
    • 4 days after 1st day of sale for Win 8, Surface RT
    • Not huge amount of data, but..
    • Over 3 days, sold 4 million Windows 8 upgrades–individual users
    • Additionally, 10s of millions of units to corporate customers
    • Staples, Dixons – customers excited
    • Long lines at stores
  • What people are saying
    • Microsoft Surface is hot  (CNET)
    • 10 reasons to embrace Windows 8 now (
    • Windows 8 to bridge gap between PC, mobile devices
    • Boldest phone and software design  (Joshua Topolsky)
  • 3 big events since 1980
    • IBM PC
    • Windows 95  (mainstream, Internet)
    • Windows 8 / Windows Phone 8
  • Opportunity has never been better than today


Key Points for Windows 8

  • Best PCs ever made – hardware and software
    • ARM, x86
    • Desktops, laptops, tablets
  • PC and tablet; work and play; keyboard and touch
    • As much innovation in HW form factor as there is individuality in customer base
  • Alive with activity
    • Have built the experience that is essential for this generation
  • Phone is 1st class member of Windows family
    • The phone you want to own, if you own a Windows 8 system
    • 100s of millions of Windows 8 systems sold in next year
    • If you want the best experience with Windows 8, you’ll own Windows Phone 8
    • Killer hardware




These launches kick off the golden age of opportunity for Windows developers

  • Opportunity to build great applications is tremendous
  • Build across form factors–write one modern UI app across all
  • Easy to share code across form factors
  • Same cloud infrastructure across all devices  (SkyDrive w/Microsoft account)
  • Apps you build on Windows platform will be better than any you build elsewhere
  • Application experience is personalized to match each user
  • App is easier to use from discoverability perspective  — users find your app




IE 10 in Windows 8

  • Fast / fluid / touch-optimized
  • Build better web experiences


Demo – Windows 8 on new generation of hardware  (18:10)

  • Steve is doing the demo himself, using his personal account


Giant touchscreen – Perceptive Pixel – 82″ Windows 8 Slate

  • Eventually we’ll have these at reasonable price point


  • SkyDrive allows roaming data across all of your devices
  • Ink annotations in OneNote
  • SEAN: Sure, touch targets in Office are reasonably sized, when you run on an 80″ monitor.  :O)


Dell All in One – XPS One

  • With Intel Core i7
  • Search – no apps results
  • Click on various search targets to see results in each target
  • One search, results across multiple apps
  • Your apps can do this too
  • New Bing app
    • Can do search
    • Can drag to side of screen and tab through various pages, each page opened in IE
  • OOPS: Steve can’t quite grab touch target to move Bing app off screen–takes him 4-5 tries
  • News app
    • Any search term => newspaper format, with multiple stories
    • Can Share from news article, to various apps
    • Send e-mail via sharing, never left News app
  • Change lock screen on All in One; lock screen on large screen automatically updates (roaming)  (28:57)


Windows Phone devices

  • 4.8″ Samsung device
  • HTC phone
  • Nokia phone
    • We see ink annotations on OneNote doc, roamed from SkyDrive
    • Real-time, automatic roaming
  • Asus Vivo, 1.15 lbs detached
  • Screen detaches
  • Can ping something from within app out to Start Screen (e.g. Team in Sports app)
    • Any app can do this–deep links, ability to pin to Start Screen, with live info
    • (34:19)
  • Microsoft Surface
    • PC meets the tablet
    • Office apps built-in
    • Also good for play
    • Built-in: XBox Music
    • With every Windows 8 device, you get free streaming of music
    • Steve asks for song suggestions
    • Someone shouts out “Freebird” and Steve is baffled.  Hasn’t heard of it??
  • Tablet, notebook, or freestanding tablet


  • Lenovo ThinkPad Tablet 2, Intel Atom processor
    • Runs all Win32 apps
    • “Runs absolutely everything”


  • Acer Aspire S7-191
    • Most surprising to people
    • 2.38 lbs, i5 or i7
    • Touch laptops — cool
    • Likely this is what Software Developers will want
    • (42:27)
    • Develop and test on the same machine
  • Showing MSN for Windows 8, web site, optimized for Touch


“We’re all-in with Windows 8”

  • Every group at Microsoft has contributed something
  • E.g. XBox group


Video – XBox control from Windows 8 (44:44)






Steve Guggenheim – Corp Vice President & DPE


  • Spent last 5 years working on Hardware ecosystem
  • HW doesn’t come to life until SW is available
  • Will show some apps that show HW + SW, running on Surface


  • Agent P game
    • Disney brought app to Windows 8 using HTML5 / JavaScript
    • Can plug all kinds of peripherals into hardware
    • E.g. Game controller plugged in via USB
    • Can hook to TV via HDMI out, use game controller
  • Skype demo
    • HTML on front-end, C++ on back-end
    • Dock Skype to side, bring game back up on side screen
    • SEAN: Showing off using Windows to do 2 things at once?  For Windows users, what’s the big deal??


Running on all-in-one, Autodesk application

  • HP Workstation
  • Can lay down, open up case (?!)
  • All existing Win 7 apps just run
  • Autodesk built complementary app
  • Running Autodesk on Sony Vaio
    • Store files on SkyDrive
    • Switch to Sketch application
    • Use pen


  • Back to Phineas/Ferb game, on Windows Phone 8
    • Easy to move between devices


Economics & montenization

  • Use Windows Store engine
  • 70% of revenue goes to you
  • At $25k, you get 80% of revenue
  • In-app advertising and sales


Bing Travel app

  • Ad right in app


Fish with Attitude game

  • Real money, buy treasure in game
  • Payment: Microsoft, PayPal  (commerce engines)
  • Ability to monetize


ESPN app demo – Michael Bayle



ESPN app for Windows 8

  • Today – user access assets via web site
  • ESPN app aggregates all this extra content into one app
  • With pinning, semantic zoom, etc. — personal experience
  • First look at ESPN app



Back to Ballmer


Lots of apps:

  • E.g. SAP (ouch), DropBox
  • Twitter announced that they’ll build Twitter app for Win 8
    • SEAN: Only now??
  • With built-in People app, you can connect directly into certain apps
    • E.g. Facebook, Twitter


Unprecedented market

  • 670 million potential upgrades  (current Win 7 users)
  • 400 million new devices
  • Windows Phone rising
  • Marketing investment


Why write apps for Windows 8?

  • Key: Lot of people will use the app
    • Win 8 takes less resources than Windows 7
  • Predict we’ll see lots of growth & vitality in PC market
    • But even if PC market stays flat, will still be 400 million new devices you can target
  • Windows Phone
    • Small volume player today
    • Most differentiated approach to market
    • Killer hardware
    • Excellent opportunity
    • We will do more marketing and better marketing for Win 8
    • * applause *
  • This is a market (Win 8) that will explode
    • Can do your best work here
    • Can make money
    • Best opportunity for software developers today
  • “We need your support, we need your commitment”
  • For those of you in the room
    • Every BUILD attendee gets
      • 100GB SkyDrive storage for free
      • (Audience lukewarm reaction)
      • Surface RT 32GB with Touch Cover
      • SEAN: For drama, he should have taped a Surface to the bottom of each chair
    • Make me two promises
      • Go out and write lots of apps
      • Don’t run out and try to get them right now


Commercial for Windows Phone running



Kevin Gallo – Director of Program Management, Windows Phone



Four topics

  • Introduction to Windows Phone 8
  • How to develop apps
  • New features in Windows Phone 8
  • Advancements in native games


Most personal phone on the market

  • Kevin’s phone
  • What you care about most is front and center on the phone
  • Kid’s Corner
    • Special place for kids
    • You configure it for just the apps that you want them to use
    • “Phone inside of a phone”
    • Customized for the kid
  • Rooms
    • Groups of people, sharing notes, calendar, photos
    • Ideals for families


Windows 8 Developer Platform

  • Reimagined Windows platform
  • The Right platform at the right time
  • New hardware, new UI, common cloud services


New era

  • Ubiquitous mobile devices
  • Experiences transition across many devices
  • (1:18:09)


Announcing the release of the Windows Phone 8 SDK


Build apps that work on both Windows and Windows Phone

  • Shared Windows Core
  • Common API Set on top of that



Demo – Visual Studio

  • App – Picture Sharing
  • 3 projects
    • Win Phone 8
    • Win 8
    • Shared Code – C#, runs on both
  • Old C++ code, wrapped in .NET, with photo filters
  • HyperV-based Windows Phone 8 emulator


  • Easy to integrate code from other sources, e.g. C++


New features on Windows Phone platform

  • You asked, we delivered
  • Lots of new features


New features

  • Easy-to-build fast, fluid, UI
    • Better performance for existing controls
  • Live tiles, lock screen, wallpaper
  • Improved dev center and Store
  • Deeper integration w/phone experiences
    • E.g. lenses
  • Better multitasking
    • Location-based apps in background
  • Advanced networking
    • Bluetooth data transfer
    • Peer networking
    • Proximity connect (NFC)
  • TOTAL: 90% of top dev requests done



Demo – AR drone quad copter

  • Built phone app to control the drone


75% of top grossing apps are games

  • Common gaming platform for Windows
  • High-perf C++ code (e.g. Direct3D)
  • Store is global
  • In-app purchase of consumables (currency) and durables (game levels)
  • More ways to make money
  • Over half of all games using gaming middleware
    • E.g. Unity, Havok, Ogre, etc.



Demo – Unity – Tony Garcia



Unity on Windows Phone 8

  • Scripting engine for building game logic
  • Building game for Win Phone inside of Unity
  • Run scene inside Unity Preview window, for debugging
  • Deploy to Windows Phone
    • Build, creates Windows Phone 8 project
    • Creates Visual Studio project
  • Then run on device
  • Works on Windows 8 tablets as well



Back to Kevin


One more guest on stage – Richard Kerris from Nokia – VP, Global Head of Developer Relations

  • Lumia 920
  • Developers should get this phone first
    • We’ll give you a Nokia Lumia 920
    • Everyone gets one


Reduce registration from $99 to $8, for next 8 days



8 Traits of Great Metro Style Apps

Notes from

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 #4 – Keynote, part IV – Windows Live

BUILD conference keynote, part IV.  Windows 8 and Windows Live.  13 Sep 2011.

Chris Jones.

  • InBox, multiple accounts

  • Share calendars

  • Connected address book

  • Photos – photos from various places

  • SkyDrive – accessible to developers
  • Connect devices via Live – e.g. navigate hard drive
  • Tunneling via Live ID
  • Sharing photos via mail

  • Connected contact list

  • SkyDrive via web site, access to all connected devices

  • Windows Phone 7.5, SkyDrive stuff

  • New Acer touch screen PC with Touch

  • Live apps are all written as new HTML5 Metro apps

  • Hundreds of other features in Windows 8 we haven’t yet seen
  • Sample apps

  • Teams built apps in 10 weeks
  • 17 teams, 2-3 devs per team, 10 weeks
  • College interns built all of the sample apps
  • Here are some of the interns

  • Hmm, intern said “turn on their Slate”
  • Steven, with more to say

  • Windows 8 Developer Preview – pre-release – Visual Studio 11 Express, Blend 5
  • Next milestone Beta.  Then RC, RTM, GA (General Availability)
  • Driven by quality, not by a date
  • Developer Preview will also receive updates
  • Customer Feedback will drive fixes that they make
  •, can download preview, 10PM CST
  • No activation

BUILD Conference Notes #3 – Keynote, part III – Windows 8 Hardware Etc

BUILD conference keynote, part III.  Windows 8 Hardware and other new features in Windows 8.  13 Sep 2011.

  • Michael Angiulo, Corp VP, Windows Planning and Ecosystem

  • Super fast boot times
  • 8-sec bootup on current in-market laptop

  • Service automatically checks for root kits – tons of new security features

  • New power state – Connected Standby – very low power
  • One-click power switch on tablet – instant on/off

  • Killer feature – instant on/off, just like iPad
  • ATOM and ARM-based systems

  • USB 3.0 – much faster than 2.0

  • Windows 8 supports 256TB drives
  • 4.7 TFlops computing power on killer 3-graphics card system.  (2500x original Cray)

  • Unreal engine and DX11

  • All of Windows 8 is built hardware accelerated graphics
  • Only 1 pixel of chrome around the outside of apps
  • Touch working across wide variety of systems
  • If a screen can run Windows 7, it can automatically run Windows 8

  • 1366 x 768 – can do side-by-side in Metro
  • Sensor API in Win 8

  • NFC (Near Field Communication) built-in (sensor), to recognize objects
  • HD web cam app

  • Win 8 tablet with 3G

  • Resume from Sleep as fast as you can open the lid
  • Thin laptops

  • PC is mostly battery

  • Samsung table PC – 5,000 in warehouse

  • Everyone at BUILD gets one of these
  • “Samsung Windows Developer Preview PC”

  • 2nd generation Core i5
  • Dual monitor
  • 11.6″ diagonal
  • Loaded with Developer Preview of Windows 8
  • Comes with tools, apps

  • Win 8 smaller/faster on widest range of hardware
  • Windows 8 on “professional platform”

  • New Task Manager

  • Apps go into Suspended state when you’re not looking at them

  • New Startup mods in Task Manager
  • Services tab
  • Run command line tool to make current set of settings a baseline for restore
  • Standard performance benchmarks; run suites of tests; compare over machines or over time
  • Remote Desktop

  • Touch enabling on remote session
  • Hyper-V, can run on Windows

  • VHDs, can mount as drives
  • New ribbon in Windows Explorer; new Up button

  • Desktop background can span multiple monitors
  • Can customize taskbar for each monitor separately – i.e. show icons only for apps on that monitor

  • Swap monitor, e.g. run Metro on one monitor, app on another
  • Type “cmd” in Metro, search opens automatically, shows you cmd.exe

  • Weather app

  • IE10 in Windows 8

  • All the normal keyboard/mouse works as usual
  • Can open app in either Metro panel or with normal Windows desktop frame
  • Internet Explorer 10 Platform Preview 3
  • Mulit-touch in IE10

  • Magnifier

  • Ease of Access – can make everything bigger
  • Thumb-by-Thumb keyboard layout

  • Ink / Pen

  • All personal settings roam

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

BUILD Conference Notes #1 – Keynote, part I – User Experience

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

Prior to start of keynote, live stream wanders through the crowd.

  • Tagline – “Do what you’ve always imagined”

  • Steven Sinofsky

  • Launching Windows 8 today
  • Over 450,000,000 copies of Windows 7 sold
  • Windows 7 consumer usage is now greater than Windows XP usage
  • Over 1500 product changes to Windows 7 since RTM
  • IE9 – gave us hardware acceleration; showed that HW acceleration does matter for browsing
  • Over 542,000,000 users of Windows Live
  • IE9 + Windows Live = foundational elements of Windows 8

  • Touch – will become a huge part of interaction
  • Once you’ve used Touch on PC with Windows 8, you’ll want it on all devices
  • Mobility – you want devices that you can use while carrying around
  • Developers want more connectivity between users
  • Services are intrinsic part of all software
  • Windows 8 is at Developer Preview stage
  • Everything great in Windows 7 – even better in Windows 8
  • Everything that runs on 7 runs on 8
  • Full compatibility from Windows 7 to Windows 8
  • Goal of Windows 8 is to reimagine Windows, from the chip set on up to the user experience
  • E.g. Windows 8 running on ARM

  • Windows 8 can run on new hardware, as well as ARM and x86
  • Demo #1 – user experience
  • Demo #2 – Building metro style platform and tools
  • Demo #3 – hardware platform, range of form factors
  • Demo #4 – how everything connects to cloud-based services with Windows Live
  • Over 100 sessions at BUILD
  • Fundamental performance gains
  • Small Lenovo Netbook – 1GB memory, Atom processor.  It’s now running Windows 8
  • On Windows 7, 404MB, 32 processes
  • On Windows 8, uses 281MB memory, 29 processes
  • Better performance on Windows 8, using the same hardware
  • Showing off User Experience – Julie Larson Green, Corp VP of Windows Management

  • Lock screen

  • Login screen

  • Start screen

  • Start Screen is not just a launching.  Also provides notifications, gadgets, etc.
  • Dragging tiles around

  • Pinch to zoom out and see everything

  • Onscreen keyboard

  • Control Panel

  • Games group

  • News reader

  • App settings

  • Docking apps

  • IE9 in Metro, chromeless  (“chrome-free”, ha-ha)

  • Swipe to get app bar with IE options

  • Use Touch to select-drag text

  • “Charms”

  • Spell-checking throughout Windows 8
  • Searching applications

  • Playing music

  • Pictures

  • Photo Fedr – shows photos from the cloud

  • Tweet@rama

  • On tablet (ARM-based machine running Windows 8)

  • Fast / fluid user experience
  • Applications are immersive and full-screen
  • Touch-first; keyboard/mouse works just as well
  • Web of apps, working together – apps know about each other; work together
  • On various hardware platforms