design and layout for windows 8 and windows phone style apps shane morris (@shanemo) automatic...
TRANSCRIPT
![Page 1: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/1.jpg)
Design and Layout for Windows 8 and Windows Phone Style AppsShane Morris (@shanemo)Automatic Studio
DEV221
![Page 2: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/2.jpg)
a bit about me
![Page 3: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/3.jpg)
3
a bit about me
![Page 4: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/4.jpg)
METRO DESIGN LANGUAGE
YESTERDAY
![Page 5: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/5.jpg)
design language principlesPRIDE IN CRAFTSMANSHIPBE FAST AND FLUIDAUTHENTICALLY DIGITALDO MORE WITH LESSWIN AS ONE
![Page 6: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/6.jpg)
Inspiration and influences
BauhausInternational StyleMotion designWayfinding signage
![Page 7: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/7.jpg)
visual design
Flat colourTypographyWhitespacePanoramic view
interaction design
Lack of controlsAnimationLive tilesEdge swipes Panoramic views
information design
Live tilesSemantic zoom Panoramic views
characteristics
![Page 8: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/8.jpg)
the secretLOOKS EASY, EH?BUT YOUR MISTAKES ARE EVEN MORE OBVIOUSLESS VISUAL DEVICES TO
Direct attentionCommunicate groupingDelightBrand
![Page 9: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/9.jpg)
more than just a visual style
Visual languageInteraction style and structureNavigation style and structureAttitude
like all good design, designing for Windows 8 or Windows Phone does not start with visuals
![Page 10: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/10.jpg)
planning windows 8 apps
Decide what your user experience goals areDecide what activities, or flows, you want to enable for your usersDecide what app features and Windows features you can use to enable your flowsDecide how to monetize your appPlan the layout of your appMake a good first impressionPrototype and validate your design against guidelines, user impressions, and requirements
![Page 11: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/11.jpg)
planning windows 8 apps
Decide what your user experience goals areDecide what activities, or flows, you want to enable for your usersDecide what app features and Windows features you can use to enable your flowsDecide how to monetize your appPlan the layout of your appMake a good first impressionPrototype and validate your design against guidelines, user impressions, and requirements
![Page 12: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/12.jpg)
4 layers of design
Conceptual
Visual
yesterday
today
![Page 13: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/13.jpg)
Rules and guidelines
design.windows.com
![Page 14: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/14.jpg)
4 layers of design
Conceptual
Visual
Information designNavigationDesign to reveal structure
![Page 15: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/15.jpg)
METRO DESIGN LANGUAGE
NAVIGATIONInformation design
![Page 16: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/16.jpg)
flatter, wider navigation
Fewer orientation cues
(Breadcrumbs)Leverage Hub / Panorama
Spatial memorySearch plus Browse
Be true to platform
![Page 17: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/17.jpg)
NAVIGATION MODELS
![Page 18: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/18.jpg)
content before chromeIN GENERAL, USE CONTENT FOR NAVIGATIONOtherwise use App barExceptions: Back button Context menus in page header
USE PANORAMA RATHER THAN NAVIGATION MENUSematic zoom to provide an overview
NAVIGATION
METRO DESIGN LANGUAGE
18
![Page 19: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/19.jpg)
WINDOWS PHONENAVIGATION MODELS
![Page 20: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/20.jpg)
navigation structureAPPLICATION STRUCTURE AND NAVIGATION MODELS FOR WINDOWS PHONEhttp://msdn.microsoft.com/en-us/library/hh202909(v=vs.92).aspx>
WINDOWS PHONE
![Page 21: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/21.jpg)
typical navigation structure
Panorama Pivot
Page
WINDOWS PHONE
![Page 22: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/22.jpg)
WINDOWS 8NAVIGATION MODELS
![Page 23: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/23.jpg)
navigation structureHIERARCHICAL FLAT
METRO DESIGN LANGUAGE
23
WINDOWS 8
![Page 24: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/24.jpg)
hierarchical navigationFLATTER, WIDER NAVIGATION
Hub page
Section page
Detail page
![Page 25: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/25.jpg)
exampleHIERARCHICAL NAVIGATION
![Page 26: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/26.jpg)
flat navigationFLATTER, WIDER NAVIGATION
![Page 27: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/27.jpg)
Back ButtonWINDOWS 8Top left cornerKey to hierarchical navigation But other navigation is possible
WINDOWS PHONEHardware buttonNo Back button (or other navigation) on screen. Can manipulate the ‘back stack’ to skip pages. E.g. pressing back at the end of a
wizard.Home button discouraged Pinned Live tiles that link into the
app don’t generally provide a Back (or other) path to the home screen.
NAVIGATION MODELS
![Page 28: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/28.jpg)
header menuALLOWS HORIZONTAL NAVIGATION TO PEER TOPICS
METRO DESIGN LANGUAGE
28
NAVIGATION MODELS
![Page 29: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/29.jpg)
SBS
![Page 30: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/30.jpg)
METRO DESIGN LANGUAGE
DESIGN TO REVEAL STRUCTURE
Information design
![Page 31: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/31.jpg)
INFORMATION IS BEAUTIFUL“a neutral and objective approach that emphasized rational planning and de-emphasized the subjective, or individual, expression”Britannicawww.britannica.com/EBchecked/topic/
1032864/graphic-design/242772/Graphic-design-1945-75
international style
www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/
![Page 32: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/32.jpg)
METRO DESIGN LANGUAGE
EXAMPLE OF AN APP
![Page 33: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/33.jpg)
4 layers of design
Conceptual
Visual
Interaction designContent before chromeConsistency
GesturesControlsApp Bar
Design for touch
![Page 34: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/34.jpg)
METRO DESIGN LANGUAGE
CONTENT BEFORE CHROMEInteraction design
![Page 35: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/35.jpg)
Direct manipulation
Content before chrome means the content must be the user interfaceManipulate with gestures
![Page 36: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/36.jpg)
content before chromeLET THE CONTENT BE THE INTERFACE
Be trustworthyMOVE COMMANDS TO THE APP BAR
![Page 37: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/37.jpg)
![Page 38: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/38.jpg)
![Page 39: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/39.jpg)
![Page 40: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/40.jpg)
![Page 41: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/41.jpg)
METRO DESIGN LANGUAGE
CONSISTENCYInteraction design
![Page 42: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/42.jpg)
Consistency for predictability
standard gesturesstandard interaction models
App barCharms bar
standard controls
![Page 43: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/43.jpg)
Standard gestures
Press and hold to learn
Swipe to selectSlide to dragTap for primary action
Pinch to zoom Rotate to rotateSwipe from edge forapp and system UI
![Page 44: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/44.jpg)
Standard interaction models
App bar
Buttons belong in App bar
Charms bar
Certain interactions belong here
SearchShareSettings
HelpSign in / outContactAbout / terms / privacy
![Page 45: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/45.jpg)
app barCOMMANDS THAT MANIPULATE SELECTION ON THE LEFT
‘OVERALL’ COMMANDS ON THE RIGHT‘Commit’ before ‘Cancel’ as per traditional windows‘New’ on the very right
BARS TO GROUP RELATED COMMANDS
HIDE COMMANDS WHEN THEY ARE NOT RELEVANT
BUT MAINTAIN COMMAND POSITIONS
…THESE GUIDELINES MAY NEED TO BE COMPROMISED FROM TIME TO TIME
METRO DESIGN LANGUAGE
45
WINDOWS 8
![Page 46: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/46.jpg)
app barSOME COMMANDS DON’T GO IN THE APP BARCommands that are required for a user to complete their task may be placed on the main screen.Cut, copy and paste go in context menusConsider other context menus Particularly for items that are not necessary for the ‘core’ experience
METRO DESIGN LANGUAGE
46
WINDOWS 8
![Page 47: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/47.jpg)
app barBUSY APP BARSApp bar buttons can have context menus Use context menus to group related items, particularly when you have a large
number of controls Context menus can contain other controls, as well as buttonsNote that your app bar may appear on two lines in portrait view
WINDOWS 8
![Page 48: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/48.jpg)
app barAN APP BAR CAN ALSO APPEAR SIMULTANEOUSLY FROM THE TOP OF THE SCREENThe app bar at the bottom must follow layout rulesThe app bar at the top can have any appropriate layout.
METRO DESIGN LANGUAGE
48
WINDOWS 8
![Page 49: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/49.jpg)
Controls
![Page 50: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/50.jpg)
METRO DESIGN LANGUAGE
DESIGN FOR TOUCHInteraction design
![Page 51: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/51.jpg)
design for touch
be fast and fluid
![Page 52: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/52.jpg)
4 layers of design
Conceptual
Visual
Visual designSilhouettesTemplatesTypographyVisual HierarchyAnimation
![Page 53: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/53.jpg)
METRO DESIGN LANGUAGE
SILHOUETTESVisual design
![Page 54: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/54.jpg)
![Page 55: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/55.jpg)
![Page 56: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/56.jpg)
![Page 57: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/57.jpg)
![Page 58: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/58.jpg)
![Page 59: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/59.jpg)
![Page 60: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/60.jpg)
![Page 61: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/61.jpg)
METRO DESIGN LANGUAGE
TEMPLATESVisual design
![Page 62: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/62.jpg)
![Page 63: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/63.jpg)
![Page 64: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/64.jpg)
![Page 65: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/65.jpg)
![Page 66: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/66.jpg)
![Page 67: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/67.jpg)
![Page 68: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/68.jpg)
![Page 69: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/69.jpg)
![Page 70: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/70.jpg)
![Page 71: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/71.jpg)
![Page 72: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/72.jpg)
METRO DESIGN LANGUAGE
TYPOGRAPHYVisual design
![Page 73: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/73.jpg)
text vs icons
A picture can say a thousand words
… but notice we don’t talk in pictures?
Icons are usefulcompactrecognisablescannable
But even most icons are learnt through their labels
![Page 74: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/74.jpg)
76
fonts
WINDOWS 8Segoe UI
Controls and UI elementsReserve Segoe UI Light for >20pts
Calibriread/write
Cambriareading
http://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx
WINDOWS PHONESegoe WPSegoe WP Light only for large text
TYPOGRAPHY
![Page 75: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/75.jpg)
type sizes (windows 8)
![Page 76: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/76.jpg)
METRO DESIGN LANGUAGE
VISUAL HIERARCHYVisual design
![Page 77: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/77.jpg)
visual hierarchy
Sparse visual style compresses options for creating a visual hierarchymain devices
alignment typographywhite space
![Page 78: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/78.jpg)
visual hierarchy
size
colour
CASE
alignment alignmentweight
proximitycolour
proximity
![Page 79: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/79.jpg)
![Page 80: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/80.jpg)
METRO DESIGN LANGUAGE
ANIMATIONVisual design
![Page 81: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/81.jpg)
animation
MOTION DELIGHTS THE USERMOTION ADDS HINTS TOWARDS INTERACTIONMOTION MASKS SLOW PERFORMANCEMOTION ADDS PERSONALITYMOTION ADDS CONSISTENCYMOTION ADDS ELEGANCE.
msdn.microsoft.com/en-us/library/hh202871(v=vs.92).aspx
USE MOTION TO DELIGHT THE USERREMEMBER THAT PACING IS IMPORTANT: THE MORE YOU USE IT, THE LESS SPECIAL IT BECOMESRESPECT STANDARD ANIMATIONS
![Page 82: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/82.jpg)
METRO DESIGN LANGUAGE
RECAP
![Page 83: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/83.jpg)
what metro is good for
![Page 84: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/84.jpg)
METRO DESIGN LANGUAGE
UX CHECKLISTrecap
![Page 85: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/85.jpg)
windows 8 / windows phone ux checklist ‘BEST APP’ STATEMENT MINIMUM NECESSARY
FEATURES NAVIGATION MODEL CONTRACTS APP BAR PAGE LAYOUTS VISUAL DESIGN
TEST AND REFINE CONTINUOUSLY!
RECAP
![Page 87: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/87.jpg)
Related Content
Breakout SessionsDEV221 - Design and Layout for Windows 8 and Windows Phone Style Apps. Thursday 8:15am Meetings Rooms 5 & 6Other Windows 8• DEV212 - What’s New for Windows 8 Developers Parts 1-3Other Windows Phone• WPH333 - Developing for Key Windows Phone Consumer
Scenarios• WPH332 - Sounds like a Windows Phone Application
Find Me Later At…• Speakers lounge after this talk and 11 am Thursday
![Page 88: Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221](https://reader035.vdocuments.net/reader035/viewer/2022081603/56649e705503460f94b6dd02/html5/thumbnails/88.jpg)
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the
part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.