building apps for the new windows store
DESCRIPTION
Two hour workshop from Trenton Computer Festival (http://www.tcf-nj.org/) March 2013TRANSCRIPT
![Page 1: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/1.jpg)
Building Apps for the new Windows Store
David IsbitskiPrincipal Technical Evangelist, Microsofttwitter.com/TheDaveDevblogs.msdn.com/[email protected]
![Page 2: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/2.jpg)
Now is the time to write your app. Enjoy the first to market advantage!
twitter.com/thedavedev | [email protected]
http://bit.ly/genapp8
![Page 3: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/3.jpg)
http://lynda.com/davidisbitski
![Page 4: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/4.jpg)
Windows Reimagined
![Page 5: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/5.jpg)
Changing world of computing Form factors and user interactions models create new scenarios and opportunities
Mobility means devices you use while carrying, not just devices you carry
App developers want rich connectivity and sharing capabilities, connection to customers
Services are intrinsic in all software
![Page 6: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/6.jpg)
Windows reimagined
New fast and fluid Start screen
Everything great about Windows 7 we made even better
Touch, mouse, keyboard
![Page 7: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/7.jpg)
Great experience across all hardware
Tablets to laptops to all-in-ones
Highest power to the most efficient chipset
Touch, mouse, keyboard
![Page 8: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/8.jpg)
Paid downloads, trials, and in-app purchases. You keep 70% of the first $25k, 80% of the rest
Microsoft Confidential 8
Robust analytics for free, including demographics, reviews, referrals, and usage & performance statistics
Use your own commerce engine and keep 100%or use the Windows Store’s full commerce platform
The Windows Store
Advertise with Microsoft Advertising or your preferred ad vendor.
![Page 9: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/9.jpg)
Windows 8 Platform
Windows Store Apps
HTMLJavaScrip
t
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
Syst
em
Serv
ices
JavaScript(Chakra)
CC++
C#VB
XAML HTML / CSSVie
wM
odel
Contr
olle
r
Windows Core OS ServicesCore
![Page 10: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/10.jpg)
Windows reimaginedNew Microsoft Design Style UI where touch is a first-class citizen along with full mouse and keyboard support
New development models built on WinRT, including native support for HTML/CSS/JS, C#/XAML, C++/DirectX
Designed from the chipset up for multiple form-factors – tablets, laptops, desktops & all-in-ones
The Windows Store on every device with a full commerce platform and flexibility
![Page 11: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/11.jpg)
8 Traits of a great App
1. Microsoft design style 2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Microsoft design principles
![Page 12: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/12.jpg)
Microsoft Design Style
![Page 13: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/13.jpg)
Content Before Chrome
![Page 14: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/14.jpg)
![Page 15: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/15.jpg)
![Page 16: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/16.jpg)
Content Before Chrome
Content comes first. Immerse users in the things they loveLeave only the most relevant elements on screen to minimize distractions
Traditionally chrome is added for:1. Layout2. Interactions3. Navigation
![Page 17: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/17.jpg)
Layout
![Page 18: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/18.jpg)
Layout
Give content breathing room
Intentional space frames the content and allows your eyes to focus on the right thingRemove lines and boxes as a way to group and organize content
![Page 19: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/19.jpg)
![Page 20: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/20.jpg)
1:09
O Green World Gorillaz Demon days
![Page 21: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/21.jpg)
Layout Use Typography to create a sense of structure and hierarchy in your contentFixed set of sizes, weights and colors convey information on a piece of content’s importanceUse the default stylesheet to get the styling in a pre-defined type ramp
![Page 22: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/22.jpg)
42pt20pt
11pt
9pt
![Page 23: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/23.jpg)
42pt
20pt
11pt
11pt
11pt
9pt
![Page 24: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/24.jpg)
![Page 25: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/25.jpg)
Layout
Let content flow from edge to edgePan only on a single axis to create a sense of stability and to support the selection model (more on that later)Keep ergonomics in mindPan along the long edge of the viewHorizontal in landscape and portraitVertical in snapped
![Page 26: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/26.jpg)
![Page 27: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/27.jpg)
Layout Create visual alignment, structure, and clarity with the apps’ silhouetteAlign elements on a grid to create a structured and consistent layoutEstablish consistent anchorsUse a stable railCreate a focal point
Use the Visual Studio template to get the layout
![Page 28: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/28.jpg)
![Page 29: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/29.jpg)
![Page 30: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/30.jpg)
![Page 31: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/31.jpg)
Silhouette
Microsoft design style
In the absence of chrome when people are focusing on the content,
the formation of the content is what lets people recognize
something as Microsoft design style before their eyes even
process it. Creating a silhouette is about leveraging negative space
and content placement to establish a recognizable form.
Page titleBaseline at 100px
Content areaTop aligned at 140px
Content areaLeft margin 120px
Establish common anchorsIdentify commonalities between different pages, and present those elements in a consistent manner.
Use a stable railWhen content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail.
Create a focal pointSelect a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.
![Page 32: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/32.jpg)
Silhouette
Microsoft design style
In the absence of chrome when people are focusing on the content,
the formation of the content is what lets people recognize
something as Microsoft design style before their eyes even process
it. Creating a silhouette is about leveraging negative space and
content placement to establish a recognizable form.
Establish common anchorsIdentify commonalities between different pages, and present those elements in a consistent manner.
Use a stable railWhen content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail.
Create a focal pointSelect a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.
![Page 33: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/33.jpg)
Silhouette
Microsoft design style
In the absence of chrome when people are focusing on the content,
the formation of the content is what lets people recognize
something as Microsoft design before their eyes even process it.
Creating a silhouette is about leveraging negative space and
content placement to establish a recognizable form.
Establish common anchorsIdentify commonalities between different pages, and present those elements in a consistent manner.
Use a stable railWhen content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail.
Create a focal pointSelect a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.
![Page 34: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/34.jpg)
SilhouetteIn the absence of chrome when people are focusing on the content,
the formation of the content is what lets people recognize
something as Microsoft design before their eyes even process it.
Creating a silhouette is about leveraging negative space and
content placement to establish a recognizable form.
Microsoft design style
Establish common anchorsIdentify commonalities between different pages, and present those elements in a consistent manner.
Use a stable railWhen content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail.
Create a focal pointSelect a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.
![Page 35: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/35.jpg)
SilhouetteIn the absence of chrome when people are focusing on the content, the formation of the
content is what lets people recognize something as Microsoft design before their eyes even
process it. Creating a silhouette is about leveraging negative space and content placement
to establish a recognizable form.
Microsoft design style
Establish common anchorsIdentify commonalities between different pages, and present those elements in a consistent manner.
Use a stable railWhen content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail.
Create a focal pointSelect a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.
![Page 36: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/36.jpg)
Interactions
![Page 37: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/37.jpg)
Interaction
Integrate commands into the contentLeverage the edgeProvide commands contextually
![Page 38: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/38.jpg)
ClearanceSale
Gifts forKids
Holiday Shopping
Home & Garden
Everything For Winter
![Page 39: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/39.jpg)
ClearanceSale
Gifts forKids
Holiday Shopping
Home & Garden
Everything For Winter
![Page 40: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/40.jpg)
![Page 41: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/41.jpg)
![Page 42: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/42.jpg)
Interaction
Integrate commands into the contentLeverage the edgeProvide commands contextually
![Page 43: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/43.jpg)
Using the EdgeApp bar
http://msdn.microsoft.com/en-us/library/windows/apps/hh465302(v=VS.85).aspx
Use App bar to bring up commands on demand through a swipe from the top or bottom edgeUse the Charms as entry points into Search, Share, Settings, and Devices contracts
![Page 44: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/44.jpg)
![Page 45: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/45.jpg)
Title
![Page 46: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/46.jpg)
![Page 47: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/47.jpg)
Interaction
Integrate commands into the contentLeverage the edgeProvide commands contextually
![Page 48: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/48.jpg)
![Page 49: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/49.jpg)
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
![Page 50: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/50.jpg)
App BarMost apps will use a transient app barBottom app bar is for commandingGlobal commands on right, contextual commands on leftCan be programmatically invoked when an item is selected for contextual commands (Ex: Demo Start)If there is a single, frequently used command, it can be placed on canvasMenu Flyout can be used to show groups of related commands (Ex: Demo PaintPlay)Top app bar is for navigation in immersive views (Ex: Back button & title)
![Page 51: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/51.jpg)
Flyout
http://msdn.microsoft.com/en-us/library/windows/apps/hh465341(v=VS.85).aspx
Collecting information Confirmations or warnings
Use Flyout as a lightweight way of showing transient, contextual UI
![Page 52: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/52.jpg)
Errors
Show errors inline when possible
![Page 53: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/53.jpg)
Navigation
![Page 54: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/54.jpg)
Navigation
Views should be about where you are at, not where you might go
Integrate navigational elements into the content
Avoid persistent way finding chrome (such as tabs)
![Page 55: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/55.jpg)
FeaturedLast minute deals My Trips
Contoso Travel
Chrome
![Page 56: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/56.jpg)
Featured destinations Last minute deals My TripsContoso Travel Chrome
![Page 57: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/57.jpg)
Navigation patterns
Hierarchical Flat
![Page 58: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/58.jpg)
1. Content area2. Sections3. Header4. Back button5. Header menu6. Semantic zoom
Components of the hierarchical pattern
![Page 59: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/59.jpg)
Hierarchical navigation pattern
Hub pageLarge collections of content to explore
Multiple sections or categories
Best for apps with:
Start
Store
News
Examples of this pattern:
Section page
Detail page
![Page 60: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/60.jpg)
Contoso Travel Featured destinations Last minute deals My Trips
![Page 61: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/61.jpg)
Contoso Travel Featured destinations Last minute deals My Trips Featured destinations Last minute deals My Trips
![Page 62: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/62.jpg)
Hu
bContoso Travel Featured destinations Last minute deals
Spoke
sD
eta
ils
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather
7 daysChicago (3/11 – 3/19)
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips
Featured Destinations Top Destinations for 2012
Barcelona, Spain
My Trips City Guide
![Page 63: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/63.jpg)
Hu
bContoso Travel Featured destinations Last minute deals My Trips
Spoke
sD
eta
ils
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather
7 daysChicago (3/11 – 3/19)
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips
Featured Destinations Top Destinations for 2012
Barcelona, Spain
![Page 64: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/64.jpg)
Internet Explorer
DemoFlat pattern
![Page 65: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/65.jpg)
Components of the flat pattern
1. Content area2. Navigation bar3. Sections4. Add button5. Delete button
![Page 66: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/66.jpg)
Flat navigation pattern
Page 1 Multiple tabs, documents, instant messages, game sessions, etc.
Relatively few sections
Best for apps with:
Internet Explorer
Examples of this pattern:Page 2
![Page 67: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/67.jpg)
Navigation pattern summary
For apps with large collections, many distinct categories, or sections for a user to explore
Use direct manipulation, the back button, header flyout for navigating between sections
Use semantic zoom to move quickly through big lists
Hierarchical Pattern
For apps with multiple tabs, documents, instant message, to switch between efficiently
The navigation bar is available on every page to enable fast switching
All navigation elements should fit in the navigation bar
Flat Pattern
![Page 68: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/68.jpg)
Navigating ContentViews are about where you are, not where you might goUse Hub & Spokes model for information hierarchy:Hub: Usually landing page containing top level sections, drill down into spokesSpoke: Shows content for one of the sections, drill down to see the details an item
Avoid persistent navigational chrome such as tabsLeverage Semantic zoom to jump between groups
within a list within flattened hierarchy
![Page 69: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/69.jpg)
Hu
bSpoke
sD
eta
ilsContoso Travel Featured destinations Last minute deals
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather
7 days
Chicago (3/11 – 3/19)Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips
Featured Destinations Top Destinations for 2012
Barcelona, Spain
My Trips City Guide City Guide
![Page 70: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/70.jpg)
Hu
bSpoke
sD
eta
ilsContoso Travel Featured destinations Last minute deals My Trips
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather
7 daysChicago (3/11 – 3/19)
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips
Featured Destinations
Top Destinations for 2012
Barcelona, Spain
![Page 71: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/71.jpg)
DemoSemantic Zoom
![Page 72: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/72.jpg)
Semantic Zoom
http://msdn.microsoft.com/en-us/library/windows/apps/hh465319(v=VS.85).aspx
Design zoomed-out view to show richer, meta information on your groupsTry to fit content within 1-3 pages Linear layout, use a grid for large content sets
You can enable operations on groups in the zoomed out view (select or rearrange)Ex: News app: Select a news source and pin to Start or rearrange news source order
When transitioning zooming in & out, the scope of content should stay the sameSemantic zoom is not for navigating different levels of a hierarchy
![Page 73: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/73.jpg)
![Page 74: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/74.jpg)
Fast and Fluid
![Page 75: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/75.jpg)
Continuity through motionMotion brings life to the Microsoft design languagePurposeful animations tie experiences together and tell a storyUse the Animation Library to get scenario-based animations
![Page 76: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/76.jpg)
Purposeful Animations
See BUILD talk APP-206T or APP-494T on Animations for more examples
Animations bring life to the Windows Store apps
and make the experience feel crafted and polishedAnimations used purposefully create a sense of continuity and help build users’ confidence in the UIUse built-in controls to get the animations for free!Use the Animation Library to get pre-designed, scenario-based animationAnimation is purposeful, not for visual adornment
![Page 77: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/77.jpg)
Animation LibraryApp navigationEnter Page / Exit Page
Animate ContentEnter Content / Exit ContentExpand / CollapseRepositionCrossfadeFade In / Fade OutPeekUpdate BadgeReveal / Hide
SelectionPointer animationsSwipe Select / Swipe DeselectSwipe Reveal
Show or hide supplemental UIShow Edge UI / Hide Edge UI Show Panel / Hide PanelShow Pop Up / Hide Pop Up
Collections and listsAdd / Delete from listDrag and drop animations
![Page 78: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/78.jpg)
Design for touch first
Press and hold to learn
Tap for primary action Slide to pan Swipe to select
Turn to rotateSwipe from edge for app commandsPinch to zoom
Swipe from edge for system commands
Follow the Windows 8 touch language and use only the prescribed gesture set
![Page 79: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/79.jpg)
Design for Touch FirstDesign with hands and fingers in mindHit targets should be sized and spaced for touch, your finger is not a pointerDesign with comfort, ergonomics and occlusion in mind
![Page 80: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/80.jpg)
Design for Touch FirstProvide instant visual feedback on touch down, commit on touch upActions should be reversible so users can safely exploreThink beyond tap and take advantage of sliding interactions. Content should always directly follow your fingersPan in 1 axis only. This allows for selection and provide a more stable rail
![Page 81: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/81.jpg)
Design for Touch FirstDesign with hands and fingers in mind
Interaction areas Reading areas
![Page 82: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/82.jpg)
Snap and Scale Beautifully
![Page 83: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/83.jpg)
Design for Touch FirstProvide instant visual feedback on touch down, commit on touch upDirect manipulation: Let things always directly follow your fingers
Actions should be reversible so users can safely explore
Think beyond tap and take advantage of sliding interactions
Pan in 1 axis only. This allows for selection and provide a more stable rail.
![Page 84: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/84.jpg)
Design for Multiple Views
Widescreen (1366x768+) Snap view (required)Minimum (1024x768)
Portrait
People multi-task. An application can be displayed any one of these layouts:
![Page 85: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/85.jpg)
SnapSnapping is a built-in Windows 8 scenarioBuilding a great snapped view keeps your app on screenDesign a purposeful snapped statePan vertically in snapped for ergonomics and to avoid conflict with the edge and snap gutterMaintain state and continuity across snapping and unsnappingIt is trivially easy to snap and unsnap. Don’t blow away the user’s work when this happens
![Page 86: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/86.jpg)
SnapAll apps are snap-able
Tailor for snap
Preserve context and state
Strive for feature parity
Keep user in control Don’t forget about the Filled state!
![Page 87: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/87.jpg)
Designing for snapLayout tailored 320px width
LayoutsScroll vertically instead of horizontallyUse a single columnKeep wire frame still intact
CSS media queries are your friend
![Page 88: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/88.jpg)
Snap and the app barThings to know
Buttons have no labels and so 5 buttons can fit per rowIf more than 5 buttons are present, the app bar will grow to multiple rowsThink through the buttons that make sense in snapGroup commands in a way that makes sense in snap
![Page 89: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/89.jpg)
demoSnapped
![Page 90: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/90.jpg)
Scaling
Watch BUILD talk APP-207T/847T Reach your customers’ devices with one beautiful HTML5/XAML user interface
PCs will have a wide range of screen sizes and resolution
Use fluid layout (e.g. -ms-grid control, ListView control) to take advantage of screen real estateScale to fit (e.g. viewbox control) for fixed layoutsUse the VS simulator to see how your app will look on different machinesSystem-provides automatic scaling based on resolutionUse scalable vector graphics, or Provide 3 sizes of assets (100%, 140%, 180%) and use resource loading for bitmap format images
![Page 91: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/91.jpg)
Screen sizes
10” 1024x76813” 1400x105020” 1920x108030” 2560x160011.6” 1366x768
![Page 92: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/92.jpg)
Screen sizesThe minimum app resolution is 1024x768 A good place to start designing your app is 1366x768Apps take advantage of added screen real-estateShow more contentManage white spaceUse the VS simulator to see how your app will look on different machines
![Page 93: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/93.jpg)
11.6” 1366x768
Pixel density
11.6” 1920x1080
As pixel density increases, things get too small to touch.Problem
With scaling, touch targets are maintained and things get crisper on screen
![Page 94: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/94.jpg)
Pixel density scalingWindows scales to pixel density to maintain touchabilityLayouts, text and images are crisper on higher pixel densities
There are three scale percentages
100%
11.6” 1366x768135 dpi
140%
11.6” 1920x1080190 dpi
180%
11.6” 2560x1440253 dpi
![Page 95: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/95.jpg)
Designing for pixel densityLayouts are scaled automatically based on pixel densityEnsure image rendering is crisp
Use CSS primitives or SVG
For bitmaps use resource loadingAutomatically swaps in resources based on pixel density
![Page 96: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/96.jpg)
Designing for pixel densityUse the resource loader and specify width and height:
<img src=”projector.jpg” width=80px height=80px/>
Images are loaded automatically from the naming convention
…\projector.scale-100.jpg \projector.scale-140.jpg \projector.scale-180.jpg
100% 140% 180%
![Page 97: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/97.jpg)
Designing for pixel density
1x 1.4x 1.8x
20px 28px 36px
5px 7px 9px
Use the typographic grid20px/5px grid was designed to scale without rounding
![Page 98: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/98.jpg)
Use the Right Contracts
![Page 99: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/99.jpg)
Windows 8 Contracts
http://msdn.microsoft.com/en-us/library/windows/apps/hh464906(v=VS.85).aspx
1+1=3. Leverage other apps to complete scenariosCharms provide a consistent invocation model that users can always confidently rely onStart with the VS Item Template (available for Search, Share, File Picker extension)
![Page 100: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/100.jpg)
Share
http://msdn.microsoft.com/en-us/library/windows/apps/hh465251(v=VS.85).aspx
Share Source Share a link to online contentShare a copy of the actual content
Share Target Keep interactions simple Use inline controls for errors or progress
![Page 101: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/101.jpg)
Lorem IpsumLorem Ipsum dolor sit amet
![Page 102: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/102.jpg)
Search
http://msdn.microsoft.com/en-us/library/windows/apps/hh465233(v=VS.85).aspx
Leverage search so users can search your content from anywhere in WindowsSearch vs FindSearch (use the contract)
Scope is across your app’s content setResult is usually a list of items containing the search term. From the search results page, you can then navigate to the view the item
Find (use in-app UI)Scope is within the current view (ex: Ctrl+F in IE or Word)Result is usually already on the page you are viewing. You just need help locating it
![Page 103: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/103.jpg)
![Page 104: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/104.jpg)
File Picker ExtensionLeverage the File Picker extension so users can access your content from anywhereYour app will be hosted within the File PickerSystem provides navigation and selection UIYou have control over the presentation of the content (use a ListView and style appropriately)
Start with the File Picker item template to get the ListView, Selection, Viewstate support for free
http://msdn.microsoft.com/en-us/library/windows/apps/hh465192(v=VS.85).aspx
![Page 105: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/105.jpg)
System provided navigation
System provided selection basket
![Page 106: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/106.jpg)
SettingsPlace all app settings under one roof where users will always expect to find them
Do not create additional entry points into Settings on the app canvas
When users invoke Settings charm, they will see your app’s basic info, and settings commands as specified by your app
Common settings commands: your settings categories, Help, About, Terms of use…
Once users choose a settings command, the settings pane will be brought up. Your app controls the UI within the settings pane
Keep it simple, minimize the number of settings
![Page 107: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/107.jpg)
Account
![Page 108: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/108.jpg)
Invest in a Great Tile
![Page 109: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/109.jpg)
![Page 110: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/110.jpg)
TilesTiles are the “front door” to your app.Treat it as an extension of your appSecondary tiles let users promote interesting content from within your app on their Start screenProvide a way to “deep link” to interesting, frequently updated sub-sections of your appAlbums in a photo app, People in a social app, News source from a feed app, etcProvide Pin command in the app bar when content in focus is pinnableUse runtime call to invoke system UI for pinning flyout. Ex: Weather
![Page 111: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/111.jpg)
Connected and Alive
![Page 112: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/112.jpg)
Live TileLive tiles to draw users to your appProvide fresh, personalized content to help users feel connected to your content, motivate launchUse badges to show simple numeric or glyph informationLive updates should be accessible from the home screen of your app
You can opt in to cycle through last 5 updates:Good example – A news app wants to send five stories per day or one story and supplementary images per dayBad example – A shopping app sends a new notification per day for daily deals (last 4 days’ will still cycle but be outdated)
Both default & content tiles, small & large, support live. Watch BUILD talk APP-396T
![Page 113: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/113.jpg)
Notifications
![Page 114: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/114.jpg)
NotificationsToast notifications deliver transient messages outside the context of the appShow toast when your app is in the backgroundUse it for real-time, personal content such as IM, Call, or MailProvides quick navigation to contextually relevant location in your appUse this only for information that must be interruptive Raise notifications only if they are truly time sensitive and relevant, or users will turn off your appCoalesce notifications if there are multiple updates occurring within a short period of timeDo not use notification to raise error or warnings.Use where neededLive tile is the place where users will want to see fresh content at their leisure
![Page 115: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/115.jpg)
Roam to the Cloud
![Page 116: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/116.jpg)
Roam
http://msdn.microsoft.com/en-us/library/windows/apps/hh465094(v=VS.85).aspx
Leverage roaming to maintain state and preferences across machines
Roam preferences that users are likely to set on each device anyway:Favorite sports team (sports app)Favorite movie genre (media app)
Let users continue a task across devices by roaming app data:Composing a to-do listComposing emailRoaming is best for user preferences, links, and small data files
![Page 117: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/117.jpg)
Embrace the Design Principles
![Page 118: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/118.jpg)
Microsoft Design PrinciplesPride in craftsmanshipSweat the details. Pixels matter
Do more with lessContent before chrome
Be fast and fluidPurposeful motions and direct interactions
Authentically digitalGo beyond real world metaphors and material
Win as oneLeverage the ecosystem
![Page 119: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/119.jpg)
Recap
![Page 120: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/120.jpg)
8 Traits of a great Windows Store App1. Modern UI 2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Microsoft Design principles
![Page 121: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/121.jpg)
Now is the time to write your app. Enjoy the first to market advantage!
twitter.com/thedavedev | [email protected]
http://bit.ly/genapp8
![Page 122: Building Apps for the new Windows Store](https://reader037.vdocuments.site/reader037/viewer/2022103109/5453307daf7959c07f8b6d32/html5/thumbnails/122.jpg)
Building Apps for the new Windows Store
David IsbitskiPrincipal Technical Evangelist, Microsofttwitter.com/TheDaveDevblogs.msdn.com/[email protected]