Windows Design LanguageMetro Style

خليل سليم

يوسف شاليل

ASP.NET , Windows Phone , WPF, Silverlight, Windows Store

:// . /http about me khalilsaleem

:// . /http about me yousefsami

New united design style

Windows 8 , Windows Phone and

more

Examples ثم كيف تحول تصميم عادي إلى

تصميم ميترو

Metro Principles

For Good Reasons

Smart Design

Integrated Experiences

METRO principlesClean, light, openContent not chromeEmotion thru motionGreat typographyHonest

METRO

اصنع تطبيقات خالبة•

مباشرة ومركزة•

المحتوى قبل الغالف•

اصنع أكثربأقل جهد

Metro

ConceptsPride in craftsmanship

Be fast and fluid

Authentically digital

Do more with less

Win as one

Title

Principle: Clean, Light, Open, Fast

Feels Fast and ResponsiveFocus on Primary TasksDo a Lot with Very LittleDelightful Use of Whitespac

Principle: Celebrate TypographyType is Beautiful, Not Just LegibleClear, Straightforward Information DesignUncompromising Sensitivity to Weight, Balance and Scale

Typography

Make words feel welcome

Pay attention to balance, weight & scale

Principle: Alive in Motion

Feels Responsive and AliveGives Context to Improve UsabilityTransition Between UI is as Important as the Design of the UI

Principle: Content, Not ChromeDelight through Content Instead of DecorationReduce Visuals that are Not ContentContents is the UIDirect interaction with the Content Directly

Principle: Authentically DigitalDesign for the Form FactorDon’t Try to be What It’s NOTBe Direct

Principles

Clean, Light, Open, FastCelebrate TypographyAlive in MotionContent, Not ChromeAuthentically Digital

Metro User Experience

Focuses on the individual and their tasks

Helps organize information and applications

Color

Use color to delight the userUse color to personalize experienceUse color to emphasize hierarchy

TouchRecommended touch target size is 9mm

Minimum touch target size is 7mm

Minimum spacing betweenelements is 2mm

Visual size is 60-100% of the touchtarget size

Common controls

Iconography

Icons in the application menu should be consistent

Test icons with users(pay attention to context)

Orientation

Landscape

Portrait

شكرا لكم

فترة األسئلة والنقاش