Metro Design 101 Clean, clear, to the point.

Slides:



Advertisements
Similar presentations
Win8 on Intel Programming Course Win8 for developers, in detail Cédric Andreolli Intel.
Advertisements

All aboard the Metro UI Principles Windows Phone 7 Xbox Windows 8 Play time.
Windows 8 How to Navigate the Windows 8 Start Screen with Your Mouse and Keyboard Shortcuts Bill James, APCUG, Region 8 Advisor.
Presented by Ryan Walters. The Site  The main page of the site (seen left) is the users first introduction to the whole site.  The look is clean and.
COMS E6125 WHIM Prof. Gail Kaiser Presented by Shuai Yue (sy2342)
Why.ppt? 2.How to approach? 3.Major elements? 4.Basic principle and Guidelines 5.Golden tips 4.
Designing Windows Phone 7 Series Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead Design language (codenamed Metro)
TIPS FOR PROJECTION The Show Comes First TEXT - TIPS FOR PROJECTION Headers should be 36pt-44pt on a 4:3 ratio Standard body copy size should be 28pt-32pt.
WinRT and Windows 8 Sergey Barskiy Principal Consultant, Magenic.
Integrate your game with Windows platform Vladimir Kolesnikov Technical Evangelist
Designing for Windows Phone Austin Andrews.
Designing metro style apps for Windows 8 A walkthrough some UI / UX best practices Lanny Geffen, Creative Director, Digiflare.
Guide Demo Program installation SOP ePAD SW PM. Before you start Check “Guide” version is latest ( or ) * follow next page Latest version.
Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris Automatic Studio DEV221.
Windows 8 Hot or Not Piotr Włodek. Agenda MetroCharms Contracts WinRT App Execution Environment Motion Summary.
MIEL 2012 Title of Your Talk Author name(s) Affiliation.
Introduction to ArcGIS for Environmental Scientists Module 1 – Data Visualization Chapter 4 - Layouts.
Effective Presentation Skills. In effective presentations…… We never plan to fail – we fail to plan!
Presentation Basics Some guidelines for creating PowerPoint slide shows.
ATEC 6331 Final Project by Annis Leung Nov 25, 2008.
Introduction to Windows 8.1 Please sign in Open a browser and go to:
 Computer News  Windows 8  Your Computer Problems  One meeting Dec 12th  Website & 
Project Learning Skill of Presentation by LEE WING YIN.
Networking Proximity In-App Purchase Sensors Location File System Core app model Threading Windows Phone 8.
Kevin Francis Developing on Windows Devices ARC33 2.
User Interface Design In Windows using Blend.
Internet Explorer 10 IE9 hardware-accelerated platform CSS 2D Transforms CSS Backgrounds & Borders CSS Color CSS Fonts CSS Media Queries CSS Namespaces.
/* Life runs on code */. Introduction to Windows Phone Kamalakannan Annamalai Windows Phone Developer Ilink Systems Twitter : kanal_7
WINDOWS PHONE 7 DEVELOPER GUIDE A guide to 3 screens and the cloud Scott Densmore Sr. Software Development Engineer Microsoft patterns & practices.
Windows 81 Dissecting Windows 8 Annie Lin COSC 380.
Windows 8 BY RACHEL O’TOOLE X Main Changes  Is suited to touch screens  New metro interface  Microsoft store apps  No more ‘start’ menu 
Basic PowerPoint Guidelines Tips for Creating Great Presentations.
Jumpstart building your next great app this hackathon!
Basic PowerPoint Guidelines Tips for Creating Great Presentations.
Insert your title of poster here
Title/chapter slide, title 1 Title 2
PowerPoint Best Practices
Guide to Accessible PowerPoint
Building Windows 8 App.
CSICS 2017 Presentation Guidelines

Guidance for shopping apps
Background option 1 Title 2nd line Text size 1 Text size 2 with bold
Author name(s) Affiliation
Screen Based Design: An Introduction DW9V 34
Introduction to Computers
Course: Design & Technology
IPFA 2018 Instructions For Preparing Electronic Presentations
Windows 10 Technical Preview
Basic PowerPoint Guidelines
Metro style apps using XAML: What you need to know
TITLE ENCODE SANS NORMAL 45 PT., ALL CAPS
Metro Screen.
VitalSource iPad Screen Shots Oct 1, Peter Chapman
Metro Screen.
Search: integrating into the Windows 8 search experience
IPFA 2018 Instructions For Preparing Electronic Presentations
Build polished collection and list apps in HTML5
TITLE ENCODE SANS NORMAL 45 PT., ALL CAPS
!'!!. = pt >pt > \ ___,..___,..
Sub-headers in Source Sans Pro These are main title slides
Presentation Title, Open Sans Bold, 32 pt.
Title/chapter slide, title 1 Title 2
User Interface Design In Windows using Blend.
Introduction To Drawings, Saving Drawings Chapter 8 Placing Text
IPFA 2019 Instructions For Preparing Electronic Presentations
IPFA 2019 Instructions For Preparing Electronic Presentations
03 | Branding & Monetization
Visual Content Creation Tips On How To Make Good Photo & Video Content
Please Add Your Theme.
Presentation transcript:

Metro Design 101 Clean, clear, to the point

Who am I? What I do!

Agenda Introduction What is Metro? General Metro design stuff Windows 8 stuff Windows Phone 7 stuff Designing Metro apps

A short video

WeatherFlow Clear

Realistic vs digital

Stand out from the crowd

Designing a Metro app

Type Ramp 42pt 20pt 11pt 9pt Semibold Bold Regular Semibold Bold Semilight Light Semilight Light

Grids

Themes, colours, sans gradients

No Chrome

Animation! Purposeful, lively, adhesive Direct manipulation

Windows 8

Screen size

Interaction Common Possible

App bars, Charms & Contracts

New Views! Portrait, landscape, semantic, snapped.

Semantic Zoom

Semantic Zoom

Snapped View

On the move

Windows Phone 7

Tiles!

Xbox

Design your content Application launch

The guidelines

Room to move

Thanks! @agkdesign alex@xamling.net

Feedback: Privacy Policy Feedback
Do Not Sell My Personal Information
About project: SlidePlayer Terms of Service

© 2025 SlidePlayer.com. Inc. All rights reserved.