windows phone 8 design

Windows Phone Design

Maria Nasioti, UX/UI Designer & DeveloperTwitter: @Maria_Nas

Tuesday, June 18, 13

Tuesday, June 18, 13

VisualsLayout

Windows Phone CompositionMotion & Transitions

Tuesday, June 18, 13

Visuals

Tuesday, June 18, 13

VISUALS

Themes

Tuesday, June 18, 13

VISUALS

Accent Brushes

Tuesday, June 18, 13

VISUALS

Colors

Tuesday, June 18, 13

VISUALS

Themed Controls & Tiles

Tuesday, June 18, 13

VISUALS

Theme HowtoAlways check your apps in both dark and light theme.If you utilizing system theme’s, use a basic color scheme.Don’t be afraid to use accent brushes. They are simple way to make your app feel native to the device.

Tuesday, June 18, 13

VISUALS

IconographySome actions are difficult to clearly convey with text or images. In these cases, use simple geometric icons instead of images or extra text.

Tuesday, June 18, 13

VISUALS

Iconography

Tuesday, June 18, 13

VISUALS

Imagery

Tuesday, June 18, 13

VISUALS

Icons & Imagery HowtoGo simple and geometric with icons.Don’t be afraid to go big.Layer your imagery with content.Add noise to gradient to prevent “banding”.

Tuesday, June 18, 13

VISUALS

Fonts

Tuesday, June 18, 13

VISUALS

Custom FontsUse custom fonts to showcase your own BRAND in a very personal way.Find the typography that best reflects your app’s personality.

Tuesday, June 18, 13

VISUALS

Fonts HowtoAvoid using font sizes that are smaller than 15pt in size.If using colorized fonts, use high contrast colors at smaller point sizes to enhance readability.Since Segoe is such an integral part of the UI experience, use alternative fonts sparingly in applications.

Tuesday, June 18, 13

VISUALS

Globalizations & LocalizationBi-Directional Layouts. Right to Left.East Asian vertical text. Japan style.Localization.

Tuesday, June 18, 13

Layout

Tuesday, June 18, 13

LAYOUT

ResolutionsSupport 3 resolutions.

Tuesday, June 18, 13

LAYOUT

Graphic Resolution HowtoTo display a splash screen for all resolutions, use a single image that is 768x1280.If you can’t use a graphic for each resolution, use a graphic for the highest resolution.

Tuesday, June 18, 13

LAYOUT

The GridThe grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to personal style. But one must learn who to use the grid; it’s an that requires practice.

Josef Muller-Brockmann

Tuesday, June 18, 13

LAYOUT

The Grid

Tuesday, June 18, 13

LAYOUT

The Grid

Tuesday, June 18, 13

LAYOUT

The Grid

Tuesday, June 18, 13

Use Grid everywhere. Tiles, Panorama, custom pages, lists etc

Tuesday, June 18, 13

LAYOUT

The Grid

Tuesday, June 18, 13

LAYOUT

The Grid

Tuesday, June 18, 13

LAYOUT

The Grid HowtoUse order to create the perception of simplicity.Establish a rhythm and cadence with the grid.Then break it to make the content pop.

Tuesday, June 18, 13

LAYOUT

Pages

Tuesday, June 18, 13

LAYOUT

Panorama

Tuesday, June 18, 13

LAYOUT

Panorama

Tuesday, June 18, 13

LAYOUT

Panorama

Tuesday, June 18, 13

LAYOUT

Panorama HowtoExpansive or overviewTop Level. Nothing than data and Navigation.Use a minimized AppBar, portrait only.5 Panels or less.Returning users should be taken back to the pane where they left off.

Tuesday, June 18, 13

LAYOUT

Panorama Examples

Tuesday, June 18, 13

LAYOUT

Pivots

Tuesday, June 18, 13

LAYOUT

Pivots HowtoPivots control should be used only to display items or data of similar typeUse a full AppBar7 Panels or less.Never place a pivot control inside to another pivot control.Never place a pivot control inside a panorama control.Don’t use scroll elements like maps or bar inside a pivot control.Limit pivot’s header text to a max of one or two words.Never use an edit control within a pivot.

Tuesday, June 18, 13

LAYOUT

Pivots Examples

Tuesday, June 18, 13

LAYOUT

Basic Page

Tuesday, June 18, 13

LAYOUT

AppBar

Tuesday, June 18, 13

LAYOUT

AppBar

Tuesday, June 18, 13

LAYOUT

Structure

Tuesday, June 18, 13

Motions & Transitions

Tuesday, June 18, 13

MOTION

Why Motion?Motions delights the users.Motions adds more interactions.Motion gives the impression of enhanced performance.Motion adds personality.Motion adds consistency.Motion adds elegance.

Tuesday, June 18, 13

MOTION

It’s like a movieAn action movie isn’t 100% action.Highs (Defining moments)Lows (Consistent, not distracting but still delightful)How is it edited for the biggest impact.

Tuesday, June 18, 13

MOTION

TransitionsTriggered by user action.Transitions provide a mental breadcrumb for the user as they navigate the UI.

Tuesday, June 18, 13

MOTION

RulesEstablish physics.Sense of how gravity works on the device that the user can relate to.Gravity is always the same.Transitions are directional.Enter, exit, forward, backward.Create the medal model of where items live.If it didn’t change don’t move it.

Tuesday, June 18, 13

MOTION

Motions HowToIt doesn’t matter how long an animation takes, it matters how long you think it takes.Under 500ms is instant.Use easing to our advantage.Not what you thought you saw.For time-consuming processes, provide feedback.

Tuesday, June 18, 13

Examples.

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Tuesday, June 18, 13

Thank you! So say we all.Twitter: @Maria_Nas

Tuesday, June 18, 13